HTML标签
程序员文章站
2022-04-29 23:18:34
...
1.1 标签的分类
1.1.1 按主体分类：
- 带主体的标签：如<font>数据 </font>
- 不带主体的标签：如<br/> 换行标签
判断一个表是否需要带主体，你可以思考该标签是否需要封装数据，如果需要封装数据，那么该标签必定带主体，如果不需要封装数据，那么就不需要带主体。
2.1.2 按行分类：
- 如果一个标签的内容需要独立占一行，我们称作为块标签。 比如：<h1>标题标签
- 如果一个标签不需要独立占一行，我们称作为内联标签。比如：<font>字体标签
2.2 文本标签：
| 标签名 | 标签描述 | 常用属性 |
| h1~h6 | 标题标签，所有标题都是加粗的，1表示1级标题，字最大，6级标题最小 |
属性是在开始标签里面的 align:设置标题对齐方式 center:居中、right：右对齐、left：左对齐 |
| hr | 画一条水平线 | width：线长度 size: 粗细 color:颜色 |
| b | 对字体加粗，与strong标签功能相同 | |
| i | 设置字体为斜体 | |
| br |
换行 |
|
| font | 字体（在HTML5中已经淘汰了） | color：颜色 size：大小 face：指定字体的名字 |
| p | 分段，每个p标签就是一个段落，没有首行缩进。段落之间有间隔 |
如果要缩进，使用 ；半角空格也可全角空格 title：鼠标移上去以后，显示文字提示信息 |
2.3 块标签与内联标签：
- div：块标签，需要独立占一行。
- span:内联标签，不需要独立占一行。
- 案例文字素材
World Wide Web Consortium</div>万维网联盟创建于1994年
- 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<div style="background-color: red">World Wide Web Consortium</div>
万维网联盟创建于1994年
<span style="background-color: aqua">World Wide Web Consortium</span>
万维网联盟创建于1994年
</body>
</html>2.4 列表标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
今天早上吃什么?
<ol style="color: black" type="A">
<li>
油条
</li>
<li>
豆浆
</li>
<li>
稀饭
</li>
</ol>
明天早上吃什么？
<ul style="color: black" type="disc">
<li>面</li>
<li>糯米鸡</li>
</ul>
</body>
</html>2.5 实体字符
2.5.1 为什么需要使用到实体字符：
- 在HTML页面中，有些字符是有着特殊含义的字符，如果需要在网页上显示这种特殊的字符，那么就需要使用到该特殊字符对应的实体字符。比如：< 小于号 > 大于号
2.5.2 实体字符列表：
注释：实体名称对大小写敏感！
2.5.3 常用的实体字符：
| 特殊的字符 | 对应的实体字符 |
| < | < |
| > | > |
| 空格 | |
| ￥ |
¥ |
| © 版本所有 | © |
| ® | ® |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<h1>标签是标题标签<br/>
百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。
1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，
抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。<br/>
青岛啤酒：¥16元一瓶。<br/>
《java从入门到放弃》:© XXX版权所有<br/>
本次活动解释权归XXX公司所有：®XXX有限公司
</body>
</html>2.6 图像标签（img）
2.6.1 标签的作用：
在网页中显示图片。
2.6.2 常用的属性：
| 属性名 | 作用 |
| src | source图片文件地址，注：不能使用客户端本地地址，如：c:/aaa.jpg |
| width | 图片宽度，如果只指定宽和高，另一个参数会等比例缩放 |
| height | 图片高度 |
| alt | 如果图片丢失，图片显示的文字 |
| title | 如果鼠标移到图片上，显示提示文字信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<img src="img/11.jpg" height="500" width="200" title="这个是一辆豪车" />
</body>
</html>2.6.4 图像使用的案例：
- 需求：制作家用电器排行榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<h3>家用电器排行榜</h3>
<img src="lib/tv01.jpg">创维42E5CHR 42英寸 ¥2799.00
<hr color="red" width="100%" align="left"/>
<img src="lib/tv02.jpg">海信LED42EC260JD 42英寸 ¥2848.00
<hr color="red" width="100%" align="left"/>
<img src="lib/tv03.jpg">索尼KLV-40R476A 40英寸 ¥3599.00
<hr color="red" width="100%" align="left"/>
<img src="lib/tv04.jpg"/>创维42E83RE 42英寸 ¥3699.00
<hr color="red" width="100%" align="left"/>
<img src="lib/tv05.jpg"/>创维42E7BRE 42英寸 ¥3299.00
<hr color="red" width="100%" align="left"/>
</body>
</html>
2.7 超链接标签（a标签）
2.7.1 作用：
- 跳转页面
- 锚点链接
- **程序
2.7.2 常用属性：
| 属性名 | 作用 |
| href | 指定要跳转到的页面地址 |
| title | 鼠标移上去以后，显示的文字 |
| target |
_self 默认值，在当前的窗体中打开页面 _blank 在新的窗体中打开页面 |
2.7.3 基本的使用
- 锚点定位：
- 先设置一个锚点。 <a name="锚点的名字">
- 定位到锚点上。 <a href=“#锚点的名字”>
2.7.3.1 跳转页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<!--跳转到指定的互联网页面上-->
<a href="https://www.csdn.net/" title="CSDN网站" target="_blank">CSDN</a>
<!--跳转到本地页面上-->
<a href="文本标签"></a><br/>
</body>
</html>2.7.3.2 锚点定位：
- 操作的步骤：
- 先设置一个锚点 <a name="锚点的名字"><a/>
- 链接锚点 <a href="#锚点的名字"><a/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<!--锚点定位-->
<a name="top" style="color:red">顶部</a>
CSDN (Chinese Software Developer Network) 创立于1999年，是中国的IT社区和服务平台，
为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。
拥有超过3000万注册会员（其中活跃会员800万）、50万注册企业及合作伙伴.旗下拥有：全球最大中文IT技术社区：csdn、权威IT专业技术期刊：《程序员》杂志、IT人力资源服务：
科锐福克斯、IT技术学习平台：乐知教育、代码托管+社交编程平台：code、移动开发工具和服务聚合平台：mobilehub、IT专属求职网站：job、中文软件外包和项目交易平台：
csto、程序员深度交流社区：iteye、中国最大技术管理者平台：CTO俱乐部、云计算产业人士沙龙：云计算俱乐部、面向移动开发者的技术组织：移动开发者俱乐部、面向全国大学生的技术组织：高校俱乐部。
<a href="#top">回到顶部</a>
</body>
</html>2.7.3.3 发送邮件（**本地的程序）：
<!--**程序-->
<a href="mailTo:aaa@qq.com">发送至邮箱：aaa@qq.com</a>2.8 表格标签
2.8.1 标签作用
- 显示数据
- 网页布局
2.8.2 表格标签的结构：
| 标签名 | 作用 |
| table | 表格的容器 |
| tr | 代表一行 |
| th | 表示列标题（表头），加粗，居中 |
| td | 一个单元格，一列 |
| caption | 表格标题 |
| thead | 在逻辑上将表格分成不同的部分，thead表格头部 |
| tbody | 表格主体，tbody无论有没有写在源代码中，浏览器解析的时候都会有。table的子元素是tbody,tbody的子元素是tr |
| tfoot | 表格底部 |
- 一个表格可以被划分为thead表头，tbody表体，tfoot表尾。
- 一个表格可以没有thead与tfoot，但是至少要有一个tbody,tbody可以有多个。
2.8.3 常用的属性：
| 属性名 | 作用 |
| width | 表格的宽度 |
| border | 表格外边框粗细 |
| align |
用在table上，表示表格居中 用在tr上，表示这一列的内容居中 用在td上，表示这一格的内容居中 |
| rowspan | 单元格跨几行 |
| colspan | 单元格跨几列 |
| cellspacing | 指定单元格之间的间隔 |
| cellpadding | 指定单元格边框与内容之间间隔 padding 内边距 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阶段考试成绩</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<table width="600px" height="400px" border="1px" align="center" cellpadding="0px" cellspacing="0px">
<!--表格的标题-->
<caption>阶段考试</caption>
<thead>
<tr >
<th>编号</th>
<th>姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>001</td>
<td>小明</td>
<td rowspan="2">99</td>
</tr>
<tr align="center">
<td>002</td>
<td>小李</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td>综合评价</td>
<td colspan="2">良好</td>
</tr>
</tfoot>
</table>
</body>
</html>2.8.6 表格布局：
- 如果面对一些不规则的表格，我们可以使用td嵌套table表格。这样子做的好处是可以更加的灵活，不受前一行的影响。
- 面对不规则的列数的时候我们有两种思路：
- rowspan colspan 指定某一个单元格占指定的行数或者列数。
- 每一行都是有一个单元格，单元格再嵌套table标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<table border="1px" cellspacing="0px" cellpadding="0px" width="100%">
<tr>
<td>
<!--width:width:100% 让该元素与父元素的宽度保持一致-->
<table border="1px" cellpadding="0px" cellspacing="0px" width="100%">
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1px" cellspacing="0px" cellpadding="0px" width="100%">
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>下一篇： javah