H5初体验

1.H5的规范

H5的结构大致分为三个部分：总体（html、head、body）

<DOCTYPE html>版本规范，整个文件，只出现一次,写在文档的最上面

<meta charset="utf-8" />写在文件的head中，设置文档的编码格式

2.标签的分类及运用

a.<div></div>

I.块标签可以设置宽度 高度，行标签不能设置宽高,块标签是独占一行，display block(默认),行标签 display inline

II.父子关系（嵌套标签）

如果是父子关系的标签结构,子标签会继承父标签的宽度,高度是由内容支 撑起来

b.<span></span>

c.<p></p>

段落标签，让内容以段落的方式展示出来，通常用来显示一段文字

3.超链接

链接标签，http:访问外网链接，需要加上协议http/https，target 访问的方 式，_blank打开新的网页，title 描述这个链接

4.图片的插入

图片访问路径：

绝对路径 电脑磁盘上的位置路径

相对路径 img/CW~J30MXBBTOWC@2ASGAY07.jpg

<img src="img/CW~J30MXBBTOWC@2ASGAY07.jpg" alt="这是一张图片"/>

5.列表分类

a.无序列表

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

b.有序列表

<ol start="2" type="I">

<li>4</li>

<li>5</li>

<li>6</li>

</ol>

type、start:让展示的内容是以I.II.III的格式从II开始作为列表的序号

c.自定义列表

< dl>

<dt>7</dt>

<dt>8</dt>

<dt>9</dt>

</dl>

6.样式的对比

css的样式分为三种，即行间样式(好处：简单暴力 少量代码 查找比较清晰)

内部样式

外部样式(需要要外部创建一个css的文件，让所有的 样式 全部写在里面，可读性比较高; <link rel="stylesheet" href="" />)

如果你即设置了行间样式、内部样式、外部样式，最终使用的将会是行间样式，因为最后执行的是行间样式，每一次样式的设置都会被执行，只不过会被覆盖掉，最好选择外部样式