zoukankan      html  css  js  c++  java
  • HTML5学习笔记-3.文字与排版技巧

    1.段落样式标记:

       (1)<p></p>标记:成对标记,将<p>标记置于段落起始处,</p>置于段落结尾

                          语法:<p>...</p>,效果:换行并增加一个空行

       (2)<br>标记:单一标记,效果:换行,语法:第一行<br/>第二行

           注:HTML5不仅符合HTML标准也遵循XHTML标准,XHTML语法比HTML严谨而且简介,在XHTML语法中规定不成对的单一标记必须在标记后加上"/"符号,例如<br/>

                HTML5规范也建议使用这样的标记方式

       (3)<pre></pre>标记:成对标记,效果:让文字按照原始代码的排列方式进行显示

       (4)<blockquote></blockquote>标记:成对标记,表示引用文字,效果:将标记内的文字换行并缩进

            可选属性:cite,设置值:url网址,说明:说明引用的来源

       (5)<hr>标记:单一标记,效果:添加分隔线

       (6)段落标题:<h1> <h2> <h3> <h4> <h5> <h6>

           功能:设置段落标题的大小级别,<h1>字体最大,<h6>字体最小

    2.文字效果标记

       (1)<font>标记(HTML5已停用):例:<font size="2" color="#FF0000" face="楷体">

           size属性默认值是3,size的属性设置值可以是相对值或绝对值,相对值最大到"+4",最小到"-2",绝对值最大到"7",最小到"1"

       (2)<b> <u> <i>标记:成对标记,效果:将文字设置为粗体、加下划线、斜体

            注:HTML5不建议使用以上标记,最好使用CSS语法来代替

                  如果想要将网页中的重点文字以粗体标识,HTML建议使用<strong>标记(例:<strong>...</strong>)

       (3)<sup> <sub>:成对标记,效果:将文字设置为上标、下标

            例:SO<sub>4</sub><sup>2+</sup>

    3.列表标记

       (1)符号列表:<ul></ul> (配合<li></li>标记使用)

           效果:将文字段落向内缩进,并在段落的每一个列表项目前面加上圆形、空心圆形或方形等项目符号,以达到醒目的效果

           注意:符号列表没有顺序编号,故又称无序列表

           <li>标记属性:value  设置值:1 2 3等整数值  说明:设置编号列表的开始值,默认为1,只有搭配编号列表时才有用

           例:

    <h2>列表</h2>
    <ul>
        <li1>列表项1</li1>
        <li2>列表项2</li2>
        <li3>列表项3</li3>
    </ul>

       (2)编号列表:<ol></ol> (配合<li></li>标记使用)

           效果:将文字段落向内缩进,并在段落的每个项目前面加上1、2、3...有顺序的数字,又称有序列表

           <ol>标记属性:type  设置值:1、A、a、I、i   说明:设置数目样式,默认为1,分别问阿拉伯数字、大写英文字母、小写英文字母、大写罗马数字、小写罗马数字

                               start  设置值:1、2 等整数值   说明:设置编号起始值,默认为1

                         reversed   设置值:reversed         说明:反向排序,数字改为由大到小(IE9 不支持)

           例:

    <h2>编号列表</h2>
    <ul>
        <li>大类1</li>
        <ol type="A">
            <li>1-1</li>
            <li>1-2</li>
            <li>1-3</li>
        </ol>
        <li>大类2</li>
        <ol type="1">
            <li>2-1</li>
            <li>2-2</li>
            <li>2-3</li>
        </ol>
        <li>大类3</li>
        <ol reversed="reversed">
            <li>3-1</li>
            <li>3-2</li>
            <li>3-3</li>
        </ol>
    </ul>

       (3)定义列表:<dl></dl>   <dt>   <dd>

           适用于有主题与内容的两段文字,通常第一段以<dt>标记定义主题,第二段以<dd>标记来定义内容

           例:

    <dl>
        <dt>
        题目
        <dd>
        文本
    </dl>

    4.注释:

       格式:  <!--注释文字-->

       注:使用HTML注释加上条件,就可以让IE浏览器根据注释内容进行条件判断,而其他浏览器只会把IE注释当做普通的HTML注释处理

             IE条件的注释建议放在<head>与</head>标记内,语法: <!--[if IE]>只有IE会执行这里的语句<![endif]-->

             还可以加入一些命令来限制IE的版本,例如lt表示更旧的版本,例: <!--[if lt IE 9]>IE9以下的版本会执行此语句<![endif]-->

             由于只有IE9以上的版本能够支持HEML9,故一般针对低版本浏览器加入如下代码:

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    5.特殊符号

    特殊符号 HTML表示法
    © &copy;
    < &it;
    > &gt;
    " &quot;
    & &amp;
    半角空格 &nbsp;

       注:无论在HTML文件按了几次键盘的空格键,网页浏览时都只会显示一个空格的距离

             如果希望显示多个空格,必须使用"&nbsp;"符号(推荐),或使用全角空格

  • 相关阅读:
    layui穿梭框右侧增加上移下移功能
    java.lang.NullPointerException出现的几种原因:
    springboot+thymeleaf+mybatis 基础学习
    Vue 生命周期扫盲
    Token 认证(Asp.Net)
    从具体化“system.decimal”类型到“system.string”类型的指定强制转换无效
    【C#】委托和Lambda表达式
    Visual Studio 2017添加visionPro控件
    从WinForm程序中看委托和事件
    西门子PLC通讯-仿真环境搭建
  • 原文地址:https://www.cnblogs.com/trj14/p/4631765.html
Copyright © 2011-2022 走看看