html标签

最新推荐文章于 2022-06-02 10:43:18 发布

md名字又重复

最新推荐文章于 2022-06-02 10:43:18 发布

阅读量344

点赞数 1

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_43580997/article/details/107579146

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

#HTML标签 {ignore}

文章目录

HTML5元素周期表： http://www.html5star.com/manual/html5label-meaning/

【布尔属性】只有两种状态的属性。可以忽略属性值，直接写属性名。
状态1： 默认不写，即不使用该属性
状态2： 取值为属性名。

元素嵌套（包含关系）

块级元素和行级元素

【注意】 HTML5：已经弃用这种说法

以前： 块级元素可以包含行级元素,行级元素不可以包含块级元素，a元素除外
现在： 元素的包含关系由元素的内容类别决定。

块级元素：显示时会独占一行的元素（例：h，p）
行级元素：显示时不会换行的元素（例：span）

包含关系总结

容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素（例：ul>li、ol>li、dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素。

注释标签

快捷键： ctrl + /(和问号同一个键那个)

<!-- 注释语句 -->

文本元素

h元素(标题元素)

快捷键： (其中x为所需的h标签的级数，n为标签数量)

生成多个相同的h标签：
快捷键：hx*n
在生成的多个标签里面添加文本内容
快捷键：hx*n>{文本内容}
生成多个不同的h标签
快捷键：h$*n>{这是第$个标签}

【扩展】$是占位符,从1开始自加1

h1：一级标签

<h1>百度一下</h1>

h2：二级标签

<h2>百度一下</h2>

h3：三级标签

<h3>百度一下</h3>

h4：四级标签

<h4>百度一下</h4>

h5：五级标签

<h5>百度一下</h5>

h6：六级标签

<h6>百度一下</h6>

p元素（段落元素）

paragraphs，段落
快捷键： (其中n为段落数量)

<p>文本内容</p>

生成多个段落：
快捷键：p*n

【扩展】
lorem： 乱序假文，没有任何实际含义的文字。用于测试排版

生成多个乱序假文段落
快捷键：p*n>lorem
生成多个只有一个单词的乱序假文段落
快捷键：p*n>lorem1
生成多个将p标作为h标签的兄弟元素
快捷键：((h$>{章节$})+p>lorem)*n

span元素（容器元素）

没有语义，仅用于设置样式

<span>文本内容</span>

pre元素（预格式化文本元素）

<pre>^(*￣(oo)￣)^</pre>

在pre元素中的内容不会出现空白折叠 ---->在pre元素内部出现的内容，会按照代码格式显示到页面上。该元素通常用于在网页中显示一些代码。

pre元素功能的本质：有一个默认的CSS属性：white-space:pre;

【扩展】
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

code元素（代码元素）

显示代码时，通常外面套code元素，code表示代码区域

<code style="white-space:pre">
    var i = 2;
    if(i == 2)
        console.log(i); 
</code>

a元素（超链接元素）

从一个文档（网页）跳转到另一个文档（网页）

生成多个超链接：快捷键：a*n>{章节$}

href属性

hyper reference，通常表示跳转地址

使用方法

跳转到地址

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

跳转到某个锚点（用于目录功能）
步骤：

为每个标签添加一个id属性（全局属性，表示元素在文档中的唯一编号
快捷方法： ((h2[id="chapter$"]>{章节$})+p>lorem1000*6)

<h2 id="chapter1">章节1</h2>
<p>Lorem ipsum dolor sit amet.</p>
<h2 id="chapter2">章节2</h2>
<p>Repudiandae, pariatur magnam. Natus, pariatur.</p>
<h2 id="chapter3">章节3</h2>
<p>Eveniet deserunt molestias facilis dicta.</p>
<h2 id="chapter4">章节4</h2>
<p>Saepe vitae error quasi natus.</p>
<h2 id="chapter5">章节5</h2>
<p>Cumque cum est nemo? Velit.</p>
<h2 id="chapter6">章节6</h2>
<p>Sapiente iure neque qui adipisci.</p>

添加超链接 (在id前要加#号)
快捷方法： a[href="#chapter$"]{章节$}*6

<a href="#chapter1">章节1</a>
<a href="#chapter2">章节2</a>
<a href="#chapter3">章节3</a>
<a href="#chapter4">章节4</a>
<a href="#chapter5">章节5</a>
<a href="#chapter6">章节6</a>

<a href="#">回到顶部</a>

功能链接：
1. 跳转到某一页的某一章
其中firstWebPage.html是要跳转的目的页面，chapter3是章节的id
```
<a href="firstWebPage.html#chapter3">跳转到另一个页面的第三章</a>
```
1. 执行js代码
```
<a href="javascript:alert('你好！')">弹出你好！</a>
```
1. 发送邮件(要求用户计算机上安装有邮件发送软件)
```
<a href="mailto:nancy.9539@hotmail.com">点击给我发送邮件</a>
```
1. 拨号（需要在手机端或安装了有拨号软件的pc端才能触发）
```
<a href="tel:123456789">点击给我拨打电话</a>
```

target属性

表示跳转窗口位置，默认情况下是新打开页面的位置就是当前窗口。
取值

_self: 在当前页面窗口中打卡，这是默认值。

<a href="https://baidu.com" target="_self">百度一下</a>

或者：

<a href="https://baidu.com" >百度一下</a>

_blank: 在新窗口中打开

<a href="https://baidu.com" target="_blank">百度一下</a>

title属性

表示超链接获取到鼠标焦点时所显示的文字

<a href="https://baidu.com" title="跳转到百度">百度一下</a>

img元素（图片元素）

image，空元素（不存在内容）

<img src="http://www.duyiedu.com/source/img/banner1.jpg" alt="图片失效时的提示">

src属性

source，图片路径，可以用绝对路径或者相对路径

alt属性

当图片资源失效时，将使用该属性的文字替代图片

与a元素联用

在img元素后套用一个a元素

<a href="https://www.baidu.com/" title="点击跳转到百度"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3653489744,480112400&fm=26&gp=0.jpg" alt="百度一下"></a>

和map元素联用

map：地图
当点击图片的某个区域时跳转到对应不同的链接
步骤：
1. 给map元素利用name属性唯一命名
```
<map name="solarMap"></map>
```
1. 在img元素中使用usemap属性使用map元素
```
<img usemap="#solarMap">
```
1. 在map元素中划分区域
  - 使用map的子元素—area元素（区域元素）----空元素

area元素属性	属性说明	选项
shape	区域的形状	1. 圆形(circle) 2. 矩形(rect) 3. 多边形(poly)
coords	形状关键点的坐标
href	点击形状的链接地址
alt	当图片没有被显示出来时，该区域的提示信息
target	点击后是否新增窗口页面

<!-- 形状为圆形 -->
<!-- coords:圆心和半径 -->
<a href="https://www.baidu.com/" title="点击跳转到百度">
<img usemap="#baidu" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=59869034,1009263689&fm=26&gp=0.jpg" alt=""></a>
<map name="baidu">
    <area shape="circle" coords="358,214,38" href="http://news.baidu.com/" alt="">
</map>

<!-- 形状为矩形 -->
<!-- coords:左上角和右下角 -->
<a href="https://www.baidu.com/" title="点击跳转到百度">
<img usemap="#baidu" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=59869034,1009263689&fm=26&gp=0.jpg" alt=""></a>
<map name="baidu">
    <area shape="rect" coords="337,254,378,271" href="http://news.baidu.com/" alt="">
</map>

<!-- 形状为多边形 -->
<!-- coords:依次给出每个点的坐标 -->
<a href="https://www.baidu.com/" title="点击跳转到百度">
<img usemap="#baidu" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=59869034,1009263689&fm=26&gp=0.jpg" alt=""></a>
<map name="baidu">
    <area shape="poly" coords="467,174,435,212,449,245,498,239,508,209" href="http://news.baidu.com/" alt="">
</map>

和figure元素联用

figure，指代/定义。通常用于把图片、图片标题、描述包裹起来(但界面不会有变化)。

<figure>
    <img src="http://www.duyiedu.com/source/img/banner1.jpg" alt="图片失效时的提示">
    <h2>这是百度</h2>
    <p>Lorem ipsum</p>
</figure>

子元素：figcaption，表示指代的东西的标题

<figure>
    <img src="http://www.duyiedu.com/source/img/banner1.jpg" alt="图片失效时的提示">
    <figcaption>
        <h2>这是百度</h2>
    </figcaption>
    <p>Lorem ipsum</p>
</figure>

多媒体元素

video元素（视频元素）

<video src="./media/Google.mp4">谷歌视频</video>

controls属性[布尔属性]

控制（控件）属性。表示控制控件的显示，取值只能为controls

【默认】在video元素下，默认是不显示控件的。所以即使网页已经加载好了视频，也要显示控件后才能对视频进行播放操作。

<video controls="controls" src="./media/Google.mp4">谷歌视频</video>
或者
<video controls src="./media/Google.mp4">谷歌视频</video>

autoplay属性[布尔属性]

视频自动播放

<video autoplay src="./media/Google.mp4">谷歌视频</video>

muted属性[布尔属性]

表示静音播放。

【扩展】有些浏览器不允许视频自动播放（即使加了autoplay属性）。但是如果有muted属性的话，那浏览器便会允许视频自动静音播放。

<video autoplay muted src="./media/Google.mp4">谷歌视频</video>

loop属性[布尔属性]

循环播放

<video loop src="./media/Google.mp4">谷歌视频</video>

audio元素（音频元素）

<audio src="./media/Uu - 亲亲 (原唱_ 梁静茹).mp3">亲亲</audio>

controls属性[布尔属性]

<audio controls src="./media/Uu - 亲亲 (原唱_ 梁静茹).mp3">亲亲</audio>

autoplay属性[布尔属性]

<audio autoplay src="./media/Uu - 亲亲 (原唱_ 梁静茹).mp3">亲亲</audio>

muted属性[布尔属性]

<audio muted src="./media/Uu - 亲亲 (原唱_ 梁静茹).mp3">亲亲</audio>

loop属性[布尔属性]

<audio loop src="./media/Uu - 亲亲 (原唱_ 梁静茹).mp3">亲亲</audio>

兼容性

【问题】

旧版本的浏览器不支持多媒体这两个元素
不同的浏览器支持的音视频格式可能不一致

通常互联网中采用的格式
视频： mp4、webmm
音频： mp3

【解决方法（步骤）】

当网站需要播放一个不是mp4或者webm的视频的时候。需要将该视频进行转码，转换成mp4和webm两个格式的视频供浏览器使用。

不采用video元素或者audio元素中的src属性
采用子属性----source

<video muted autoplay>
    <source src="./media/Google.mp4">
    <source src="./media/Google.webm">
</video>

如果浏览器能播放mp4视频的话就直接采用后缀为mp4的源地址。否则采用后缀为webm的源地址。

如果旧版本的浏览器不支持，则添加p元素说明

列表元素

li元素（列表项目元素）

li：list item

ol元素和ul元素是li元素的父元素。ol元素或ul元素和li元素联立起来表示一个列表。

ol元素（有序列表）

ol：ordered list，列表排序元素

【注意】ol元素的子元素只能是li元素。不能在ol元素中写其他元素（例如p元素、h元素、etc…）

把大象装冰箱，总共分几步
<ol>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>关上冰箱门</li>
</ol>

type属性

取值	排序方式
1	用数字排序（默认）
i	用小写的罗马数字排序
I	用大写的罗马数字排序
a	用小写字母排序
A	用大写字母排序

<ol type="i">
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>关上冰箱门</li>
</ol>

这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS list-style-type属性替代。

reversed属性[布尔属性]

反序排序，与显示无关，只是在语义上表示该列表的倒序的（即标号会由大到小）。

<ol reversed>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>关上冰箱门</li>
</ol>

ul元素（无序列表）

ul:unordered list。不在乎顺序的列表。常用于制作菜单或新闻列表。
快捷键： ul>li*n

xxx美女的择偶条件：
<ul>
    <li>有责任心</li>
    <li>会家务</li>
    <li>孝敬老人</li>
</ul>

【扩展】 即使ul元素列表和有序列表的显示一样，但因为采用的是ul元素，所以该列表也是无序列表。--------语义

dl元素(定义列表元素)

dl：definition list，通常用于一些术语的定义

dt(定义标题)

dt:definition title,表示定义的术语的标题

dd（定义描述）

dd:definition description，表示定义的术语的描述

HTML中的术语解释：
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>元素</dt>
    <dd>组成HTML文档的单元</dd>
</dl>

容器元素

*该元素代表一个块区域，内部用于放置其他元素。

没有任何显示效果，显示效果要配合CSS样式

div元素（无语义化元素）

没有语义，只是告诉浏览器这是一块区域，但是无法告诉浏览器这块区域的语义。

<div>
    <div>
        <img src="" alt="">
    </div>
    <div>
        <ul>
            <li>Lorem, ipsum.</li>
            <li>Lorem, ipsum dolor.</li>
            <li>Lorem, ipsum.</li>
        </ul>
    </div>
</div>
<div>
    <div>
        <video src=""></video>
    </div>
</div>

语义化容器元素（HTML5新增的）

浏览器可以很容易的理解每个区域代表的语义的含义，搜索引擎也很好理解。

header元素（页头元素）

通常用于表示页头区域，也可以表示文章头部区域。

<header>
    <div>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div>

    </div>
</header>

footer元素（页脚元素）

通常用于表示页脚区域，也可以表示文章尾部区域。

<footer>
    <div>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div>

    </div>
</footer>

article元素（内容元素）

通常用于表示整篇文章区域。

section元素（章节元素）

通常用于表示文章的章节。

aside元素(侧边栏元素)

通常用于表示文章的侧边栏（附加信息/额外信息）。

<header>
    
</header>
<article>
    <header>
        <h1>这是文章标题</h1>
        <div></div>
    </header>
    <section>
        <p></p>
        <p></p>
        <p></p>
    </section>
    <section></section>
    <aside>
        <div></div>
        <div></div>
        <div></div>
    </aside>
    <footer>
        <p></p>
        <div></div>
    </footer>
</article>
<footer>

</footer>

nav元素（导航元素）

只能用于导航菜单

<nav>
    <a href="">首页</a>
    <a href="">国内</a>
    <a href="">国际</a>
</nav>
或者（但不推荐）
<nav>
    <ul>
        <li>首页</li>
        <li>国内</li>
        <li>国际</li>
    </ul>
</nav>

input元素（文本框元素）

<input type="text">

button元素（按钮元素）

<button>百度一下</button>

link元素（外部资源链接元素）

<link rel="stylesheet" href="../CSS/index.css">

rel属性（链接类型属性）

rel：relationship，表示链接方式与包含它的文档之间的关系。

取值	说明
stylesheet	样式表
icon	网站图标

i元素（特殊文本元素）

用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

<i>
    Lorem ipsum 测试。
</i>

strong元素（重要文本元素）

表示文本十分重要，不能忽略的内容。一般用粗体显示。

<strong>
    Lorem ipsum, dolor sit amet 测试。
</strong>

em元素（强调文本元素）

标记出需要用户着重阅读（或强调）的内容， em元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
通常地，该元素会被浏览器展示为斜体文本

<em>
    Lorem ipsum, dolor sit amet 测试。
</em>

del元素（错误内容元素）

del:delete,表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。
这个标签通常（但不一定要）在文字上显示删除线。

<del>
    Lorem ipsum, dolor sit amet 测试。
</del>

s元素（废弃内容元素）

表示不再相关，或者不再准确的事情。
默认使用删除线来渲染文本

<s>
    Lorem ipsum, dolor sit amet 测试。
</s>

但是当表示文档编辑时，不提倡使用<s>；为此，提倡使用<del>和<ins>元素。

ins元素（插入内容元素）

定义已经被插入文档中的文本。
默认使用下划线来渲染文本

<ins>
    Lorem ipsum, dolor sit amet 测试。
</ins>

* 标记出需要用户着重阅读（或强调）的内容， em元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
* 通常地，该元素会被浏览器展示为斜体文本
```html
<em>
    Lorem ipsum, dolor sit amet 测试。
</em>

del元素（错误内容元素）

del:delete,表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。
这个标签通常（但不一定要）在文字上显示删除线。

<del>
    Lorem ipsum, dolor sit amet 测试。
</del>

s元素（废弃内容元素）

表示不再相关，或者不再准确的事情。
默认使用删除线来渲染文本

<s>
    Lorem ipsum, dolor sit amet 测试。
</s>

但是当表示文档编辑时，不提倡使用<s>；为此，提倡使用<del>和<ins>元素。

ins元素（插入内容元素）

定义已经被插入文档中的文本。
默认使用下划线来渲染文本

<ins>
    Lorem ipsum, dolor sit amet 测试。
</ins>

md名字又重复

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html标签

#HTML标签 {ignore}文章目录元素嵌套（包含关系）块级元素和行级元素包含关系总结注释标签文本元素h元素(标题元素)h1：一级标签h2：二级标签h3：三级标签h4：四级标签h5：五级标签h6：六级标签p元素（段落元素）span元素（容器元素）pre元素（预格式化文本元素）code元素（代码元素）a元素（超链接元素）href属性target属性title属性img元素（图片元素）src属性alt属性与a元素联用和map元素联用和figure元素联用多媒体元素video元素（视频元素）controls
复制链接

扫一扫