HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
1 回顾
1.1 列表
ulollidldtdd
1.2 表格
tablecaptiontheadtfoottbodytrthtd
2 表单
2.1 表单总体设置
<!--表单--><form action="/s" target="_blank"><!--输入框--><input type="text" name="wd"><!--提交按钮--><button>搜 索</button></form>
表单中所有的东西都需要包裹在 form 标签中， form 标签就表示一个表单form 标签具有如下属性：action 属性，可以设置表单的提交地址method 属性，设置提交的请求方式target 属性，设置提交的地址在本窗口打开还是新窗口打开，值：_self、_blank
2.2 表单控件
① 文本输入框
<input type="text">
可以设置 maxlength 属性限制最大输入长度。
② 密码输入框
<input type="password">
可以设置 maxlength 属性限制最大输入长度。
③ 单选按钮
<input type="radio" name="sex"> 女<input type="radio" name="sex"> 男<input type="radio" name="sex"> 其他
多个单选按钮需要把 name 属性的值设置为相同的，才可以实现单选效果。设置 checked 属性，可以让该单选按钮默认选中， checked 属性无需给值。
④ 复选框
<input type="checkbox"> 睡觉<input type="checkbox" checked> 抽烟<input type="checkbox" checked> 喝酒<input type="checkbox"> 烫头发
设置 checked 属性，该复选中默认被选中， checked 属性无需给值。
⑤ 提交按钮
<input type="submit" value="提交按钮"><button type="submit">提交按钮</button><button>提交按钮</button>
⑥ 重置按钮
<input type="reset" value="重置按钮"><button type="reset">重置按钮</button>
⑦ 普通按钮
<input type="button" value="普通按钮"><button type="button">普通按钮</button>
⑧ 文本域
<textarea rows="10" cols="60"></textarea>
rows 属性设置文本域默认显示多少行，影响文本域的高度。cols 属性设置文本域默认一行显示多少字，影响文本域的宽度。
⑨ 下拉选项
<select><option>小学</option><option>初中</option><option>高中</option><option>中专</option><option>大专</option><option>本科</option><option selected>研究生</option></select>
默认选中的是第一个选项，通过给 option 标签设置 selected 属性让该选项默认选中，selected 属性无需给值。
2.3 表单控件的属性
① name 属性
每个表单控件都应该设置 name 属性，name 属性指定数据名称，表单提交之后，后端程序可以通过数据名称获取数据。
下拉选项中，select 标签设置 name 属性，option 标签不需要。
多个单选按钮只有设置了同值的name属性，才具有单选的效果。
作为按钮的表单控制，不能设置 name 属性。
② value 属性
使用 input 标签实现提交按钮、重置按钮、普通按钮，value 属性可以设置按钮上的文字。对于单选按钮和复选框，value 数值指定真正向后端提交的数据。下拉选项的 option，value 属性指定真正提交的数据；如果没有 value 属性，真正提交的数据是option标签内的文字。文本输入框和密码输入框，value 属性可以设置默认显示在输入框内的文字。（注意：文本域指定默认文字写在双标签之间）③ disabled 属性
表单中所有的控件都可以设置 disabled 属性，该属性无需给值即可生效，设置了 disabled 属性之后，该表单控件就不能使用了。select 和 option 都可以设置 disabled，select 设置整个下拉选项不能使用，option 设置只有该选项无法给选择。2.4 label 标签的使用
<!-- label 标签关联文本输入框， 密码输入框、文本域、下拉选项也采用这种方式关联--><label for="addressInput">地址：</label><input type="text" id="addressInput"><br><!--label 标签关联单选按钮，复选框也采用这种方式关联-->性别：<label><input type="radio" name="sex">女</label><label><input type="radio" name="sex">男</label><label><input type="radio" name="sex">其他</label>
2.5 fieldset 标签和 legend 标签的使用（了解）
<form action="1.php"><fieldset><legend>表单的标题</legend>表单控件....</fieldset></form>
2.6 表单标签总结
总结：
input 标签 type 属性的值： text、password、radio、checkbox、submit、reset、button，默认值是 text。button 标签 type 属性的值： submit、reset、button，默认值是 submit
3 框架标签
4 HTML 字符实体
空格 < <> >& &¥ ¥© ©× ×÷ ÷
5 全局属性
全局属性就是所有的标签都具有的属性。
class 属性：指定类名，用于 cssid 属性：指定 ID 名，用于唯一标识一个元素。style 属性：用于直接设置 CSS 样式name 属性：给标签指定一个名字title 属性： 鼠标悬停在元素上的文字提示，大部分情况只有图片和超链接会设置该属性。lang 属性：指定标签内文本所使用的的语言，一般该属性设置到 html 根标签上即可，值：cn、en、fr 等
6 meta 元信息
<!--字符集编码--><meta charset="utf-8"><!--网页关键字：--><meta name="keywords" content="8-12个以英文逗号隔开的单词/词语"><!-- 网页描述信息 --><meta name="description" content="80字以内的一段话，与网站内容相关"><!-- 网页定时跳转：(10秒后跳转到百度页面) --><meta http-equiv="refresh" content="10;url=">
7 VSCode 的使用
7.1 VSCode 相关配置
跳转默认字体大小： 左下角小齿轮 -> 选择“设置” -> 常用设置 -> Edit:Font Size跳转目录结构层级距离： 左下角小齿轮 -> 选择"设置" -> 工作台 -> 外观 -> Tree:Indent避免目录层级紧凑显示： 左下角小齿轮 -> 选择"设置" -> 功能 -> 资源管理器 -> Compact Folders 去掉前面的勾设置自动保存： 左下角小齿轮 -> 选择“设置” -> 常用设置 -> Files:Auto Save修改编辑器的颜色主题： 左下角小齿轮 -> 选择“颜色主题”修改文件图标主题：左下角小齿轮 -> 选择"文件图标主题"
7.2 推荐的扩展
1. Chinese (Simplified) Language Pack for Visual Studio Code 中文扩展2. Live Serve
8 CSS 的基本语法
8.1 HTML 和 CSS 的关系
CSS 对某一个元素或多个元素设置样式，样式作用在元素上。
8.2 HTML 元素树
祖先元素父元素子元素后代元素兄弟元素（具有相同父元素的元素）
元素之间的关系表述只与元素的位置有关，与元素的标签名无关。
8.3 在 HTML 中使用 CSS
① 行内式
<p style="CSS样式.."></p>
② 内联式
<html><head><style>CSS 样式....</style></head><body></body></html>
③ 外链式
把 CSS 样式，写在独立的 css 文件中，HTML 文件使用 link 标签与 CSS 文件相关联
<link rel="stylesheet" href="css文件的地址">
1.4 CSS 基本语法结构
① 内嵌式和外链式的语法结构
选择器 {CSS属性： 值;CSS属性： 值;CSS属性： 值;}
选择器：用来选择到需要设置样式的元素。
声明块：每个选择器后面用大括号包裹起来的就是声明块。声明块中由多条声明组成。
声明：一条声明由 CSS 属性和该属性的值组成，每条声明的结尾是分号。
② 行内式的语法结构
<标签 style="CSS属性:值; CSS属性:值"></标签>
③ HTML 属性 和 CSS 属性
<!-- 使用 img 标签的 width 属性和 height 属性设置图片大小 --><img src="芳芳.jpg" alt="芳芳" width="300" height="300"><!-- 使用css属性width和height设置图片大小； style 是 HTML 属性！ --><img src="芳芳.jpg" alt="芳芳" style="width:300px;height:300px">
8.5 CSS 的层叠性
通过多种形式，多种选择器对某个元素进行样式设置，所有的样式都会作用在该元素上，这就是层叠性。
如果多种形式设置的样式有重复的样式，行内式的优先级大于内嵌式和外链式。 内嵌式和外链式没有区别，参照选择器的优先级，选择器优先级一样，后面的样式优先级高。
8.6 CSS 注释
/* CSS 注释 *//*CSS 注释CSS 注释CSS 注释*/
