浏览器常识
1. 网页是由哪些部分组成的
  
  文字、图片、音频、视频、超链接
2. 渲染引擎（浏览器内核）：针对代码进行渲染展示
  
  浏览器内核备注
  IE Trident IE、360浏览器、百度浏览器
  FireFox Gecko 火狐浏览器内核
  Safari Webkit 苹果浏览器内核
  Chrome/Opera/Edge Blink Blink其实是Webkit的分支
3. Web标准的构成
  
  构成语言说明
  结构 HTML 页面元素和内容
  样式 CSS 网页元素的外观和位置等页面样式（如：颜色、大小、位置等）
  逻辑 JavaScript 网页模型的定义与页面交互
4. HTML页面固定结构
  
  html标签：网页的整体
  
  head标签：网页的头部
  
  body标签：网页的身体
  
  title标签：网页的标题

浏览器	内核	备注
IE	Trident	IE、360浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera/Edge	Blink	Blink其实是Webkit的分支

构成	语言	说明
结构	HTML	页面元素和内容
样式	CSS	网页元素的外观和位置等页面样式（如：颜色、大小、位置等）
逻辑	JavaScript	网页模型的定义与页面交互

HTML标签

标题标签

定义 1 ~ 6 级标题，标题大小依次递减

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

段落标签

标签语法关键字：p
```
This is a paragraph
This is another paragraph
```
This is a paragraph

This is another paragraph
换行标签

标签语法关键字：br
```
This is a paragraph
```
This is a
paragraph
水平线分割标签

标签语法关键字：hr
```
<hr />
```
文本格式化标签

5.1 标签语法关键字：b ：strong
```
 加粗
 加粗
```
加粗

加粗

5.2 标签语法关键字：u ：ins
```
 下划线
 <ins>下划线</ins>
```
下划线

下划线

5.3 标签语法关键字：i ：em
```
 倾斜
 倾斜
```
倾斜

倾斜

5.4 标签语法关键字：s ：del
```
 <s>删除线</s>
 <del>删除线</del>
```
~~删除线~~

~~删除线~~

图片标签

标签语法关键字：img

<!-- src：图像的 URL -->
<!-- alt：替换文本，图像加载不出来就会展示alt文字 -->
<!-- title：鼠标悬停，提示文本 -->
<!-- height：定义图像的高度 -->
<!-- width：定义图像的宽度 -->
<img src="./imgs/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香"  title="郁金花" width="" height="" />

音频标签

标签语法关键字：audio

<!-- src：音频的 URL -->
<!-- controls：显示播放控件按钮 -->
<!-- autoplay：自动播放（部分浏览器不支持） -->
<!-- loop：循环播放 -->
<audio src="./imgs/LoneRanger.mp3" controls loop></audio>

视频标签

标签语法关键字：video

<!-- src：视频的 URL -->
<!-- controls：显示播放控件按钮 -->
<!-- autoplay：自动播放（需要配合muted实现静音播放） -->
<!-- loop：循环播放 -->
<video src="./imgs/juren.mp4" controls loop autoplay muted></video>

超链接标签

标签语法关键字：a

    <!-- 
    target：
    _self 默认值，当前页面覆盖
    _blank 打开新页面
    -->
    <a href="https://www.baidu.com/" target="_self">baidu.com</a>

baidu.com

列表标签

10.1 （无序列表）标签语法关键字：ul

<ul>
    <!-- ul标签中只允许包含li标签 -->
    <!-- li标签中可以包含任意内容 -->
    <li>苹果</li>
    <li>香蕉</li>
    <li>西瓜</li>
</ul>

苹果
香蕉
西瓜

10.2 （有序列表）标签语法关键字：ol

<ol>
    <!-- ol标签中只允许包含li标签 -->
    <!-- li标签中可以包含任意内容 -->
    <li>苹果</li>
    <li>香蕉</li>
    <li>西瓜</li>
</ol>

苹果
香蕉
西瓜

10.3 （自定义列表）标签语法关键字：dl

<dl>
    <!-- dl标签中只允许包含dt/dd标签 -->
    <!-- dt/dd标签中可以包含任意内容 -->        
    <dt>帮助中心</dt>
    <dd>账号管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

帮助中心: 账号管理; 购物指南; 订单操作

表格标签

标签语法关键字：table

<table border="1">
<!-- 
    tr：
    1.一个tr标签表示一行
    2.tr用于包裹td标签
    -->
<!-- border：添加表格边框，数字越大边框线越大-->
<!-- width：表格宽度 -->
<!-- height：表格高度 -->
<!-- caption：表格标题 -->
<!-- th：表格表头，通常用于表格第一行 -->
<!-- 
    表格结构标签：不会增加视觉上作用，主用于优化代码对人或浏览器增加可读性
    结构标签用法：包裹tr标签即可
    thead：表格头部
    tbody：表格主体
    tfoot：表格底部
    -->
    <!-- 
    合并单元格：
    rowspan：上下合并，只保留最上的，其余删除
    colspan：左右合并，只保留最左的，其余删除
    -->
<caption><strong>统计表格</strong></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>薛之谦</td>
            <td>32</td>
            <td rowspan="2">男</td>
        </tr>
        <tr>
            <td>黄家驹</td>
            <td>35</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">歌手</td>
        </tr>
    </tfoot>
</table>

**统计表格**
姓名	年龄	性别
薛之谦	32	男
黄家驹	35	男
总结	歌手

表单标签

标签语法关键字：input

type属性	描述（tpye属性的搭配属性）
text	文本框，placeholder：提示输入框占位文本
password	密码框，placeholder：提示输入框占位文本
radio	单选框，name：绑定属性为同组实现单选功能；checked：设置默认选中
checkbox	复选框，checked：设置默认选中
file	文件上传，multiple：允许可上传多个文件
submit	提交按钮，value：更改按钮的默认文本
reset	（reset功能需要在form父级嵌套范围下使用）重置按钮，value：更改按钮的默认文本
button	普通按钮，value：更改按钮的默认文本

<form action="">
    <!-- text：文本框 -->
    文本框：<input type="text" placeholder="请输入账号">
    <br>
    <!-- password：密码框 -->
    密码框：<input type="password" placeholder="请输入密码">
    <br>
    <!-- radio：单选框 -->
    单选框：<input type="radio" name="sex">男 
    <input type="radio" name="sex" checked>女
    <br>
    <!-- checkbox：复选框 -->
    复选框：<input type="checkbox" checked>
    <br>
    <!-- file：上传文件 -->
    <input type="file" multiple>
    <br>
    <!-- submit：提交按钮 -->
    <input type="submit">
    <!-- reset：重置按钮 -->
    <input type="reset">
    <!-- button：普通按钮 -->
    <input type="button" value="普通按钮">
</form>

文本框：

密码框：

单选框：男女

复选框：

button按钮标签

标签语法关键字：button

<button>这是一个button标签按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

这是一个button标签按钮提交按钮重置按钮普通按钮

select下拉菜单标签

标签语法关键字：select

<select>
    <!-- select：下拉框整体 -->
    <!-- option：下拉的选项 -->
    <!-- selected：指定默认选中下拉框内容 -->
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>深圳</option>
</select>

北京上海广州深圳

textarea文本域标签

标签语法关键字：textarea

<!-- cols：文本域可见宽度 -->
<!-- rows：文本域可见高度 -->
<textarea rows="1px"></textarea>

label标签

标签语法关键字：label

<!-- 方法1：label的for属性和input的id属性进行绑定 -->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<!-- 方法2：直接使用label标签包裹input标签-->
<label><input type="radio" name="sex">女</label>

男女

人生得意须尽欢，莫使金樽空对月

HTML5 基础知识总结

浏览器常识

网页是由哪些部分组成的

渲染引擎（浏览器内核）：针对代码进行渲染展示

Web标准的构成

HTML页面固定结构