超文本标记语言（Hyper Text Mark Language），简称HTML，是一种用于创建网页的标准标记语言。

 

　　一、开发工具

 

　　vs code:全栈开发工具

 

　　Hbuilder:纯前端开发工具

 

　　sublime:纯文本编辑器，可配置成强大的开发工具

 

　　二、浏览器渲染原理

 

　　浏览器本质上是一个渲染引擎，可以把html代码渲染成人类更容易接受的符号。

 

　　三、标准文档结构

 

　　HTML文档结构是一个html元素为根节点，其下包含head和body。

 

　　head标签用于告知浏览器渲染器的相关配置。body才是浏览器需要渲染的内容。

 

　　三、HTML核心标签

 

　　HTML标签根据排版的不同可以分为两种：

 

　　块标签（block tags）

 

　　[1] 独占一行，垂直方向排序。

 

　　[2] 可以设置宽高，

 

　　行内标签（inline tags）

 

　　[1] 在一行内并排排序，水平方向排列

 

　　[2] 不能设置宽高，内容撑开宽高

 

　　有语义标签

 

　　标签有特定的含义，例如显示图片的标签img，播放音频的标签audio，播放视频的标签video。有语义标签不能用在其他用途。

 

　　无语义标签

 

　　标签没有特定含义，标签什么都可以显示，一般作为容器，可以用于页面布局。例如：div/span等。

 

　　3.1 块标签

 

　　3.1.1 div

 

　　无语义标签块标签，一般作用容器用于页面布局。

 

　　3.1.2 标题

 

　　通过<h1> - <h6> 标签来定义，字号从大到小

 

　　<h1>我是标题</h1>

 

　　<h2>我是标题</h2>

 

　　3.1.3 段落与换行

 

　　<p>我是段落</p>

 

　　12 <br /> 换行

 

　　34

 

　　3.1.4 HTML列表

 

　　<ol>（orderid list） 表示有序列表

 

　　<li>表示列表项，必须位于ol中

 

　　<ul>（unordered list） 表示无序列表

 

　　<li>表示列表项，必须位于ul中

 

　　<dl>表示定义列表  defined list

 

　　<dt>表示定义标题  defined title

 

　　<dd>表示对自定义标题的描述  defined description

 

　　3.1.5 HTML表格

 

　　表格table是由行（tr）构成的，行是由列（td）构成的。

 

　　合并单元格

 

　　colspan:单元格向右跨越几列

 

　　rowspan:单元格向下跨越几行

 

　　向右跨3列向下跨3行

 

　　3.2 行内标签

 

　　3.2.1 span

 

　　无语义行内标签，作为容器使用。

 

　　3.2.2 HTML链接

 

　　通过标签<a>来定义

 

　　<a href="">这是一个链接</a>

 

　　在 href 属性中指定链接的地址。

 

　　绝对路径：从盘符开始的路径就是绝对路径。

 

　　相对路径：没有盘符，从当前路径开始。当前操作的文件所在的路径就是当前路径，用。表示。

 

　　3.2.3 锚点

 

　　页面内跳转成为锚点

 

　　#与id

 

　　3.2.4 HTML图像

 

　　通过标签<img>定义

 

　　3.2.5 strong/em/var

 

　　这三个都表示强调。

 

　　实际开发过程中，三个标签会被降级成无语义标签用于容器。

 

　　作为后台开发人员，如果需要没见过的标签=> 测试属于行内标签还是块标签。

 

　　四、form表单

 

　　HTML 表单用于收集不同类型的用户输入，向后台提交数据。