H5基本结构：
基本结构分为：
-
< head>描述区< /head>
-
< body>内容区< /body>
具体：<!DOCTYPE html> <!--声明文档类型--> <html lang="en"> <!--根标记、根标签、根元素 lang="en" 语言形态--> <head> <!-- head描述区 --> <meta charset="UTF-8"> <!-- 字符编码格式 UTF-8 国际性编码格式--> <!-- charset="GB2312/GBK" --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 控制视口的比例 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 按照IE最高版本 去渲染当前网页 --> <title>欢迎走入胖帅心里</title> <!-- 当前网页的标题 - 显示在状态栏上面 --> </head> <body> <!-- 内容区域 --> 只要是网页中能看到内容，都是放在body里面胖帅 </body> </html>
H5语法说明：
标签：
单标签：< br>…
双标签：< p>< /p>…
语法：
< input type=“text”>
input：标签名称
type：属性
text：属性值
总结： a：在尖角号里面的第一个单词就是标签的名称。
b: 在标签后面，用空格隔开是属性
c: 属性和属性值之间用等号连接
d: 属性值放在引号里面（单双引号都可以）
e: 如果一个标签拥有多个属性的时候，属性和属性之间用空格隔开
一、标题标签；h
< h1>< /h1>:一个页面只能有一个，一般放置logo
h2~h6:小标题，默认大小各不一致，文本默认加粗
二、段落标签：p
< p>内容< /p>
三、加粗标签
< b>内容1< /b>
< strong>内容2< /strong>
strong标签更加强调加粗
四、文本倾斜标签：i em
< em>内容1< /em>
< i>内容2< /i>
五、下划线标签
< u>内容3< /u>
六、换行标签：br
内容1< br>内容2
单标签，使用在内容后方，将br标签后的内容2放在下一行显示
七、水平线标签：hr
不常用，用法：
内容
< hr>
八、上下标标签sup sub
< sup>< /sup>双标签，上标
a的平方：a< sup>2< /sup>
双标签，下标
水的化学式：H< sub>2< /sub>O
九、span标签
< span>内容1< /span>
将内容1单独区分出来，在css中设置样式
十、 转义字符标签
文本中需要显示字符的样子，使用：
显示空格： & nbsp;
显示左右尖括号：
左尖括号（小于号）<：& lt;
右尖括号（大于号）>：& gt;
显示人民币符号¥：& yen;
显示版权符号©：& copy;
十一、< div>< /div>
div标签：双标签，将网页划分为块的标签，类似于容器。
十二、列表：
无序列表：
代码：
< ul>
< li>内容1< /li>
< li>内容2< /li>
< li>内容3< /li>
< /ul>
内容1、2、3的前面默认自带黑色实心圆 且三个内容以上下格式排列。
有序列表：
代码：
<ol>
<li>内容1< /li>
<li>内容2</li>
<li>内容3</li>
</ol>
内容1、2、3的前面默认自带序号1、2、3 且三个内容以上下格式排列。
自定义列表：也可用于上方图片，下面补充文字进行解释。
代码：
<dl>
<dt>属性</dt>
<dd>对属性的解释</dd>
</dl>
注：1、改变内容前序号和实心圆的方式 type属性，type=""通过在双引号之间添加属性值来改变内容前的默认样式。
代码：
< ul type=“circle”>
< li>
内容
< /li>
< /ul>
代码：
<ol type="a">
<li>
内容
</li>
</ol>
2、改变内容开始的符号 start属性，start=""通过在双引号之间添加数字来改变有序列表开始的符号。
代码：<ol start="3">
<li>内容</li>
</ol>
十三、超链接：< a >< /a>
< a href="">内容< /a>
1> href=""，双引号之间填写需要跳转的地址
< a href="" target="">内容< /a>
2> target=""，双引号之间填写跳转的方式
_self或者不写，默认是在当前窗口跳转
_blank实在新窗口打开
3> 提示信息，鼠标移入时会有提示文字
< a href="" title="">内容< /a>
title=""，双引号之间填写提示文字
十四、插入图片：< img>
< img src="" alt="">
1> src=""，双引号之间填写图片的路径
2> alt=""，双引号之间填写的是提示文字，当图片加载失败时显示。
3> 提示信息，鼠标移入图片时会有提示文字
< img src=“路径” alt=“提示文字” title="">
title=""，双引号之间填写提示文字
十五、路径
相对路径：
< img src=“路径” alt="">
1>和目标在同一个教室，你去找他，即同一个目录下：
< img src="./他.jpg" alt="">
2>你在教室外，他在教室内，你去找他，即他在该目录的下一级目录下：
< img src="./教室/他.jpg" alt="">
3>你在教室内，他在教室外，你去找他，即他在该目录的上一级目录下：
< mg src="…/教室/他.jpg" alt="">
4>你在教室A内，他在教室B内，你去找他，即他在不同目录下：
< img src="…/教室A/教室B/他.jpg" alt="">
绝对路径：
不推荐！
eg:
< img src=“https://i-blog.csdnimg.cn/blog_migrate/9459bb81f1900ba0b3d9451111a32e36.png” alt="">
十六、表格：< table>< /table>
作用：显示数据！
代码：
< table>
第一行
< tr>
第一行的第一列
< td>111 < /td>
第一行的第二列
< td>222< /td>
< /tr>
第二行
< tr>
第二行的第一列
< td>3333< /td>
第二行的第二列
< td>444< /td>
< /tr>
< /table>
| 111 | 222 |
| 3333 | 444 |
tr:表格的行
td:表格的列
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
