Web前端开发技术-HTML5基础-标签总结（一）

ゝ一纸荒年。 2022-11-08 15:29 188阅读 0赞

**1.HTML文档基本结构**

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 
 </body>
 </html>

**2.头部head**

中间内容显示在浏览器标题栏

```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>这是标题</title>
 </head>
 <body>
 
 </body>
 </html>

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70]  
**3.主体body**

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70 1]  
body标记属性

*  text  
    通过rgb（）函数或颜色英文名称red、green、blue修改文本颜色
 *  bgcolor（背景颜色）
 *  topmargin（规定文档中上边距的大小）
 *  leftmargin（规定文档中左边距的大小）

**4.注释**（选中文本+Ctrl+/）

**5.标题字标记**

h1-h6分别表示一至六级标题  
align=“属性”  
属性：

*  left 左对齐
 *  center 居中
 *  right 右对齐
 *  justify 两端对齐

**6.空格及特殊符号**

* 空格 ` `
 * <小于 `&lt；`
 * `>`大于 `&gt；`
 * &符号 `&amp；`
 * "双引号 `"`
 * © 版权 `&copy；`
 * ®注册商标 `&reg；`
 * x 号 `&times；`
 * ÷号 `&divide；`

**7.文本修饰**

粗体
 斜体
 下划线
 <del>删除线</del>
 上标
 下标

**8.字体标记font**

文本

face默认为 - 宋体  
普通文字默认像素-16px  
9.段落排版标记

*  段落

段落内容（align为对齐方式）

*  横线

*  换行

10.拼音 音标注释

<ruby>
 	中<rt>zhong</rt>
 	国<rt>guo</rt>
 </ruby

**11.段落缩进 预格式化**

<blockquote>
 		段落向右缩进5个英文字符
 </blockquote>

<pre>保留此处空白/内容</pre>

**12.列表标记**

*  无序列表

*  有序列表

*  定义列表

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70]: /images/20221023/884a35e97b9746d3b321a6b03406cc1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NVWkVIVUk5NjM2_size_16_color_FFFFFF_t_70 1]: /images/20221023/535325aa18b64e8884ef5c3fc6bc7418.png