1.基础概念铺垫
（1）网页认识
- 组成部分-文字、图片、音频、视频、超链接
- 本质 - 代码
- 转换 - 浏览器（解析+渲染）
（2）浏览器
- 网页显示、运行的平台（必备）
- 五大：IE、火狐Firefox、谷歌Chrome、Safari、欧朋
- 渲染引擎（浏览器内核）不同，解析代码时的速度、性能、效果
2.HTML初体验
- HTML：超文本标记语言
- HTML页面固定结构：整体、头部、标题、主体
3.基本结构
1.标签概念
- 标签又称元素,是HTML的基本组成单位
- 标签分为单标签和双标签
- 双标签：
<标签名> 标签体 </标签名>
示例：
<marquee>吕倩雨</marquee>
- 单标签：
<标签名/>
注：/可省略
示例：
<input/>
- 标签之间的关系：并列关系、嵌套关系，可以使用Tab键进行缩进
<marquee>
吕倩雨
<input/>
</marquee>
2.标签属性
- 用于给标签提供附加信息
- 可以写在起始标签或单标签中，例如:
<marquee loop="1" bgcolor="green">吕倩雨</marquee>
<input type="password">
- 有些特殊的属性，没有属性名，只有属性值，例如：
<input disabled>
- 注意：
1.不同的标签有不同的属性，也有一些通用属性（在任何标签内都能写）
2.属性名、属性值不能乱写
3.标签中不要出现同名属性，否则后面的会失效，例如：
<input type="password" type="text">
注释：快捷键：ctrl+/
3.排版标签
注意：
- h1最好只写一个
- h1-h6不能互相嵌套
- p标签内不能有h1-h6、p、div标签
4.语义化标签
（1）概念：用特定标签表达特殊含义
（2）原则：标签的默认效果不重要，重要的是语义
（3）优势：代码清晰，可读性强；有利于SEO（搜索引擎优化）
5.文本标签
6.图片标签
src：图片路径（地址）
alt：图片描述
width：图片宽度
height：图片高度
1.概念
href：要跳转的具体位置
target:要跳转时如何打开页面，常用值如下：_self:在本页签中打开
_blank:在新页签中打开
2.跳转到页面
<!--跳转到其他页面-->
<a href="https://www.baidu.com" target="_blank">到百度</a>
<!-- 跳转到本地页面 -->
<a href="https://blog.csdn.net/2301_81208699/article/details/1_HTML/01_HTML初体验 .html" target="_self">到01_HTML初体验</a>
跳转文件与跳转页面类似
3.跳转锚点
（1)设置锚点
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
具有href属性的是超链接，具有name属性的是锚点
id后面最好别是数字开头
（2）跳转锚点
<!-- 跳转到test1锚点 -->
<a href="#test1">去test1锚点</a>
<!-- 跳转到本页顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html的test1锚点</a>
1.有序列表
概念：无顺序或不侧重顺序的列表
<h2>做一件事需要几步</h2>
<ol>
<li>第一步</li>
<li>第二部</li>
<li>第三步</li>
</ol>
2.无序列表
概念：无顺序或不侧重顺序的列表
<h2>做一件事需要几步</h2>
<ul>
<li>第一步</li>
<li>第二部</li>
<li>第三步</li>
</ul>
3.自定义列表
概念：自定义列表（一个包含术语名称以及术语描述的列表，）
- 一个 就是一个自定义列表，一个 就是一个术语名称，一个 就是术语描述。
- ,可连续多个
4.列表嵌套
概念：列表中的某项内容，又包含一个列表，解构写完整
5.表格
（1）基本结构
表格涉及到的标签：
：表格
：表格标题
：表格头部
：表格主体
：表格注脚
：每一行
、 ：每一个单元格（备注：表格头部中用 ，表格主体、表格脚注中用： ）
（2）常用属性
- <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度。
- 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
- 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
- 给某个th或 td 设置了高度之后，他们所在的那一行的高度就确定了。
（3）表格常用属性列举
border属性
表示边框宽度
width与height属性
表示表格的宽度和高度
放在table标签中时，表示宽度/高度至少为xxx px
cellspacing属性
表示单元格与单元格之间的距离
cellpadding属性
表示表格单元格边框与内容之间的距离
bordercolor属性
表示外边框颜色
属性
表示单元格背景颜色
与属性
表示单元格内容行与列的位置信息，align属性可选left center right，valign属性可选top middle bottom
与属性
表示跨列与跨行的数目
6.常用标签
7.表单
（1）概念：一个包含交互的区域，用于收集用户提供的数据。
（2）常用表单控件
文本输入框 ：
- name 属性：数据的名称。
- value 属性：输入框的默认输入值。
- maxlength 属性：输入框最大可输入长度。
密码输入框 ：
- name 属性：数据的名称。
- value 属性：输入框的默认输入值（一般不用，无意义）。
- maxlength 属性：输入框最大可输入长度。
单选框 ：
- radio：单选
- name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
- value 属性：提交的数据值。
- checked 属性：让该单选按钮默认选中。
复选框 ：
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
- checkbox：多选
- name 属性：数据的名称。
- value 属性：提交的数据值。
- checked 属性：让该复选框默认选中。
隐藏域 ：
用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。
- name 属性：指定数据的名称。
- value 属性：指定的是真正提交的数据。
提交按钮 ：
第一种：
第二种：
- button 标签 type 属性的默认值是 submit 。
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
重置按钮 ：
第一种：
第二种：
- button 不要指定 name 属性.
- input 标签编写的按钮，使用 value 属性指定按钮文字。
下拉框 ：
<select name="place">
<option value="冀">河北</option>
<option value="鲁">山东</option>
<option value="晋" selected>山西</option>
<option value="粤">广东</option>
</select>
1.name 属性：指定数据的名称。
2.option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
3.option 标签设置了 selected 属性，表示默认选中。
label标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下：
让 label 标签的 for 属性的值等于表单控件的 id 。
<label for="nan">男</label>
<input id="nan" type="radio" name="gender" value="male">
把表单控件套在 label 标签的里面
<label>
<input type="radio" name="gender" value="female" >女
</label>