1、HTML 概述
（1）超文本标记语言：Hyper Text Markup Language
（2）HTML文件由一组标签构成，经过浏览器解析之后可以显示网页内容。
（3）HTML文档的构成
2、基本语法规范等
基本语法规范及具体的使用见工程：模板 -> Web01_UI
3、HTML 语法
grammar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- ①标签不能交叉嵌套 -->
正确：<p><i>早安，Alex</i></p>
错误：<p><i>早安，Alex</p></i>
<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<p>早安，Alex</p>
错误：<p>早安，Alex
<!-- ii.没有文本内容的标签： -->
正确：aaaaaa<br />bbbbbbbb
错误：aaaaaa<br>bbbbbbbb
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，Alex</font>
错误：<font color>早安，Alex</font>
错误：<font color=red>早安，Alex</font>
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 -->
错误：<!-- 注释内容<!-- 嵌套的注释 --> 溢出的注释 -->
</body>
</html>
4、表格
table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" align="center" width="80%">
<tr><th>姓名</th><th>位置</th><th>公司</th><th>财富</th></tr>
<tr>
<td>王健林</td>
<td>北京</td>
<td>万达</td>
<td>2211</td>
</tr>
<tr>
<td>马云</td>
<td>杭州</td>
<td>阿里巴巴</td>
<td>1889</td>
</tr>
<tr>
<td>马化腾</td>
<td>深圳</td>
<td>腾讯</td>
<td>1642</td>
</tr>
<tr>
<td>王卫</td>
<td>深圳</td>
<td>顺丰速运</td>
<td>1240</td>
</tr>
</table>
</body>
</html>
5、超链接
（1）a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="pages/target.html">跳转到目标页面，目标页面有美女！</a>
</body>
</html>
（2）target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
美女！
</body>
</html>
6、表单
（1）form 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 创建表单 -->
<!-- 使用form标签定义表单
使用action属性指定提交数据的位置
使用method属性指定提交数据的方式
GET：会将提交的数据附着在URL地址后面，在浏览器地址栏可以看到
POST：不会提交的数据附着在URL地址后面，在浏览器地址栏看不到
-->
<form action="target.html" method="post">
用户名：<input type="text" name="userName" /><br /><br />
密码：<input type="password" name="password" /><br /><br />
<!-- 提交按钮：type="submit"，使用value属性指定它是页面上显示的文字 -->
<input type="submit" value="登录" />
</form>
</body>
</html>
（2）文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- file:///D:/workspace/test/Web02_UI/WebContent/04.表单/target.html?username=Tom&email=tom@126.com&password=abc123&other=%E6%97%A0-->
<form action="target.html" method="get">
用户名：<input type="text" name="username" /><br /><br />
邮箱：<input type="text" name="email" /><br /><br />
密码：<input type="text" name="password" /><br /><br />
其他：<input type="text" name="other" /><br /><br />
<input type="submit" value="登录" />
<br /><br />
</form>
</body>
</html>
（3）密码框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="target.html" method="get">
密码：<input type="password" name="password" /><br /><br />
<input type="submit" value="登录" />
<br /><br />
</form>
</body>
</html>
（4）单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="target.html" method="get">
性别：
<input type="radio" name="gender" value="male" />男生
<input type="radio" name="gender" checked="checked" value="female" />女生
<input type="radio" name="gender" value="eastSuccess" />东方不败
<br /><br />
<input type="submit" value="提交" />
<br /><br />
</form>
</body>
</html>
（5）多选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="target.html" method="get">
你喜欢的足球队<br /><br />
巴西<input type="checkbox" name="soccerTeam" value="Brazil" />
德国<input type="checkbox" name="soccerTeam" value="German" />
荷兰<input type="checkbox" name="soccerTeam" value="Holland" />
<br /><br />
<input type="submit" value="提交" />
<br /><br />
</form>
</body>
</html>
target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Target Page...
</body>
</html>
7、插入图片
image.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="加载图片失败" src="img/a.jpg">
</body>
</html>
8、列表
List.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 在这里创建无序列表 -->
<ul>
<li>火影忍者</li>
<li>死神</li>
<li>海贼王</li>
<li>名侦探柯南</li>
<li>网球王子</li>
</ul>
<br /><br />
<!-- 在这里创建有序列表 -->
<ol>
<li>漩涡鸣人</li>
<li>黑崎一护</li>
<li>路飞</li>
<li>柯南</li>
<li>越前龙马</li>
</ol>
</body>
</html>
9、标题段落
article.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 在这里创建标题 -->
<h1>江畔独步寻花</h1>
<h3>唐•杜甫</h3>
<!-- 在这里创建段落 -->
<p>黄四娘家花满蹊</p>
<p>千朵万朵压枝低</p>
<p>留连戏蝶时时舞</p>
<p>自在娇莺恰恰啼</p>
</body>
</html>
尖叫提示：还有许多没有讲到，大家可以看W3School，讲到的这些都是最常用的
网友评论