html常用标签、认识浏览器

html常用标签

一、常用标签

1.标题： <h1…h6></h1…h6>

2.段落： < p >< /p >

3.段内换行：< br / >

4.段内分组：< span >

5.水平线： < hr/ >

6.注释：< !–注释–>

7.链接：< a> < /a >

8.图像：< img >

9.区域： < div> < /div >

10.视频：< vedio >< /vedio>

11.音频：< audio > < /audio >

12.加粗字体：< strong > < /strong>

13.倾斜字体：< em > < /em>

二、列表标签

（1）无序列表：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

< ul >的type属性：

• disc：实体圆心（默认）
• square：实体方心
• ciecle：空心圆

（2）有序列表：

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>

< ol >的type属性：

• 1：数字
• A/a：大写/小写字母
• I/i：大写/小写罗马数字

三、表格标签

1.表格标签：< table > < /table >

2.开启表格一行：< tr > < /tr >

3.表格第一行、加粗字体：< th > < /th >

4.数据单元：< td > < /td >

5.设置边框宽度：< table border=“1” > < /table >
在HTML5中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”

6.对齐方式： align(left、right、center）

7.合并行：< td rowspan=“2” > < /td >

8.合并列：< td collspan=“2” > < /td >

四、表单标签

1.表单标签：< form > < /form >

（1）input控件

1.单行文本框：< input type=“text” placeholeder=“提示信息” maxlength=“最大输入长度” value=“值”/>
placeholder属性是占位，主要是提示信息
文本框所能输入最大长度：< input type=“text” maxlength=“10” >

2.密码框：< input type=“password” placeholder=“提示信息” maxlength=“最大输入长度” value=“值”/>

3.单选按钮：< input type=“radio” value=“值” name=“名称” checked id=“值” />文字

4.复选按钮：< input type=“checkbox” name=“名称” value=“值”>文字

5.数字输入框： < input type=“number” name=“名称” value=“值” max=“最大值” min=“最小值”>

6.日期、时间输入框：< input type="date/datetime " name=“名称”>

7.颜色选择框：< input type=“color” name=“名称”>

8.图像控件：< input type=“image” name=“名称”>

9.文件控件：< input type=“file” name=“名称”>

10.隐藏控件：< input type=“hidden” name=“名称” value=“值”> 页面上不显示，可以向服务器传递值

11.按钮：

1) 提交按钮：将表单信息（表单域中所有控件的值）提交给服务器（action指定的服务器）
	< input type="submit" value="按钮上的文字">
2) 重置按钮：将表单信息恢复初始状态
	< input type="reset" value="按钮上的文字">
3) 普通按钮：没有任何操作
	< input type="button" value="按钮上的文字">

（2）select控件

1.下拉列表框：

<select>
	<option value="值">选项</option>
	<option value="值">选项</option>
</select>

< selected=“selected” >表示默认选中

（3）text area控件

1文本域：< textarea rows=“行数” cols=“列数” > < /textarea >

认识浏览器

主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。

一、浏览器的结构组成

1. User Interface（用户界面）
2. Browser engine（浏览器引擎）
3. Rendering engine（渲染引擎）
4. Networking（网络）
5. JavaScript Interpreter（js解释器）
6. UI Backend（UI后端）
7. Date Persistence（数据持久化存储）
   

• 用户界面 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了页面显示窗口之外的其他部分

• 浏览器引擎可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心

• 渲染引擎 解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上

• 网络用来完成网络调用或资源下载的模块。比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现

• UI后端用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的

• JS解释器用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore

• 数据存储浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用

二、浏览器内核

三、浏览器工作原理

• 解析HTML构建DOM树，DOM是w3c组织推荐的处理可扩展置标语言的标准编程接口
• 构建渲染树，渲染树并不等同于DOM树，因为像head标签或display：none这样的元素就没必要放到渲染树中了，但是他们在DOM树中
• 对渲染树进行布局，定位坐标大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫做layout或reflow
• 绘制渲染树，调用操作系统底层API进行绘制操作

四、浏览器访问网站过程

1. 在浏览器中输入地址
2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文
3. 浏览器发送DNS解析请求，将域名转换为IP地址
4. 浏览器将请求报文发送给服务器
5. 服务器接受请求报文，并解析
6. 服务器处理用户请求，并将处理结果封装成HTTP响应报文
7. 服务器将HTTP响应报文发送给浏览器
8. 浏览器接受服务器相应的HTTP报文，并解析
9. 浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发送请求
10. 最终浏览器展示出页面