前端入门 —— 从HTML开始

ゞ浴缸里的玫瑰 2021-07-25 14:54 682阅读 0赞

### HTML从这里开始 ###

*  一. 什么是HTML?
 *  二. HTML 标签
 *  三. HTML语法结构
 *  四. HTML 语法执行顺序
 *  五. HTML 基本标签
 *   *   *  1. 标题标签
         *  2. 段落标签
         *  3. 行内标签
         *  4.换行标签
         *  5. 水平线分割标签
         *  6. 上标，下标
         *  7. 加粗标签
         *  8. 标记标签
         *  9. 引用标签
         *  10.块级标签
         *  11. 有序列表
         *  12. 无序列表
         *  13. 定义列表
         *  14. 文本显示方向
         *  15. 常用特殊符号
         *  16. 注释
 *  六. a 超链接标签
 *   *   *  1. 超链接
         *  2. 锚点设置
 *  七. img 图片标签
 *  八. 媒体标签
 *   *   *  1. audio 音频标签
         *  2. video 视频标签
         *  3. embed 嵌入标签
 *  九. marquee 飘动标签
 *  十. table 表格标签
 *  十一. form 表单标签
 *  十二. input 输入标签
 *   *   *  1. text 文本框
         *  2. password 密码框
         *  3. file 文件上传
         *  4. radio 单选框
         *  5. checkbox 多选框
         *  6. image 图片
         *  7. submit 提交按钮
         *  8. reset 重置按钮
         *  9.普通按钮
 *  十三. textarea 文本域
 *  十四. select 选择列表
 *   *   *  1.选择列表
         *  2.选项组
 *  十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换
 *   *   *  1. 行内标签
         *  2. 块级标签
         *  3. 行内块标签
         *  4. 行标签与块标签相互转换
 *  十六. HTML三种常见页面布局方式
 *   *   *  1. Frameset 布局
         *  2. Table 布局
         *  3. DIV 布局

# 一. 什么是HTML? #

**HTML 是用来描述网页的一种语言。**

*  HTML 指的是超文本标记语言 (Hyper Text Markup Language)
 *  HTML 不是一种编程语言，而是一种标记语言 (markup language)
 *  标记语言是一套标记标签 (markup tag)
 *  HTML 使用标记标签来描述网页

# 二. HTML 标签 #

**HTML 标记标签通常被称为 HTML 标签 (HTML tag)。**

*  HTML 标签是由尖括号包围的关键词，比如 `<html>`
 *  HTML 标签通常是成对出现的，比如 `<b>` 和 `</b>`
 *  标签对中的第一个标签是**开始标签**，第二个标签是**结束标签**
 *  开始和结束标签也被称为**开放标签**和**闭合标签**

# 三. HTML语法结构 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    </html>

# 四. HTML 语法执行顺序 #

从上至下

# 五. HTML 基本标签 #

### 1. 标题标签 ###

**`<h>`系列**

**页面展示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]

### 2. 段落标签 ###

**`<p></p>`**

<p>这是段落标签</p>
    <p>这是段落标签</p>

**页面展示：**  
![在这里插入图片描述][20200622225207243.png]

### 3. 行内标签 ###

**`<span></span>`**

**页面展示：**  
![在这里插入图片描述][2020062222522931.png]

### 4.换行标签 ###

**`<br/>`**

**页面展示：**  
![在这里插入图片描述][20200622225253384.png]

### 5. 水平线分割标签 ###

**`<hr/>`**

<hr/>

**页面展示：**  
![在这里插入图片描述][20200622225347888.png]

### 6. 上标，下标 ###

**上标：`<sup></sup>`**  
**下标：`<sub></sub>`**

M<sup>2</sup>
    <br/>
    H<sub>2</sub>O

**页面展示：**  
![在这里插入图片描述][20200622225320151.png]

### 7. 加粗标签 ###

`<strong></strong>`

**页面展示：**  
![在这里插入图片描述][20200622225406827.png]

### 8. 标记标签 ###

`<em></em>`

**页面展示：**  
![在这里插入图片描述][20200622225444181.png]

### 9. 引用标签 ###

`<q></q>`

**页面展示：**  
![在这里插入图片描述][20200622230652630.png]

### 10.块级标签 ###

`<div></div>`

**页面展示：**  
![在这里插入图片描述][20200622225511132.png]

### 11. 有序列表 ###

**页面展示：**  
![在这里插入图片描述][20200622225533830.png]

### 12. 无序列表 ###

`ul`无序列表变迁默认类型为`type="disc"`,黑色实心圆点  
`type="circle"`，黑色空心圆点  
`type="square"`，黑丝实心方块

**页面展示：**  
![在这里插入图片描述][20200622225603245.png]

### 13. 定义列表 ###

**页面展示：**  
![在这里插入图片描述][2020062222562425.png]

### 14. 文本显示方向 ###

`<bdo></bdo>`

**页面展示：**  
![在这里插入图片描述][20200622225643703.png]

### 15. 常用特殊符号 ###

` `空格  
`>`大于号（>)  
`<`小于号（<）  
`"`引号（"）  
`©`版权号（©）

### 16. 注释 ###

``

**不会在页面进行显示**

# 六. a 超链接标签 #

### 1. 超链接 ###

*  href：链接指向的页面的 URL。
 *  target：打开链接的方式。默认为\_sel。  
    \_self：在本页面打开链接。  
    \_blank：在新的页面打开链接。
 *  download：下载超链接目标。

### 2. 锚点设置 ###

*  回到页面顶部

*  回到页面指定位置

# 七. img 图片标签 #

*  src：必需的属性。它的值是图片的URL地址，也就是图片路径地址。
 *  alt：图像的替代文本。如果图片因为某些原因无法显示，浏览器将显示代替文本。
 *  title：鼠标放上去显示的文字。
 *  width：设置图片的宽度。
 *  height：设置图片的高度。
 *  align：图片的对其方式。  
    top：以顶部对其。  
    right：以右面对其。  
    buttom：以底部对其。  
    left：以左边对其。  
    middle：中间显示。

# 八. 媒体标签 #

### 1. audio 音频标签 ###

*  src：必需的属性。它的值是音频的URL地址，也就是音频路径地址。
 *  autoplay：自动播放  
    autoplay=“autoplay”
 *  controls：控制台  
    controls=“controls”
 *  hidden：隐藏控制台  
    hidden=“hidden”
 *  loop：每当音频结束时重新开始播放  
    loop=“loop”

### 2. video 视频标签 ###

*  src：必需的属性。它的值是视频的URL地址，也就是视频路径地址。
 *  autoplay：自动播放  
    autoplay=“autoplay”
 *  controls：控制台  
    controls=“controls”
 *  hidden：隐藏控制台  
    hidden=“hidden”
 *  loop：每当音频结束时重新开始播放  
    loop=“loop”
 *  height：视频播放器的高度
 *  width：视频播放器的宽度

### 3. embed 嵌入标签 ###

*  src：嵌入内容的 URL
 *  type：嵌入内容的类型
 *  height：嵌入内容的高度
 *  width：嵌入内容的宽度

# 九. marquee 飘动标签 #

用来插入一段滚动的文字。目前此标签已经过时，不推荐使用。

*  loop：飘动的次数
 *  scrollamount：飘动的速度
 *  direction：飘动方向  
    left：从右向左  
    right：从左向右
 *  direction：飘动方向
 *  behavior：滚动方式  
    scroll：循环滚动，默认。  
    slide：滚动一次  
    alternate：两端来回滚动

# 十. table 表格标签 #

*  caption：表头
 *  th：文本自动居中、加粗
 *  tr：控制表格的行
 *  td：控制行中的单元格（列）
 *  border：表格的边框线
 *  bgcolor：背景颜色
 *  width：表格的宽度
 *  height：表格的高度
 *  cellpadding：单元格的内容与单元格之间的距离
 *  cellspacing：单元格与单元格之间的距离
 *  rowspan：设置单元格所占的行数（设置 td）
 *  colspan：设置单元格所占的列数（设置 td）
 *  align：设置文本的对齐方式（设置 td）  
    left：左对齐  
    center：居中对齐  
    right右对齐

# 十一. form 表单标签 #

*  action：表单提交的URL地址
 *  method：表单的提交方式  
    get：默认的提交方式。提交的数据会显示在地址栏上。  
    post：提交的数据不会显示在地址栏上，传送的数据一般不受限制。
 *  name：表单的名称

# 十二. input 输入标签 #

*  type： input 元素的类型
 *  value：input 元素的初始值
 *  placeholder：帮助用户填写输入字段的提示
 *  maxlength：输入字段中的字符的最大长度
 *  size：输入字段的宽度
 *  name：input 元素的名称

### 1. text 文本框 ###

### 2. password 密码框 ###

以小黑点形式显示输入的内容，比较安全。

### 3. file 文件上传 ###

*  multiple：多选  
    multiple=“multiple”

### 4. radio 单选框 ###

<input type="radio" name="sex" />男
    <input type="radio" name="sex" />女

name名称相同情况下，只能单选

### 5. checkbox 多选框 ###

<input type="checkbox" name="fruits">西瓜
    <input type="checkbox" name="fruits">香蕉
    <input type="checkbox" name="fruits">葡萄

*  checked：默认选择的  
    checked=“checked”
 *  disabled：不可选的，禁止选择  
    disabled=“disabled”

### 6. image 图片 ###

*  src：图片的URL地址
 *  alt：图片无法显示情况，提示的文字

### 7. submit 提交按钮 ###

提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

### 8. reset 重置按钮 ###

重置按钮会清除表单中的所有数据。

### 9.普通按钮 ###

定义可点击的按钮，但没有任何行为。可以结合onclick事件使用。

# 十三. textarea 文本域 #

<textarea rows="3" cols="20">
    	这是一个文本域。。
    </textarea>

*  rows：文本区内的可见行数
 *  cols：文本区内的可见宽度
 *  maxlength：文本区域的最大字符数
 *  placeholder：文本区域预期值的文字提示
 *  readonly：文本区为只读

# 十四. select 选择列表 #

### 1.选择列表 ###

select>
        <option>葡萄</option>
        <option>香蕉</option>
        <option>西瓜</option>
    </select>

*  size：下拉列表中可见选项的数目
 *  name：下拉列表的名称
 *  disabled：禁止该下拉列表项（设置option）
 *  selected：选项（在首次显示在列表中时）表现为选中状态

### 2.选项组 ###

*  label：定义当使用 时所使用的标注，选项组的名称。

# 十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换 #

### 1. 行内标签 ###

可以多个标签存在一行，不能直接设置行内标签的宽、高，完全靠内容撑开宽和高。  
**常用的行内标签：**  
`<span>`、 `<a>`、 `<big>`、 `<em>`、 `<i>`、 `<lable>`、 `<input>`、 `<select>`、 `<small>` 、`<strong>`、 `<sub>` 、`<sup>`、 `<u>`、 `<textarea>`、 `<img>`

### 2. 块级标签 ###

独占一行，可以设置宽、高。  
如果不给宽度，块级标签的宽度将默认为浏览器的宽度，即100%。  
**常用的块级标签**  
`<div>`、 `h`系列、 `<li>`、 `<p>`、 `<form>`、 `<ul>`、 `<ol>`、 `<table>`、 `<hr>`、 `<address>`、 `<dl>`、 `<dt>`、 `<dd>`

### 3. 行内块标签 ###

结合行内和块级标签的优点，不仅可以对宽、高属性生效，还可以多个标签存在一行显示。

**常用的行内块标签：**  
`<img>`

### 4. 行标签与块标签相互转换 ###

*  行标签转块标签：

display:block;

*  块标签转行标签：

display:inline;

*  转换为行内块标签：

display:inline-block;

# 十六. HTML三种常见页面布局方式 #

### 1. Frameset 布局 ###

一些常见的后台管理系统大部分是用 `Frameset` 来布局的，所以固定了结构类的布局用 `Frameset` 来实现比较好。

### 2. Table 布局 ###

是一种旧的布局方式，在现在的项目中还是很常见，`Table` 实际上它更适合做数据的展示，而非布局。但在 `DIV` \+ `CSS` 布局还没有流行起来之前，大量的网站是 `Table` 来布局。包括现在依然有人在使用。  
**缺点：**

1.  `Table` 布局的话，只有把 `Table` 内的所有内容加载完成了，才会加载样式，所以加载速度要慢一些。
2.  `Table` 布局属于表格形式，不利于SEO优化。
3.  `Table` 对于页面布局来说，从语法上看是不正确的。

### 3. DIV 布局 ###

现在最流行的一种布局方式，它相比比 `Table` 更灵活，定位比 `Table` 更好用，简单，修改起来也方便。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/c778d22ab2474488b2179347c34e387b.png
[20200622225207243.png]: /images/20210725/def78bff2e974624a361bab3486f9f80.png
[2020062222522931.png]: /images/20210725/a8fad74931614866a259d3f4640550ac.png
[20200622225253384.png]: /images/20210725/ba05203bfe8c4abaaac8b84092dd0193.png
[20200622225347888.png]: /images/20210725/eff835f3a6454cf8b9c7690b45ebdc69.png
[20200622225320151.png]: /images/20210725/d0e3a36ecc8e4283a818878221ef7787.png
[20200622225406827.png]: /images/20210725/a8624af4713f481ea8ec8371e0e23e84.png
[20200622225444181.png]: /images/20210725/0af2f50b4e8742529e32b4c2f7a31678.png
[20200622230652630.png]: /images/20210725/fc1daeeed3e04881806d1732561bb7bb.png
[20200622225511132.png]: /images/20210725/bd334258067e4f68abdc2cdea0c194f9.png
[20200622225533830.png]: /images/20210725/33979b5e7cdb407ba7f8eb82ba8c827b.png
[20200622225603245.png]: /images/20210725/4f994667c61a45759486c5ce42b55760.png
[2020062222562425.png]: /images/20210725/848bb5443a8b423c8a2e1e6760708a7c.png
[20200622225643703.png]: /images/20210725/d17004fdd6824be8a859631dea7058c5.png