HTML标签(元素)

最新推荐文章于 2023-07-27 10:52:54 发布

TZOF_

最新推荐文章于 2023-07-27 10:52:54 发布

阅读量923

点赞数 1

分类专栏： HTML 文章标签： html css html5 javascript css3

本文链接：https://blog.csdn.net/TZOF_/article/details/113032094

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

常用标签：

html标题：<h1>-<h6>

标题（Heading）是通过<h1>-<h6>标签进行定义
<h1>为最大标题，<h6>为最小标题
默认样式：标题标签带有上下外边距，撑出元素之间的间距。
块级标签

html水平线：<hr>

hr：创建水平线，可用于分割内容。
默认样式：1px的边框线，8px上下外边距。

<hr>

html段落：<p>

p：段落标签，块元素。
注意：在文本标签内属于特殊文本元素（文本标签都是行内元素除了p）。
默认样式：文本大小为16px，根据文本大小跳转上下外边距字体16px上下边距16px。

<p>这是一段内容</p>

html块：<div></div>

div：标准的块级标签。
块元素在没有设置宽高的情况下，宽度默认沾满父元素的100%，高度靠内容撑出（如果没有内容高度为0）。

html文本：<span>

span：普通文本标签，文本默认大小为16px，靠文本内容撑出大小。

html文本格式化：

b：(bold)粗体文本，没有任何意义，字体大小21px。<b></b>

i：(italic)斜体文本，没有任何意义。<i></i>

sup：上标。<sup></sup>

sub：下标。<sub></sub>

s：删除线文本，没有任何意义。<s></s>

<s>删除线文本</s>

u：表示插入文本，添加下划线，没有任何意义。<u></u>

<u>下划线文本</u>

html换行标签：<br>

br：换行标签，空元素标签。

<br>

html图片插入标签：行内元素但可以设置宽高：<img>

img：在页面中插入图片。
src：source，来源，图片的路径。（图片路径可以是网络图也可以是本地图）。
alt：图片输出格式（在图片加载出错时显示，替代文本）。
title：图片标题（在鼠标悬浮图片时显示标题内容）

图片路径查找：

图片名：图片和文件为同一级目录，直接使用添加图片名称。
./ 找到同级目录中文件。
../ 找到父级目录中的文件。

html超链接标签：<a></a>

a：超链接。 a之间可以加任何东西文字图片块等等。
作用：实现页面的跳转，点击标签内的内容，跳转到指定链接地址。
注意：当a标签没有添加href属性时是链接占位符（标签内文本为普通文本）。
href：hypertext reference，超文本指向，设置转跳的网页的链接地址（可以转跳本地的网页或者网络上的网页）。
target：目标，设置网页的打开方式，默认值是在当前的页面打开。

- _blank：作用：在新的窗口打开页面。

是否在新的窗口打开页面需要注意的问题：

- 国内通常会选择在新的窗口打开页面，看完后直接关闭。
- 而美国通常会在本窗口打开，看完页面后点击返回。

- - 原因：

1. 1. 1. 用户习惯。
    2. 商业考虑。
    3. 硬件问题和环境不同。
    4. Web技术开发的早晚不同。
    5. 服务器的压力考虑。

html语义化标签：

根据内容的结构（内容语义化），选择合适的标签（代码语义化）。
便于开发者阅读和写出更优雅的代码的同时，让游览器的爬虫和机器很好的解析。

html语义化的好处：

为了在没有css的情况下，页面也能呈现出很好的内容结构，代码结构。
代码结构清晰，方便阅读，有利于团队合作开发。
方便搜索引擎识别页面结构，有利于SEO(搜索引擎优化)。
方便其他设备解析，（列如：屏幕游览器，盲人阅读器，移动设备）以语义化的方式渲染网页。

页面结构语义化：

<nav>标记导航，仅对页面中重要的链接群使用</nav><nav></nav>

<header>页眉，通常包括页面logo，主导航，全站链接以及搜索框</header><header></header>

<main>页面的主要内容，一个页面中只能使用一次，如果是WEB应用，则包裹其主要功能</main><main></main>

<section>定义文档中的节（section，区段，部分），比如：章节，页眉，页脚或者文档中的其他部分</section><section></section>

<footer>页脚，只有当父元素为body时才是整个页面的页脚</footer><footer></footer>

html表格标签：<table></table> <tr></tr> <th></th> <td></td>

html表单标签：<from></from> <input> <textarea></textarea> <button></button>

html文本格式化标签：

b：(bold)粗体文本，没有任何意义，字体大小21px。
strong：粗体文本，具有很强的强调意义，用于表示文本的重要性。
i：(italic)斜体文本，没有任何意义。
em：斜体文本，具有很强的强调意义，用于表示文本的重要性。
sup：上标。
sub：下标。
s：删除线文本，没有任何意义。
del：删除线文本，具有很强的删除意义，表示被遗弃的内容。
u：表示插入文本，添加下划线，没有任何意义。
ins：添加，插入文本，添加下划线，具有很强的增加意义，表示新增的内容。
small：定义小号文本。

<b>粗体文本</b><b></b>

<strong>粗体文本</strong><strong></strong>

<i>斜体文本</i><i></i>

<em>斜体文本</em><em></em>

<sup>上标</sup><sup></sup>

<sub>下标</sub><sub></sub>

<s>删除线文本</s><s></s>

<del>删除线文本</del><del></del>

<u>下划线文本</u><u></u>

<ins>添加，插入文字</ins><ins></ins>

<small>小号文本</small><small></small>

html“计算机输出”标签：

code：定义计算机代码。
kbd：定义键盘码。
samp：定义计算机代码样式。
var：定义变量。
pre：定义预格式文本

<code>电脑自动输出文本</code><code></code>

<kbd>键盘码</kbd><kbd></kbd>

<samp>计算机代码样式</samp><samp></samp>

<var>变量</var><var></var>

<pre>格式文本</pre><pre></pre>

html语义化标签：

根据内容的结构（内容语义化），选择合适的标签（代码语义化）。
便于开发者阅读和写出更优雅的代码的同时，让游览器的爬虫和机器很好的解析。

html语义化的好处：

为了在没有css的情况下，页面也能呈现出很好的内容结构，代码结构。
代码结构清晰，方便阅读，有利于团队合作开发。
方便搜索引擎识别页面结构，有利于SEO(搜索引擎优化)。
【方便其他设备解析，（列如：屏幕游览器，盲人阅读器，移动设备）以语义化的方式渲染网页。

页面结构语义化：

<nav>标记导航，仅对页面中重要的链接群使用</nav><nav></nav>

<header>页眉，通常包括页面logo，主导航，全站链接以及搜索框</header><header></header>

<main>页面的主要内容，一个页面中只能使用一次，如果是WEB应用，则包裹其主要功能</main><main></main>

<section>定义文档中的节（section，区段，部分），比如：章节，页眉，页脚或者文档中的其他部分</section><section></section>

<footer>页脚，只有当父元素为body时才是整个页面的页脚</footer><footer></footer>

<article>定义外部内容，显示像报纸一样的文章内容</article><article></article>

<aside>定义所有内容之外的部分，如侧边栏，文章的一组链接，广告，相关产品列表等</aside><aside></aside>

<figure>定义一组媒体对象以及文字内容</figure><figure></figure>

<figcaption>定义figure的标题</figcaption><figcaption></figcaption>

html列表标签：

无序列表：

- ul：定义无序列表(默认有上下外边距16px(值会根据内容的文本大小改变)，左内边距40px)。<ul></ul>
- li：列表中的项。<li></li>
- 注意：默认有无序列表的样式"圆点",可通过css属性改变

有序列表：

- ol：定义有序列表(默认有上下外边距16px(值会根据内容的文本大小改变)，左内边距40px)。<ol></ol>
- li：列表中的项。
- 注意：默认有有序列表的样式为"阿拉伯数字"。
- type属性列表的类型：

- - 1：阿拉伯数字
  - A：大写英文字母
  - a：小写英文字母
  - I：大写罗马数字
  - i：小写罗马数字

自定义列表：

- dl：定义列表(默认有上下外边距16px(值会根据内容的文本大小改变))。<dl></dl>
- dt：定义列表的项。<dt></dt>
- dd：定义列表项的描述(默认有40px的左外边距)。<dd></dd>

<ul>

</ul>

</ol>

<dl>

<dd>列表项的描述1</dd>

<dd>列表项的描述2</dd>

</dl>

<dl>

<dd>

</dd>

</dl>

html表格标签：

表格：

- table：定义表格。<table></table>
- caption：定义表格的标题(文本默认在表格的水平居中的位置)。<caption></caption>
- thead：定义表格的表头。<thead></thead>
- tr：表格的行。<tr></tr>
- th：定义表格表头的单元格。<th></th>
- tbody：定义表格的主体部分。<tbody></tbody>
- td：定义标准的单元格。<td></td>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

html表单标签：

form表单：

- form:用于创建表单。<form></form>

- - action(html属性)：当提交form表单时将表单的内容发往何处。action="#"

- input：定义输入框，按钮等。<input></input>

- - type(html属性)：input的类型，值不同相对应input的功能或样式都会相对应的改变。

- - - type属性：（https://www.w3school.com.cn/tags/att_input_type.asp）

- - - - button：定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
        checkbox：定义复选框。
        password：定义密码字段。该字段中的字符被掩码。
        radio：定义单选按钮。
        reset：定义重置按钮。重置按钮会清除表单中的所有数据。
        submit：定义提交按钮。提交按钮会把表单数据发送到服务器。
        text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。type="text"

- label：给input添加标注，和input进行绑定。<label></label>
- fieldset：将表单内内容进行分组，会产生一个边框(默认样式2px的边框，内边距(10px,12px)，左右外边距2px)。<fieldset></fieldset>
- legend：legend元素是 fieldvset 元素定义的标题(默认在分组框的上边框内，可以左右移动其位置)。<legend></legend>
- select：定义单选或多选菜单。<select></select>
- optgroup：定义选项组。<optgroup></optgroup>

- - label(html属性)：添加选项组的描述。label="上午"

- option：定义列表中的一个选项内容。<option></option>
- button：定义一个按钮。<button></button>

</fieldset>

</optgroup>

</optgroup>

</select>

</select>

</form>

TZOF_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML标签(元素)

常用标签：html标题：<h1>-<h6>标题（Heading）是通过<h1>-<h6>标签进行定义 <h1>为最大标题，<h6>为最小标题默认样式：标题标签带有上下外边距，撑出元素之间的间距。块级标签<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h
复制链接

扫一扫