Html简介和Html标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_51929096/article/details/132304339

一、HTML 简介

HTML 是一种超文本标记语言(HypterText Markup Language)
描述网页内容:
- 标记：由标签构成 -> 尖括号包围的关键词，如：<html>
HTML 标签有两种
- 单标签：一些特殊标签必须单个出现，如<img/>
- 双标签：标签成对出现，如<html></html>
HTML 基本结构：html -> head , body
- html 标签：是整个文件的根标签 (所有内容都需要包含在其中)
- head 标签：代表整个页面的头部（包含当前页的关键信息）
- title 标签：让页面有一个属于自己的标题
- body 标签：代表整个页面的身体（包含当前页给用户看的的主要内容）

二、HTML 标签：

标签	名称	说明
h1~h6	标题标签	HTML 提供了 6 个等级的标题，代表不同的重要程度
`<div></div>`	布局标签	内容常使用的标签
`<span></span>`	布局标签	通常网页布局都可以使用此标签布局
`<p></p>`	段落	可以把网页分为若干个段落
`<br/>`	换行	强制换行
`<ol></ol>`	有序列表	展示有序列表，里面指令包含 li 标签，有顺序
`<ul></ul>`	无序列表	展示无序列表，里面只能包含 li 标签，没有顺序
`<dl></dl>`	自定义列表	里面只能包含 dt 和 dd(兄弟标签)，经常一个 dt 对应多个 dd
`<img src="图片路径">`	图像标签	在网页中插入指定路径的图片
`<audio></audio>`	音频标签	网页中插入音频文件播放
`<video></video>`	视频标签	网页中插入视频文件播放
`<a href="跳转目标"></a>`	链接标签	从当前跳转到目标
`<hr/>`	水平线标签	100%宽度水平分割线，并且独占一行
`<form action=""></form>`	表单	表单区域标签，通常此标签内放输入框、单选、多选、多行文本框、下拉选项菜单等表单内容
`<label for="对应值"></label>`	对应选择上控件	点击<label>标签文字时，实现对应控件被选择
`<input type="submit"/>`	form 表单的 input 控件	type 值可选，submit 为按钮控件，text 输入框控件，checkbox 多选框，radio 单选框
`<textarea></textarea>`	内容输入控件	参数 cols 为字符宽度。Rows 为行数,都跟跟具体数字
`<select name=""></select>`	表单下拉	表单下拉列表，内部包含`<section>标签`，
`<table><tr><td></td></tr></table>`	表格	table 表格实用于多列数据列表

三、HTML 语义化标签

1.含义：

语义化标签，让标签具有语义的含义

2.常用语义化标签：

<header></header>
：头部标签

<nav></nav>
：标记导航

<main></main>
：页面主要内容

<section></section>
：区块

<aside></aside>
：侧边栏

<footer></footer>
：底部标签

3.作用：

没有 css 样式时页面的整体也会体现良好的结构效果。
页面内容结构化，方便其他设备解析。
有利于 SEO（搜索引擎）优化，有助于爬虫抓取更多有效信息。
代码结构清晰，方便团队开发和维护。