从零开始前端学习[1]:认识常用的标签

从零开始前端学习[1]:认识常用的标签

1. h标签
2. p标签
3. pre标签
4. br标签
5. em和i标签
6. strong标签和b标签
7. span标签
8. sub和sup标签
9. del和ins标签
10. a标签
11. 列表标签ul ol dl
12. 弃用的标签font

---

提示：
作者:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

---

h标签

h 标签又叫做标题标签，是从h1到h6的，分别代表标题从大到小，即h1是最大的标题标签，依次减小(在实际使用中，用的可能相对比较少一点，一般使用别的标签进行替代)

    <h1>学习是要坚持不懈的</h1>    <h2>学习是要坚持不懈的</h2>    <h3>学习是要坚持不懈的</h3>    <h4>学习是要坚持不懈的</h4>    <h5>学习是要坚持不懈的</h5>    <h6>学习是要坚持不懈的</h6>

显示的效果如下所示:

---

特点:
字体从h1到h6依次减小，越来越细，权重依次下降，并且独占一行
注意事项:
h标签的数量有且仅有6个，并且一般情况下h标签在页面中只会允许出现一次

---

p标签

p标签又叫做段落标签，代表的是一个完整的段落，当然这个标签可不仅仅只是用来代表段落的，同样也可以作为其他标签的容器来使用

        <p>            永&nbsp&nbsp&nbsp&nbsp&nbsp和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。        </p>

其中&nbsp代表的是空格的意思:

显示的效果如下所示:

特点:

p代表的段落标签是独占一行的

---

pre标签：

pre标签是特殊的段落标签，与p标签进行想比较的话，很容易发现，浏览器在解析多个空格的时候，往往只是作为一个空格来解析，但是很多时候，又是需要我们去解析多个空格，比如显示我们的代码这样的特殊情况:

    <pre>        public void run(){            log.i(tag,"run function");        }    </pre>

即按照我们自己想要的格式去显示，这个时候就需要用到特殊的p标签，也就是pre标签
显示效果如下:

特点：
内容区域能够按照我们想要的排布来进行显示，一般情况下，主要用来显示代码区域等

---

br换行标签

br标签主要是用来进行换行操作的，是一个单标签，即

    <br>或者</br>即可代表换行符号    在此补充一点，再html中"<"和">"这两个符号是需要通过&lt;和&gt;这两个组合才能实现的    如:        <p>&lt;函数集合&gt;</p>

显示:

并没有什么特殊含义

---

em和i标签,斜体字标签

em标签和i标签都是斜体字标签，可能在显示上面没有区别，但是他们的也有很大的区别，后面会提到

        <em>我是em</em> <br>        <i>我是i</i> <br>

显示效果如下:

可以看到其实在显示上面并没有多少区别，但是他们也有几点区别：主要如下所述：

• em标签是文字斜体显示，而i标签强调的是斜体效果，并且em标签强调的效果要比i标签更强
• em标签有优化搜索引擎的效果,而i标签却没有
• em的权重更高(优先级，优先权)
  ———-

###**strong标签和b标签**strong标签和b标签都是对文字的一种加粗，这是默认标签所带的效果，当然这个效果也可以在后续通过font-size等属性或者css的效果来进行实现，在这里不去赘述,他们也有着一些不同的点需要区分，类似em和i标签:

    <strong>我是strong标签</strong>    <b>我是b标签</b>

显示：区别：

• strong强调强度强，重要文本。有利搜索引擎优化。b只是文本显示粗体的效果。
• strong的权重更大
• strong粗体文本显示
• b文字粗体显示效果

---

span标签

span标签对应的是文本样式的分离标签：大概的意思就是，如果需要对文本样式中个别的样式进行单独定义的话，就可以使用
如下使用的方法：

    这是一个<span style="color:red;background:blue;">没有固定的格式表现，可对其应用样式</span>

如下所示：

特点：
span标签是一个行级标签(不是独占一行的标签，而是行内显示)

---

sub和sup标签

sub标签和sup标签主要是用来显示用来进行上标显示和下标显示的，具体
sub是表示下标显示的
sup是用来表示上标显示的

    x<sub>1</sub><sup>2</sup>+y<sub>1</sub><sup>2</sup> = z<sub>1</sub><sup>2</sup>;

如下显示的勾股定理：

特点：
sup和sub标签有时候主要用于数学中的一些计算，其它其实并没有一些特殊含义

---

del和ins标签

del标签主要的定义是删除标签，定义文档中已经被删除的一些文本，如淘宝上面的一些特价商品，在前面都会有一个废弃掉的价格
ins标签主要是插入标签，定义被插入的文本

    原价<del>998￥</del></br>    惊爆价<ins>558</ins>

显示如下所示:

特点:
del标签是在原来文本上面增加了一个横杠，表示删除，
ins标签是在原来文本下面添加了一个下划线，着重表示强调是插入的文本样式

---

a标签

a标签又叫做文本链接标签，同时它也是唯一具有可以包含块级元素特性的标签
a标签的属性:
target属性:_self(在本文档中去显示)，_blank(在新的窗口中打开)
href锚点属性：

    链接到同一个页面不同的位置    <a href=“#锚点名称”></a>    <a href=“锚点名称”></a>    <a href="mailto:[e-mail]"></a>

这里的锚点其实就是标签的ID

    <a href="http://www.baidu.com">这是通往百度的道路</a>    <a href="#p_1">这是页面自己内部的链接</a>    <a href="mailto:[e-mail]">这是一个邮件链接</a>    <p id="p_1">这是p_1</p>

显示如下:

特点:

• a标签是一个超链接标签，默认的a标签在鼠标指上去的时候会有一个手指效果
  
• a标签是一个行级元素标签
  
• a标签有自己的默认的标签样式
  
• 如果a标签中的href没有指向的话，一般情况下我们都默认它是值为#
  
• 在href链接到外部网站的时候，需要补全http://
  

---

列表标签ul ol dl

ul(unordered list)有序列表的使用

无序列表是一个项目的列表，此列表项目默认使用粗体的原点来进行标记
无序列表始于ul标签，每个列表项始于li
也就是ul里面包含着li每个列表项

        <ul>            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>深圳</li>        </ul>

显示效果如下所示:

默认的情况是，每个列表前面有一个默认的原点表示，这是默认的样式，可以进行修改为空心圆，方块符号等
如一下两种使用：
可以使用list-style-type或者直接用type属性来进行修改，一般情况下使用list-style-type来进行修改，因为属性集更加丰富

<ul type="circle">            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>深圳</li>        </ul>        <ul type="square">            <li>北京</li>            <li>上海</li>            <li>广州</li>            <li>深圳</li>        </ul>

显示如下:

特点:

• 无序列表是没有顺序的，但是可以通过样式设置来进行修改
  
• 无序列表是有默认样式的，这个可以使用list-style-type:none来进行去除
  
• 无序列表ul内部只能去嵌套li，不能嵌套别的，li内部可以去再做嵌套操作
  
• 可以使用type=”disc”(实心圆)type=”square”(方块),type=”circle”(空心圆)来进行无序列表样式的设置
  

有序(ordered list)列表的使用

有序列表ol，与有序列表相对应的肯定就是有序列表了，有序列表表示一列项目，列表项目默认使用的是数字来进行表示
有序列表始于ol，每个列表项目始于li

    <ol>        <li>张三</li>        <li>李四</li>        <li>王五</li>        <li>赵六</li>    </ol>

如下所示：

默认ol是按照数字1234的序号进行显示操作的
对于有序列表的显示，同样也可以使用type来进行序号的样式的修改

    <ol type="1">        <li>张三</li>        <li>李四</li>        <li>王五</li>        <li>赵六</li>    </ol>    <ol type="A">        <li>张三</li>        <li>李四</li>        <li>王五</li>        <li>赵六</li>    </ol>    <ol type="I">        <li>张三</li>        <li>李四</li>        <li>王五</li>        <li>赵六</li>    </ol>    <ol type="a">        <li>张三</li>        <li>李四</li>        <li>王五</li>        <li>赵六</li>    </ol>

可以通过type来设置其显示的样式类型
特点:

1. 有序列表是以ol开始，每个列表项目以li开始
   
2. ol的默认样式为1，2，3显示，
   
3. 可以通过list-style-type:none；来取消其默认的样式
   
4. 可以通过type来设置其样式类型
   

自定义组合列表的使用

定义列表dl不仅仅是一列项目，同样是项目及其注释的组合，定义列表以dl标签开始，每个定义列表项目已dt开始，每个定义列表项的定义以dd开始，注意:定义列表dl，定义列表项目dt，定义列表项目的定义dd

        <dl>            <dt>计算机</dt>                <dd>用来计算的仪器 ... ...</dd>            <dt>显示器</dt>                <dd>以视觉方式显示信息的装置 ... ...</dd>                <dd>可以用来展示图像</dd>        </dl>

注意：
定义列表在前端开发很多时候的使用时比较多的。结合css样式，可以更好的布局与增加视觉效果等

---

font标签

font标签是html以前版本中使用的，对字体进行样式展示的，但是现在已经弃用了，但是有时候在开发中同样会有使用

<html><body><h1><font face="verdana">A heading</font></h1><p><font size="5" face="arial" color="red">A paragraph.</font></p></body></html>

特点:

• font标签是用来描述字体显示的
  
• font自身具有的属性size,表示文字的大小,可以从1–7
  
• font自身具有的color表示文字的颜色
  
• face表示字体的样式，不过现在已经使用font-family来进行替换了
  

以上即是一些html的一些简单标签的使用。当然这些标签是需要结合css样式，才能更好的展示效果

欢迎访问博客