HTML基础
前端
前端就是客户端能看到的一切页面，包括我们常见的网页、手机上安装的app、小程序，这些都是用来展示给用户观看的，并且可以与用户进行交互
前端三大部分
- HTML5：主要进行页面的架构
- CSS3：主要进行页面的布局
- JavaScript：主要进行页面的交互
HTML5
什么是HTML5
HTML(HyperText Mark-up Language)：超文本标记语言，它不仅仅可以表示文本，还可以表示视频、图片、超链接等，标记也就是符号标签，是没有逻辑的，也就是说没有对错，只有能不能显示
如何学习HTML5
学习方向：三大块，转移字符、指令、标签
学习目的：通过标签知识完成搭建页面的整体架构
指令
被<>包裹，以!开头的特殊符号，称之为指令
- 文档指令：<! doctype html> 需要出现在html文档的最上方，进行一个声明这是一个HTML5的语法进行编写的网页
- 注释指令： 这是注释，不会被浏览器解析展现给客户看
转义字符
转义字符：被& ;包裹的，内容为字母或数字组成，比如 
常用转义字符：
| 字符 | 十进制 | 转义字符 | 字符 | 十进制 | 转义字符 | 字符 | 十进制 | 转义字符 |
|---|---|---|---|---|---|---|---|---|
| ¡ | ¡ |
¡ |
Á | Á |
Á |
á | á |
á |
| ￠ | ¢ |
¢ |
 |  |
ˆ |
â | â |
â |
| ￡ | £ |
£ |
à | à |
à |
ã | ã |
ã |
| ¤ | ¤ |
¤ |
Ä | Ä |
Ä |
ä | ä |
ä |
| ￥ | ¥ |
¥ |
Å | Å |
˚ |
å | å |
å |
| | | ¦ |
¦ |
Æ | Æ |
Æ |
æ | æ |
æ |
| § | § |
§ |
Ç | Ç |
Ç |
ç | ç |
ç |
| ¨ | ¨ |
¨ |
È | È |
È |
è | è |
è |
| © | © |
© |
É | É |
É |
é | é |
é |
| ª | ª |
ª |
Ê | Ê |
Ê |
ê | ê |
ê |
| « | « |
« |
Ë | Ë |
Ë |
ë | ë |
ë |
| ¬ | ¬ |
¬ |
Ì | Ì |
Ì |
ì | ì |
ì |
| | ­ |
­ |
Í | Í |
Í |
í | í |
í |
| ® | ® |
® |
Î | Î |
Î |
î | î |
î |
| ˉ | ¯ |
¯ |
Ï | Ï |
Ï |
ï | ï |
ï |
| ° | ° |
° |
Ð | Ð |
Ð |
ð | ð |
&ieth; |
| ± | ± |
± |
Ñ | Ñ |
Ñ |
ñ | ñ |
ñ |
| ² | ² |
² |
Ò | Ò |
Ò |
ò | ò |
ò |
| ³ | ³ |
³ |
Ó | Ó |
Ó |
ó | ó |
ó |
| ′ | ´ |
´ |
Ô | Ô |
Ô |
ô | ô |
ô |
| μ | µ |
µ |
Õ | Õ |
Õ |
õ | õ |
õ |
| ¶ | ¶ |
¶ |
Ö | Ö |
Ö |
ö | ö |
ö |
| · | · |
· |
× | × |
× |
÷ | ÷ |
÷ |
| ¸ | ¸ |
¸ |
Ø | Ø |
Ø |
ø | ø |
ø |
| ¹ | ¹ |
¹ |
Ù | Ù |
Ù |
ù | ù |
ù |
| º | º |
º |
Ú | Ú |
Ú |
ú | ú |
ú |
| » | » |
» |
Û | Û |
Û |
û | û |
û |
| ¼ | ¼ |
¼ |
Ü | Ü |
Ü |
ü | ü |
ü |
| ½ | ½ |
½ |
Ý | Ý |
Ý |
ý | ý |
ý |
| ¾ | ¾ |
¾ |
Þ | Þ |
Þ |
þ | þ |
þ |
| ¿ | ¿ |
¿ |
ß | ß |
ß |
ÿ | ÿ |
ÿ |
| À | À |
À |
à | à |
à |
标签
被<>包裹，以字母开头，可以结合数字、-连接符等合法字符的特殊字符，称之为标签
标签中不区分大小写，帮助我们来更好的显示页面内容，标签有系统标签与自定义标签两种，html5中建议使用系统标签，标签名都采用小写即可。
常用标签
- 页面结构相关的系统标签
| 标签 | 作用 | 标签 | 作用 | 标签 | 作用 |
|---|---|---|---|---|---|
<html></html> |
根标签 | <head></head> |
头标签 | <body></body> |
体标签 |
<title></tile> |
标题标签 | <meta /> |
元标签 | <link /> |
链接标签 |
<style></style> |
样式标签 | <script></script> |
脚本标签 |
案例
<!--文档指令，建议出现在html文件的最上方，一个html文件只出现一次，html表示该文件采用html5语法进行编写-->
<!doctype html>
<!-- 页面根标签的开始标识，一个html文件只出现一次 -->
<html>
<!-- 页面头标签的开始标识，一个html文件只出现一次 -->
<head>
<!-- 规定文件编码的元标签，因为元标签只需要标注具体功能，不需要包裹内容，所以代表标签结束的/写在标签的最后即可(可以省略)， -->
<meta charset='utf-8' />
<!-- 页面标题标签，用来显示页面标签标题，如登录百度页面，页面标签标题显示: 百度一下，你就知道 -->
<title>第一个html页面</title>
<!-- 用来存放出现在head中的CSS3样式代码的标签(CSS3部分详细介绍) -->
<style></style>
<!-- 用来存放出现在head中的JavaScript脚本代码的标签(JavaScript部分详细介绍) -->
<script></script>
<!-- 页面头标签的结束标识，与页面头标签的开始一同包裹应该出现在页面头标签中的内容 -->
</head>
<!-- 页面体标签的开始标识，一个html文件只出现一次 -->
<body>
<!-- 页面中所有显示给用户查看的内容：普通文本、图片、音频及视频等 -->
<!-- 也会出现不显示给用户查看的内容：简单与复制的系统标签、脚本标签及影藏的内容等 -->
<!-- 页面体标签的结束标识，与页面体标签的开始一同包裹页面主体部分所有显示给用户查看的内容(还包含其他不显示的内容) -->
</body>
<!-- 页面根标签的结束标识，页面的所有内容都应该出现在html标签内部（被html标签开始与结束包裹） -->
</html>
- 简单的系统标签
| 标签 | 作用 | 标签 | 作用 | 标签 | 作用 |
|---|---|---|---|---|---|
<h1></h1> |
一级标题标签 | <h2></h2> |
二级标题标签 | <h3></h3> |
三级标题标签 |
<h4></h4> |
四级标题标签 | <h5></h5> |
五级标题标签 | <h6></h6> |
六级标题标签 |
<p></p> |
段落标签 | <br /> |
换行标签 | <hr /> |
分割线标签 |
<span></span> |
行文本标签 | <i></i> |
斜体标签 | <b></b> |
加粗标签 |
<img /> |
图片标签 | <a></a> |
超链接标签 | <div></div> |
架构标签 |
案例
- 只用关注显示效果的简单系统标签
<!-- 简单的系统标签及控制的内容都应该出现在body标签中，以下写的内容都可以直接书写在body标签中，然后可以在浏览器中打开该html文件查看显示效果 -->
<h1>
在页面上显示的大字加粗的一级标题标签
</h1>
<h2>
在页面上显示的二级标题标签
</h2>
<!-- 省略h3~h5的案例 -->
<h6>
六级标题标签
</h6>
<p>
一个页面显示的文本段落放在一个p标签中
</p>
直接写在页面中的手动敲的换行不会被浏览器解析为换行，换行符采用br标签
<br /><!-- 可以注释掉br标签查看上下两句话前后的显示效果 -->
用了br标签，浏览器就会解析出一个换行
<hr />
在这行文本上下各书写一个hr标签，浏览器打开显示时，这行文本上下均有一个分割线
<hr />
<span>在页面中的显示文本除了可以写在标题标签(h1~h6)和段落标签(p)中，其他都建议写在span标签中</span>
<span>不同于标题标签和段落标签的是两个span标签之间不会换行显示，而是在一行显示，一行显示不下时会自动换行(可以缩放浏览器宽度查看效果)</span>
<span><i>斜体显示的文本，建议被span标签嵌套</i><b>加粗显示的文本，建议被span标签嵌套</b></span>
8. 图片标签：<img />
9. 超链接标签：<a></a>
7. "架构"标签：<div></div>
- 功能是显示图片的简单系统标签
<!-- 加载显示网络图片 -->
<img src="http://www.baidu.com/favicon.ico" />
<!-- 图片加载失败是，标签alt全局属性中的文本将显示出来作为图片资源加载失败的文本解释 -->
<img src="http://www.baidu.com/favicon.ico_error" alt="百度图标" />
<!-- 通过相对路径加载本地图片，title中的文本会在鼠标先显示的图片上悬浮时，显示出来作为图片显示的文本解释 -->
<img src="img/bd_logo.png" title="百度logo" />
- 功能是完成超链接的简单系统标签
<!-- 全局属性href中写超链接的目标地址，点击页面中显示的 前往百度，会在当前页面转跳到百度的首页 -->
<a href="https://www.baidu.com">前往百度</a>
<!-- 点击页面中显示的 "前往百度"，标签target全局属性中值为_blank时会新开一个标签页面转跳到百度的首页，默认值是_self，效果同第一种 -->
<a href="https://www.baidu.com" target="_blank">前往百度</a>
<!-- 锚点的使用(了解)，来完成一个浏览网页，返回网页顶部的案例 -->
<!-- 种下锚点：该a标签不能在页面中显示文本，用全局属性name来种下一个叫top的锚点 -->
<a name="top"></a>
<!-- 许许多多页面中其他的显示内容，也可以用一堆br标签来让页面可以滚动起来 -->
<!-- 返回锚点：href中用 #锚点名 来表示要前往的锚点，点击 "返回top" 会自动回到页面顶 -->
<a href="#top">返回top</a>
- 复杂的系统标签
- 无序列表标签：
<ul><li></li></ul> - 有序列表标签：
<ol><li></li></ol>> - 表格标签：
<table><!-- 包含大量的表格子标签 --></table> - 表单标签：
<form><!-- 包含大量的表单子标签 --></form>
- 无序列表标签：
案例
- 无序列表
<ul>
<li>列表项</li>
<!-- 多少列表项就可以出现多少个li标签 -->
<li>列表项</li>
</ul>
<!-- 无需列表只需要掌握ul与li的嵌套关系，样式的调整会在CSS3详细介绍 -->
- 有序列表
<ol>
<li>列表项</li>
<!-- 多少列表项就可以出现多少个li标签 -->
<li>列表项</li>
</ol>
- 表格标签
<!-- table表格标签 -->
<!-- border: 表示表格的边框宽度 -->
<!-- cellspacing: 表示单元格之间的间距 -->
<!-- cellpadding: 表示单元格内部的间距 -->
<table border="1" cellspacing="0" cellpadding="10">
<!-- caption: 表示表格的标题 -->
<caption>表格标题</caption>
<!-- thead: 表示表头部标签，可以省略 -->
<thead>
<!--tr: 表示表格行标签 -->
<tr>
<!-- th: 表示表格标题单元格标签，内容会进行加粗显示 -->
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<!-- tbody: 表示表体标签，可以省略 -->
<tbody>
<tr>
<!-- td: 表示普通单元格标签 -->
<!-- rowspan: 表示合并行单元格 -->
<!-- colspan: 表示合并列单元格 -->
<td rowspan="2">单元格</td><!-- 合并2行单元格 -->
<td colspan="2">单元格</td><!-- 合并2列单元格 -->
<!-- <td>单元格</td> --><!-- 该列单元格被合并 -->
</tr>
<tr>
<!-- <td>单元格</td> --><!-- 该行单元格被合并 -->
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<!-- tfoot: 表示表格尾部区域标签，可以省略 -->
<tfoot>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
- 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<!-- action：提交表单数据给后台的地址 -->
<!-- method：提交数据的方式(get或post) -->
<!-- enctype：提交数据的编码格式 -->
<form actio="" method="" enctype="">
<label></label>
<input type="text" name="user">
<input type="password" name="pwd">
<select name="list">
<option value="val1">列表项</option>
<option value="val2">列表项</option>
</select>
<textarea></textarea>
<button type="button">按钮</button>
<input type="submit" value="提交">
</form>
</body>
</html>
<!--
标签部分：
1. from表单标签
2. 普通文本标签
3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签
4. select表单中的列表标签，option列表项标签
5. textarea文本域标签
6. button按钮标签
form全局属性
1. action：提交表单数据给后台的地址
2. method：提交数据的方式(get或post)
3. enctype：提交数据的编码格式
form子标签全局属性
1. type：标签的类型
2. name：将该标签提交给后台标识数据的key (不设置name的标签的内容无法提交给后台)
3. value：该标签提交给后台的数据或是该标签的显示内容
input标签tpye属性值与分类
1. text：普通文本输入框
2. password：密文文本输入框
3. radio：单选框，该类型input标签有个全局属性checked，属性值省略，代表单选框默认选中状态
4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby
5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台
6. submit：提交表单信息给后台，用value设置提交按钮的显示内容
button标签tpye属性值与分类
1. button：不同按钮，默认点击后无任何操作
2. reset：重置按钮，默认点击后会还原表单的所有操作
3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台
-->
