02 HTML标签

2. HTML标签

1. HTML简介

用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件（即网页文件）内容下载到本地，然后打开显示的过程。

而文本文件的文档结构只有空格和黄航两种组织方式，如此，文本文件在打开显示时，显示的效果将会非常的单一。

为了让显示的效果不那么单调，我们会偏向会使用

我们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部分内容，然后为内容打上不同的标记，比如什么是标题，什么是段落，然后存放硬盘里，等下次打开时，word会识别之前的标记，然后按照预先编排好的结果显示出来。

站在显示文本内容的角度去看，浏览器与word的原理一样，我们可以将浏览器当成一个网页版的只读word，浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为HTML,HTML全称是超文本标记语言（HyperText Markup Language）。

“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签，比如用标签h1标记标题，用标签p标签段落，如此我们标记一首唐诗就成了如下格式：

静夜思

床前明月光

疑是地上霜

举头望明月

低头思故乡

这样浏览器在接收到文本内容后，就可以按照事先规定好的记号去显示各部分的内容，显示结果如下图

2. HTML标签与文档结构

一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容，而HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，所以HTML部分是整个前端的基础，我们学习HTML主要就是学习的HTML标签。

2.1. 什么是标签呢

在HTML中规定标签使用英文的尖括号即<和>包起来，如，，都是标签

HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个/，开始标签和结束标签之间的就是标签的内容。

有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如：

HTML中的标签存放于文本文件中，需要按照下述固定的文档结构组织：

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

各部分解释

# 1. <!DOCTYPE HTML>
<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

# 2. <html></html>
<html></html>称为根标签，所有的网页标签都在<html></html>中。
HTML的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析，不定义也没什么影响。
根据W3C推荐标准，您应该通过<html>标签中的lang属性对每张页面中的主要语言进行声明，比如：<html lang='en'></html>

# 3. <head></head>
<head></head>标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>,<script>,<script>,<link>和<meta>等标签，头部标签在下一节中会有详细介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
# 4. <body></body>
在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。

标签间的关系

并列(兄弟/平级)

head与body
嵌套（父子/上下级）

html内有body

2.2. HTML标签详细语法与注意点

标签的语法:

双标签

<标签名属性1=“值1” 属性2=“值2” …… >内容部分</标签名>
单标签

<标签名属性1=“值1” 属性2=“值2” …… />

标签注意事项

记好/标签是不会显示出来的
标签只是用来做记号而不负责控制样式：虽然用
标记的文本在显示时会被加大加粗，但请务必记住，HTML的作用只有一个它是专门用来对文件做记号来表示其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一种解耦合的思想。
HTML标签不区分大小写，<h1>和<H1>是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。
HTML中部分标签是可以嵌套的。例如：
,但不能交叉

几个很重要的属性

id:定义标签的唯一ID，HTML文档树中唯一
class：为HTML元素定义一个或多个类名(classname)（CSS样式类名）
style：规定元素的行内样式(CSS样式)

2.3. HTML中标签分类

但从是否可以嵌套子标签的角度去分，标签分为两类

容器类标签

容器标签可以简单的理解为能嵌套其他所有标签的标签

常见的容器级的标签：

h系列

ul>li

ol>li

dl>dt+dd

div

文本类标签

文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。

常见文本的标签：

span

strong

ins

del

分类2

块级标签：独占一行

p,h1~h6,div
行内标签：自身文本多大就占多大

span,b,i,s

2.4 HTML注释

无论我们学习什么编程语言，一定要重视的就是注释，HTML中注释的格式:

注意：注释中可以直接使用回车换行。

并且我们习惯用注释的标签把HTML代码包裹起来。如：

这里放你xx部分的HTML代码

HTML注释的注意事项：

HTML注释不支持嵌套。
HTML注释不能写在HTML标签中

3. head内常用标签

< meta > 是HTML的元素，在网页头部标签内定义，可提供与网页有关的结构化元数据，即网页源信息(meta_information).网页上并不会显示这些元信息，但计算机可以识别他们。

在pycharm中写HTML代码，只需要写标签名，尖括号可以不写，Tab键补全

< meta > 相关标签

指定字符集
页面描述

< meta name="Description" content="具体描述" >
关键字：有助于所有引擎SEC优化，再怎么优化也抵不过竞价排名

< meta name="Description" content="网易，腾讯，游戏，新闻" >网页面描述

< meta name="keyword" content="网易，腾讯，游戏，新闻" >关键字描述，搜索关键字都能搜到此网页
3秒后跳转

< meta name="Description" content="3,baidu.com" >
三秒刷新

< meta http-equiv="refresh" content="3" >

非meta相关标签

标题

< title >百度一下，你就知道
网站的图标
定义内部样式
引入外部样式文件
定义JavaScript代码或引入JavaScript文件

4.body内常用标签

4.1. HTML语义化

body中的标签是会显示到浏览器窗口的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记内容是用来做什么的

虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记标签的显示样式，只记它的语义，因为每个标签的样式各不同，记忆不同标签的样式来控制显示样式，对前端开发来说将会是一种灾难，更何况添加并不是HTML擅长的事情，而且在布局的时候使用语义化的标签，会方便搜索引擎在爬取网页文件时更好地解析文档结构，从而进行收录。

提醒：对于那些只用来修改样式的标签将会被淘汰掉!

4.2. 字符实体

在HTML中对空格/回车/tab不敏感，会把多个空格/回车/tab当作一个空格来处理。

字符实体指的是在HTML中，有的字符是被HTML保留的比如大于号小于号

有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来那么这些东西向显示出来就必须通过字符实体

4.3.h系列标签

H系列标签标记内容为一个标题，全称headline

h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其次是h2。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>勇敢牛牛不怕困难</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    

</body>
</html>

注意1：没有六级以上的标题

注意2：虽然h1-h6标签的显示样式是从大到小，但再次强调：HTML标签的显示样式是没有意义的

注意3：在企业开发中一定要慎用h写列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（处于搜索引擎优化考虑，搜索引擎会使用标题将网页的结构和内容编制索引）

4.4. p标签

p标签标记内容为一个段落，全称paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>勇敢牛牛不怕困难</title>
</head>
<body>
    <h1>勇敢蛙蛙</h1>
    <p>蛙蛙，娃娃，哇哇</p>
    <p>不怕困难</p>

</body>
</html>

4.5. img标签

img标签为标记一个图片，全称image，具体的用法是：

< img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />

使用img标签有以下的几点注意事项

src指定的图片地址可以使网络地址，也可以是一个本地地址，本地地址可以使用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
图片的格式可以是png，jpg和gif
alt="图片加载失败时显示的内容"为img标签加上该属性可用于支持搜索引擎和盲人读屏软件
title = "鼠标悬停到图片上时显示的内容"
如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形，那如果又想指定宽度和高度，又不想让图片变形，我们可以至指定宽度和搞得一个值即可，只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片不会变形。
一个p标签一个段落

4.6. a标签

a标签标记一个内容为超链接，全称anchor，也被称作锚。

超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下

< a href="跳转到的目标页面地址" target=“是否在新的页面中打开” title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片< /a>

使用a标签需要注意以下几点：

a标签不仅可以标记文字，也可以标记图片

< a href="https://www.baidu.com">< img src="mv.png" />百度一下，你就知道
a标签必须有href属性，href的值必须是http://或https://开头
a标签还可以跳转到自己的页面

< a href="template/aaa.html">跳转到自己这个页面 < /a>
target=“_ bank”代表在新页面中打开，其余的值均无需记忆，如果页面中大量的a标签都需要设置target=" _ bankk",那么我们可以在head标签内新增一个base标签进行统一设置

< base target="_blank">

如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置

target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
title="鼠标悬浮显示的内容"

4.8. 其他标签

i 标签：字体变斜体
u标签：下划线
s标签：删除线
b标签：字体加粗
br标签：< br>换行
hr标签：
水平分割线

4.9. body内特殊符号

& nbsp; 空格
& gt; 大于号
& lt; 小于号
& amp; &
& yen；￥
&copy: 版权
&reg: 注册

4.10. div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过css样式为其赋予不同的表现。

span标签用来定义内联（行内）元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块计元素与行内元素的区别：

块元素：是以另起一行开始渲染的元素，

行内元素则不需另起一行。如果单独在网页插入这两个元素，页面产生任何的影响。

这两个元素专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，他只能抱哈其他内联元素

p标签不能包含块级标签，p标签也不能包含p标签

5. 列表标签

列表标签可以标记一堆数据是一个整体或列表html中列表标签分为三种：

5.1. 无序列列表

提示：这是列表标签中使用最多的一种，非常重要，重点掌握

无序列表可以制作当航条，商品列表，新闻列表等

无序列表的组合使用

ul>li

秒杀
优惠券
PLUS会员
闪购
拍卖
京东服饰
京东超市
生鲜
全球购
京东金融

type属性：

disc(实心圆点，默认值)
circle（空心圆圈）
square（实心方块）
none（无样式）

注意：ul与li是组合标签应该一起出现，并且ul的子标钱只应该是li，而li的子标签则可以是任意其他标签

5.2. 有序列表

提示：这种类型的列表在实际引用中并不多见；

智商排名

学生A
学生B
学生 C
学生 D
学生 E

type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

提示：有序列表能干的事，完全可以用无序列表取代

5.3 自定义列表（也会经常使用）

作用分析：

选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子。

无序列表：内容是并列的，没有先后顺序

有序列表：内容是由先后顺序的

自定义列表：对一个题目进行解释说的时候，用自定义列表，可以做网站尾部相关信息，网易注册界面的输入框

自定义列表也是一个组合标签：dl>dt+dd

dl:defination list,自定义列表

dt：defination title，自定义标题

dd：defination description，自定义描述

自定义标题1

描述1

描述2

描述3

自定义标题2

描述1

描述2

描述3

自定义标题3

描述1

描述2

描述3

6. table标签

table标签可以标记一段数据为表格。

表格标签是一种数据的展现形式，当数据量非常大的时候，实用表格的形式来展示被认为是最清晰的。

6.1.表格的格式

< table>

tr代表表格的一行数据的一行数据

td表一行中的一个普通单元格th标识表头单元格

th文字加粗

注意：表格标签有个边框属性，这个属性决定了边宽的宽度

默认请款下这个属性的值为0，所以看不到边框

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

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>wyz</td>
    <td>睡觉</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>哒哒哒</td>
  </tr>
  </tbody>
</table>
</body>
</html>

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

6.2. 表格的结构

为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：

表格的标题：caption

特点：相对于表格宽度自动居中对齐

注意：
- 该标签一定要写在table标签里，否则无效
- caption一定要紧跟在table标签内的第一个
表格的表头信息：thead

特点：专门用来存储每一列的标题，只要当前列的标题存储在这个标签中就会自动居中+加粗文字
表格的主题信息：tbody

注意：
- 如果没有添加tbody，浏览器会自动添加
- 如果制定了thead和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化
标为信息：tfoot

7. form标签（表单标签）

表单标签：能够获取前端用户数据（用户输入的，用户选择，用户上传）基于网络发送给后端服务器

< form action=""> 在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action：控制数据提交的后端路径(给那个服务端提交数据)

什么都不写默认就是朝当前页面所在的url提交数据
写全路径：https://www.baidu.com 朝百度服务端提交
只写路径后缀action='/index/'
自动识别当前服务端的ip和port拼接到前面：host:port/index/

每个表单可以写在labe里，这里有两种写法

# 第一种 直接将input框写在label内
<label for="d1">username:<input type="text" id="d1">
 
#第二种 通过id链接即可 无需嵌套
</label>
<label for="d3">txt:</label>
<input type="text" id="d3">
placeholder="用户名"   # 设置提示字
form表单提交文件需要注意
	1.method必须是post
    2.enctype="multipart/form-data"
      enctype类似于数据提交的编码格式
        默认是urlencode只能够提交普通的文本数据
        formdata 就可以支持提交文件数据

ps：input不跟label关联也没有问题

label 和input都是行内标签

提示：forms表单是个很重要的知识点

7.1. 表单的type属性

type属性：

text：普通文本
password：密文
date：日期
submit：用来触发form表单提交数据的动作，若submit没有制定按钮的文本内容，不同的浏览器打开之后可能渲染的文本内容不一致
button：就是一个普普通通的按钮本身没有任何的功能，但是他是最有用的，学了js之后可以给他自定义各种功能

< button>点我
reset：重置内容

radio：单选

默认选中要加checked="checked"
        <input type="radio" name="gender" checked="checked">女
        当标签的属性名和属性值一样的时候可以简写
        <input type="radio" name="gender" checked>女
 <p>gender
        <input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
 </p>  

# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
 <p>gender
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
    </p>

file：获取文件也可以一次性获取多个
hidden：隐藏当前input框

作用：可以做钓鱼网站

7.2. select标签

select标签默认是单选可以加mutiple参数变多选，默认选中selected

# 单选
<p>province
    <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">深圳</option>
    </select>
</p>
# 多选
<p>食品：
    <select name="" id="" multiple>
        <option value="" selected="selected">鸡蛋</option>
        <option value="" >鸡心</option>
        <option value="" >鸡肝</option>
        <option value="" >鸡杂</option>
        <option value="" selected="selected">鸡屎</option>
    </select>
</p>

7.3. textarea标签

textarea标签：获取大段文本

<p>自我介绍：
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

7.4. 能够触发form表单提交数据的按钮有哪些

1. <input type="submit" value="提交">
2. < button>提交</button>

posted @ 2021-08-09 08:55 简爱cx 阅读(77) 评论(0) 编辑收藏举报

刷新页面返回顶部

简爱cx

02 HTML标签

2. HTML标签

1. HTML简介

静夜思

2. HTML标签与文档结构

2.1. 什么是标签呢

2.2. HTML标签详细语法与注意点

2.3. HTML中标签分类

2.4 HTML注释

3. head内常用标签

4.body内常用标签

4.1. HTML语义化

4.2. 字符实体

4.3.h系列标签

4.4. p标签

4.5. img标签

4.6. a标签

4.8. 其他标签

4.9. body内特殊符号

4.10. div标签和span标签

5. 列表标签

5.1. 无序列列表

5.2. 有序列表

智商排名

5.3 自定义列表（也会经常使用）

6. table标签

6.1.表格的格式

6.2. 表格的结构

7. form标签（表单标签）

7.1. 表单的type属性

7.2. select标签

7.3. textarea标签

7.4. 能够触发form表单提交数据的按钮有哪些

公告