【HTML 标签详解】

🎉🎉🎉点进来你就是我的人了
博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!

欢迎志同道合的朋友一起加油喔🦾🦾🦾

1. HTML结构

1.1 HTML 基本结构

1.2 标签层次结构

2. HTML常见标签

2.1 注释标签

2.2 标题标签 (h)

2.3 段落标签 (p)

2.4 换⾏标签(br)和分割线标签(hr)

2.5 格式化标签 (标签样式)

2.6 图⽚标签: img

2.7 超链接标签: a

2.8 列表标签(ol,ui,dl)

2.9 表格标签

2.10 音频标签(audio)

2.11 视频标签(video)

2.12 表单标签(form)

常见表单元素：

input 常用属性

布尔属性

按钮 - input 和 button

label 绑定 input (扩大可点击区域)

radio (单选框)

checkbox (多选框)

隐藏按钮 (type=hidden)

select 和 option (下拉选择框和下拉选择框中的选项)

select 常用属性

多行输入框(textarea)

form 的常用属性

get 和 post

3. HTML 特殊字符

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

1. HTML结构

1.1 HTML 基本结构

    <html>
               <head>
                           <title>第⼀个⻚⾯</title>
               </head>
               <body>
                           hello world
               </body>
    </html>

    html 标签是整个 html ⽂件的根标签(最顶层标签)
    head 标签中写⻚⾯的属性.
    body 标签中写的是⻚⾯上显示的内容
    title 标签中写的是⻚⾯的标题.

⼤部分标签成对出现， <body> 为开始标签, </body> 为结束标签，少数标签只有开始标签, 称为 "单标签".

1.2 标签层次结构

● ⽗⼦关系
● 兄弟关系

    head 和 body 是 html 的⼦标签   ( html 就是 head 和 body 的⽗标签)
    title 是 head 的⼦标签. head 是 title 的⽗标签.
    head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了⼀个 DOM 树：

在 IDEA 中创建⽂件 xxx.html , 直接输⼊ ! , 按 tab 键, 此时能⾃动⽣成代码的主体框架.

2. HTML常见标签

2.1 注释标签

< !-- 注释 -- >
ctrl + / 快捷键可以快速进⾏注释/取消注释.

2.2 标题标签 (h)

    有六个, 从 h 1 - h 6 . 数字越⼤, 则字体越⼩.
    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>

<hr>标签就是给页面加一个分割线。

2.3 段落标签 (p)

<p>这是⼀个段落</p>

p 标签描述的段落, 前⾯还没有缩进

注意:
p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.

2.4 换⾏标签(br)和分割线标签(hr)

    br 是 break 的缩写. 表示换⾏。
    br 是⼀个单标签 (不需要结束标签 ) 。

    分割线标签：<hr>
   <br/> 是规范写法 . 不建议写成 <br> 。

   <br> 标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距

2.5 格式化标签 (标签样式)

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

    <strong>strong 加粗</strong>        <b>b 加粗</b>
    <em>倾斜</em>                                <i>倾斜</i>
    <del>删除线</del>                            <s>删除线</s>
    <ins>下划线</ins>                            <u>下划线</u>

2.6 图⽚标签: img

相对路径和绝对路径

图片格式

虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。

1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。

2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。

3、GIF格式图片图像效果很差，但是可以制作动画。

    注意：
            1. 属性可以有多个, 不能写到标签之前
            2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.
            3. 属性之间不分先后顺序
            4. 属性使⽤ "键值对" 的格式来表示

2.7 超链接标签: a

超链接使用a标签，语法如下：

表1 <a>标签target属性
target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。

href: 必须具备, 表示点击后会跳转到哪个⻚⾯.
target: 打开⽅式. 默认是 self. （当前页面打开此链接）如果是 blank 则⽤新的标签⻚打开.（新页面打开此链接）

链接的⼏种形式:

    外部链接: href 引⽤其他⽹站的地址

   <a href="http://www.baidu.com">百度</a>
    内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可
    先创建⼀个 1 .html     <a href="2.html">点我跳转到 2.html</a>
    空链接: 使⽤ # 在 href 中占位.
    <a href="#">空链接</a>
    下载链接: href 对应的路径是⼀个⽂件. (可以使⽤ zip ⽂件)
    <a href="test.zip">下载⽂件</a>
    ⽹⻚元素链接: 可以给图⽚等任何元素添加链接(把元素放到 a 标签中)
    <a href="http://www.sogou.com">
       <img src="rose.jpg" alt="">
    </a>
    锚点链接: 可以快速定位到当前⻚⾯中的某个位置.
    <a href="#one">第⼀集</a>
    <a href="#two">第⼆集</a>
    <a href="#three">第三集</a>
    <p id="one">
      第⼀集剧情 <br>
      第⼀集剧情 <br>
      ...
    </p>
    <p id="two">
      第⼆集剧情 <br>
      第⼆集剧情 <br>
    ...
    </p>
    <p id="three">
      第三集剧情 <br>
      第三集剧情 <br>
    ...
    </p>

禁⽌ a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">

2.8 列表标签(ol,ui,dl)

3种列表的语义记忆：

表1 3种列表记忆
标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

列表有3种：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。

效果图展示:

2.9 表格标签

1. 表格标签属性

基本使用：

    table 标签 : 表示整个表格。 table 包含 tr , tr 包含 td 或者 th.
    tr: 表示表格的⼀⾏
    td: 表示⼀个单元格
    th: 表示表头单元格. 会居中加粗
    thead: 表格的头部区域(注意和 th 区分, 范围是⽐ th 要⼤的)
    tbody: 表格得到主体区域.

设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置。

    这些属性都要放到 table 标签中.
    align： 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
    border： 表示边框. 1 表示有边框(数字越⼤, 边框越粗), "" 表示没边框.
    cellpadding: 内容距离边框的距离, 默认 1 像素
    cellspacing: 单元格之间的距离. 默认为 2 像素
    width / height: 设置尺⼨.

2. 合并单元格

2.10 音频标签(audio)

2.11 视频标签(video)

2.12 表单标签(form)

常见表单元素：

form 表单一般情况下，其他表单相关元素都是它的后代元素
input 单行文本输入框、单选框、复选框、按钮等元素
textarea 多行文本框
select、option 下拉选择框
button 按钮
label 表单元素的标题
fieldset 表单元素组
legend fieldset 的标题

input 常用属性

type：input 的类型

text：文本输入框（明文输入）
password：文本输入框（密文输入）
radio：单选框
checkbox：复选框
button：按钮
reset：重置
submit：提交表单数据给服务器
file：文件上传
hidden：隐藏域

maxlength：允许输入的最大字数

placeholder：占位文字

readonly：只读

disabled：禁用

checked：默认被选中 (只有当 type 为 radio 或 checkbox 时可用)

autofocus：当页面加载时，自动聚焦

name：名字 (在提交数据给服务器时，可用于区分数据类型)

value：取值

form：设置所属的form元素（填写form元素的id）

一旦使用了此属性，input 元素即使不写在 form 元素内部，它的数据也能够提交给服务器

去除 input 的 Tab 键选中效果

input { outline:none; }

或者将 tabindex 属性设置为 -1

布尔属性

布尔属性可以没有属性值，写上属性名就代表使用这个属性

常见的布尔属性有 disabled、checked、readonly、multiple、autofocus、selected

在这里插入图片描述

按钮 - input 和 button

普通按钮（type=button）：input使用 value 属性设置按钮文字

重置按钮（type=reset）：重置它所属 form 的所有表单元素（input、textarea、select）

提交按钮（type=submit）：提交它所属 form 的表单数据给服务器（input、textarea、select）
在这里插入图片描述

默认情况下，敲回车键 (Enter) 会自动提交表单数据给服务器
如需禁止此行为，需要编写相应的 JavaScript 代码

使用 button 元素也能实现按钮，功能效果跟 input 一样,按钮文字在标签之间设置

在这里插入图片描述

label 绑定 input (扩大可点击区域)

label 元素一般跟 input 配合使用，用来表示 input 的标题
label 可以跟某个 input 绑定，点击 label 就可以激活对应的 input
label 元素的 for 属性与相应 <input> 元素的 id 属性进行了关联。这样，当用户点击标签文本时，文本框将自动获得焦点。

在这里插入图片描述

也可以使用以下写法：使用 label 标签包住 input

在这里插入图片描述

radio (单选框)

name 值相同的 radio 才具备单选功能

在这里插入图片描述

checkbox (多选框)

属于同一种类型的 checkbox，name 值要保持一致

在这里插入图片描述

隐藏按钮 (type=hidden)

隐藏域不会显示到网页界面上，但提交表单数据的时候，它的 name 和 value 也会被提交给服务器

如果有些发放给服务器的数据，是不需要用户输入的，或者不希望在界面上显示出来，可以使用隐藏域

在这里插入图片描述

select 和 option (下拉选择框和下拉选择框中的选项)

option 是 selec t的子元素，一个 option 代表一个选项

<select>` 元素用于创建下拉选择框，而 `<option>` 元素用于定义下拉选择框中的选项。

在这里插入图片描述

select 常用属性

multiple：可以多选
size：显示多少项

option 常用属性

selected：默认被选中

fieldset 和 legend (创建一个逻辑上的分组,提供一个标题或说明性文本)

<fieldset>` 元素用于将相关的表单字段组合在一起，创建一个逻辑上的分组。
`<legend>` 元素用于为 `<fieldset>` 元素提供一个标题或说明性文本，帮助用户理解该字段集的目的或内容。

在这里插入图片描述

多行输入框(textarea)

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板、评论。

语法：

<textarea rows="3" cols="20">
	文本内容
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框
cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用 CSS 来改变大小
如果要禁止拉伸文本框大小，则：style="resize: none"

form 的常用属性

action：用于提交表单数据的请求 URL

method：请求方法（get 和 post），默认是 get

target 在什么地方打开URL（参考 a 元素的 target）

enctype 规定了在向服务器发送表单数据之前如何对数据进行编码，取值有 3 种：

application/x-www-form-urlencoded：默认的编码方式
text/plain：普通文本传输
multipart/form-data：文件上传时必须为这个值，并且 method 必须是 post 请求

accept-charset：规定表单提交时使用的字符编码

get 和 post

提交表单数据时，浏览器发送的是 http 请求，有 2 种请求方法可以选择：

get
在请求 URL 后面以 ? 的形式跟上发给服务器的参数，多个参数之间用 &隔开，比如
http://ww.test.com/login?phone=123&password=234&sex=1
由于浏览器和服务器对 URL 长度有限制，因此在 URL 后面附带的参数是有限制的，通常不能超过 1KB
在这里插入图片描述

post
发给服务器的参数全部放在请求体中
理论上，post 传递的数据量没有限制（具体还得看服务器的处理能力）

在这里插入图片描述

3. HTML 特殊字符

有些特殊的字符在 html ⽂件中是不能直接表示的, 例如:

空格:  

⼩于号: <

⼤于号: >

按位与:&