HTML标签及表格

最新推荐文章于 2024-07-14 10:34:53 发布

unsaid丶

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量271

点赞数 3

分类专栏：前端文章标签： html html5 web

本文链接：https://blog.csdn.net/qq_43643227/article/details/112061820

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、标签：
1.六级标题

<h1>网页中最重要的标题---logo唯一性</h1>
<h2>网页中重要的模块标题</h2>
<h3>网页重要模块内某个重要的标题</h3>
......
<h6>.......</h6>

2.段落标签:标识是一个段落，（默认情况下段落与段落之间有段间距）

    <p></p>

3.文字倾斜

    <i></i>
    <em></em>

4.字体加粗

    <b></b>
    <strong></strong>

5.设置文本加下划线

    <u></u>

6.换行标签

    <br>

7.用作水平线

    <hr>

8.文字上标下标

    <sup>上标标签</sup>
    <sub>下标标签</sub>
        <!-- 标签默认类型 
            块元素（独占一行）：h1-h6,p，hr，div
            行内元素（不换行）:i,em,b,strong，u,br，span
            行内块元素(可设置宽高又可以与其他元素同在一行):img-->

9.div

<div>块标签-当容器使用:包裹其他标签，没有具体含义，用来设置文档区域</div>

10.span

<span>span标签适用于文字段落中改变部分文字样式，或者是某个字</span>

2、常用字符实体

    <!-- 空格替代符 &nbsp; -->
    &nbsp;&nbsp;&nbsp;&nbsp;

    <strong>字体加粗</strong>
    <!-- 左尖 右尖 -->
    &lt;strong&gt;字体加粗&lt;/strong&gt;
    <!-- &amp替代& -->
    &amp;lt;strong&gt;字体加粗&lt;/strong&gt;
    <!-- 备案中图标 -->
        &copy;

3、列表（ul,ol,dl）
1.有序列表

     <!-- 无序列表 -->
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>

2.无序列表

    <!-- type表示列表前面标号模式选择：1，A,a,i start:下标从哪开始-->
    <!-- 有序列表 -->
<ol type=1 start="5">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

    <ol type=1 start="5">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

3.自定义列表

    <!-- 自定义列表 -->
<dl>
    <dt>名词</dt>
    <dd>对该名词进行描述1</dd>
    <dd>对该名词进行描述2</dd>
    <dd>对该名词进行描述3</dd>
</dl>

4.超链接标签

    <a href="#">超链接标签</a>
    <a href="http://www.baidu.com" target="_self" title="百度一下，你就知道">超链接标签</a>
    <a href="003列表.html">本地链接</a>
    <a href="#">图片</a>
    <!-- 解压包挂在超链接里面 然后会自动下载 -->
    <a href="#">解压包文件下载</a>

        <!-- 路径  写在href属性里面 -->
        相对路径：根据当前文件寻找目标文件
            同级访问：输入目标文件全名
            访问上一级../
            访问下一级：访问下一级：文件夹名+/目标文件  注意文件夹名字前面没有/
        绝对路径：记录盘符地址（不推荐使用） -->
   <a href=" 目标文件路径及全称或者连接地址”title="提示文本">链接文本或图片</a>
    <a href="#">空链接</a>

说明:
href部分中ur后边跟的是链接页面的路径(包含文件名) title属性,加入这个属性后，当鼠标移动到热点时则在鼠标下方显示title的内容: target属性参数定义了打开链接的目标窗口。_blank -在新窗口中打开链接页面(会保留原窗口)_ self-在当前窗口打开链接页面，此为默认值

5.表格
注释:
注:一个tr表示一行;一对td表示一个单元格
表格的相关属性
1) width=“表格的宽度”
2) height=“表格的高度”
3) border=’ 表格的边框”
4) bordercolor= “边框色" bgcolor=背景颜色"
5) cellspacing="单元格与单元格之间的间距”
6) cellpadding=*单元格与内容之间的距离”
7) align="表格水平对齐方式取值: left、 right、center、valign='垂直对齐”top\bottom\middle
8)合并单元格属性: (td) 合并列: colspan=“所要合并的单元格的列数”
合并行: rowspan=“所要合并单元格的行数”

   <body>
        <table width="500px" height="500px" border="1px" bordercolor="red" bgcolor="gold" cellspace="0px" cellpadding="0px">
            <tr align="center">
                <td colspan="2" rowspan="2">1</td>
                <td>3</td>
            </tr>
            <tr>
                <td rowspan="2">6</td>
            </tr>
            <tr valign="bottom">
                <td>7</td>
                <td>8</td>
            </tr>
        </table>

快捷：(tr>td{&nbsp;}*8)*12  8列12行的空表格

表格

一对tr表示一行，一对td表示一个单元格(一列）
表格的相关属性：
- width=“表格的宽度”
- height=“表格的高度”
- border=“表格的边框”
- bordercolor="边框的颜色“
- bgcolor=“背景颜色”
- cellspaceing=“单元格与单元格之间的间距”
- cellpadding=“单元格与内容之间的距离”
- align=“表格水平对齐方式” 取值：left、right、center、
  - valign=“垂直对齐” 取值：top、bottom、middle
- 合并单元格属性：(td)
  - 合并列：colspan=“所要合并的单元格的列数”
  - 合并行：rowspan=“所要合并的单元格的行数”

unsaid丶

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
HTML标签及表格

1、标签：1.六级标题<h1>网页中最重要的标题---logo唯一性</h1><h2>网页中重要的模块标题</h2><h3>网页重要模块内某个重要的标题</h3> …<h6>.......</h6> 2.段落标签:标识是一个段落，（默认情况下段落与段落之间有段间距）<p></p> 3.文字倾斜 4.字体加粗
复制链接

扫一扫