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=“” 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:表格的列