基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>harvey</title>
</head>
<body>
hello world,hello world2
<!--h是控制字体的块级标签-->
<h1>hello world</h1>
<h2>hello world</h2>
<!--块级标签永远独占一行-->
<h3>hello world</h3><h4>hello world</h4><h5>hello world</h5>
<h6>hello world</h6>
<h2>咏鹅</h2>
<!--块级标签p，段落字体，行间隔大-->
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
<!--块级标签br，行间隔小，自闭合标签-->
鹅鹅鹅</br>
曲项向天歌</br>
白毛浮绿水</br>
红掌拨清波</br>
<!--内联标签strong，强调文本，可以自定义强调方式，默认为加粗-->
<strong>飞流直下三千尺</strong>
<!--内联标签b，加粗-->
<b>飞流直下三千尺</b>
<!--内联标签strike，加删除线-->
<strike>hello </strike>
<!--内联标签em，强调文本，定义背景颜色，默认斜体-->
<em style="background-color: firebrick">斜体</em>
<!--2是3的下角标-->
3<sub>2</sub>
<!--2是3的上角标-->
3<sup>2</sup>
<!--定义水平线-->
<hr>
<!--设置字体颜色、背景颜色、占用的尺寸，此处单位是像素，但仍需要遵循h1的格式-->
<h1 style="color: green; background-color: aquamarine;height: 100px;width: 100px">hello h1</h1>
<!--块级标签div，对文本不做任意改变，好处是div包住的文本拥有了无限的可能，而且可以随意改变颜色不受标签本身限制-->
<div style="color: green; background-color: aquamarine;height: 100px;width: 50%;font-size: 40px;text-align: center">hello</div>
<!--内联标签span，背景颜色只占字体长度的那一部分-->
<span style="background-color: rebeccapurple">hell span</span>
<!--块级标签h2，无论文字长度多长背景颜色都会占一整行-->
<h2 style="background-color: rebeccapurple;">h2h2h2h2h2hh</h2><p style="background-color:yellow">ppppppp</p>
<!--  = 空格,< = <,> = >,© = ©,® = ®-->
块级标签 内联标签
too<hello
too>hello
©®
<!--标签嵌套，一般块级标签之间同列，内联标签之间同列-->
<dvi>
<p>help</p>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</dvi>
<!--不要混合两种标签嵌套-->
<span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</span>
</body>
</html>img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--src是路径，alt是当图片解释失败时显示的描述，title是浮标-->
<!--id是该标签的唯一证明方式，必须在返回顶部时就可以用到id-->
<img id="abc" src="C:\Users\Administrator\Pictures\蜡笔小新.gif" alt="小新" title="小新" width="200px" height="200px">
<!--超链接，href是目标网址，点击图片可以将当前页跳转到该网址，target属性可以使目标网址在一个新的标签页中打开-->
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank"><img src="C:\Users\Administrator\Pictures\蜡笔小新.gif" alt=""></a>
<!--有序 list-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--定义大标题和小标题 list -->
<dl>
<dt>第一章</dt>
<dd>第一节</dd>
<dd>第二节</dd>
<dd>第三节</dd>
</dl>
<!--无序 list，前面是实心圆点-->
<ul>
<li>111</li>
<li>22</li>
<li>333</li>
</ul>
<!--返回顶部，此处方法为返回到id为abc的标签处，即本页第一个标签-->
<a href="#abc">返回顶部</a>
</body>
</html>表单标签form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<!--数据都上传到目标路径了，此处当作是index文件，index文件下一定有一个函数专门来接受处理这些数据的-->
<!--上传方式有get和post，get会显示上传内容，一般不使用。上传类型为一部分一部分上传-->
<form action="http://127.0.0.1 8080/index" method="post" enctype="multipart/form-data">
<!--内联标签input属性：text文本，password密文，readonly只读只能查看不允许输入-->
<p>姓名<input type="text" name="username"></p>
<p>密码<input type="password" name="password"></p>
<!--checkbox多选类型,当name相同时，value可以取其一也可以都取,给服务端上传的形式为{hobby:['音乐','电影']}-->
<p>爱好 音乐<input type="checkbox" name="hobby" value="音乐">电影<input type="checkbox" name="hobby" value="电影"></p>
<!--radio单选类型，当name相同时，value只能取其一，给服务端上传的形式为{gender:['male/female']}-->
<p>性别 男<input type="radio" name="gender" value="male">女<input type="radio" name="gender" value="female"></p>
<!--可以设置多选，并且同时最多显示2个选项，其他选项需要下拉查看。selected为默认选-->
省<select name="province" multiple size="2">
<optgroup label="中国">
<option value="shannxi">陕西省</option>
<option value="hebei">河北省</option>
<option value="sichuan" selected="selected">四川省</option>
<option value="zhejiang">浙江省</option>
</optgroup>
</select>
宽的文本域，可以来调节长和宽
简介<textarea name="desc" rows="10" cols="20"></textarea>
<!--file属性，上传文件，name属性不能为空-->
<p><input type="file" name="上传文件"></p>
<!--submit可以将数据封装成键值对的形式打包给server -->
<p><input type="submit" value="提交注册"></p>
<!--button只是按钮，不会触发任何操作-->
<p><input type="button" value="提交注册"></p>
<!--reset清空输入的内容按钮-->
<input type="reset" value="重置"></p>
</form>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--border外边框，cellpadding每一项的表格框大小，cellspacing每一项表格框间距-->
<table border="1px" cellpadding="5px" cellspacing="5px">
<thead>
<tr>
<td>周一</td>
<td>周二</td>
<td>周三</td>
</tr>
</thead>
<tbody>
<tr>
<!--此项占两行-->
<th rowspan="2">体育</th>
<th>英语</th>
<th>化学</th>
</tr>
<tr>
<th>英语</th>
<th>化学</th>
</tr>
<tr>
<!--此项占两列-->
<td>python</td>
<td colspan="2">go</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
