zoukankan      html  css  js  c++  java
  • HTML基本元素(三)

    1.HTML特殊字符

      一些字符在HTML中拥有特殊的含义,比如小于号(<)和大于号(>)用于定义HTML标签。如果我们希望浏览器正确地显示这些字符,我们必须在HTML源码中插入字符实体。

      还有一种情况,就是HTML会自动截去多余的空格,假如你在文档中连续输入10个空格,那么HTML会去掉其中的9个。那么,就需要用到字符实体来实现任意空格。

      字符实体用于在HTML文档中插入特殊字符,有两种方式:实体字符实体编号,一般使用实体字符

      注意实体字符对大小写敏感!

    常用的特殊字符:
    特殊字符 实体字符 实体编号
    空格 &nbsp; &#160;
    小于号(<) &lt; &#60;
    大于号(>) &gt; &#62;
    和号(&) &amp; &#38;
    引号(") &quot; &#34;
    版权(©) &copy; &#169;
    注册商标(®) &reg; &#174;
    乘号(×) &times; &#215;
    除号(÷) &divide; &#247;

    2.列表

      列表用来在网页上组织信息,HTML能够创建三种类型的列表:无序列表有序列表自定义列表

      1)无序列表

        代码结构:

    <ul>
        <li>……</li>
        <li>……</li>
        <li>……</li>
    </ul>

        *无序列表的type属性的值有:disc(“默认”实心圆)、circle(空心圆)、square(正方形),用来设置项目前面的标记。

      2)有序列表

        有序列表使用数字或字母系统来组织列表里包含的信息。

        代码结构:

    <ol>
        <li>……</li>
        <li>……</li>
        <li>……</li>
    </ol>

        *有序列表的type属性的值有:1(“默认”数字)、a(小写字母)、A(大写字母)、i(小写罗马数字)、I(大写罗马数字),用来设置项目前面的标记。

        *start属性的值是:排序的起点数值。

      3)自定义列表

        定义列表用来组织术语和它们的定义。

        任何信息如果包含多个术语和相对应的解释,都可以使用自定义列表进行组织。

        代码结构:

    <dl>
        <dt>……</dt>
        <dd>……</dd>
        <dd>……</dd>
    </dl>

        *<dt>是列表的头部,常用作于标题。

    3.表格

      表格由<table>标签以及一个或多个trthtd元素组成。单元格可以包含文本、图片、 列表、表单、表格等等。

      *<table>定义表格。

      *<tr>定义表格的行。

      *<th>定义表头,表示标题,一般用在表格的第一行,里面的内容会自动加粗加黑

      *<td>定义单元格。

      代码如下:(制作2行2列的表格的快捷生成方式:table>tr*2>td*2+Tab键

    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
         <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
     </table>
    说明
    属性 说明
    width px,% 指定表格的宽度
    height px,% 指定表格的高度
    border px,% 指定表格边框的宽度
    cellpadding 数字 指定边框与内容之间的空白
    cellspacing 数字 指定单元格之间的空白
    align left,center,right 指定对齐方式
    valign top,middle,bottom 垂直排列方式
    colspan 数字 合并列单元格
    rowspan 数字 合并行单元格

      *为表格设置合并边框模型:

      效果对比图:

      

      参考代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            table{
                border-collapse:collapse;
            }
            table,td{
                border:1px solid #000;
            }
        </style>
    </head>
    <body>
        <p>为表格设置合并边框模型:</p>
        <table>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
            </tr>
        </table>
    </body>
    </html>

      

  • 相关阅读:
    修改Tarsphp节点线程数避免请求阻塞
    Docker删除所有容器
    清理mysql数据库binlog日志
    查看centos磁盘情况,查找大文件路径
    winform窗体的生命周期和事件加载顺序是什么?
    数据库自增ID用完了会怎么样?
    MPFIT for python
    Plplot中line width 问题
    剪切Postscript图片中的多余边框
    嵌入式下的深度学习 Sparkfun Edge with TensorFlow(一)Hello World
  • 原文地址:https://www.cnblogs.com/mossbaoo/p/5735044.html
Copyright © 2011-2022 走看看