HTML基本标签示例使用

你的名字 2023-07-21 14:29 40阅读 0赞

### HTML基本标签示例使用 ###

*   *  1. 结构标签：html、head、title、meta、body
     *  2. 排版标签：p、br、hr
     *  3. 标题标签：h1、h2、h3、h4、h5、h6
     *  4. 容器标签：div、span
     *  5. 列表标签：ul-li、ol-li、dl-dt-dd
     *  6. 图片标签：img
     *  7. 链接标签：a
     *  8. 表格标签：table-tr-th-td
     *  9. 文本标签：b、strong、big、small、em、i、sub、sup、ins、del

## 1. 结构标签：html、head、title、meta、body ##

根：`<html> </html>`  
头：`<head> </head>`  
标题：`<title> </title>`（在头标签中）  
元信息：`<meta charset="utf8">`（在头标签中）  
主体：`<body> </body>`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70]

> color=“颜色”  
> bgcolor=“背景色”  
> background=“背景图路径”  
> 颜色表示方式：① 颜色名称 red green ② RGB模式 \#000000 \#FFFFFF

## 2. 排版标签：p、br、hr ##

注释：``  
换行：`<br />`  
段落：`<p> </p>` 自带换行，有行间距  
水平线：`<hr />`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 1]

> hr 标签属性：  
> width=“宽度” 像素px / 百分比%  
> size=“高度” 水平线的粗细，避免过粗，一般个位数，eg：6px  
> color=“水平线颜色”  
> align=“对齐方式 left、center默认、right”

## 3. 标题标签：h1、h2、h3、h4、h5、h6 ##

标题：  
`<h1>一级标题</h1>`  
`<h2>二级标题</h2>`  
`<h3>三级标题</h3>`  
`<h4>四级标题</h4>`  
`<h5>五级标题</h5>`  
`<h6>六级标题</h6>`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 2]

> 数字越小、字号越大、默认加粗、默认字号、默认占据一行、默认有行间距

## 4. 容器标签：div、span ##

块：`<div> </div>`  
行级：`<span> </span>`  
![在这里插入图片描述][20200404003502296.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 3]

## 5. 列表标签：ul-li、ol-li、dl-dt-dd ##

无序列表：`<ul> <li> </li> <ul>`  
有序列表：`<ol> <li> </li> <ul>`  
定义列表：`<dl> <dt> </dt> <dd> </dd> </dl>`  
列表嵌套：相互任意嵌套。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 4]

> 无序列表属性：  
> type="?"  
> 实心圆：disc （默认）  
> 空心圆：circle  
> 黑色方块：square

> 有序列表属性：  
> type="?"  
> 数字：1  
> 大小写字母：A / a  
> 罗马数字：I / i

## 6. 图片标签：img ##

图片：`<img />`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 5]

> src=“图片地址”  
> height=“高度”  
> width=“宽度”  
> border=“边框”  
> alt=“图片未被加载时的提示文字”  
> title=“图片被鼠标悬停时的提示文字”

## 7. 链接标签：a ##

链接：`<a> </a>`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 6]

> ① `充当链接` ② `充当锚点`  
> href=“跳转的地址” // 跳转外网需要添加协议http/https  
> target="\_self"(当前页) “\_blank”(一直新页面) “\_search”(仅1个新页面复用)

> `充当锚点`(跳转顶部/跳转底部)  
> 提供率 name 属性，为其赋值  
> 点击跳转的标签 href 属性给 \#name  
> `<a name="tops"></a>`  
> `<a href="#tops">跳到顶部</a>`

## 8. 表格标签：table-tr-th-td ##

表格：  
![在这里插入图片描述][20200404011801467.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 7]

> `table` 属性：  
> width=“表格宽度”  
> height=“表格高度”  
> border=“边框宽度”  
> bordercolor=“边框颜色”  
> cellspacing=“单元格之间的间距”  
> cellpadding=“单元格与内容的间距”  
> align=“对齐方式 left center right” 表格相对于页面  
> `th` 属性：  
> 表头，默认加粗、居中  
> `td` 属性：  
> align=“对齐方式 left center right” 内容相对于单元格  
> valign=“对齐方式 top middle bottom” 内容相对于单元格  
> `列合并`：  
> colspan=“横跨的列数”  
> `行合并`：  
> rowspan=“纵跨的行数”

## 9. 文本标签：b、strong、big、small、em、i、sub、sup、ins、del ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70]: /images/20230528/83a7b6d2f054450d90a620323ec1b85b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 1]: /images/20230528/aa7f2e6d5a2f45419804887d89294738.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 2]: /images/20230528/86e7773457ca472a97fafd4959aeefc4.png
[20200404003502296.png]: /images/20230528/1ff8881bee01431c92a25b23c2a110d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 3]: /images/20230528/faba936696044a9baa1aa5a3ceb8c0cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 4]: /images/20230528/c2fbdf91da054533bf6c73856124842b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 5]: /images/20230528/880829b7ed5148319a54037678d94714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 6]: /images/20230528/d6ba050a811c4624b51f5e12efa0ce81.png
[20200404011801467.png]: /images/20230528/e1e55cb99a8143ca8bbb48944cc0760a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 7]: /images/20230528/64c536b5696d42e9bbc560ba18318363.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 8]: /images/20230528/b6ec0a72ad5f479e866de0a814864cd6.png