关于HTML的相关标签
目录
一、HTML的骨架标签
文档类型
页面语言lang
字符集charset
二、HTML常用标签
（一）排版标签
1.标题标签
~h6>
2.段落标签
3.换行标签
4.<div></div>和<span></span>
5.文本格式化标签
6.注释标签
7.特殊字符
(二)图像标签
(三)超链接标签
（四）表格标签
（五）列表标签
1.无序列表(重点)
2.有序列表
3.自定义列表
（六）表单标签
1.表单域
2.控件
input
select
下拉列表
文本域
总结
一、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>Document</title>
</head><!-- 文档的主体 -->
<body>...... ...
</body>
</html>文档类型<!DOCTYPE >
用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。
页面语言lang
lang指定该html标签内容所用的语言
<html lang="en"> en 定义语言为英语; zh-CN定义语言为中文
字符集charset
UTF-8是目前最常用的字符集编码方式
二、HTML常用标签
（一）排版标签
1.标题标签<h1~h6> </h1~h6>
代码如下（示例）：
<!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><h1>一级标题</h1> <h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>2.段落标签<p> </p>
把 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>Document</title>
</head>
<body><p>圣诞节当然少不了圣诞老人，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p><p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p><p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
</body>
</html>
3.换行标签<br>
代码如下（示例）：
<!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>圣诞节当然少不了圣诞老人，<br>根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。
</body>
</html> 4.<div> </div>与<span> </span>
这两个标签是没有语义的，一行只能放一个<div>,一行可以放多个<span>
代码如下（示例）：
<!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><div>今日股票</div><span>百度</span><span>新浪</span><span>腾讯</span>
</body>
</html>
5.文本格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<u></u> | <stong>更强烈 |
| 斜体 | <em></em>或<i></i> | <em>更强烈 |
| 删除线 | <del></del>或<s></s> | <del>更强烈 |
| 下划线 | <ins></ins>或<u></u> | <ins>更强烈 |
代码如下（示例）：
<!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><br><b>特大新闻</b><br><em>特大新闻</em><br><i>特大新闻</i><br><del>特大新闻</del><br><s>特大新闻</s><br><ins>特大新闻</ins><br><u>特大新闻</u><br>
</body>
</html>
6.注释标签
<!-- 注释语句 -->
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
快捷键是： ctrl + / 或者 ctrl +shift + /
7.特殊字符
(二)图像标签<img>
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 |
必须属性 |
| alt | 文本 | 替换文本，当图片显示不出来而显示的文本 |
| title | 文本 |
提示文本，鼠标放在图片上显示的文本 |
| width | 像素 | 图像的宽度，宽度和高度设置一个即可 |
| height | 像素 | 图像的高度 |
| border | 像素 | 图像的边框粗细 |
- 什么是属性？
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 采取 键值对 的格式 key="value" 的格式
- src图片路径怎么写？（一般用相对路径）
(三)超链接标签<a> </a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href |
用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target |
于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，指在当前窗口打开链接，_blank为在新窗口中打开链接。 |
- 外部链接： <a href=" http:// www.baidu.com ">百度 </a>
- 内部链接：直接链接内部页面名称即可， 比如 < a href="index.html"> 首页</a>
- 空链接：如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”，即<a href="#">首页</a>
- 下载链接：如果href里的地址是一个文件或压缩包，会下载这个文件，<a href="img.zip">下载文件</a>
- 网页元素链接：不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。<a href="http://www.baidu.com"><img src="img.jpg"></a>
- 锚点链接：通过创建锚点链接，用户能够快速定位到目标内容
1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） <a href="#two">代码如下（示例）
<!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>vscode</title> </head> <body><h2>目录</h2>1.<a href="#experience">早年经历</a><br />2.<a href="#actor">演艺经历</a><br /><h4 id="experience">早年经历</h4><p>刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [20] 。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [21] 。刘德华从黄大仙天主教小学毕业后升读可立中学 [22] 。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [23] 。</p><h4 id="actor">演艺经历</h4><p>1981年，刘德华考进第10期无线电视艺员训练班 [24] 。同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙；该剧获得美国电视节电视剧特别奖 [25] 。</p><p>刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [26] 。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注 [27] 。</p><p>1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过 [28] ；该剧在香港播出后取得62点的收视纪录。同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [29] 。</p> <a href="#">返回顶部</a></body> </html>（四）表格标签<table> </table>
<table>
<caption>我是表格标题</caption>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
|
标签 |
定义 |
说明 |
|---|---|---|
|
<table></table> |
表格标签 |
定义一个表格标签 |
|
<tr></tr> |
表格行标签 |
用于定义表格中的行，必须嵌套在 table标签中,有几对<tr>就代表几行。 |
|
<td></td> |
单元格标签 |
用于定义表格中的单元格，必须嵌套在<tr></tr>标签中,<tr>中有几对<td>就代表有几列。 |
|
<th></th> |
表头单元格标签 |
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。 |
|
<caption></caption> |
表格标题标签 |
标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。 |
|
<thead></thead> |
表格头部 |
<table>标签的子元素，需出现在 <caption>、<colgroup> 元素之后；<tbody>，<tr>或<tfoot>元素之前。<thead>标记内应至少包含一行<tr>元素。 |
|
<tbody></tbody> |
表格主体 | <table>标签的子元素， |
|
<tfoot></tfoot> |
表格脚注 | <table>标签的子元素， |
| 属性(了解，CSS实现) | 写到 | 属性值 | 说明 |
|---|---|---|---|
| align | <table>标签 | left,center right |
表格对齐，而不是表格里边的内容 |
| border | <table>标签 | 1或者“ ” |
有或无边框,默认为无 |
| width | <table>标签 | 像素值 | 宽度 |
| cellspacing | <table>标签 | 像素值 |
单元格之间的空白 |
| cellpadding | <table>标签 | 像素值 |
单元边沿与内容的空白 |
| clospan 和 rowspan | <td>标签 | 数字 |
1.确定跨行rowspan还是跨列colspan？跨行就合并到上边的，跨列就合并到左边的单元格 2.找到目标单元格：合并方式=合并单元格的数量<td colspan="2"></td> 3.删除多余<td>单元格 |
（五）列表标签
| 种类 | 格式 | 效果 | 说明 |
|---|---|---|---|
| 无序 |
<ul> <li>列表项1</li> <li>列表项2</li> </ul> |
|
<ul>中只能嵌套<li>，直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。 |
| 有序 |
<ol type="1"> <li>列表一</li> <li>列表二</li> </ol> |
|
<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。 常用的type属性值分别为是1，a，A，i，I <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。 <ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。 |
| 自定义 |
<dl> |
关于我们 新浪微博 官方微信 联系我们 |
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。 |
1.无序列表<ul> </ul>(重点)
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
2.有序列表<ol> </ol>
<ol type="A">
<li>列表项1</li>
<li>列表二</li>
<li>列表三</li>
</ol>
3.自定义列表<dl> </dl>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
（六）表单标签
1.表单域<form> </form>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 |
用于指定接收并处理表单数据的服务器程序的url地址。 |
|
method |
get/post |
用于设置表单数据的提交方式，其取值为get或post。 |
| name |
名称 |
用于指定表单的名称，以区分同一个页面中的多个表单。 |
2.控件
<input>
<form>
性别：<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女</form>
| 属性 | 说明 | 作用 |
|---|---|---|
| type |
表单类型 |
用来指定不同的控件类型 text、password、submit、reset、button(和js结合)、file、radio(单选,要求每一个选项都有相同的name属性)、checkbox（多选，要求每一个选项都有相同的name属性） |
| value |
表单值 |
表单里面默认显示的文本，必然属性 |
| name |
表单名字 |
页面中的表单很多，name主要作用就是用于区别不同的表单,必然属性 |
| checked |
默认选中 |
表示那个单选或者复选按钮一开始就被选中了 |
| maxlength | 最大长度 |
输入字符的最大长度 |
<label> </label>
增大面积，点到靠近区域就能选中元素;label的for属性和相关元素的id属性要相同
<form>
性别：<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"> <label for="nv">女</label>
</form>
下拉列表<select> </select>
<form>
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
...
</select></form>
select="selected" 设置默认选中项，如果不写这句话则第一个为选中项。
文本域<textarea> </textarea>
<form>
<textarea >
文本内容
</textarea></form>
- cols="每行中的字符数" rows="显示的行数" 实际开发用css实现
总结
关于HTML的相关标签相关推荐
- html table相关标签和属性
html table相关标签 标签 意义 <table></table> 表格开始和结束.表格的基本标签之一.示例 <tr></tr> 表格的行.表格的 ...
- html5标签属性大全_html5 文本相关标签
html5 文本相关标签 一.标题 h1.h1.hgroup(标题组) 1.什么情况下使用标题? 01.标题是概括性的简短文字 02.标题能概括随后的内容 2.主标题与副标题 01.主标题 02.副标 ...
- body中的相关标签
body中的相关标签,主要展现在页面的内容区域. 学习<hx>标签,为你的网页添加标题 比如打开一个百度新闻的网站,https://baijiahao.baidu.com/s?id=170 ...
- python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)
python 全栈开发,Day45(html介绍和head标签,body标签中相关标签) 一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) ...
- HTML标签：头部相关标签
HTML网页分<head>头部和<body>部分,头部部分主要描述整个文档基本信息,如标题.默认链接.元数据(关键词,文件的最后修改时间,作者,字符集等).引用的 样式文件(C ...
- html中头部相关标签(＜head＞)基本概念
头部相关标签基本概念 1 头部相关标签 1.1 title标签 1.2 meta标签 1.3 link标签 1.4 style标签 2 相关选择题及参考答案 2.1 选择题 2.2 参考答案 1 头部 ...
- [MyBatis学习笔记] 二、Mybatis基本操作及相关标签介绍
[MyBatis学习笔记] 二.Mybatis基本操作及相关标签介绍 一.Mybatis简介 二.简单的CRUD操作 1.构建SqlSessionFactory (1)编辑mybatis-config ...
- web前端学习（八）——HTML5中表格、边框的相关标签设置
1.HTML中表格边框的相关标签 ①表格由 <table> 标签来定义. ②每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签 ...
- html-body相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- HTML之文本相关标签
文本相关 1.<p>标签,通常与<article>合用 2. <small>表示细则一类的旁注,通常包括免责声明.注意事项.法律限制,版权信息等 3.<str ...
最新文章
- bitcoin转账api,python3.7
- jenkins查询mysql_jenkins流水线使用mysql数据库
- python调用java方法_python调用java
- java集合map_JAVA中的集合类Map、Set、List
- java中的多线程来看一看基础了
- 你所坚信的，就是你的生活
- 什么是Python中的类型转换？
- 携程否认竞价排名；戴尔为“吃鸡外挂”致歉；腾讯将发区块链游戏 | CSDN极客头条
- 二项式法在负荷计算机的应用,7.5二项式法确定计算负荷
- 网页设计师必备的35套最佳图标（免费下载）
- 每天2小时，吃透 985博士总结的这套保姆级TensorFlow + PyTorch笔记（20G高清/PPT/代码)
- 反向传播思想及其优缺点
- 2020-11-04 浏览器主页被毒霸劫持的解决方案
- 前端 JS 根据日期查询周几 星期几
- 分治法查找最大和次大元素
- 浙江省测绘与地理信息局异地备份和容灾项目
- Linux游戏市场，Tacoma上的Nixie Pixel以及更多开放游戏新闻
- 使用exe4j打包exe文件
- 区块链农场经营游戏NFT游戏开发
- 3Dmax在哪里下载 |3Dmax入门学习教程有哪些！！想学习的你还在等什么？