10.3（HTML和CSS）

原创于 2025-10-03 17:56:25 发布 · 714 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

1.表单（接上篇笔记）

(4)label标签:与表单控件相关联，关联之后点击文字，对应的表单控件会获取焦点

label 标签的 for 属性的值等于表单控件的 id

<!--第一种写法-->
<label for="zhanghu">账户</label>
<input id="zhnaghu" type="text" name="account" maxlength="20">
<!--第二种写法-->
<label>
    密码：
    <input type="password" name="pwd" maxlength="10">
</label>

（5）fieldset与legend的使用（做了解）

fieldset 为表单控件分组、 legend 是分组的标题

<fieldset>
    <legend>主要信息</legend>
    <label for="zhanghu">账户</label>
    <input id="zhanghu" type="text" name="account" maxlength="10"><br>
    <label>
        密码：
        <input id="mima" type="password" name="pwd" maxlength="6">
    </label>
    <br>
    性别：
    <input type="radio" name="gender" value="male" id="nan">
    <label>男</label>
    <label>
        <input trpe="radio" name="gender" value="female" id="nv">女
    </label>
</fieldset>

（6）表单总结

2.框架标签

iframe应用：嵌入广告，与超链接或表单的target配合，展示不同的内容

<!--利用iframe嵌入普通网页,头条的不让嵌入-->
<iframe src="https://www.baidu.com" width="900" height="300" frameborder="0"></iframe>
<!--利用iframe嵌入广告网页,找不到网站广告的iframe,贴了一个网易网站-->
<iframe width="300" height="250" src="https://news.163.com/" frameborder="0"></iframe>
<!--利用iframe嵌入其他内容-->
<iframe scr="./东山岛.jpg" frameborder="0"></iframe>
<!--与超链接的target属性配合使用-->
<a href="https://www.baidu.com" traget="content">去百度</a>
<a href="https://www.taobao.com" traget="content">去淘宝</a>
<!--与表单的target属性配合使用,今日头条不让嵌入-->
<form action="https://so.toutiao.com/search" traget="content">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<iframe name="tt" frameborder="0" width="900" height="300"></iframe>

3.常见字符实体

一个&和一个实体名称，最后加上一个分号;

<div>我是&nbsp;&nbsp;&nbsp;&nbsp;灰太狼</div>
<div>人生如逆旅，&lt;h1&gt;我亦是行人</div>
<div>我们今天学习了一个可以表示空格的字符实体，它是：&amp;nbsp;</div>
<div>我们今天学习了一个可以表示&的字符实体，它是：&amp;amp;</div>
<div>当前灰太狼买羊肉花费&yen;199</div>
<div>&copy;版权所有</div>
<div>2&times;2=4</div>
<div>2&divide;2=4</div>

4.HTML全局属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML全局属性</title>
    <style>
        .student{
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="hello1">你好啊！1</div>
    <div id="hello2">你好啊！2</div>
    <!--class要配合style使用，style是css的内容-->
    <div class="student">灰太狼</div>
    <div class="student">taylor</div>
    <div style="color: deeppink;">皮皮</div>
    <bdo dir="rtl">你是年少的欢喜</bdo>
    <div dir="rtl">你是年少的欢喜</div>
    <div title="我一定会回来的！">灰太狼</div>
    <a href="https://.baidu.com" title="baidu">去百度</a>
    <div lang="en">hello</div>
</body>
</html>

5.meta元信息

（1）配置字符编码

<meta charset="utf-8">

（2）针对移动端的配置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

（3）配置网页关键字

<meta name="keywords” content=“灰太狼">

（4）配置网页描述信息

<meta name="description”content=“灰太狼网站成立于2025年">

（6）针对搜索引擎爬虫配置

（7）配置网页作者

<meta name="author" content="灰太狼">

（8）配置网页生成工具

<meta name="generator" content="VS">

（9）配置定义网页版权信息

<meta name="copyright" content="2025-2030@版权所有">

（10）配置网页自动刷新

<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

CSS

可以美化HTML（HTML搭建结构，CSS添加样式）

1.CSS的编写位置

（1）行内样式：只控制当前标签的样式

<h1 style="color:red;font-size:60px;">欢迎来到灰太狼的网站</h1>

（2）内部样式：样式可以复用，代码结构清晰

<style>
    h1 {
        color: red;
        font-size: 40px;
        }
</style>

（3）外部样式：实现了结构与样式的完全分离（最常用）

（新建一个个.css的样式文件，把所有 CSS 代码都放入此文件中，再在HTML引入这个文件）

<link rel="stylesheet" href=" ./xxx.css">

rel:说明引入的文档与当前文档的关系

3.样式表的优先级（优先级规则:行内样式 >内部样式 = 外部样式）

内部样式、外部样式，二者优先级相同，所以后面的会覆盖前面的

同一样式表，优先级和编写顺序有关，所以后面的会覆盖前面的

4.CSS语法规范

选择器与声明块之间均有一个空格（建议写上）

5.CSS代码风格

（1）展开风格：开发时推荐,便于维护和调试

h1 {
    color: blue;
    font-size: 40px;
}

（2）紧凑风格：项目上线时推荐,可减小文件体积

h1 {color: blue;font-size: 40px;}

6.CSS基本选择器

（1）通配选择器：选中所有的 HTML 元素(清除样式时,有很大帮助)

* {
    color: blue;
    font-size: 40px;
}

（2）元素选择器：为页面中同种元素统一设置样式(同种元素无法实现差异化设置)

/*选中所以h1元素*/
h1 {
    color: blue;
    font-size: 40px;
}
/*选中所有p元素*/
p {
    color: red;
    font-size: 60px;
}

（3）类选择器：根据元素的class值，来选中某些元素

/*选中所有class值为speak的元素*/
.speak {
    color: blue;
}
/*选中所有class值为answer的元素*/
.answer {
    color: red;
}

元素的 class 属性值不带 . (点) ,但 CSS 的类选择器要带 .（点）

class值：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接

一个元素不能写多个 class 属性，下面为错误eg.

/*错误示范*/
<h1 class="speak" class="big">灰太狼</h1>

一个元素的 class 属性，能写多个值，要用空格隔开

/*正确写法*/
<h1 class="speak big">灰太狼</h1>

(4)ID选择器：根据元素的 id 属性值，来选中某个元素

/*选中id值为earthy的元素*/
#earthy {
    color: blue;
    font-size: 60px;
}

id 属性值:尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头、不要包含空格、区分大小写

一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同

一个元素可以同时拥有 id 和 class 属性

7.CSS复合选择器

（1）交集选择器：选中同时符合多个条件的元素（且）

/*选中:类名为beauty的p元素，为此种写法用的非常多!*/
p.beauty {
    color: bule;
}
/*选中:类名包含rich和beauty的元素 */
.rich.beauty {
    color :red;
}

有标签名，标签名必须写在前面

id 选择器，可以放，但无意义，不用

交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是 span 元素

用最多的交集选择器是:元素选择器配合类名选择器，eg p.beauty

(2)并集选择器：选中多个选择器对应的元素（或）(一般竖着写)

/*选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi
.rich,
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}

并集选择器，通常用于集体声明

任何形式的选择器，都可以作为并集选择器的一部分