zoukankan      html  css  js  c++  java
  • 二、常用HTML语义化标签

    (一):HTML标记组成

    1、标题:一般用   <h#>主题<h#>   来表示,#代表数字1-6,主要是区别标题大小的作用。越靠近 1 字体越大。

    2、段落:一般用  <p>正文内容 </p>    来表示,一篇文章有多少对   <p></p>   就有多少个段落。&nbsp;  表示空格。

    3、换行与注释:一般用  <!---->来表示注释 ,如: <!--这里是注释-->    但是浏览器里面是看不到的,主要用于后期代码维护,一定要养成写注释的好习惯。

            一般用:<br>来表示换行<br>    表示强制换行,但并不在网页中显示。

    4、粗体与斜体:一般用   <b>加粗</b>   来表示加粗字体(<strong></strong>也可以用来加粗)。    一般用   <i>字体为斜体</i>   来表示字体为斜体。(此为文本样式,一般不用,都直接用css来添加样式)

    5、删除线:一般用  <u>下划线</u>         <s>  删除线  </s>    (此为文本样式,一般不用,都直接用css来添加样式)

    6、上下标:   <sup> 上标线  </sup>            <sub> 下标线 </sub>(此为文本样式,一般不用,都直接用css来添加样式)

     

    (二)HTML语义化

    含义:什么样的结构,采用什么样的标签。
    好处:
    1. 在没有CSS的情况下,页面也能呈现出很好的内容结构。
    2. 有利于SEO,让搜索引擎爬虫更好的理解网页。
    3. 方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
    4. 便于团队开发与维护。

    屏幕阅读器 : https://h5o.github.io/

    (三):字体标记

    1、字体大小:<font>字体设置</font>   

       <font  size = "1">表示字体为1的大小</font>   

    size是用来表示字体大小的参数。

    =是用来赋予字体大小的参数形式(也可以用  —  + 代替)。

    2、字体颜色:<font>字体设置</font>    

       <font  color = "#">表示字体为#的颜色</font>    

    color是用来表示字体颜色的参数。

    =是用来赋予字体大小的参数形式。#可以代表RGB颜色值,也可以是颜色单词来表示。

    3、物理字体:在标记对里放入文字就可以表现出标记里的效果,在应用中发现,物理字体并不被<font>标记包含着。物理字体可以单独用来表现文字。

    <b>文字</b>
    <i>文字</i>
    <u>文字</u>
    <sup>文字</sup>
    <sub>文字</sub>
    <s>文字</s>

    4、逻辑字体:与物理字体一样,是修饰字体样式的。但是用途更广。

       <em>强调文字</em>
         <strong>字体加重</strong>
         <code>显示编程代码</code>
         <samp>显示示例文字</samp>
         <kbd>显示键盘按键文字 </kbd>
         <small>字体变小</small>
         <big>字体变大</big>

     5、单标签:

      <br>让文本换行                                                     <hr>创建一个水平线

    6、图片标签:img标签(单标签)

      <img src="图片及地址"  alt=”图片显示不出来时的名字“  title=”图片名字>

        src地址分为绝对路径、相对路径两种。

          绝对路径:src=”http://www.*****.com/***“     无论html文件在哪里,图片地址是不变的,就叫绝对路径。

          相对路径:src=”./img/***.jpg“        相对于html文件来说的,当html文件发生变化时,图片地址也需要发生变化,这就叫做相对路径

    7、特殊字符:

      由于部分字符不能直接打出,或与html本身冲突,需要用特殊代码代替。

      例如:&nbsp; 代表空格     等等。

    A True Master Is An Eternal Student(真正的大师总是怀着一颗学徒的心) ------(Master Yi)
  • 相关阅读:
    Source InSight context 窗口丢失的解决办法
    [EffectiveC++]item41:了解隐式接口和编译器多态
    [EffectiveC++]item04:Make sure the objects are initialized before they're used
    [EffectiveC++]item3:尽可能使用const
    linux man指令问题
    解读ARM成功秘诀:薄利多销推广产品
    source insight设置问题 [问题点数:20分,结帖人leecapacity]
    totalcommander
    firefox
    处理SecureCRT中使用vim出现中文乱码问题
  • 原文地址:https://www.cnblogs.com/karl-kidd/p/10977104.html
Copyright © 2011-2022 走看看