html入门：语法、常用标签、表格、表单、h5新增标签

web标准（前端三剑客：html、css、js）

网页的结构（后缀名字为html的文件），负责网页的内容整理和分类
网页的样式（后缀名字为css文件），负责设置网页的板式，颜色，文字大小
网页的行为（后缀名字为.js的文件），负责网页的动态交互

1 认识html

概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

说白了HTML就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释

如：<strong>加粗</strong>  <h1>大标题</h1>  等等

HTML骨架

HTML有固定的基本格式，就跟我们书信有基本的格式是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页的标题</title>
</head>
<body>
  这里写内容
</body>
</html>

自动生成完整版骨架的快捷方式：! => tab键或者 html:5 => tab键

标签的关系

1、嵌套关系：html标签嵌套head标签

<html>
<head></head>
</html>

2、并列关系：head标签与body标签并列

<head></head>
<body></body>

2 认知标签

2.1 常用标签

1、标题标签
<hn>标题内容</hn>   其中n的取值范围是1-6（1的权重最高，6最小）

2、段落标签
<p>段落内容</p>

3、水平线标签
<hr> 单标签，作用是呈现一个水平线

4、换行标签
<br> 单标签，作用是换行

2.2 字体格式化标签

1、加粗字体
<strong>字体加粗</strong> <b>字体加粗</b>

2、倾斜字体 
<em>字体倾斜</em> <i>字体倾斜</i>

3、字体贯穿线，也就是删除线
<del>字体贯穿</del> <s>字体贯穿</s> 

4、字体下划线
<ins>字体下划线</ins> <u>字体下划线</u>

可以使用不同的标签完成功能，如加粗字体标签，可以使用strong，也可以使用b，但建议使用具有语义的标签，如加粗字体标签：strong。

一个是标签语义强，起强调作用。一个是没有语义，没有强调作用。语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前。

SEO优化：
在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。

2.3 标签属性

在使用标签的时候，一个独立的标签比较单一不能完成一些需求，这个时候就可以借助于标签的属性来完成。多个属性之间用空格隔开。

<标签 属性名1=“属性值1” 属性值2=“属性值2”> 
 
<!-- 如：<hr color="red"/> -->

2.4 图片标签

<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />

图片标签属性：
1、src 图片的地址
2、alt 图片加载失败后的替换文本
3、title 鼠标移到图片上，显示图片的标题
4、width="100" height="200" （样式属性都会通过CSS实现）

2.5 链接标签

<a href="链接地址" target="链接打开方式"></a>

<!--<a href="http://www.baidu.com" target="_blank">百度一下</a>-->

链接标签属性：
1、href 跳转的链接地址
2、target 链接打开的方式

1、target的取值

_self 默认值，当前窗口覆盖打开链接
_blank 新建窗口打开链接

2、href 跳转地址分类

站外跳转：http://www.baidu.com
站内跳转：本地文件路径
锚点跳转（页面内部跳转）：

   <!-- 在需要跳转的标签上添加 id="自定义id名"   如：<p id="myid"></p>
    让a标签的href属性等于之前自己自定义的id名 如：<a href="#自定义的id名字" /> -->

<!-- 跳转到薪水的位置 -->
<a href="#target_salary">我的薪水</a>

<p id="target_salary">10000+</p>

2.6 路径（地址）

1、绝对地址：从盘符或者http://出发去找目标文件的过程...

<!-- http://开头-->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度图片">

<!--盘符开头-->
<img src="c:\img\1.png">

2、相对地址：从当前文件出发去找目标文件的过程就称之为相对路径

同级目录：路径直接写目标文件的名称即可
非同级目录：上一级目录（../）下一级目录（文件名/）

<!-- 同级目录 -->
<img src="img.png"/>

<!-- 非同级目录：上一级目录 -->
<img src="../img.png"/>

<!-- 非同级目录：下一级目录 -->
<img src="img/img.png"/>

2.7 列表

2.7.1 列表分类

1、无序列表
列表之间没有顺序，在实际工作中用的比较多。li标签相当于一个容器，可以容纳所以元素。

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li><a href="02_test.html">无序列表3</a></li>
</ul>

2、有序列表
列表之间有顺序，在实际工作中用的较少。

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

3、自定义列表
可以针对一个列表标题充分解释，特定情况下使用。

<dl>
    <dt>列表标题</dt>
    <dd>列表标题的解释说明</dd>
    <dd>列表标题的解释说明</dd>
</dl>

2.7.2 列表注意事项

 1、<ul></ul>或者<ol></ol>中只能嵌套<li></li>，直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

 2、<li>与</li>之间相当于一个容器，可以容纳所有元素。

 3、<dl></dl>中只能嵌套<dt></dt>和<dd></dd>，直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。

 4、<dd></dd>之间相当于一个容器，可以容纳所有元素。<dt></dt>一样

2.8 注释和特殊字符

2.8.1 注释

浏览器不解析的标签，作用是用来提示开发人员或者便于开发人员理解和阅读。WebStorm工具注释快捷键command + / （MacBook）

<!-- 注释 -->

2.8.2 特殊字符

在一些情况下，我们需要在页面上显示一些特殊的标识的时候，我们就需要用到字符实体。

&lt;p&gt;&lt;/p&gt;

<!-- 网页展示如下那内容 -->
<p></p>

3 表格标签

<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年纪</td>
        <td>成绩</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>99</td>
    </tr>

    <tr>
        <td>李四</td>
        <td>男</td>
        <td>30</td>
        <td>88</td>
    </tr>
</table>

1、表格至少有三个基本的标签构成：table 代表一个表格， tr代表行， td代表单元格
2、tr必须嵌套在table标签中，td必须嵌套在tr或者th中
3、有几个单元格就代表有几列

3.1 表格属性

borde 表格的边框（了解）
width 表格的宽度（了解）
cellspacing 单元格与单元格的间距
cellpadding 单元格与单元格内容的间距
align 表格的对齐方式，值如：left、center、right（了解）

3.2 表格的表头标签

在合适的位置将td替换成th即可，th标签相对td来说更有语义性，并且会将内部的文字加粗且居中

<table border="1" cellspacing="0" cellpadding="10">
     <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>年纪</th>
         <th>成绩</th>
    </tr>
</table>

3.3 表格的结构

thead标签表示表头部分，tbody标签表示表体部分，caption标签表示表格的标题。表格的结构不是一定需要的，但是添加上表格的结构会使表格的语义更明确。

<table border="1" cellspacing="0" cellpadding="10">
    <caption>成绩管理系统</caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年纪</th>
            <th>成绩</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>23</td>
            <td>89</td>
        </tr>
    </tbody>
</table>

3.4 合并单元格

单元格的合并分为：跨行和跨列合并
1、跨行合并： rowspan 上下合并将rowspan写在上面的单元格上
2、跨列合并： colspan 左右合并将colspan写在左边的单元格上

<table border="1" width="800" cellspacing="0" cellpadding="8" align="center">

    <caption>成绩管理系统</caption>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年纪</td>
        <td>成绩</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td rowspan="2">99</td>
    </tr>

    <tr>
        <td>kerwin</td>
        <td rowspan="2">女</td>
        <td>30</td>
    </tr>

    <tr>
        <td>张三</td>
        <td>23</td>
        <td>89</td>
    </tr>

    <tr>
        <th>备注</th>
        <td colspan="3"></td>
    </tr>

</table>

4 表单标签

作用：收集用户信息发送给后台

三大组成部分：

表单域（将内部包含的表单信息都收集起来发送给后台）
提示文本（提示用户当前表单的输入内容）
表单（真正用来收集用户信息）

4.1 表单的分类

<input type="">

type的取值：

text 单行文本输入框
password 密码框
radio 单选框（在多个里面选择一个）单选框要生效必须具备name属性并且同一种类型的单选框的name取值必须一样
checkbox 复选框（在多个里面选择某几个）
button 普通按钮
file 用户上传控件
submit 提交按钮，收集表单域里面的用户信息提交给后台

补充：1、radio和checkbox 默认选中项需要使用checked属性

2、value属性代表表单里面包含的值

3、表单如果想被提交，都需要写上name属性（目前不涉及数据提交，可以不写；单选框radio由于特殊性，如果不写就会不能有单选的效果，所以单选框）

4、单行文本输入框，使用maxlength属性可以限制输入的最大字符数

4.2 其它表单补充

1、textarea 多行文本输入框

<textarea rows="5" cols="60"></textarea>

rows 默认显示的行数
cols 默认显示的列数，超过指定数字，自动换行

2、select 下拉菜单

<select>
    <option value="上海">上海</option>
    <option value="北京" selected>北京</option>
    <option value="安徽">安徽</option>
</select>

select下拉框的默认选中项使用selected属性

3、label标签会自动关联表单，点文字的时也相当于点了表单，体验更好

<label><input type="radio" name="sex"> 男</label>
<label><input type="radio" name="sex"> 女</label>
<label>用户名：<input type="text"></label>

4.2 表单域

作用：将内部的表单里面的value值收集起来发送给后台

<form action="" method=""></form>

action 提交的后台地址
method 提交的方法，取值：get post

4.3 容器标签 div 和 span

<div>
    我是一个div，我一般用来做模块布局
</div>

<span>
    我是一个span标签，我一般用来包文字
</span>

表单案例：

<form action="demo.php" method="get">
    用户名：<input type="text" name="username" maxlength="10">
    密码：<input type="password" name="password">
    <br>

    性别：<input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
    <br>

    爱好：<input type="checkbox" value="读书" name="hobby"> 读书
    <input type="checkbox" value="打篮球" name="hobby"> 打篮球
    <input type="checkbox" checked="checked" value="旅游" name="hobby"> 旅游
    <br>

    图片上传：<input type="file">
    <br>

    <select name="city">
        <option value="上海">上海</option>
        <option value="北京" selected>北京</option>
        <option value="安徽">安徽</option>
    </select>
    <br>

    请介绍自己：
    <textarea rows="1" cols="2" name="introduce"></textarea>
    <br>

    <input type="button" value="按钮">
    <br>
    <input type="submit">
</form>

5 h5新增的标签及其表单属性

5.1 h5新增的标签

header,nav,section,footer,aside,article

这些新增标签的功能使用div标签都能实现，且使用方式跟div一摸一样，但div标签没有语义性，搜索引擎不知道这个标签内部装的是什么，所以这样的话搜索引擎不喜欢这样的网页。

header 表示header里面包裹的东西是网站的头部区域
nav 表示nav里面包裹的东西是网站的导航
section 表示里面包裹的东西是网页的某一个模块
footet 表示footer标签里面包裹的东西是网页的页脚
aside 表示aside标签里面包裹的东西是网页的侧边栏
article 表示article标签里面包裹的东西是网页的文章页

5.2 h5新增的表单和新属性

1、h5新增的表单

<!--滑块-->
<input type="range">

<!--日期控件-->
<input type="date">

<!--唤醒数字键盘-->
<input type="number">

2、表单新增属性

placeholder 占位文本
autofocus 自动获取焦点
autocomplete 自动补全
required 自动验证表单

请输入用户名：<input type="text" placeholder="请输入用户名">

5.3 多媒体标签

1、视频标签

网页中插入视频有两种方法：

第一种方法：将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可，如上传到优酷视频网站，没有兼容性但是有广告植入。
第二种方法：使用h5新增的video标签，没有广告，但是有兼容性问题，一般运行在手机端。

<video src=""></video>

video标签常用的属性：

autoplay 自动播放
controls 播放控件
loop 循环播放

video的格式支持 ogg,mp4,webm 不同的浏览器支持的格式不一样，所以出现了一种兼容写法:前提是准备三种格式的视频文件。

<video autoplay>
    <source src="视频1.ogg">
    <source src="视频1.mp4">
    <source src="视频1.webm">
    <a href="#">你的浏览器不支持video，点击升级吧</a>
</video>

浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取。实测：目前的主流浏览器对mp4的支持都比较好

2、音频标签
音频标签的使用和视频标签的使用基本一致，兼容性处理。

<audio>
    <source src="音频1.ogg">
    <source src="音频1.mp3">
    <source src="音频1.webm">
    <a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>

audio标签的常用属性 1.autoplay 自动播放 2.controls 播放控件 3.loop 循环播放

知识补充

字符集的设置

字符集的核心点就是如果设置了以什么字符集进行读取，那么在保存的时候也需要设置成对应的字符集

utf-8 收录了全世界所有国家的语言文字
gbk 收录的是汉字

utf-8 > gbk 所以查询来说的话gbk的查询和存储都小于utf-8 但是现在国际主流都是utf-8，所以为了后期的考虑，都用utf-8