H5基础知识
web基础：
-
web标准（万维网-w3c）：
结构标准：html --- 决定网页上有什么东西（能够显示什么内容）
表现标准：Css --- 决定网页上内容的布局和显示方式
行为标准：JavaScript（js） --- 决定网页上动态的效果 -
认识HTML
HTML是超文本标记语言（可以用来标记文本、图片、视频、音频、flash、按钮、输入框等内容）。
HTML不是编程语言，不会编译执行，语法错误也不会报错导致程序不能往后运行 -
HTML版本
广义的H5：指HTML5+CSS3+js
狭义的H5：HTML5 -
HTML编程
- a.HTML标记语言对应的文件的后缀，一般都是html
- b.HTML的结构
- 标签/标记
- a.双标签（常规标签）
<标签名 属性=属性值 属性=属性值>标签内容</标签名> - b.单标签（自闭合标签）
<标签名 属性=属性值 属性=属性值 />
<标签名 属性=属性值 属性=属性值>
说明：
标签名：HTML标准中固定的 （注意：<和标签名之间不能有空白>）
属性：属性和标签名之间用空格隔开， 以属性=属性值的形式存在，多个属性之间也用空格隔开
（属性可以是HTML标准中的属性，也可以是自定义的属性）
标签内容：是指开始标签和结束标签之间的内容。标签的内容可以是任何内容（可以是字符串，也可以是其他任何标签）
<a></a> --- a标签
<p></p> --- p标签
<input> --- input标签
以下是结构体
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!--
DOCTYPE：来对当前的html版本进行说明
HTML -- 默认版本 （HTML5）
-->
<!DOCTYPE HTML>
<html>
<!--head标签中的内容一般都是看不见，并且里面的子标签是固定的
title标签
meta标签
link标签
style标签
script标签
-->
<head>
<!--设置网页标题（可见）-->
<title>HTML基础</title>
<!--charset:设置编码方式-->
<meta charset="utf-8"/>
</head>
<!--body标签中的内容，负责整个网页的显示部分-->
<body>
</body>
</html>
常用文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--标题标签（h1-h6）-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--<h7>我是错误的格式</h7>-->
<!--
2.段落标签（p）
a.一个p标签对应一个段落
b.p标签的内容结束后会和其他的内容之间默认有一个空行
-->
<p>
城绿道最美水上钢桥——锦城湖亲水栈桥，将在月底全部完工。
</p>
<p>
位于成龙大道的绿道桥梁“桥屋”，在桥梁的一段加上了取自川西传统建筑中山墙元素
</p>
<!--
3.文本符号
 ； --- 空格
其他的查手册
-->
<p>
位于成龙大道的绿道桥梁“桥屋”，在桥梁的一段加上了取自川西传统建筑中山墙元素
</p>
<!--
4.换行标签（br）
-->
<p>
位于成龙大道的绿道桥梁<i>“桥屋”</i>，<br/>在桥梁的一段加上了取自川西传统建筑中山墙元素
</p>
<hr />
<!--5.超链接（a）-->
<a href="http://www.baidu.com"><strong>百度一下</strong></a>
<!--6.加粗内容（strong和b）(常用strong，有强调意思)-->
<strong>百度一下</strong>
<!--
7.文字倾斜（i/em）
<i>倾斜文字</i>
<em>倾斜文字</em>
-->
<!--8.水平线-->
<hr />
</body>
</html>
运行结果：
我是标题1
我是标题2
我是标题3
我是标题4
我是标题5
我是标题6
城绿道最美水上钢桥——锦城湖亲水栈桥，将在月底全部完工。
位于成龙大道的绿道桥梁“桥屋”，在桥梁的一段加上了取自川西传统建筑中山墙元素
位于成龙大道的绿道桥梁“桥屋”，在桥梁的一段加上了取自川西传统建筑中山墙元素
位于成龙大道的绿道桥梁“桥屋”，
在桥梁的一段加上了取自川西传统建筑中山墙元素
百度一下 百度一下
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表的学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
<!--无序列表-->
<ul>
<li>成都</li>
<li>上海</li>
<li>贵阳</li>
</ul>
<!--自定义列表-->
<dl>
<dt>城市</dt>
<dd>黔南</dd>
<dd>合肥</dd>
<dd>绵阳</dd>
<dt>省份</dt>
<dd>贵州省</dd>
<dd>安徽省</dd>
<dd>四川省</dd>
<dd>云南省</dd>
</dl>
</body>
</html>
图片和超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和超链接的学习</title>
</head>
<body>
<!--1.图片标签
a.src属性：图片地址（本地地址、网络地址）
本地地址：相对路径（相对于工程目录）
注意：本地图片需要放到工程目录下的img文件夹下
b.title属性：图片的标题（鼠标停留在图片上，隔一段时间才显示出来）
c.alt属性:图片加载失败后才会显示的提示信息
-->
<img title="IU大美女" src="img/1495291784834.jpg" />
<img alt="图片加载失败" src="https://b.bdstatic.com/boxlib/20180813/2018081314052191138798417.jpg" />
<!--2.超链接
网页上点击后可以跳转的标签都是超链接
href属性：跳转地址（本地地址、网络地址）
网络地址：跳转到对应的网页
本地地址：当前工程的其他的html文件路径
空串/#:刷新页面回到网页的顶部
选择器：让网页滚动到网页上的任意的位置
target属性：
_self（默认的）:在当前页面中打开href的地址
_blank：在新的页面中打开href的地址
a.点击文字跳转
-->
<a href="#">回到顶部</a>
<a href="03-列表.html" target="_blank">列表</a>
<a href=""></a>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
table -- 标签代表这个表格
tr -- 代表的是一行
td -- 代表的是一列
一个表格中可以有多行， 一行有多列
table属性：
1.border:设置整个表格中边框的宽度
2.width：设置整个表格的宽度
3.height：设置整个表格的高度（每一行的高度是一样的）
4.align：center -- 让整个表在其父标签中居中
5.bgcolor：背景颜色
6.cellpadding=“100”：设置内容的边距
7.cellspacing：设置边框距离
tr属性：
1.height：设置单独的某一行的高度
2.align:center -- 让当前行里面的所有的单元格中的内容居中
3.bgcolor：设置背景颜色
td属性：
1.width：设置某一列的宽度
2.align:center -- 让一个单元格中的内容居中
3.bgcolor：背景颜色
-->
<!--创建一个2*3的表格-->
<table border="" width="300" bgcolor="aqua" cellspacing="0" cellpadding="">
<!--第一行-->
<tr align="center">
<!--第一列-->
<td>姓名</td>
<!--第二列-->
<td>成绩</td>
<!--第三列-->
<td>是否留级</td>
</tr >
<tr align="center">
<td>胖总</td>
<td>101</td>
<td bgcolor="crimson">是</td>
</tr>
</table>
</body>
</html>
显示结果：
合并表格的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂表格</title>
</head>
<body>
<!--
rowspan:合并行
-->
<!--表格1-->
<table border="1" width="300" height="200">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table border="1" width="400" height="300" cellspacing="0">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspanspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
显示结果：
制作个人简历表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<h2><center>个人简历表</center></h2>
<table border="1" width="700" align="center" cellspacing="0">
<!--第一行-->
<tr align="center" height="30">
<td width="100" >求职意向</td>
<td colspan="6"></td>
</tr>
<!--第二行-->
<tr >
<td bgcolor="green" colspan="7" height="15" align="center"><strong>基本信息</strong></td>
</tr>
<!--第三行-->
<tr align="center" height="30">
<td width="100">姓名</td>
<td width="100"></td>
<td width="100">性别</td>
<td></td>
<td width="100">民族</td>
<td width="100"></td>
<td rowspan="4"><a href="http://www.mobiletrain.org/?pinzhuanbdtg=biaoti" target="_blank"><img src="img/QQ图片20180813192350.png"></a></td>
</tr>
<!--第四行-->
<tr align="center" height="30">
<td width="100">出生日期</td>
<td></td>
<td width="100">政治面貌</td>
<td></td>
<td width="100">婚否</td>
<td></td>
</tr>
<!--第五行-->
<tr align="center" height="30">
<td width="100">籍贯</td>
<td></td>
<td width="100">现所在地</td>
<td></td>
<td width="100">学历</td>
<td></td>
</tr>
<!--第六行-->
<tr align="center" height="30">
<td width="100">毕业院校</td>
<td colspan="2"></td>
<td width="100">所学专业</td>
<td colspan="2"></td>
</tr>
<!--第七行-->
<tr align="center" height="30">
<td width="100">电子邮件</td>
<td colspan="2"></td>
<td width="100">手机号码</td>
<td colspan="3"></td>
</tr>
<!--第八行-->
<tr>
<td bgcolor="green" colspan="7" height="15" align="center"><strong>教育经历</strong></td>
</tr>
<!--第九行-->
<tr height="30" align="center">
<td colspan="2" >起止时间</td>
<td colspan="2" >毕业院校/教育机构</td>
<td colspan="3" >专业课程</td>
</tr>
<!--第十行-->
<tr height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十一行-->
<tr align="center" height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十二行-->
<tr align="center" height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十三行-->
<tr align="center" height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十四行-->
<tr >
<td bgcolor="green" colspan="7" height="15" align="center"><strong>工作经历</strong></td>
</tr>
<!--第十五行-->
<tr align="center" height="30">
<td colspan="2" >起止时间</td>
<td colspan="2" >公司名称及职位</td>
<td colspan="3" >工作内容</td>
</tr>
<!--第十六行-->
<tr align="center" height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十七行-->
<tr align="center" height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十八行-->
<tr align="center" height="30">
<td colspan="2" ></td>
<td colspan="2" ></td>
<td colspan="3" ></td>
</tr>
<!--第十九行-->
<tr align="center" height="90">
<td>技能/爱好</td>
<td colspan="6"></td>
</tr>
<!--第二十行-->
<tr align="center" height="90">
<td>自我评价</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
显示结果：
网友评论