html——标签

html基本标签

  1. html标签

    包裹其他所有标签，整个网页从<html>开始，到</html>结束

  2. head标签

    文档头部，内容往往在网页中不可见

    <head>内部标签 说明
    <title> 定义网页的标题
    <meta> 定义网页的基本信息（供搜索引擎）
    <style> 定义CSS样式
    <link> 链接外部CSS文件或脚本文件
    <script> 定义脚本语言
    <base> 定义页面所有链接的基础定位（用得很少）

  3. body标签

    body标签代表页面的“身”，定义网页展示内容

段落与文字标签

标签 语义 说明
<h1>~<h6> header 标题
<p> paragraph 段落
<br> break 换行
<hr> horizontal rule 水平线
<div> division 分割（块元素）
<span> span 区域（行内元素）

文本格式化标签

标签 语义 说明
<strong> strong（加强） 加粗
<em> emphasized（强调） 斜体
<cite> cite 斜体
<sup> superscripted 上标
<sub> subscripted 下标

列表

标签 语义 说明
ol ordered list 有序列表
ul unordered list 无序列表
dl definition list 定义列表
(1)有序列表
<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>
(2)无序列表
<ul type="列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

无序列表type属性：

type属性值 列表项的序号类型
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
(3)定义列表
<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    ......
</dl>

说明：

  • <dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。

  • <dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。

表格

表格基本标签：

标签 语义 说明
table table 表格
tr table row 行
td table data cell 单元格

表格结构标签：

标签 语义 说明
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。

单元格1 单元格2
单元格3 单元格4 
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>
表格完整结构

表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。

表格标题

表头单元格1 表头单元格2
标准单元格1 标准单元格2
标准单元格1 标准单元格2
标准单元格1 标准单元格2 
<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>
posted @ 2021-08-18 16:13  夏虫语冰&  阅读(31)  评论(0)    收藏  举报