HTMl相关标签-优快云博客

本文链接：https://blog.youkuaiyun.com/wj18740503137/article/details/123649387

本文详细介绍了HTML5在Web标准中的角色，包括结构、表现和行为的分离。HTML5的基本结构包括<!DOCTYPE html>、<html lang=en>等元素。文中列举了常用的HTML5标签，如文本标题（h1-h6）、文本格式化、列表、图片、超链接、框架、表格和表单等，并解析了相关属性和用法。此外，还强调了语义化标签和SEO的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

1、web标准

结构 xml xhtml html(html5)
表现 css
行为 dom, javascript

2、HTML5基本结构和关系

结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <meat charset="utf-8"></meat>
        <title>标题</title>
    </head>
    <body>
        Hello Word!!!
    </body>
</html>

html的语法：
            <标记 属性="属性值" 属性="属性值1 属性值2"></标记>
            <标记 属性="属性值" 属性="属性值1 属性值2">

关系：兄弟关系、嵌套关系、祖先关系；

3、常用标签

1、文本标签

1-1、文本标题标签

文本标题标签一共有6个(h1-h6)
<h1> 一级标题（唯一性，一般放网站logo）</h1>
<h2>二级标题</h2>
	·······
<h6>六级标题</h6>

1-2、文字倾斜&加粗标记

文本倾斜：
<i></i>
<em></em> 语义化（更加强调）

文本加粗：
<b></b>
<strong></strong>语义化（更加强调）

1-3、下划线&删除线

下划线：
<u></u>
<ins></ins>语义化（更加强调）

删除线：
<s></s>
<del></del>语义化（更加强调）

1-4、换行&水平线

<br>	换行
<hr>	水平线

1-5、段落标记

<p></p>

1-6、字符（小段文本）文本节点

<span></span>

1-7、常用转义字符

&nbsp;		不换行空格
&gt;		>  右尖括号
&lt;		<  左尖括号
&copy;		版权
&reg;		注册商标

2、列表标签

2-1、无序列表

<ul>
    <li>显示内容的地方</li>
</ul>

2-2、有序列表

<ol type="">
    <li>显示内容的地方</li>
</ol>

2-3、自定义列表

<dl>
    <dt>名词</dt>
    <dd>名词解释</dd>
</dl>

3、图片标签

3-1、图片标签

<img src="添加图片的路径" >

路径：

绝对路径：
- 网络上的绝对路径；
  - https://cdn.cnbj1.fds.api.mi-img.com/
  - mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90
- 本地的绝对路径：
  - E:\尚硅谷\文档\第一阶段\代码\day01\代码\index.html
相对路径:
- 相对于当前文件夹作为参考的路径；
  - ./ 表示当前文件夹的位置，可写可不写；
  - …/ 表示返回上一级文件夹；

3-2 图片标签的属性

属性	描述
src=""	用来添加目标文件的路径
alt=""	当图片加载不出时显示的图片描述，在优化（SEO）的角度上alt属性是必须要有的；
title=""	当鼠标经过改该图片区域时出现提示
border=""	设置边框（已被废弃）
width=""	设置宽度
height=""	设置高度

4、超链接标签

4-1、超链接标签

1、链接地址：
<a href="链接的目标文件"></a>
<!-- href = "url" 	添加目标文件路径（必须的）； -->

<!-- url:	可以链接本地的 html文件； -->
 <a href="05、图片标签属性.html">111</a>

<!-- url:	可以设置网页和网页之间的跳转； -->
<a href="http://www.baidu.com">百度</a>

<!-- url:    可以链接文件（图片、文本文件、pdf 等） -->
<a href="1.gif">图片</a>

<!-- url:    可以链接邮箱地址，要以 mailto:  开头； -->
 <a href="mailto:f20201688@163.com">邮箱地址</a>

<!-- url:    可以链接手机号； -->
<a href="tel:10086">联系我</a>

<!-- url:    可以链接发送短信； -->
<a href="sms:10086,10010?body=cxye">发送信息</a>

<!-- url:    可以设置链接到页面的某一个位置（设置锚点） -->
<a href="#one">html</a>
<a href="#two">css</a>
<div id="one">
    <h1>html</h1>
</div>
<div id="two">
    <h1>css</h1>
</div>

2、下载地址：
<a href="atguigu.zip" download="自己起名字">下载一个zip压缩文件</a>
download属性用来设置下载文件的名称(firefox/chrome/opera支持)

3、拓展：
	<base href="相对基准地址" target="" />
该标签为页面上所有的超链接设置一个默认的链接地址和跳转方式（该标签需写在head标签内）
若使用了这个标签的相对基准地址则该页面中所有的引用地址都会基于该地址。

4-2、超链接标签属性

title=" " 提示信息，当鼠标放在超链接时所提示信息。
download=“下载文件的名称”

注：如果href里面添加的文件浏览器能直接打开，则会出现跳转效果，不会下载，需要在 live sever里面打开。如果浏览器不能打开则会以下载方式打开。
target=" " 设置超链接的打开方式；
- 属性：
  - _self 在当前窗口打开（默认值）；
  - _blank 在新的窗口打开，原来的窗口保留；

5、框架标签

5-1、框架标签

<iframe  src="" width=""  frameborder="" scrolling=""></iframe>

 <a href="http://www.taobao.com" target="taobao">淘宝</a>
 <iframe name="taobao" frameborder="1" scrolling="yes" width="100%" height="200"></iframe>

5-2、框架属性

src=""			添加目标文件路径
name=""			给当前标签起一个name名字
width=""		设置宽度
height="" 		设置高度
frameborder=""	设置边框；属性值：0（no）/1(yes,是默认值)
scrolling=""	设置滚动条；属性值：auto/no/yes

6、表格

6-1、表格标签

<table border="1" cellpadding="10" cellspacing="0">
	<caption>这只一个表格标题标签</caption>
     <!-- 第一列为一组 （列分组标签）-->
    <colgroup span="1" bgcolor="pink"></colgroup>
  <thead>   <!-- 行分组标签 -->
    <tr>
      <th>姓名</th>  <!-- 行标题或列标题 -->
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" align="center" valign="center">January</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
	<tr>
	  <td>Sum</td>
	  <td rowspan="2">$180</td>
	</tr>
	<tr>
	  <td>Sum</td>
	</tr>
  </tfoot>
</table>

6-2、表格的属性

属性	描述
border	边框线
cellspacing	边框间的距离
cellpadding	文本离边框的距离
width	设置宽度
height	设置高度
bordercolor	边框的颜色
bgcolor	表格的背景颜色
colspan=“2”	tr横跨的列数
rowspan=“2”	tr横跨的行数
align	表格水平对其方式（left、right、center、）
valign	垂直对齐方式（top、bottom、middle）
rules	添加分割线（rows / cols / all / none / groups）

6-3、表格的css属性

1）单元格的间距：border-spacing: value；

说明：单元格间距（该属性必须给table添加）表示单元格边框之间的间距，不可取负值；

2）合并相邻单元格边框： border-collapse: collapse / separate；

说明：合并相邻单元格边框（该属性必须给table添加）

separate（边框分开）默认值；collapse（边框合并）

7、表单

7-1、表单标签

<form></form>
属性：
	action = '接口地址'
	method = 'get / post' 传输方式
	name = '表单名称'

7-2 表单控件

<input/>
	属性：
		type = '控件类型'
		name = '属性标识表单域名称'
		value = '属性定义表单域的默认值，其它属性根据type的不同而变化'
		maxlength = '控制最多输入的字符数'
		Size = '控制框的宽度'
		checked = 'checked'	默认选中
		disabled = 'disabled' 控制禁用
		readonly = 'readonly' 输入字段只读
		cols = '' 宽度
		rows = '' 高度

1) 文本框
	<input type = 'text'/>
2）密码框
	<input type="password" name="" />
3）提交按钮
	<input type="submit" id="" name="" value="按钮内容"/>
4）重置按钮
	<input type="reset" value="按钮内容" />
5）空按钮
	<input type="button" name="" id="" value="按钮内容" />
6）单选按钮(要将name值设置一样才可单选)
	<input type="radio" name="sex" id="" value="" />男
	<input type="radio" name="sex" id="" value="" />女
7）复选框
	<input type="checkbox" name="" id="" value="" />
8）上传文件
	<input type="file" name="" id="" value="" />
9）隐藏表单、一般用作数据存储
	<input type="hidden" name="" id="" value="" />
10）下拉列表（菜单）
	<select>
        <option>下拉选项1</option>
        <option>下拉选项2</option>
	</select>
	下拉组：
		<optgroup lable = '组名'></optgroup>
	属性：size = 'value' (将下拉框显示成列表效果，value表示可显示几条数据)
		
11）多行文本定义：
	<textarea name = ""></textarea>
rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符
阻止浏览器对窗口的拖动设置：{resize:none;}  (css属性)
12）按钮标签
<button type = ""></button>
	type = ""
		submit
		reset
		button
		不写属性时是提交按钮

7-3、其它表单常用标签

1)提示信息标签
	语法：<label for="绑定控件的id名"></label>
	
2）表单字段集
	语法：<fieldset id="">
			<legend>标题</legend>
		</fieldset>