常用标签
标题标签 h
通过 h1 ~ h6 表示,一共六级标题,h1 是最大的一级标题,h6 是最小的六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
如果写 h7 会这么样?
将不会有任何效果,会直接变成普通文字
注意事项
- 我们在个文章定义标题时字体较大,想减小,尽量不要使用较小号的标题去替代,可以使用 font-size 更改文字大小
- 避免滥用 h1 标签,他会向搜索引擎强调该文档中的重要内容,任何情况下,一个页面只能存在一个 h1 标签
段落标签 p
<h1>文章的标题</h1>
<h2>文章的副标题</h2>
<p>这是文章的内容</p>
<p>今天的天气真不错</p>
今天天气真不错,适合出去散步或者户外活动。
段落标签是一个块级标签
块级标签:它会独占一行,并且会在前后添加换行符
文本标签 span
<span>今天天气真不错</span> <span>适合出去散步或者户外活动</span>
在这里会发现,两个 span 标签和两个 p 标签效果有很大不同,这就是块级元素和內联元素(行内元素)的特性造成的
换行符标签 br
<span>今天天气真不错</span><br />
<span>适合出去散步或者户外活动</span>
在 HTML 标签中分为两种形式的标签,即双标签和单标签
双标签:我们开发中使用的大多都是一个开始标签一个结束标签的形式
单标签:也叫做闭标签、空标签,即用一个标签符号就可以完整描述某个功能的标签。
水平线标签 hr
在 HTML 页面创建一条水平线,可以用来分割上下的部分内容
<h1>文章的标题</h1>
<h2>文章的副标题</h2>
<p>这是文章的内容</p>
<p>今天的天气真不错</p>
<hr />
<span>今天天气真不错</span><br />
<span>适合出去散步或者户外活动</span>
容器标签 div
div 标签是一个块级标签,可以用来组合其他的 HTML 元素的容器,他在语意上不代表任何特定类型,但是它可以将某些内容按照一些需要来进行分组
简单理解:他没什么特别的作用,可以将它看作一个盒子,里面可以装任何元素,可以用它来将页面上的元素进行分组,然后组合到一起,构成一个页面。
比如我们的页面有头部、主体、尾部,我们就可以用 div 把他们分为三块。我们将内容写入到这三块中 最后拼合在一起构成页面。
图像标签 img
img 标签标识一个图像,可以将本地或者外部的图像资源显示字啊当前页面中
<img src="../images/01.png" alt="这是一个图片" />
img 标签常用的五个属性
- src:图片资源地址,可以写相对路径和绝对路径,包括引用网上的图片资源
- alt:图片加载不成功时,显示的提示内容
- title:鼠标悬停时显示的内容
- width:图片的宽度
- height:图片的高度
链接标签 a
HTML 使用超链接与网络上另一个文档进行相连,点击该链接,可以跳转到设定的网络地址或本地地址。超链接的内容,可以是一个字,一组词、一个段落或者一个图像
<a href="./index2.html" target="_blank">点我去到百度</a>
a 标签的属性
- href:超链接指向的 URl 地址,也可以指向某个锚点
- target:超链接打开的方式
- _self:默认值,在当前页面加载超链接的内容
- _blank:从新窗口打开超链接
a 链接的应用—锚点
利用 id 属性,创建一个 HTML 文档中唯一的书签标记(这个标记对于用户来说不可见),然后通过 a 链接到该 id 进行跳转
实现步骤
- 在需要跳转到的标签中插入 id
<h2 id="tag">第一章</h2>
- 在文档中创建一个链接到 id=tag 的书签标记
<a href="#tag">点我跳转到第一章</a>
除了用 id 属性作为锚点之外,还可以利用 a 标签的 name 属性作为锚点
<a href="#tag">点我跳转到第一章</a>
// 锚点
<a name="tag">第一章</a>
还可以用来发送邮件、打电话、发短信
<a href="mailto:邮箱地址">邮件链接</a>
<a href="tel:手机号码">一键拨打</a>
<a href="sms:手机号码">一键发送短信</a>
文本格式化标签
加重标签
加重标签有两个:b 标签和 string 标签
b 标签:目的只是显示的文本加粗
strong:是一种逻辑标记行为,目的是为了加强文本的重要性,不仅为了提醒读者意识到,也是为了让浏览器、搜索引擎更好的检索
在一些盲人阅读器上,在识别到 b 标签和 strong 标签时,会在 strong 标记到的文本上加重读音和语气,并且对于搜索引擎优化来说,用户可以更好的搜索到被 strong 的关键词。
<b>我是加重文字</b> <strong>我是加重文字</strong>
斜体标签
也有两个:i 标签和 em 标签
同加粗标签也有,表面上效果一样。但是意义也和加粗标签一样。
i 标签只是单纯的 italic(斜体),知识告诉浏览器这段文字要以斜体的形式展示
而 em 标签则是 emphasize(强调)
<i>我是i标签斜体</i> <em>我是em标签斜体</em>
删除标签和新增标签
删除标签:del:表示一些被文档中删除的文字内容,一般用于突出修改的差异性或修改记录。
新增标签:ins
<del>我是del标签删除的文字</del> <ins>我是ins标签新增的文字内容</ins>
下划线标签
下划线标签展示的形式与 ins 标签相同,但是在浏览器中的意义不同。
下划线标签:u
<u>我是u标签的下划线文字</u>
上下标标签
上下标标签定义一个文本区域,出于排版原因,与主要文本相比,应该展示比原本的位置有一定的偏差
sup:上标文字
sub:下标文字
<p>你好<sup>hello</sup></p>
<p>世界<sub>words</sub></p>
<p>2<sup>3</sup></p>
<p>H <sub>2</sub>O</p>
ruby 标签
ruby 标签,一般被用于展示东亚文字的注音或字符注释:
<ruby>
<rb>汉字</rb>
<rt>han zi</rt>
</ruby>
- rb:代表内容主体
- rt:代表上方注释内容
字符实体
在 HTML 中,有一些字符是已经预留好的。由于 HTML 中的标签是由<
和>
包裹起来的,所以当内容存在这些符号时,浏览器会误以为他们是标签。为了要正确的显示这些字符,实体字符就可以登场了。
列表标签
无序列表
无序列表顾名思义即无数值排序项的集合。
通过 ul 来表示,一般还需配合 li 标签使用
<ul>
<li>1</li>
<li>
<ul>
<li>2</li>
<li>
<ul>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
有序列表
通过 ol 标签标识多个有序表项,通常渲染为带有编号的列表
<ol type="A" start="3">
<li>a</li>
<li>b</li>
<li>c</li>
<li>
<ol>
<li>d</li>
<li>
<ul>
<li>e</li>
</ul>
</li>
</ol>
</li>
</ol>
- type:指定编号的类型
- ‘1’:表示数字编号(默认值)
- ‘a’:表示小写字母编号
- ‘A’:表示大写字母编号
- ‘i’:表示小写的罗马数字编号
- ‘I’:表示大写的罗马数字编号
- reversed:指定列表中的编号是否倒叙排列
- start:一个整数数值属性,指定列表编号的起始值。不管编号的类型是什么,这个值都用整数值表示。
自定义列表
dl 标签是一个包含术语定义预计描述的列表,通常用于展示词汇或者元数据(键-值对列表)
<dl>
<dt>广东省</dt>
<dd>广州市</dd>
<dd>深圳市</dd>
<dd>江门市</dd>
<dt>江西省</dt>
<dd>赣州市</dd>
<dd>南昌市</dd>
</dl>
- dt:用于在一个自定义列表中声明一个术语,可以声明多个
- dd:用于指明一个自定义列表中术语的描述,前面必须有个 dt 元素