HTML教程②-HTML元素大全(1)-基础元素

安木夕
1,695 阅读9分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

01、基础元素

<h1/2/3/4/5/6>标题

从大h1到小h6，块元素，有6级标题。是一种标题类语义标签，内置了字体、边距样式。

  • 合理使用h标签，主要用于标题，不要为了加粗效果而随意使用。
  • h1用于最重要的标题内容，会被搜索引擎使用，用得太多影响SEO效果。
<h1 align="center">标题标签h1/2/3/4/5/6：一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
属性描述值
align标题的水平对齐方式left、center、right

<p>段落元素

段落元素<p>内容</p>（paragraph/ˈpærəɡrɑːf/ 段落、分段）块元素，表示一个内容段落，前后自动换行，段落之间会有间隙（默认margin上、下=1em），比<br>的行间距更大。

<p align="left">段落文字1</p>
<p align="center">段落文字2<br/>012</p>
普通文字1，用br换行<br>普通文字1

image.png

<br>换行

换行元素（Break）：<br>，单标签，默认行间距。HTML中不识别输入的回车换行，需用<br>标签换行。

<hr>水平线

水平线元素：<hr>，单标签，有颜色color、长度width、粗细size、对齐align等属性，CSS中可用border设置样式。

<br>
<hr width="80%" color="green" align="left" size=1 />
<hr width="80%" color="green"  />
<hr width="300px" color="red" size="3" />

image.png

属性描述值
color线颜色颜色
width宽度像素、百分比
size线粗细整数，像素
align水平对齐方式，left、center、right

<ul-li/ol-li>列表标签

列表都是块元素，li中可以放任何东西，常用来组织列表相关内容，如商品列表、树形结构、导航等。

  • 无序列表<ul><li></li></ul>：unordered list，li为列表项，属性type可定义符号样式，默认disc（实心圆）。
  • 有序列表<ol><li></li></ol>：ordered list，li为列表项，属性type可定义排序样式，默认1（数字）。
属性描述值/示例
type序号类型无序列表：disc=实心圆、square=方块、circle=空心圆
有序列表：1=数字、a/A=字母、i/I=阿拉伯数字
start有序列表：序号开始的值，默认1<ol type="1" start="4">
reversed有序列表：倒序排列<ol type="1" reversed >
<li>的属性 value有序列表：设置序号值，会影响后面<li type="I" value="5">
<ul type="disc">            		<!-- type可定义符号样式，默认disc=实心圆，可自定义样式取代-->
  <li type="square">l1    			<!--square=方块-->
    <ul><li>l1的嵌套子节点</li></ul>
  </li>            
  <li type="circle">l2</li>			<!--circle=空心圆-->
  <li>l3</li>
</ul>
<ol type="1">           <!-- type可定义排序样式，默认1=数字-->
  <li type="a">l1</li> 	<!-- a=小写字母排序-->
  <li type="A">l2</li> 	<!-- A=大写字母排序-->
  <li type="i">l3</li> 	<!-- i=小写阿拉伯字母排序-->
  <li type="I">l4</li> 	<!-- I=大写阿拉伯字母排序-->
  <li>l5</li>
</ol>

image.png

  • 无序标签、有序标签可以多层（相互）嵌套。
  • 列表项中的内容可以是文本，也可以是其他标签，如图片img、a标签。
  • 使用场景：新闻列表，导航按钮。
  • list-style-type：在css中设置列表符号样式，如ul li{list-style-type:disc} ``ol li{}，枚举值-菜鸟教程。
    • disc、circle...：实心、空心符号
    • decimal...：数字

⌨️快捷键（VSCode）：标签名*数量>子标签名*数量，快速输入多组父子标签，加大括号则为标签中内容。ul>li*3：快速输入ul标签+3组子li标签。

<dl/dt/dd>语义化描述列表

作用同<ul/li>类似，通常用于展示词汇表或者元数据 (键 - 值对列表)，块元素。JD首页的分类导航就是用的<dl/dt/dd>结构。

元素/属性描述
<dl>description list，描述列表，包含多组<dt>、<dd>
 <dt>description term( /tɜːrm/ 术语，项 )描述术语（标题），<dl>的子元素
 <dd>description definition(/ˌdefɪˈnɪʃn/，定义)描述内容，<dl>的子元素，放到<dl>后面，用来描述<dt>。默认样式左缩进：margin-inline-start: 40px
<dl>
  <dt>人物简介：</dt>
  <dd>一代诗仙</dd>
  <dt>代表作：</dt>
  <dd>仰天大笑出门去，下楼排队做核酸</dd>
</dl>

image.png

<blockquote>/<q>引用元素

语义化引用元素，代表其中的文字是引用内容。

元素/属性描述
<blockquote>块元素块级引用元素(quote /kwoʊt/ 引用、引文)，默认会增加缩进，一般都会加上额外的自定义样式。
 cite(/saɪt/ 引用)标注引文相关资源的url地址或相关解释信息，但并不会显示
<q>行内元素行内引用行内元素，默认样式是用伪元素添加了引号“”
 cite同上块引用

⚠️注意：默认样式不同浏览器不同，所以最好通过css统一样式。

<style>
  blockquote {
    font-size: 1rem;
    color: #999;
    border-left: .2rem solid #dfe2e5;
    margin: 1rem 0;
    padding: .25rem 0 .25rem 1rem;
  }
</style>
<div>
  <blockquote>
    块引用blockquote文本<q>行内引用q</q>
  </blockquote>
  <q>行内引用q</q>
</div>

image.png

<span/font/b/i/u/del>文本元素

针对文本内容的常规元素。除了 pre 是块元素，其他都是行内元素。文本标签一般会嵌套在<p>标签中使用，实现不同语义/效果。

元素/属性描述值/示例
<span>（ /spæn/）无特定含义，是用来组织文档的行内元素（行内容器），外观取决于css<span>span内容</span>
<font>设置文本字体样式的文本元素，文本在标签里
 face字体类型，值为字体名称face="楷体"
 size字体大小，从 1 到 7 的数字，默认3。不同于字号，已废弃不推荐使用。推荐css代替
 color字体颜色颜色
<pre>块元素预格式的文本（predefine /ˈpriːdɪˈfaɪn/ 预定义），保留空格、换行符，默认等宽字体。只能包含文本/行内元素，不能再包含其他块元素了。
<b>粗体样式（Bold），单纯样式效果
<strong>粗体效果，加重语气，更强调语义，语义在搜索引擎、语音阅读时有效
<i>_斜体_样式，单纯样式效果
<em>_斜体_效果（emphasis/ˈemfəsɪs/强调），着重语气，和i相比强调的语义
<u>下划线
<del>删除线
<sub>下标(字体小)
<sup>上标(字体小)
<span style="color:blue">span内容</span>
<font size="4" color="red" face="楷体">font标签内容</font>
<pre style="color:yellowgreen;font-family:'楷体'; font-size: 18px;">pre字体内容   ，
  支持回车和空   格</pre>
<b>粗体b</b> &nbsp;
<strong>粗体strong</strong>&nbsp;
<i>斜体i</i>&nbsp;
<em>em标签</em>&nbsp;
<u>下划线u</u>&nbsp;
<del>删除线del</del>&nbsp;
<sub>下标sub</sub>&nbsp;
<sup>上标sup</sup>

image.png

<abbr/address/code...>语义元素

表示特点语义的元素，默认提供了一些样式（吃藕丑）。

元素/属性描述
<abbr>行内元素缩略语或缩写（abbreviation /əˌbriːviˈeɪʃn/ 缩略），默认样式：下划线（虚线）
 title用title解释其含义，鼠标提示显示
<address>块元素联系方式的元素，如地址、URL，邮箱等。默认样式：斜体+块元素
<code>行内元素计算机代码，默认样式：等宽字体
<var>行内元素变量名称： 数学表达式或编程中的变量，默认样式：斜体
<kbd>行内元素键盘、用户输入，默认样式：monotype 字体
<samp>行内元素计算机程序输出，（sample，样本）默认样式：monotype 字体
<time>行内元素，IE🚫时间日期，用于根据不同的语言输出不同的格式
 datetime合法的日期时间值
<div >
  <p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML（abbr缩写）</abbr> 来组织网页文档。</p>
  <p>欢迎光临怡红院！联系方式（address）：<address>长安南路 &nbsp;&nbsp;<a href="">发送邮件</a></address></p>
  <code>code代码</code>&nbsp;&nbsp;
  <var>var变量</var>&nbsp;&nbsp;
  <kbd>键盘kbd </kbd><kbd>Fn</kbd>+<kbd>R</kbd>&nbsp;&nbsp;
  <samp>计算机输出samp</samp>&nbsp;&nbsp;
  <time datetime="2016-01-20">2016 年 1 月 20 日</time>
</div>

image.png

<div>及语义<header/footer...>

<div>是一个容器元素，是一个“纯粹的”、“无任何语义的”容器块元素，用来把不同的内容分区管理。本身无任何表现效果，配合css使用。
在HTML5中增加了和div相同作用的语义化块布局元素标签，这些元素定义了一个大概的语义范围，并没有一个严格的界限，同样也么有任何样式。语义块元素可读性更好，也更有利于SEO。

元素/属性描述
<div>块级无语义元素(division 分区)
 align内部内容的对齐方式，已废弃
<header> IE9页眉：文档头部相关区域
<nav>导航栏：主导航相关区域
<footer>页脚：底部相关区域，如页面下面的版权信息、文章后面的申明信息等
<aside>侧边栏：页面内容以外的区域，如侧边栏、呼出框等
<main>主内容：文档主内容区域
<article>文章，表示一个独立的、可重复的内容块，如一篇博客、一条评论、一篇帖子
<section>段落部件，文档中的章节、页眉、页脚，把article分为多个section

⚠️注意：语义化块元素在_一些古老_的浏览器存在兼容性问题，如IE8。

<h2>div布局</h2>
<div style="height: 280px;">
    <div class="header">div class="header" </div>
    <div class="nav">div class="nav"</div>
    <div style="height: calc(100% - 140px);">
        <div class="left">div class="left"</div>
        <div class="right">div class="right"</div>
    </div>
    <div class="footer">div class="footer"</div>
</div>
<h2>语义布局</h2>
<div style="height: 280px;">
    <header class="header">header class="header" </header>
    <nav class="nav">div class="nav"</nav>
    <main style="height: calc(100% - 140px);">
        <aside class="left">aside class="left"</aside>
        <article class="right">article class="right"</article>
    </main>
    <footer class="footer">footer class="footer"</footer>
</div>
<!--样式-->
<style>
    .header,
    .footer {
        background-color: antiquewhite;
        height: 40px;
        text-align: center;
        line-height: 40px;
        float: none;
    }

    .nav {
        background-color: aquamarine;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .left {
        background-color: rgb(201, 223, 215);
        float: left;
        width: 150px;
        height: 100%;
        text-align: center;
    }

    .right {
        background-color: rgb(238, 252, 206);
        float: left;
        height: 100%;
        width: calc(100% - 150px);
        text-align: center;
    }
</style>

image.pngimage.png

<a>超链接

元素是最常用的超链接标签，主要属性是href这是网络互联的重要特性。行内元素，不会换行。双标签：标签内可以放其他内容，如文字、图片。

属性描述值/备注
href超链接（hypertext reference），要跳转的目标链接地址，除了http地址，还支持页面内部的锚点跳转。🔸 相对路径或网络路径，资源路径。
🔸 锚点/文档片段：页面内部跳转，用#号标识， 作为文档片段使用，跟在url后面
 ● href="#"，或不设置，跳转到头部
 ● 用<a>标签的name属性作为锚点，href="#name"：http://url#id
 ● 用其他标签的id属性作为锚点，href="#id"：http://url#name
🔸 电子邮件连接：href="mailto:URL"
🔸 电话：href="tel:号码"
name元素名称，可作为锚点设置锚点<a name="p1"/>，跳转到锚点<a href="#p1"/>
target告诉浏览器用什么方式来打开目标页面- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示；_top：在顶级窗口中显示。
rel与目标对象的关系
download指示这是一个下载地址值为本地保存文件名

⚠️当不希望a标签执行跳转，用来执行其onclick事件时，需设置href="javascript:void(0)"，申明不执行跳转。

<a href="http://www.baidu.com" target="_self" title="鼠标悬停提示的内容">显示的内容=a标签=百度</a>
<a href="../ftest/html.md">相对地址</a>

<!-- 页面内#锚点跳转 -->
<a href="#">默认#-跳转到头部</a>
<a href="#m1">a标签的name属性作为锚点</a>   <!--a name="m1"-->
<a href="#hp">任意元素的id属性作为锚点</a>

<a href="javascript:void(0)">不执行a标签跳转</a>

当a标签设置了href属性后，就是一个可以点击操作的超链接了，鼠标样式为小手形状image.png（pointer），同时有三种显示模式（默认样式），都可以通过css样式（伪元素选择器）调整。

image.png

  • 未点击时，显示为蓝色字体+下划线
  • 点击访问过，显示为紫色字体+下划线
  • 鼠标点击链接时，显示为红色字体+下划线

<a>元素标签的样式应该遵循上面的基本逻辑，基本原则就是让人容易分辨出这是一个超链接。

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址

avatar
文章
阅读
粉丝