第四章 html常见标签
html的标签非常多,我们只需要记住常用的就可以了,其他的可以查看帮助文档
4.1节 排版标签
排版标签有标题,段落,横线,换行等标签,可以对页面的文字标题段落进行合理的排版。
-
<h1>、<h2>、<h3>、<h4>、<h5><h6>
标题标签 -
<p> 文本内容 </p>
-
<hr/>
横线标签 -
<br/>
换行标签 -
特殊字符的输入
<&l
>>
=
= 
示例1:通过排版标签实现如下效果
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排版标签</title>
</head>
<body>
<h1>双11“剁手党”速度加倍,天猫769秒破500亿!看卸任后的马云,在台下笑呢</h1>
<!--span 没有具体语义的行内标签-->
<span>2019年11月11日 01:02:42来源:每日经济新闻</span>
<p>双11“剁手党”速度加倍,天猫769秒破500亿!看卸任后的马云,在台下笑呢</p>
<p>“双11”又来了,不知道你是否已经坐在电脑前摩拳擦掌,准备榨干自己的钱包呢?</p>
<p>零点一到,平日里天天喊着“剁手”的“败家”男女们就出动扫货,马云那边则忙着破纪录:</p>
<p>1分36秒,100亿 ,要知道,去年达到这个数字,用了2分05秒,前年用了3分01秒,2016年用了6分58秒……</p>
</body>
</html>
4.2 节 字体修饰标签
编写网页时,经常需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的字体的修饰标签,使文字以特殊的方式显示。
不建议用 b i s u标签修饰 字体 文本。一般 b i s u 用于字体图标修饰。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>加粗</strong>
<em>斜体</em>
<del>过时</del>
<ins>下划线</ins>
</body>
</html>
4.3 节 图像标签
html中的任何内容都是通过标签实现的,图片也不例外,具体语法:<img src="图像URL" />
;请分别用相对路径和绝对路径在页面引入一张图片。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!-- 相对路径 -->
<img src="../imgs/1.jpg" />
<!-- 绝对路径 -->
<img src="D:\java\web-workspace\day01-html\imgs\1.jpg" />
</body>
</html>
代码目录结构如下
4.4 节 超链接标签
在页面中通过点击一个按钮链接到另一个面叶的过程叫超链接。超链接标签语法如下:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href
:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
target
:用于指定链接页面的打开方式,其取值有_self
和_blank
两种,其中_self为默认值,_blank为在新窗口中打开方式。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--本地相对路径-->
<a href="./1.排版标签.html" target="_self">html入门</a>
<!--网络路径-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
4.5 节 列表标签
什么是列表?把文字或图片按照一列一列有结构的显示出来就是列表,以下页面选中的内容都是用列表做的
列表标签分为
- 有序列表
- 无序列表
- 自定义列表
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--无序列表-->
<ul>
<li>洗衣机</li>
<li>电视</li>
<li>空调</li>
<li>冰箱</li>
</ul>
<!--有序列表-->
<ol type="a">
<li>洗衣机</li>
<li>电视</li>
<li>空调</li>
<li>冰箱</li>
</ol>
<!--自定义列表-->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
</body>
</html>
<dl> 标签定义了定义列表(definition list)
<dl> 标签用于结合 <dt>(定义列表中的项目)和 <dd>(描述列表中的项目)
快件
4.6 节 表格标签
表格,开发中有很多场景都需要使用表格,主要用于数据展示,示例如下:
表格标签是个比较复杂的标签,分为三层嵌套结构table表示一个表格,tr代表行,td代表列
创建表格的时候,必须先指定table标签,再在table标签中指定tr表示一个表格的行数,然后在每个tr标签中嵌套td表示每行的列数。 th是标题列
快捷创建表格 table>{tr>td*3}*3 创建三行三列的表格
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!--table入门-->
<table border="1px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<hr />
<!--table加入样式-->
<table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
</table>
<hr />
<table border="1px" cellspacing="0" width="800px" align="center" cellpadding="7px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>爱丽丝</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>路西法</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td>莱恩</td>
<td>男</td>
<td>29</td>
</tr>
<tr>
<td colspan="3" align="center">首页 上一页 下一页 末页 当前2/5页,总共123条记录</td>
</tr>
</table>
</body>
</html>
效果:
综合案例:完成下图页面制作(提示:表格的嵌套)
4.7 节 表单标签
网站在运行过程中,客户端浏览器需要和服务器进行数据交互,首先浏览器需要收集用户的提交数据。这个时候我们就要用到表单。如下所示
表单由三部分组成,表单域、表单控件、表单提示信息三部分组成。
-
表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
-
提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
-
表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。\
``
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
姓名<input type="text" name="username" value=""><br/>
手机号<input type="text" name="mobile" value=""><br/>
密码<input type="password" name="password" value=""><br/>
性别 男
<input type="radio" name="sex" value="nan"> 女
<input type="radio" name="sex" value="nv">
<br/> 爱好: 抽烟 <input type="checkbox" name="hobby" value="抽烟"> 喝酒 <input type="checkbox" name="hobby" value="喝酒"> 烫头 <input type="checkbox" name="hobby" value="烫头">
<br/> 个人描述:
<textarea name="description"></textarea><br/> 地址:
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<br>
<input type="button" value="普通按钮">
<input type="submit" value="提交">
</form>
</body>
</html>
4.8 节 浮动框架
html 提供<iframe></iframe>
浮动框架标签,该标签的作用是提供一个局部的窗口,该局部窗口可以显示一个完整的页面;一般通过a标签链接一个页面,并通过target属性指定在局部窗口打开;
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动框架</title>
</head>
<body>
<a href="1.排版标签.html" target="myframe">在下方窗口打开</a>
<hr/>
<iframe name="myframe" width="800px" height="400px" src="2.字体修饰标签.html"></iframe>
</body>
</html>
效果:
4.9 节 特殊字符
在html中,有很多特殊字符表示着特殊的含义,常见特殊字符如下:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊字符</title>
</head>
<body>
<<br/> >
<br> &
<br> ©
<br> ™
<br> a ang="en">
<br>
</body>
</html>
效果: