HTML_3_常用body标签

body标签是html组成的一部分,用于以一定的组织形式显示数据给用户阅读。

 


一、文本标签

标题标签:

  h1-h6:依次变小,自动换行。(会自动换行的标签称为块级标签

    属性:align(位置),默认居中center。

水平线标签:

  <hr /> :一条直线。

    属性:width(宽度)、size(高度)、color(颜色)、align(位置),像素px为固定,百分比为页面的百分比。

段落标签:

  <p> </p>,将一段数据作为整体,会自动换行,段间距较合适。

预格式标签:

  <pre> </pre>,把代码中的格式输出到页面中.

换行符:

  <br/>,手动将数据换行。

空格符:

  &nbsp;    一个空格。

尖括号:

  &lt;        <  

  &gt;       >  

权重标签:

  1、加黑:<b></b>

  2、斜体:<i></i>

  3、下划线:<u></u>

  4、删除线:<del></del>


二、列表标签

无序列表:

  每个列前有一个黑色实心圆点。

<ul>
    <li>瓜子</li>
    <li>花生</li>
    <li>矿泉水</li>
</ul>

有序列表:

  每个列前有序号,序号由a,或1,或 i 开始,逐个变大。

<!--type的值:1,A,a,I,i,默认为1-->
<ol type="I">
    <li>吃饭</li>
    <li>碎觉</li>
    <li>打豆豆</li>
</ol>

自定义列表:

  可以给列表定义标题,dt为标题,dd为具体的列。

<dl>
    <dt>标题</dt>
    <dd>第一条</dd>
    <dd>第二条</dd>
    <dd>第三条</dd>
</dl>

 


三、图片

图片标签:

  <img src="图片路径" />,图片路径使用绝对路径、相对路径、url、Base64代码....

    属性:src、width、height、title(鼠标在图片上方显示文字)、alt(图片加载失败显示文字)。

    图片标签不会自动换行(行内元素)。


 

四、超链接

超链接标签:

  <a href="跳转地址url">访问方式,可以为文字或图片</a>

    属性:href、target,指明要跳转的网页资源的显示位置。(_self、_blank、_parent、_top)

锚点:

  在当前页面内进行跳转。

  1、增加锚点:<a name="锚点名" > </a>

  2、跳转到指定锚点:<a href="#锚点名">访问方式</a>

  3、跳转到此页面(顶部):<a href="#"></a>


 

五、表格

表格标签:

  table:声明一个表格。

  属性:

    添加边框:border

    内容距离边框的距离:cellpadding

    边框的大小:cellspacing

    合并表格:

      不要上边框:style="border-top: none"

      不要下边框:style="border-bottom: none"

  tr:声明表格中的一行。

    th:一个单元格,数据为标题,默认居中加粗。

    td:一个单元格,数据默认居左。

        <table>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
            </tr>
            
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </table>

合并两个水平相邻的单元格:

  1、删除其中的一个单元格。

  2、设置另一个单元格的属性colspan属性为2。

合并两个垂直相邻的单元格:

  1、删除其中的一个单元格。

  2、设置另一个单元格的属性rowspan属性为2。

posted @ 2023-01-08 21:54  在博客做笔记的路人甲  阅读(57)  评论(0编辑  收藏  举报