zoukankan      html  css  js  c++  java
  • 揭开Html 标签的面纱,忘不了的html .

     Html (Hypertext MarkupLanguage),是用于描述网页文档的一种标记语言,是一种标准,它通过标记符号来标记要显示的网页中的各个部分。其本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。如:文字如何处理,画面如何安排,图片如何显示等。于是这样就引出了我们的 html 标签。 html 标签就是 html 语言中所用的标记。

    既然是标记,就应该是容易理解的,不然就像是一本牛津词典,还需要日夜来背诵,还不一定记住。

        在牛腩新闻发布系统中第一次接触html标签。<div>,<p>,<br/>,<hx>……等都把握搞晕了,也不懂什么意思,就按部就班的敲啊,然后就在想:视频上用到这些标签毕竟是有限的,以后我要是自己做系统,需要显示的web页面更复杂该怎么办?这些标签够用吗?不够用,又该用哪些标签呢?

    哪怕仅有这些标签,我过多时间就忘记了,怎么能把这些常用的标签记住,到时候可以联想起来呢?

     

        问题有了,答案很快就有解了,以前没有在意牛腩老师的一些“不重要”的话,这是给了我答案:标题用<hx>,表格用<table>,表格的表头用<th>,标题里有个H ,难道是head<p>paragraph(段落),<tr> =table row.然后经过查证,果然如此,既然这样,我们就来揭开html 的面纱吧,看看语义化的标签。不要让CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。

    几个常用的html标签:

     

    1、<Hx>=head+x

     

    <h1>、<h2>、<h3>、<h4>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

    例如:

    <h1>文档标题</h1>

    <h2>次级标题</h2>

     

    2、<p>=paragraph:段落标记。

     

    知道了<p>作为段落,就不再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。

     

    3、<ul>、<ol>、<li>

     

    <ul>=unlist无序列表,<ol>=orderlist.有序列表。在web标准化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表。

    <li>=list.列表项目。

    例如:<ul>

        <li>项目一</li>

        <li>项目二</li>

        <li>项目三</li>

    </ul>

    <ol>

        <li>第一章</li>

        <li>第二章</li>

        <li>第三章</li>

    </ol>(有严格的顺序)

     

    4、<em>、 <strong>

     

    <em> =emphasize。是用作强调的,<strong>是用作重点强调的。

    大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。

    例如:

    <p><em>强调</em>的文本通常用斜体显示,

    然而,<strong>特别强调</strong> 的文本通常以粗体显示。</p>

     

    5、HTML Table tr td th表格标签元素

    定义表格标题

    <table>

        <tr>

            <th>学院;</th>

            <th>专业;</th>

            <th>班级;</th>

        </tr>

    </table>

    定义表格主体

    <table>

        <tr>

            <td>数学与信息;</td>

            <td>信息;</td>

           <td>2班;</td>

        </tr>

    </table>

     

    6<div>=division.在熟悉不过的分块。

     

    <div>快中可以添加body中的任何元素。

    例如:

    <div>

    <p>

    <table>

    ……

    <table>

    </p>

    </div>

     

    7<br/>  = blank row,空行。

    设定一个空行

     

    二、区别:

    div br p三者区别

     

    1、用法不同。

    div和p是成对组合闭合标签;以<div>开始,</div>结束;

    以<p>开始,</p>结束。

    <br/>是单一的闭合标签。

    2、使用范围不同。

    div标签和p标签是用于网页布局。

    div为普通布局标签,如span标签一样布局内容,设置DIV的CSS样式即可实现内容布局效果。

    p标签为段落标签,通常用于文章分段。

    br标签是用于内容换行。比如文字内容换行排版作用。

    br可以放置到div与p中使用,同时div也可以放入p中使用,p也可以放于div中使用。

     

    div与span区别

    div占用的位置是一行,

    span占用的是内容有多宽就占用多宽的空间距离,和不使用一样效果。

    如图:




    总结:html 中的标签都是可以语义的话的。一个HTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。

     


     

     

     

     

     

     

     

  • 相关阅读:
    indexOf--之美
    uniapp_切换主题
    ueditor调用其中的附件上传功能
    php7 编译安装 apache
    快速排序单循环
    插入排序
    走进svg
    phpstorm内网远程debug
    sass&compass&grunt
    centos7+nginx 1.9.0+php-fpm+phpstorm+xdebug+vmware开发环境搭建
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3172325.html
Copyright © 2011-2022 走看看