目录
(一) HTML5基础
1. HTML简介
`HTML(Hyper Text Markup Language)是用来描述网页的一种语言，它是一种超文本标记语言；
2. 网页的基本标签
标记在有的地方称为标签或者元素
1）标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不同等级的标题标签对比</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
2）段落标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起</p>
<p>有勇气就会有奇迹</p>
</body>
</html>
3）换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>换行标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<p>
北京欢迎你，有梦想谁都了不起！<br/>
有勇气就会有奇迹。<br>
北京欢迎你，为你开天辟地<br>
流动中的魅力充满朝气。<br/>
北京欢迎你，在太阳下分享呼吸<br/>
在黄土地刷新成绩。<br/>
北京欢迎你，像音乐感动你</br>
让我们都加油去超越自己。
<!--
在HTML中，<br>标签是一个空标签(没有元素内容)，也可以叫单标签(没有结束标签);
它有3中写法都不会报错，即<br>、<br/>、</br>;虽然3种写法都可以，但建议写成
<br>或者<br/>更严谨。
在XHTML中，必须写成<br/>或者<br></br>。
-->
</p>
</body>
</html>
4）水平线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平线标签的应用</title>
</head>
<body>
<h1>北京欢迎你</h1>
<hr/>
<p>
北京欢迎你，有梦想谁都了不起！<br/>
有勇气就会有奇迹。<br>
北京欢迎你，为你开天辟地<br>
流动中的魅力充满朝气。<br/>
北京欢迎你，在太阳下分享呼吸<br/>
在黄土地刷新成绩。<br/>
北京欢迎你，像音乐感动你</br>
让我们都加油去超越自己。
</p>
</body>
</html>
5）字体样式标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式标签的应用</title>
</head>
<body>
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂<br/>
<em>1918</em>年赴美国克拉大学学习银行学<br/>
<em>1921</em>年开始创作新诗<br/>
<em>1922</em>年返国后在报刊上发表大量诗文<br/>
<em>1927</em>年参加创办新月书店<br/>
<em>1931</em>年有南京乘飞机到北平，飞机失事，因而遇难<br/>
</p>
</body>
</html>
6）注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注释和特殊符号</title>
</head>
<body>
<!--
由于大于号(>)、小于号(<)等已经作为HTML的语法符号，因此，如果要在页面上显示这些特殊符号，就必须使用相应的
HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。如下:
空格 ————
引号 ———— "
大于号 ———— >
小于号 ———— <
版权符号 ———— ©
-->
<><br/>
" ©<br/>
" ©
</body>
</html>
3. 图像标签
< img src=“图像地址” alt=“图像的替代文字” title=“鼠标悬停提示文字” width=“图片宽度” height=“图片高度” />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签的应用</title>
</head>
<body>
<img src="../images/1.jpg" alt="V字仇杀队" title="微信头像" width="160" height="160">
</body>
</html>
鼠标悬停在图像上时，显示title属性的内容
src路径错误情况下，显示alt属性的内容
4. 超链接标签
< a href=“链接地址” target=“目标窗口位置”>链接文本或图像< /a >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接的应用</title>
</head>
<body>
<!--图像超链接-->
<!--相对路径-->
<a href="Demo8.html" target="_blank"><img src="../images/1.jpg" height="100" width="100"></a>
<!--文本超链接-->
<!--绝对路径-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--根据链接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径-->
</body>
</html>
(二) 列表、表格与媒体元素
1. 列表
1）无序列表
遵循W3C标准，< ul >标签里面只能嵌套< li > 标签，不能嵌套其他标签；而< li >标签里面可以嵌套任意标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>海贼王</li>
<li>秦时明月</li>
<li>大秦帝国</li>
<li>爱情公寓</li>
<li>亮剑</li>
</ul>
</body>
</html>
2）有序列表
同无需列表一样，< ol >标签里面只能嵌套< li > 标签，不能嵌套其他标签； 而< li >标签里面可以嵌套任意标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>海贼王</li>
<li>秦时明月</li>
<li>大秦帝国</li>
<li>爱情公寓</li>
<li>亮剑</li>
</ol>
</body>
</html>
3）定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列表</title>
</head>
<body>
<dl>
<dt>电视剧</dt>
<dd>海贼王</dd>
<dd>爱情公寓</dd>
<dd>亮剑</dd>
<dt>角色</dt>
<dd>索隆</dd>
<dd>张伟</dd>
<dd>楚云飞</dd>
</dl>
</body>
</html>
2. 表格
HTML5的规范里已经把< table >标签的border属性废除了，本处使用只是为了让大家看到每个单元格的位置
- colspan: 跨列
- rowspan: 跨行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>120</td>
</tr>
<tr>
<td>数学</td>
<td>150</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>130</td>
</tr>
<tr>
<td>数学</td>
<td>140</td>
</tr>
</table>
</body>
</html>
3. 媒体元素
1）视频元素
controls属性用于提供播放、暂停、音量控件
使用source标签是为了解决video标签的src属性只能链接一种格式的视频，source元素嵌套在video里面，并且可以出现多次，每个source元素对应一种格式的视频，这样浏览器会自动选择第一个可以识别的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频元素</title>
</head>
<body>
<video src="../video/1.ogg" controls="controls" height="500" width="300">
你的浏览器不支持Video元素
</video>
<video height="500" width="300" controls>
<source src="../video/1.mp4">
<source src="../video/1.webm">
<source src="../video/1.ogg">
</video>
</body>
</html>
2）音频元素
音频元素和视频元素的语法及使用基本相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频元素</title>
</head>
<body>
<audio src="../audio/1.mp3" controls="controls">
你的浏览器不支持audio元素
</audio>
<audio controls>
<source src="../audio/2.mp3">
<source src="../audio/2.wav">
<source src="../audio/2.ogg">
</audio>
</body>
</html>
(三) 表单
表单是实现用户和网页之间信息交互的基础，通过在网页中添加表单可以实现如账号注册、用户登录和提交资料等交互动能。通俗的讲，表单就是一个将用户信息组织起来的容器，将需要用户填写的内容放置在表单容器中，当用户点击"提交"按钮时，表单会将数据统一发送给服务器。为了方便用户操作，表单提供了多种表单元素。
1. 表单元素
在HTML5中，使用< form > 标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签；其他表单标签需要在它的范围内才有效。
<form method="get" action="">
<!--文本框-->
<!--size属性用于指定文本框的长度，而maxlength属性用于指定文本框输入的数据长度,以字符为单位-->
登录名:<input type="text" name="username" size="20" maxlength="5" /><br/>
<!--密码框-->
密码框:<input type="password" name="pwd" size="20" maxlength="10"><br/>
<!--单选按钮-->
<!--单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称-->
性别:<input type="radio" name="sex" value="0" checked>男
<input type="radio" name="sex" value="1">女<br/>
<!--复选框-->
爱好:<input type="checkbox" name="interest" value="运动">运动
<input type="checkbox" name="interest" value="聊天">聊天
<input type="checkbox" name="interest" value="玩游戏">玩游戏<br/>
<!--列表框-->
学历:
<select>
<option>专科</option>
<option selected>本科</option>
<option>研究生</option>
</select><br/>
<!--多行文本域-->
简介:<textarea rows="5" cols="40">自我评价</textarea><br/>
<!--文件域-->
<input type="file" name="files"><br/>
<!--按钮-->
<!--value属性用来设置显示在按钮上的文字-->
<input type="reset" name="reset" value="重置">
<input type="submit" name="submit" value="提交">
<input type="button" name="button" value="点击" onclick="alert(this.value)">
</form>
2. 表单验证常用属性
- placeholder 描述文本框期待用户输入的内容
- required 规定文本框内容不能为空
- pattern 验证表单元素的格式是否合法
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
