HTML 语法练习
1. 常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
<font size="8" color="red">这是标题</font>
<font size="7" color="red">这是标题</font>
<!-- 这两句的字体大小一样，因为字号只能从1-7 -->
</body>
</html>
2. 常用标签
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>网页标题</title>
<!---这是一些可选标签-->
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Ljm">
<meta name="Keywords" content="Java">
<meta name="Description" content="Master of IT and ITM">
<meta charset="utf-8">
</head>
<!-- 页面的主体部分 -->
<body>
<!-- font 字体标签
标签自带的属性 属性值使用双引号引起来
color="red" 字体颜色 值可以写 颜色的英文单词，也可以使用16进制颜色值 #ff00ff
size="7" 取值 1---7
face="楷体"
-->
<font color="#ffffff" size="7" face="楷体">a</font> <!-- 白色 -->
<font color="#000000" size="7" face="楷体">b</font>
<font color="#990000" size="7" face="楷体">b</font>
<font color="#009900" size="7" face="楷体">a</font>
<font color="#000099" size="7" face="楷体">b</font>
<font color="red" size="7" face="楷体">a</font>
<br>
<b>文字加粗</b>
<br>
<i>文字倾斜</i>
<br>
<u>文字加有下划线</u>
<br>
<s>文字带有删除线</s>
</body>
</html>
3. 常用标签
<b>国内简讯：</b> <!-- 加粗 -->
<!-- 段落标签 空格 -->
<p>
请把我的歌带回你的家，请把你的微笑留下。
</p>
4. 常用标签
<!-- center 居中 -->
<center>
<font size="7" color="red">这是一行文字</font>
<br>
<font size="7" color="red">这是一行文字</font>
<br>
<font size="7" color="red">这是一行文字</font>
<br>
</center>
<!-- pre 保持原有格式 -->
<pre>
春江花月夜
作者：张若虚
春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明！
江流宛转绕芳甸，月照花林皆似霰；
空里流霜不觉飞，汀上白沙看不见。
江天一色无纤尘，皎皎空中孤月轮。
江畔何人初见月？江月何年初照人？
人生代代无穷已，江月年年望相似。
</pre>
<kbd>用粗体等宽字体显示文字</kbd>
<br>
<var>用较小的固定宽度显示字体</var>
<br>
默认字号
<br>
<big>比默认字号大一号</big>
<br>
<small>比默认字号小一号</small>
<br>
<big>H<sub>2</sub>O</big>
<br>
<font size="7" color="">2<sup>3</sup></font>
5. 常用标签
<h1>最大的标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
6. 背景标签
<!-- bgcolor="aquamarine" 页面的背景颜色
background="img/coder10.jpeg" 背景图片
-->
<body bgcolor="aquamarine" background="img/coder10.jpeg">
背景颜色不展示，只展示背景图片
7. 分隔线
<body>
<h1 align="center">这是一个文章标题</h1>
<!--
size="1" 粗细
width="50%" 宽度
align="center" 对齐方式 left center right
noshade="noshade" 不要阴影
color="blue" 线的颜色
-->
<hr size="1" width="50%" align="center" noshade="noshade" color="blue">
<h2>常用的HTML标签的介绍</h2>
<hr size="1" width="100%" align="center" noshade="noshade" color="gray">
</body>
8. 图片标签
<center>
<!-- alt是当图片展示失败时所展示的文字-->
<img src="img/u11251389372721875248fm26gp0.jpg" border="2" alt="图片加载失败" title="美女">
</center>
9. 列表标签
<!-- 实心圆 -->
<ul type="disc">
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>
一个一个列表项
<ul>
<li>二级列表项</li>
<li>二级列表项</li>
<li>二级列表项</li>
<li>二级列表项</li>
<li>二级列表项</li>
<li>二级列表项</li>
<li>二级列表项</li>
</ul>
</li>
</ul>
<h1>有序列表</h1>
<ol type="1" start="0">
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
<li>一个一个列表项</li>
</ol>
<h1>自定义列表</h1>
<dl>
<dt>自定义列表的标题</dt>
<dd>自定义列表的描述</dd>
<dt>自定义列表的标题</dt>
<dd>自定义列表的描述</dd>
<dt>自定义列表的标题</dt>
<dd>自定义列表的描述</dd>
<dt>自定义列表的标题</dt>
<dd>自定义列表的描述</dd>
</dl>
10. 超链接标签
<!--
href 你要打开的页面路径
target="_self" 在自身窗口打开
target="_blank" 在新窗口打开
-->
<a href="https://www.sina.com.cn/" target="_self">进入新浪</a>
<a href="http://www.163.com" target="_blank">进入网易</a>
<a href="index.html">我的首页</a>
11. 锚点标签
<!-- 顶部的锚点 -->
<a name="mytop"></a> <!-- 标记的顶部位置 -->
<a href="#mybottom">跳到底部</a> <!-- 点击按钮 -->
<p>kajdlakjdlakjdla</p>
<a href="#mytop">跳到顶部</a> <!-- 点击按钮 -->
<!-- 定义底部锚点 -->
<a name="mybottom"></a> <!-- 标记的尾部位置 -->
12. 表格标签
<!--
align="center" 表格的对齐方式
border="1" 表格的边框粗细
bordercolor="red" 边框颜色
cellspacing="0" 边框的间隙
cellpadding="120" 单元格和内容的间距
width="500px"
height="400px"
bgcolor="aquamarine" 背景颜色
background="img/u11251389372721875248fm26gp0.jpg" 背景图片
-->
<table background="img/u11251389372721875248fm26gp0.jpg" bgcolor="aquamarine" align="center" border="1"
bordercolor="red" cellspacing="0" cellpadding="2" width="500px" height="400px">
<caption>
<h3>学生信息表</h3>
</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机</th>
</tr>
<tr align="center" bgcolor="yellow">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>13896369856</td>
</tr>
<tr align="center">
<td>1</td>
<td bgcolor="bisque">张三</td>
<td>23</td>
<td>13896369856</td>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>13896369856</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
<td>13896369856</td>
</tr>
<tr>
<td>1</td>
<td align="center">张三</td>
<td>23</td>
<td>13896369856</td>
</tr>
</table>
13. 合并单元格
<table border="1" cellspacing="0" cellpadding="5" align="center" bordercolor="red" width="65%" height="600px">
<tr>
<!-- colspan="2" 左右合并 -->
<td colspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="3">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<!-- rowspan="2" 上下合并 -->
<td rowspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="3">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<table align="center" border="1" cellspacing="0" cellpadding="" width="60%" height="500px">
<tr>
<td rowspan="5">商品名称</td>
<td>Data</td>
</tr>
<tr>
<td>商品价格：</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr height="90px">
<td colspan="2" align="right">
<button type="button" style="border: none;background-color: aquamarine;width: 150px;height:50px;">加入购物车</button>
</td>
</tr>
</table>
14. 表格嵌套
<table align="center" border="1" cellspacing="0" cellpadding="" width="60%" height="500px">
<tr>
<!-- 表格嵌套，可以td里面，嵌套表格 -->
<td rowspan="5">
<table border="1" cellspacing="0" cellpadding="" width="100%" height="100%">
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</td>
<td>Data</td>
</tr>
<tr>
<td>商品价格：</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr height="90px">
<td colspan="2" align="right">
<button type="button"
style="border: none;background-color: aquamarine;width: 150px;height:50px;">加入购物车</button>
</td>
</tr>
</table>
15. 表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>
<h3>用户注册</h3>
<!--
表单：用户和服务器进行数据的交互
action="#" 后台地址
method="get" 提交方式 get请求，提交的参数会拼接在url后面 格式 键=值&键=值
eg. 0.0.1:8848/20211224-HTML-下午/7.表单标签.html?username=zhangsan&password=123456&birthday=2021-11-30&photo=westos.png&num=1&sex=1&hobby=lq&hobby=zq&xueli=daxue&desc=asfasfasdfasfasf#
post 提交参数在请求体里面
-->
<form action="#" method="get">
<!-- 每个表单项目，必须指定 name属性，因为name属性的值，作为键
required="required" 不能为空
maxlength="10" 最大10格字符
-->
用户名：<input type="text" id="" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10"/>
<br>
密码：<input type="password" id="" name="password" value="" placeholder="请输入密码" required="required" maxlength="6"/>
<br>
生日：<input type="date" name="birthday" id="" value="" />
<br>
图像：<input type="file" name="photo" id="" value="" />
<br>
你有几个好朋友：<input type="number" name="num" id="" value="1" min="1" max="10" start="1" />
<br>
<!-- checked="checked" 默认选中 -->
性别: <input type="radio" id="" name="sex" value="1" checked="checked" />男
<input type="radio" id="" name="sex" value="0" />女
<!-- <label for="zx">中性</label> 当用点击文字时也能选中 -->
<input type="radio" name="sex" id="zx" value="4" />
<label for="zx">中性</label>
<br>
<!-- checked="checked" 默认选中 -->
爱好： <input type="checkbox" name="hobby" id="" value="lq" checked="checked" />篮球
<input type="checkbox" name="hobby" id="" value="zq" checked="checked" />足球
<input type="checkbox" name="hobby" id="" value="pq" />排球
<input type="checkbox" name="hobby" id="pp" value="ppq" /><label for="pp">乒乓球</label>
<br>
学历：<select name="xueli">
<option value="">--请选择学历--</option>
<option value="youer">幼儿园</option>
<option value="xiaoxue">小学</option>
<option value="zhongxue">中学</option>
<!-- selected="selected"默认选中 -->
<option value="daxue" selected="selected">大学</option>
</select>
<br>
备注：<textarea rows="20" cols="30" name="desc"></textarea>
<br>
<br>
<br>
<input type="submit" value="注册" />
</form>
</center>
</body>
</html>
16. 框架标签
<!-- frameset 与body 不要同时用 -->
<!-- frameset 不常用 -->
<frameset rows="25%,*">
<frame src="top.html" noresize="noresize">
<frameset cols="25%,*">
<frame src="left.html" noresize="noresize" >
<frame src="rigth.html" name="myright" noresize="noresize">
</frameset>
</frameset>
17. 多媒体标签
<embed src="mp3/唱歌的孩子%20-%20王峥嵘.mp3" autostart="true" loop="true"/>
<br>
<embed src="mp4/mi.mp4" autostart="true" loop="true"/>
<br>
<audio src="mp3/唱歌的孩子%20-%20王峥嵘.mp3" >
</audio>
<br>
<video width="600" height="800" src="mp4/mi.mp4" controls="controls">
</video>
<br>
<video width="600" height="800" src="mp4/video.mp4" controls="controls">
</video>
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
