前端HTML标签知识

前言

标签对于前端网页来说非常重要的一个部分。

一、字体标签

 字体标签用于控制文本的字体样式。<font></font>标签是自定义字体标签，可以定义文字的颜色，文字的大小。

<font color="yellow" size="7">我要成为一名优秀的程序员</font>

 注意：这里的字体大小有局限性 ，最大字号为7，CSS可以完美补充这个缺陷。

二、横线标签

横线标签也是我们俗称的水平分割线，<hr />是横线标签，横线标签默认是通栏的，默认居中。水平分割线可以控制线的宽度 width ，线的颜色 color，线的大小size。

<hr width="600" align="left" color="red" size="6" />

三、项目列表标签

"<dl></dl>"标签里面放项目列表的，<dt>是放项目名称的，<dd>是放项目描述的。

<dl>
   <dt>项目名称</dt>
   <dd>项目描述</dd>
</dl>
     <!-- 多组的项目列表 -->
     <dl>
        <dt>学科</dt>
        <dd>语文</dd>
        <dd>数学</dd>
        <dd>英语</dd>
        <dd>物理</dd>
        <dd>化学</dd>
     </dl>

四、有序列表标签和无序列表标签

<ul> </ul>是无序列表标签，<ol></ol>是有序列表标签，无序列表的样式是默认小黑点的，有序列表的样式是默认阿拉伯数字的。

<!-- 无序列表语法格式ul>li*数字 数字代表有多少个列表 -->
    <h2>无序列表</h2>
    <ul>
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ul>
    <h2>有序列表</h2>
<!-- 有序列表语法格式ol>li*数字 数字代表有多少个列表s -->
    <ol>
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
    </ol>

 

这里可以拓展一下列表的样式：无序列表可以拓展三种类型，语法格式type="类型"，这三个类型分别是circle(小圆圈)，disc（小黑点），square（小方块）。

<h2>无序列表</h2>
    <!-- 黑色小方块 -->
    <ul type="square">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ul>
    <h2>无序列表</h2>
    <!-- 小圆圈 -->
    <ul type="circle"> 
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ul>
    <h2>无序列表</h2>
    <!-- 默认小黑点 -->
    <ul type="disc">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ul>

 

 有序列表也有四个样式，语法格式也是一样的type="类型"，这四个类型分别是"A"、"a"、"I"、"1"。

<h2>有序列表</h2>
    <!-- 有序列表可以加 A a I 1 -->
    <ol type="A">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ol>
    <ol type="a">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ol>
    <ol type="1">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ol>
    <ol type="I">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li>列表六</li>
    </ol>

 我们除了可以给<ul>和<ol>标签加type类型，也可以给<li>列表标签加上类型，<ul>和<ol>标签是<li>列表标签的父类。

<ul type="disc">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
        <li>列表五</li>
        <li type="square">列表六</li>
    </ul>

  

五、图片标签

图片链接是将图片与URL链接关联起来，当用户点击图片时，会跳转到指定的链接页面。在HTML中，可以使用<a>标签来创建图片链接。 <img>标签的src属性指定了要显示的图片的路径，alt属性指定了当图片无法显示时的替代文本，可以给到用户一个提示效果。

语法格式：<a href="链接网站"><img src="图片链接.jpg" alt="文本"></a>

<a href="http://www.163.com"><img src="C:\Users\HP\OneDrive\桌面\前端补充\标签知识\images\wallhaven-zyxvqy.jpg" width="384" height="224"  alt=""></a>

图片标签也可以设置高度height和宽度width，边框border， title当鼠标经过图片的时候给用户一个提示

六、特殊标签

    正常文字<b>加粗文字</b><br />
    正常文字<strong>加粗文字</strong><br />
    正常文字<u>下划线</u><br />
    正常文字<ins>下划线</ins><br />
    正常文字<i>倾斜文字</i><br />
    正常文字<em>倾斜文字</em><br />
    正常文字<s>删除线</s><br />
    正常文字<del>删除线</del><br />
    正常文字<sup>上标字</sup><br />
    正常文字<sub>下标字</sub><br />

七、弹出新窗口标签

弹出新窗口标签为base标签，可以加在<a>标签的后面，也可以在</head>上面加target="_blank"，这样就可以弹出新窗口，从而不会被覆盖

八、锚点链接标签

锚点链接标签的好处是可以快速的找到文章所在的位置，实现一个跳转的效果，锚点的id具有唯一性

<!-- 目标位置 -->
<h2 id="section1">Section 1</h2>
<p>这是第一部分的内容。</p>

<!-- 链接 -->
<a href="#section1">跳转到第一部分</a>