HTML基础元素与标签详解-CSDN博客

本文介绍了HTML的基本结构，包括<head>与<body>的内容，元标签如charset和meta信息，以及<title>和<meta>关键词、描述的作用。正文详细讲解了段落、标题、列表、图片、链接、音频视频标签的使用，还有表单元素如input、textarea、radio、checkbox等，以及区块和语义化标签的应用。

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

1.< head > 网页配置< /head >，< body >网页内容< /body >

2.<html lang = > 中英文

3.< head >中<meta charset = >字符集（meta元标签，不需要成对，改代码标签时需要同时改vscode右下角文件字符集）
< title >网页标题< /title>
< meta name=“Keywords” content=“关键词”>
< meta name=“Description” content=“描述”>（Keywords、Description对搜索排序有帮助）

4.< body>中
< p>段落</ p> 只有加段落标签，才能换行
< h1>一级标题< /h1> h=headline,h1-h6系列标签,h1只能放一个
<单标签>
HTML4：单标签结尾反斜杠，< meta charset=“UTF-8” />
HTML5：单标签不用反斜杠
< div class=“区分不同div的功能”>，division分割，将相关内容组合到一起，分割不同部分（盒子），重要的是结合CSS进行页面布局

5.HTML5：
空白折叠，想换行得< p>< /p>
转义字符，可以用大小于号破坏标签，可以空格。& lt; & gt; & nbsp; & copy;

6.列表

< ul>< /ul>无序列表，unordered list，列表项只能是< li>< /li>，list item（小圆点）
< li>可以有其他标签< /li>
1.li不能散着放 2.ul子标签只能是li 3.li可以放任何东西
有type属性，可以确定是圆还是方，已废弃，用css
< ol>< /ol>有序列表，ordered list，列表项只能是< li>< /li>，list item（小1，2，3）
< li>可以有其他标签< /li>
1.li不能散着放 2.ol子标签只能是li 3.li可以放任何东西
有type属性，可以确定是1还是A，已废弃，用css
有strat属性，指定列表起始值
有reversed属性，不需要值，可以倒序

< dl></ dl>定义列表,definition list，语义是解释说明，如电商网页底部
< dt> data term数据项
< dd> data definition数据定义

7.图片标签
< img src=“路径” alt=“图片的文字描述” width=“宽像素” height=“高像素，省略就按原始比例缩放”>
路径支持相对路径和绝对路径

8.超级链接

< a href=“url.html” title=“鼠标提示” targer=“blank or _blank”>去第二个网页< /a>
anchor锚，路径支持相对路径和绝对路径
target可以在新标签页中打开网页，去别的地方
< a href=“url.html” title=“鼠标提示” targer=“blank or _blank”>去第二个网页
< img src=“路径” alt=“图片的文字描述” width=“宽像素” height=“高像素，省略就按原始比例缩放”>
< /a>
（< a>标签包裹img标签，给图片设置超链接）
< h1 id=“asd”>< /h1>，url变成#asd，这种方式叫设置锚点，style里写css是#asd{css代码}
< a href=“url.html#asd”>看asd的部分</ a>，可以指定到锚点（玩了一个当前页面的跳转）
< h1 class=”asd”>，这种，style里写css是.asd{css代码}
class与id的区别：同一个类名可以有多个HTML元素使用，而一个id只能由页面中的一个HTML元素使用。
a标签还可以玩下载

9.音频视频标签
<audio controls（显示播放控件） src=“url” loop autoplay>抱歉升级浏览器（高级浏览器看不见）< /audio> <video 一样>

10.区块标签
HTML5推出了众多新的区块标签，如< section>、< main>等
（替代了div+class属性）

11.语义化标签
文本< span>文本</ span>文本
该标签是文本中的"区块"标签，本身没有显示效果，可以结合css来丰富样式
< strong>、< em>、< mark>均表示强调语义
文本< strong>文本</ strong>文本

12.表单标签
表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等。

< form action="提交到的后台程序网址" method="get or post提交方式">
（可以看出element ui的上传是封装了form的）

下面是表单的控件，HTML5中还新增了很多input的type，丰富了控件种类

< input type="text" value="123 表示已填好的值" disabled>（type为text时为单行文本框，加disabled属性会锁死）

< input type="text" list=”province-list”>
< datalist id=”province-list”>
< option value=”山东”>
< option value=”天津”>
< option value=”河北”>
智能感应补全

<input type="text" placeholder="写在框中，并不是框中的值，浅色提示文字" >（type为text时为单行文本框）
	<input type="radio" name="s" value="给后端" checked>（单选按钮，互斥的单选按钮应该设置它们的name为相同值，checked默认选中）

	<label>
		<input type="radio">男
	</label>
	用label可以将文字和单选按钮进行绑定。（HTML5，4的话得用id和for匹配）

	<input type="checkbox">（type为checkbox时可以创建复选框）

	<input type="password">（type为password密码框）
	
	（下拉菜单）
	<select>
		<option value="alipay 提交到服务器的值">支付宝</option>
	<select>

	<textare rows="无单位行数" cols="无单位列数"> </textarea>
	
	<button></button>
	<input type="button、submit、reset">

</form>

13.表格标签
< table>
< tr>（行）
< td> （列）
< /tr>
< /table>

其他标签以及各种用法，不断补充…