基本语法
<!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>
常用标签
1、表格
用法
<table>
<tr>
<td></td>
...
<td></td>
</tr>
<tr>
<td></td>
...
<td></td>
</tr>
</table>
代码实操
<!-- <tr> </tr> 一行 -->
<!-- <td> </td> 一列 -->
<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>
代码结果
2、超链接
用法
<a href="链接地址" >文本内容</a>
代码实操
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>
target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
美女!
</body>
</html>
代码结果
点击文本,跳转页面
插入图片
用法
<img alt="加载失败显示内容" src="图片链接地址">
代码实操
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="加载图片失败" src="img/a.jpg">
</body>
</html>
代码结果
列表
用法
<!-- 有序-->
<ul>
<li>..</li>
<li>..</li>
</ul>
<!-- 无序-->
<ol>
<li>..</li>
<li>..</li>
</ol>
代码实操
<!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>
代码结果
标题和段落
用法
<h1>..</h1> 最大标题
<h2>..</h2> .
<h3>..</h3> .
<h4>..</h4> .
<h5>..</h5> .
<h6>..</h6> 最小标题
<p>...</p> 占一行
代码实操
<!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>
代码结果