HTML标签

2021-11-16 13:59:07 阅读：166 来源： 互联网

2021.11.10

HTML标签

语法规范

1.HTML标签是由" < > "包围的关键词，例如<html>。

2.HTML标签通常成对出现，例如<html> </html>，我们称为双标签（开始标签和结束标签）。

3.有些特殊标签必须是单个标签，例如 <br />，称为单标签。

标签关系

双标签关系可以分为两类：包含关系和并列关系。

包含关系：

<head>
	<title></title>
</head>

并列关系：

<head> </head>
<body> </body>

HTML页面骨架：

<html>			//根标签
    <head>		//文档头部
        <title>标题</title>		//文档标题
    </head>
    <body>		//文档主体
        这是body
    </body>
</html>

<!DOCTYPE>

文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。

例：

<!DOCTYPE html>

即当前页面采取的是HTML5版本来显示网页。

!DOCTYPE 声明必须位于文档最前面，处在html标签之前。

!DOCTYPE 不是一个HTML标签，是文档类型声明标签。

lang语言种类

用来定义当前文档显示的语言。

例：

<html lang="en">
<html lang="zh-CN">

"en"定义语言为英语，"zh-CN"定义语言为中文。

但对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，这个属性对浏览器和搜索引擎还是有作用的。

字符集

在标签中，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

写在head里，必须有。

例：

<meta charset="UTF-8" />

charset常用值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

标题标签

共有

–

六个等级的网页标题

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>标题标签</h1>
		<h2>标题标签</h2>
		<h3>标题标签</h3>
		<h4>标题标签</h4>
		<h5>标题标签</h5>
		<h6>标题标签</h6>
		标题标签
	</body>
</html>

显示效果：

标题标签
标题标签

标题标签

标题标签

标题标签

标题标签

标题标签
标题标签

段落和换行标签

段落标签

<body>
<p>一个段落</p>				//paragraph缩写
<p>又是一个段落</p>
</body>

特点

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

换行标签

<br />				  	  //break的缩写

特点

br 是个单标签
br 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

作用：为文字设置粗体、斜体、下划线等效果，突出重要性。

语义	标签	说明
加粗	或者	更推荐使用
倾斜	或者	更推荐使用
删除线	或者	更推荐使用
下划线	或者	更推荐使用

例：

		<strong>标题</strong>标签 <br />
		<b>标题</b>标签			 <br />
		<em>倾斜一波</em>		 <br />
		<del>删了删了</del>		 <br />
		<ins>下划线下划线</ins>	 <br />
		<strong><em>加粗然后倾斜！</strong></em>	<br />
		<strong><del>加粗然后删掉！</del></strong>	<br />

显示效果：

标题标签

标题标签

倾斜一波

~~删了删了~~

下划线下划线

加粗然后倾斜！

~~加粗然后删掉！~~

div 和 span 标签

这两个标签是没有语义的，它们只是一个用来装内容的容器。

div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：

div用来布局，但是一行只能放一个div。
span用来布局，一行可以放多个span。

图像标签

标签用于定义HTML页面中的图像。

例：

<img src="图像/URL" />

src：是标签的必须属性，它用于指定图像文件的路径和文件名。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像显示不出来的时候用文字替换
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

例：

<h4> 图像标签的使用： </h4>
<img src="割绳子壁纸.jpg" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z0QT04M7-1637042039770)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211112174509774.png)]

例：

<h4> 来个alt的示范 </h4>
<img src="名字输错了或者路径不对了.jpg" alt="割绳子" />

例：

<h4> 来个title的示范</h4>
<img src="割绳子壁纸.jpg" title="鼠标移上来显示文字" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-acZXIhut-1637042039771)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211112174839592.png)]

例：

<h4> 来个width设置宽度的示范</h4>
<img src="割绳子壁纸.jpg" width="100" />	//单位是像素，也可以用百分比（如width=10%）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-taFNiQtm-1637042039774)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211112175602497.png)]

设置图片大小时，通常设定宽度和高度中的一个即可，另一项会等比例改变。

例：

<h4> 来个border给图片添加边框的示范</h4>
<img src="割绳子壁纸.jpg" width="100" border="20" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U0cOF3yb-1637042039777)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211112180057154.png)]

超链接标签

1.语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性	作用
href	用于指定链接目标的url地址（必须属性）
target	用于指定链接页面的打开方式，其中 _self为默认值， _blank为在新窗口中打开方式

2.链接分类

①外部链接

例：

    <h4>外部链接</h4>
    <a href="http://www.baidu.com">百度</a>

网页显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSc0PtTU-1637042039779)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211114173118099.png)]

点击“百度” 当前窗口就会跳转到http://www.baidu.com “http://”一定要写

如果

<a href="http://www.baidu.com" target="_blank">百度</a>

就会新窗口打开链接

②内部链接

网站内部页面之间的相互连接，直接链接内部页面名称即可。

例：

当02-第一个页面.html和此html在同一个文件夹时

<a href="02-第一个页面.html"> 02-第一个页面 </a>

会打开02-第一个页面.html

③空链接

暂时没有确定链接目标时，用“#”代替链接地址。

例：

<a href="#"> 还没确定跳转到哪里 </a>

④下载链接

如果href里面地址是一个文件或者压缩包，会下载这个文件；地址链接的是文件.exe或者.zip等形式

例：

<a href="nb.exe"> 下载nb.exe </a>

⑤网页元素链接

给网页元素（如：文本、图像、表格等）添加超链接，点击进行跳转。

例：

<h4>网页元素链接</h4>
<a href="http://www.baidu.com"><img src="割绳子壁纸.jpg" /></a>

点击图片就会跳转到百度

⑥锚点链接

点击链接会定位到当前页面的某个区域。

在点击的超链接的href属性中，设置属性值为 #名字 的形式
找到想要定位到的标签，里面添加 id="名字"

例：

<a href="#b"> 点这里定位到b </a>
...
<h3 id="b">定位到我了</h3><br />

点击超链接“点这里定位到b”，就会定位到h3标题“定位到我了”。

表格标签

1.语法格式

<table>						//定义表格的标签
        <tr>				//定义表格中的行
            <th>xxx</th> <th>xxx</th> <th>xxx</th> //表头，文本内容加粗居中显示。
            <td>xxx</td> <td>xxx</td> <td>xxx</td> //table data，定义表格中的单元格         </tr>
        ...
</table>

例：

<table>
        <tr>  <td>姓名</td> <td>学号</td> <td>班级</td>  </tr>
        <tr>  <td>张三</td> <td>123</td> <td>1班</td>  </tr>        
</table>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLNADw7R-1637042039781)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211114194140299.png)]

2.表格属性

实际开发中通过CSS设置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StDtvieV-1637042039783)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211114194334453.png)]

写到table标签里面

3.表格结构标签

thead标签头部区域（包含 th tr）

tbody标签主体区域（包含 td）

4.合并单元格

跨行合并（上下）：rowspan=“个数”
跨列合并（左右）：colspan=“个数”

其实不妨理解为这个单元格的大小，即占多少格。

例：

<table align="center" border="1" cellpadding="20" cellspacing="2" width="500">
        <tr>  <th colspan="2">姓名和学号</th> <th>班级</th>   </tr>
        <tr>  <td>张三</td> <td>123</td> <td>1班</td>   </tr>
        <tr>  <td><a href="http://www.baidu.com">百度</a></td> 
              <td><a href="http://www.qq.com">腾讯</a></td> 
              <td><a href="#">未知</a></td> 
        </tr>
</table>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19aii4TO-1637042039784)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211114200519918.png)]

列表标签

1.无序列表

例：

<h4>喜欢吃什么</h4>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>桃子</li>
    </ul>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvNqIBqu-1637042039785)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115081912652.png)]

ul 与**/ul标签中只能嵌套 li与/li标签，不允许出现其他标签； li与/li** 之间没有这种禁止。

2.有序列表

例：

<h4>喜欢吃什么</h4>
    <ol>
        <li>苹果</li>
        <li>西瓜</li>
        <li>桃子</li>
    </ol>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAJ45bE9-1637042039787)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115082333065.png)]

注意事项和无序列表一样。

3.自定义列表

例：

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ib2Ugbw-1637042039789)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115083117344.png)]

dl 和 /dl 之间只能包含dt和dd

表单标签

组成部分：表单域、表单控件、提示信息。

常见于注册页面。

1.表单域

form标签定于表单域。

语法格式：

<form action="url地址" method="提交方式" name="表单域名称">
        ...各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

2.表单控件

input

<input type="属性值" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kzYBGyG8-1637042039790)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115084850693.png)]

除了type属性之外，input标签还有其他属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CFK3ueMg-1637042039791)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115090056586.png)]

name和value是每个表单元素都有的属性值，主要给后台人员使用。
单选按钮radio和复选框checkbox必须有相同的name值。
name的主要作用是区别不同的表单。
checked可以使单选按钮和复选按钮有默认选中状态。

label标签

用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上。

例：

<label for ="nb">测试</label>
<input type="text" name="nbb" id="nb">
<input type="submit">

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0WFCMajy-1637042039792)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115185948935.png)]

点击“测试”也可以输入文本。

lable标签的for属性应当与相关元素的id属性相同。

下拉标签select

多个选项供用户选择。

例：

    <select>
        <option>1</option>
        <option>2</option>
        <option selected="selected">3</option>
    </select>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E88jupXf-1637042039793)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115195346081.png)]

在option中定义 selected=“selected”，当前项即为默认选中项。

文本域标签textarea

当需要输入的内容较多而不能使用text标签时使用textarea。

例：

test:<textarea>默认的显示字段</textarea>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKbnE08S-1637042039795)(C:\Users\街灯\AppData\Roaming\Typora\typora-user-images\image-20211115195736024.png)]

" id=“nb”>


结果：

[外链图片转存中...(img-0WFCMajy-1637042039792)]

点击“测试”也可以输入文本。

> lable标签的**for属性**应当与相关元素的**id属性相同**。

# 下拉标签select

多个选项供用户选择。

例：

```html
    <select>
        <option>1</option>
        <option>2</option>
        <option selected="selected">3</option>
    </select>

结果：

[外链图片转存中…(img-E88jupXf-1637042039793)]

在option中定义 selected=“selected”，当前项即为默认选中项。

文本域标签textarea

当需要输入的内容较多而不能使用text标签时使用textarea。

例：

test:<textarea>默认的显示字段</textarea>

结果：

[外链图片转存中…(img-RKbnE08S-1637042039795)]

标签：img,标签,HTML,外链,防盗链,转存,图片
来源： https://blog.csdn.net/m0_46893049/article/details/121354424

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML标签

HTML标签

语法规范

标签关系

HTML页面骨架：

<!DOCTYPE>

lang语言种类

字符集

标题标签

–

六个等级的网页标题

标题标签

标题标签

标题标签

标题标签

标题标签

标题标签

段落和换行标签

段落标签

特点

换行标签

特点

文本格式化标签

div 和 span 标签

图像标签

超链接标签

1.语法格式

2.链接分类

①外部链接

②内部链接

③空链接

④下载链接

⑤网页元素链接

⑥锚点链接

表格标签

1.语法格式

2.表格属性

3.表格结构标签

4.合并单元格

列表标签

1.无序列表

2.有序列表

3.自定义列表

表单标签

1.表单域

2.表单控件

input

label标签

下拉标签select

文本域标签textarea

文本域标签textarea