第一章 HTML入门 v1.0
第一部分 HTML简介
一、HTML概念
1.定义
HTML(HyperText Markup Language，超文本标记语言)
超文本：通过超级链接方法将文本中的文字、图表与其他信息媒体相关联
标记：标记也叫标签，带尖括号的文本，可以将网络上的文档格式统一
2.基本骨架
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</html>二、标签语法
1.基本语法规则
- 标签成对出现，中间包裹内容
<>里面放英文字母(标签名)- 结束标签比开始标签多
/
2.单标签与双标签
单标签：只有开始标签，没有结束标签的标签，一般用于实现效果，如：<br>(换行)、<hr>(水平线)
双标签：成对出现的标签，一般需要包裹内容，如：<div></div>
3.标签之间的关系
- 父子关系(嵌套关系)
- 兄弟关系(并列关系)
第二部分 基本标签
一、文本与段落标签
1.注释标签
基本语法：<!-- 注释内容 -->
2.字符实体
在网页中显示预留字符
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | &nbsp; | |
| < | 小于号 | &lt; |
| > | 大于号 | &gt; |
3.文本格式化标签
| 效果 | 标签(推荐-带强调语义) | 标签 |
|---|---|---|
| 加粗 | <strong></strong> | <b></b> |
| 倾斜 | <em></em> | <i></i> |
| 下划线 | <ins></ins> | <u></u> |
| 删除线 | <del></del> | <s></s> |
4.标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等
基本语法：**<h1>标签</h1>**(HTML标题标签定义了h1~h6六个级别的标题标签)
基本规则：h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
5.段落标签
一般用在新闻段落、文章段落、产品描述信息等
基本语法：<p>段落</p>
默认显示效果：独占一行、段落之间有间隙
6.无语义的布局标签
- div
基本语法：<div>默认提示文字</div>
特点：块级元素，每个div标签都会从新行开始显示，占据一行
- span
基本语法：<span>默认提示文字</span>
特点：行内元素，不会进行换行
7.cdate标记
允许在浏览器中输入特殊字符的标签
基本语法：<![CDATA[ 文本 ]]>
二、显示效果标签
1.换行
基本语法：<br>(单标签)
注意要点：浏览器不识别代码中的Enter键换行
2.水平线标签
基本语法：<hr>(单标签)
三、页面元素标签
1.图像标签
基本语法：<img src="图片URL">
可选属性：
alt：图片未正确加载时替代显示的文字提示信息
title：鼠标悬停在图片上显示的文字
width/height：图片的宽度/高度
2.超链接标签
基本语法：<a href="链接地址">显示内容</a>，当链接地址为"#xxx"时表示锚点超链接
可选属性：
target：文档重定向目标，常用：_self(默认，本窗口)/_blank(新窗口打开)/_parent(父窗口)
锚点超链接：**"#xxx"**表示跳转到当前页面name/id为xxx的元素，"#"表示当前页面
3.音频标签
基本语法：<audio src="音频URL"></audio>
可选属性：
controls：显示音频控制面板，属性值与属性一致，此情况下HTML5中可以省略属性值，下同
loop：循环播放
autoplay：自动播放(浏览器为了提升用户体验，一般会禁用自动播放功能)
示例：<audio src="音频URL" controls loop autoplay></audio>
4.视频标签
基本语法：<video src="音频URL"></video>
可选属性：
controls：显示音频控制面板
loop：循环播放
muted：静音播放，
autoplay：自动播放(浏览器为了提升用户体验，一般只有在静音状态下支持自动播放)
示例：<video src="音频URL" controls muted autoplay></video>
5.内联框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
基本语法：<iframe src="文档地址">您的浏览器不支持浏览该内容</iframe>
四、列表
1.无序列表
作用：用于表示布局排列整齐的不需要规定顺序的元素列表
<ul>
<li>无序元素1</li>
<li>无序元素2</li>
<li>...</li>
</ul>注意要点：<ul>标签中只能包含<li>标签，<li>标签中可以包裹任何内容
2.有序列表
作用：用于表示布局排列整齐的需要规定顺序的元素列表
<ol>
<li>有序元素1</li>
<li>有序元素2</li>
<li>...</li>
</ol>注意要点：<ol>标签中只能包含<li>标签，<li>标签中可以包裹任何内容
3.定义列表
作用：一般用于网页底部菜单栏等，一般含有 标题 和 描述/详情 两个部分
<dl>
<dt>标题</dt>
<dd>描述/详情</dd>
<!-- ... -->
</dl>注意要点：<dl>标签中只能包含<dt>和<dd>标签，<dt>和<dd>标签中可以包裹任何内容
五、表格
1.表格基本语法
| 标签名 | 说明 | 标签名 | 说明 |
|---|---|---|---|
| tabel | 表格 | tr | 行 |
| th | 表头单元格 | td | 内容单元格 |
<table border="边框属性">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>第一个元素对应的表头1的值</td>
<td>第一个元素对应的表头2的值</td>
</tr>
<!-- ... -->
</table>2.表格结构标签
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
<table border="边框属性">
<thead><!-- 表格头部内容 -->
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody><!-- 主要内容区域 -->
<tr>
<td>第一个元素对应的表头1的值</td>
<td>第一个元素对应的表头2的值</td>
</tr>
<!-- ... -->
</tbody>
<tfoot><!-- 汇总信息区域 -->
<tr>
<td>汇总元素对应的表头1的值</td>
<td>汇总元素对应的表头2的值</td>
</tr>
</tfoot>
</table>3.合并单元格
- 明确合并的目标
- 保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量)
跨行合并，保留最上单元格，添加属性rowspan，跨列合并，保留最左单元格，添加属性colspan
- 删除其他单元格
<table border="边框属性">
<thead><!-- 表格头部内容 -->
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody><!-- 主要内容区域 -->
<tr>
<td>第一个元素对应的表头1的值</td>
<td>第一个元素对应的表头2的值</td>
</tr>
<!-- ... -->
</tbody>
<tfoot><!-- 汇总信息区域 -->
<tr>
<td colspan="2">值</td>
</tr>
</tfoot>
</table>六、表单
1.input标签
基本语法：<input type="type属性" [disabled]> (disabled表示禁用input)
<input>标签根据其type属性不同，其功能也不同，具体如下：
| type属性 | 功能说明 |
|---|---|
| text | 单行文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件上传 |
可选属性：
文本输入(text/password)：placeholder：浅色提示文字
单选框(radio)：name：单选框组名；checked：默认选中
复选框(checkbox)：checked：默认选中
文件上传(file)：multiple：允许文件多选功能
按钮(submit/button)：提交/自定义按钮
隐藏域(hidden)：隐藏的表单元素
2.下拉菜单
<select>
<option>元素1</option>
<option>元素2</option>
<option>元素3</option>
<option>元素4</option>
<option selected>默认选中元素</option>
</select>3.文本域(多行文本输入框)
基本语法：<textarea>默认提示文字</textarea>
4.按钮
基本语法：<button type="submit/reset/button">按钮</button>
type属性：reset：将表单控件恢复默认值 button：没有功能
5.label标签
网页中某个标签的说明文本，使用其绑定文字和表单控件，可以增大表单控件的点击范围
<!--写法一：只包裹内容，不包裹表单控件，label标签的for属性要和表单控件id相同-->
<input type="radio" id="man">
<label for="man">男</label>
<!--写法二：包裹文字和表单控件，不需要属性-->
<label><input type="radio">女</label>支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、 单选框、多选框、下拉菜单、文本域等
