HTML5基础学习笔记

1 H5新增语义化标签

<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:块级标签
<aside>:侧边栏标签
<footer>:尾部标签

2 H5新增多媒体标签

音频：<audio>

视频：

3 H5新增input表单、表单属性

4 Web标准的构成

主要包括结构、表现、行为三个方面。
简单理解：结构写到HTML文件中，表现写在CSS文件中，行为写到JavaScript文件中。

5 Emmet语法

5.1 快速生成HTML结构语法

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
7. 如果想要在生成的标签内部写内容可以用 { } 表示

5.2 快速生成CSS样式语法

CSS 基本采取简写形式即可.

1. 比如 w200 按tab 可以 生成 width: 200px;
2. 比如 lh26px 按tab 可以生成 line-height: 26px;

5.3 快速格式化代码

Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：

"editor.formatOnType": true, 
"editor.formatOnSave": true 

6 div和span标签

特点：

1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子 
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子 

7 路径之相对路径

8 路径之绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。

9 超链接标签 (重点）

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
   ● 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
   ●找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>

10 特殊字符

空格： 
小于号：<
大于号：>

11 表格语法

 <table> 
   <tr> 
     <td>单元格内的文字</td> 
     ... 
   </tr> 
   ... 
 </table> 

1. <table> </table> 是用于定义表格的标签。 
2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。 
3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。 
4. 字母 td 指表格数据（table data），即数据单元格的内容

<th></th>表头标签，内容会加粗居中显示，常用语表格第一行。

12 表格属性

13 表格结构标签

1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。 
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。 
3.  以上标签都是放在 <table></table> 标签中。

14 合并单元格

合并单元格方式：
●跨行合并：rowspan=“合并单元格的个数”
●跨列合并：colspan=“合并单元格的个数”
合并单元格三步曲：

1. 先确定是跨行还是跨列合并。 
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。 
3. 删除多余的单元格

15 无序列表（重点）

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。 
无序列表的基本语法格式如下： 
 <ul> 
   <li>列表项1</li> 
   <li>列表项2</li> 
   <li>列表项3</li> 
   ... 
 </ul> 
1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。 
2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。 
3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。 
4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。 

16 有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。 
在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。 
有序列表的基本语法格式如下： 
 <ol> 
   <li>列表项1</li> 
   <li>列表项2</li> 
   <li>列表项3</li> 
   ... 
 </ol> 
1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。 
2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。 
3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

17 自定义列表（重点）

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。 
其基本语法如下： 
 <dl> 
   <dt>名词1</dt> 
   <dd>名词1解释1</dd> 
   <dd>名词1解释2</dd> 
 </dl> 
1. <dl></dl> 里面只能包含 <dt> 和 <dd>。 
2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。 

18 表单域

表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 
<form> 会把它范围内的表单元素信息提交给服务器. 
 <form action=“url地址” method=“提交方式” name=“表单域名称"> 
   各种表单元素控件 
 </form> 

19 表单元素

1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

20 标签

<label> 标签为 input 元素定义标注（标签）。 
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验. 
语法：   
 <label for="sex">男</label> 
 <input type="radio" name="sex"  id="sex" /> 
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。 

21 表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表. 3.4.3 <select> 表单元素 
语法： 
 <select> 
   <option>选项1</option> 
   <option>选项2</option> 
   <option>选项3</option> 
   ... 
 </select> 
1. <select> 中至少包含一对<option> 。 
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

22 表单元素

语法：

 <textarea rows="3" cols="20"> 
   文本内容 
 </textarea> 
1. 通过 <textarea> 标签可以轻松地创建多行文本输入框。 
2. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

23 查阅文档网站

经常查阅文档是一个非常好的学习习惯。
推荐的网址：
● 百度: http://www.baidu.com 链接:link
● W3C : http://www.w3school.com.cn/ 链接:link
● MDN: https://developer.mozilla.org/zh-CN/链接:link