HTML的标签分类

双标签：如<strong>标签的内容</strong>  
	   语法：<开始标签> 标签内容 </结束标签>
	   <strong>我要变粗</strong> <head></head>......
单标签：<br/>单标签都是功能性的标签，例如换行等功能里面不需要添加内容 
	   语法：<标签名 />
	   <br> <hr>  ......

HTML中的标签（熟练）

用<>包裹的英文单词

h 系列的标签 : 标题标签

h1，h2，h3，h4，h5，h6

作用 : 给页面上的文字加上标题的语义

代码 : <h1>我就是h1标签</h1>

效果 : h1，h2，h3，h4，h5，h6 将文字放大、加粗、并且逐渐变小（h1标签是最大的）

特点 : 独占一行

注意 : h1 标签尽量少用，太多不利于SEO(搜索引擎优化) 。一般h1 都是给文章的标题或者 logo使用。

p 标签 : 段落标签

作用: 给页面上的一段文字加上段落的语义

代码: <p>这是段落</p>

特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。

hr 标签：水平线标签

作用: 在页面上显示一条横线

代码: <hr />

br 标签：换行标签

作用：强制换行（代码中换行无效）

代码：<br />

(4组)文本格式化标签

作用:

b: 加粗
u: 下划线
i: 倾斜
s: 删除线

建议不要使用, 因为这些标签没有语义

作用:

strong: 加粗
ins: 下划线
em: 倾斜
del: 删除线

可以使用

语义: 起强调加强语气作用

图片标签（重点）

img 标签：图片标签

作用： 在页面中显示一张图片

代码： <img src="图像URL" />

特点： 就是显示图片

属性：

src：图片显示的路径（必须）
alt：如果图片加载不出来，会显示这个属性中的文字
title：介绍这张图片
width：图片的宽度
height：图片的高度

图片宽高只设一个, 另一个会等比例缩放

两个都设可能会变形，所以一般我们只设一个。

路径问题（难点）

当前文件找目标文件的过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Teq5brB-1602818986804)(mdImg/%E5%9C%B0%E5%9B%BE.PNG)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CdDuoqgx-1602818986807)(mdImg/%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84-1535340133797.PNG)]

绝对路径

用的较少，可移植性差

带有盘符的路径: C:\Users\ziyue\Desktop\代码\01.jpg

相对路径

用的很多，可移植性很好

同级目录

如果页面与图片同一级目录，直接写目标文件的名字（类比如我们俩都在大厅）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaeTs5fK-1602818986809)(mdImg/path-01.png)]

<img src="2.jpg">
或者
<img src="./2.jpg">

下级目录

下级目录：如果图片在同级目录image文件夹下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InS5x9hj-1602818986810)(mdImg/path-02.png)]

<img src="image/1.jpg">

步骤：

找到图片所在的目录（先写文件夹的名字）
去图片所在文件夹里面（文件夹名字/）
然后直接写目标文件的名字即可（文件夹名字/目标文件的文件名）

上级目录

上级目录：如果图片在页面的上一级目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KeDVDDXK-1602818986811)(mdImg/path-03.png)]

<img src=”../2.jpg” >

步骤：

首先去目标文件所在的目录。去上一级目录（…/）
直接在路径后面写目标文件的名字（…/目标文件的名字）

总结：

通过文件夹名 / 可以来到下一级目录，通过../ 可以来到上一级目录
一般开发中用的最多的是相对路径，因为相对路径的可移植性要强。（我发给你，你能看~）

链接标签（重点）

a 标签 (Anchor ) : 超链接（锚）

超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）

a标签的跳转功能

作用: 可以从一个页面跳转到另一个页面

代码: <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

效果：

链接未点击的时候，默认显示蓝色
链接点击过以后，显示为紫色（因为浏览器有默认的缓存机制，只要访问过一次的链接，默认都会展示成紫色，只有清除浏览器的缓存，才会变蓝）

注意：

在 a 标签之内必须写上内容, 如果没有内容, 页面上会看不到
a 标签不能嵌套（如果有两个a标签嵌套，那么点击的时候去哪里呢？）

a 标签的属性

**href：**a 标签跳转的目标地址（路径）
- 外部链接（互联网上）需要添加 http:// www.baidu.com
- 内部链接（文件夹中）直接链接页面的路径即可比如 < a href="index.html"> 首页 </a >
**target：**用于指定链接页面的打开方式
- _self ：在当前页面，进行跳转
- _blank : 保留原始页面，再进行跳转
相关标签 ：

base 标签：

**作用：**可以为页面上所有的a标签设置跳转的方式（书写位置：base标签一般放在titile标签下面）

统一设置页面中所有a标签的跳转方式

a 标签的其他用法

可以不跳转 (不写路径其实会刷新页面！刷新也不要哦~)
- href="#"
- 项目中没有确定链接目标时，通常将链接标签的href属性值定义为“#”，表示该链接暂时为一个空链接
- 在项目中起到站位的作用
可以进行下载（一般不用，看不到进度条，配合Js才能看到进度条）
- 当路径指向的目标文件是浏览器打不开的文件时，浏览器会默认下载下来。
- 当路径指向的目标文件是浏览器可以打开的文件时，浏览器会打开。

a标签的定位功能（快速定位）

a标签可以快速定位到当前页面或者其他页面的目标内容（百度百科）

在当前页面进行定位

步骤：

给目标标签加上id属性
```
<p id="mao">我是一只猫</p>
```
给链接的href属性中写上#目标标签的id属性值
```
<a href="#mao">吸猫大法</a>
```

在跳转的页面进行定位

步骤：

给目标文件中的目标标签加上id属性
```
<p id="mao">我是一只猫</p>
```
给当前文件的链接的href属性中写上 目标文件路径#目标标签的id属性值
```
<a href="目标文件路径#mao">吸猫大法</a>
```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hsamkacC-1602818986812)(mdImg/摇头猫.gif)]

结构中每个标签的含义（了解）

DOCTYPE : 文档类型

作用： 用来定义文档类型（告诉浏览器，使用哪种规范去解析html页面）

**位置：**文档的最前面的位置

**规范：**HTML 或 XHTML 规范

**html:xt ：**XHTML规范，已经淘汰了，一些特别老的网站会有，知道即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html:5 ： HTML5规范，非常的简洁

<!DOCTYPE html>

html 标签

**作用：**所有html中标签的一个根节点（老祖宗）

**lang：**用来设置当前页面的语言（标签的语言、对比易语言）

<html lang="en">
</html>

en-英文 zh-中文
英文的意思并不是告诉浏览器，我们这就是纯英文的，而且告诉浏览器我们的内容以英文为主，提高浏览器的渲染性能

head 标签

作用：用于存放网页的配置标签和引入文件的标签

title、meta、base、style、script、link

注：在head标签中我们必须要设置的标签是title, 其他可有可无

body 标签

**作用：**页面在的主体部分，用于存放页面中的html标签

p、h、a、b、u、i、s、em、del、ins、strong、img

meta 标签

**作用：**设置网页的元信息

**注意：**meta中设置的所有的内容在页面都不会显示, 在其中可以设置编码格式、样式、关键字等等

设置字符集（编码格式）：

<meta charset="UTF-8">

Charset（字符集的格式）：UTF-8

最常见的3种字符集（字典）：

UTF-8：国际化的字典，字体库，收录是全世界所有的语言中的文字

1汉字 = 3个字节
GBK：收录了大陆汉字，还加了港澳台的文字-》ANSI（中国）

1个汉字= 2个字节
GB2312：收录了大陆汉字

**约定：**将来我们在整个学习过程中都用utf-8（与国际接轨）

title 标签

**作用：**让页面拥有一个属于自己的标题。

**注意：**title中的文本在 seo 中占有很大的权重，不能乱写

SEO与标签语义化（了解）

SEO : 搜索引擎优化

Search Engine Optimization

写网页的目的-》用户的习惯-》用户的结果-》怎样排名靠前-》seo

作用：用来优化网站，使用网站在搜索引擎上的排名靠前

百度是如何收录一个网站的信息的呢？

百度自己写的一个程序来收录每个网站的信息。

怎样提升网站的SEO（记忆）

花钱买排名

缺点：烧钱。

优点：效果杠杠的
将页面做成静态页面（html后缀）
发外链（类似于广告）
标签语义化（语义化规范）

在合适的地方使用合适的标签

标签语义化的应用：每个html标签都有属于自己的语义，有使用标签时候要一定要了解每个标签的语义，合理使用。

标签语义化的好处

在合适的地方使用合适的标签（比如title和h1）

对搜索引擎的友好，提高网页的SEO（将来网络爬虫进入页面之后可以很方便的得到页面的重要信息）
提升用户体验（css加载不出来也能看出重要性）
利于代码的可读、维护、提高开发效率 (网页源代码方便查询)

列表（熟练）

无序列表 ul （Unordered List）

一列没有顺序的列表（用的最多）

**作用：**显示一列没有排列顺序的数据

**语义：**一组没有顺序的数据

代码：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

注意：

无序列表中的数据没有先后顺序之分
<ul></ul> 中只能嵌套<li></li> ，不能放其他标签或者文字
<li></li> 标签中可以嵌套任意标签（嵌套ul都可以）

有序列表 ol（了解）

一列有顺序的列表（用的很少）

作用：显示一列有顺序的数据

语义：一组有顺序的数据

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

注意：

有序列表中的数据有先后顺序之分
<ol></ol> 中只能嵌套<li></li> ，不能放其他标签或者文字
<li></li> 标签中可以嵌套任意标签（ul都可以）

现在一般情况下ul标签用的比较多，ol标签用的比较少（关键看语义，和样式无关）。

自定义列表 dl（了解）

一列格式自定义的列表（几乎不用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-um7pcoZK-1602818986812)(mdImg/mi.fw.png)]

作用：显示一列数据，格式自己定义

dt : 标题

dd : 列表正文

代码：

<dl>
  <dt>小标题</dt>
  <dd>小标题的解释1</dd>
  <dd>小标题的解释2</dd>
</dl>

注意：

1.dl里面只能放dt或者dd

2.dt/dd里面可以放任意的标签

HTML中的特殊字符（记忆）

有时候需要在页面中显示空格、<、>等特殊字符

HTML的空格合并现象

在HTML代码中同时出现多少个空格、缩进、换行。最后浏览器只会解析出一个空格显示

合并现象案例

女孩：宝贝，靠近点~男孩：darling，我离不开你~
拆了他们！

**总结：**html代码中对空格、缩进、换行不敏感，如果同时出现多个空格、缩进、换行, 页面只会把它们当做一个空格来解析

html 中特殊字符有对应的 转译符 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UuO6pxOx-1602818986813)(mdImg/zifu.png)]

表格table（难点）

将数据以表格的形式在网页中展示

感知表格相关标签：
<table></table> : 代表 表格
<tr></tr> : 代表一行 (row : 行 )
<td></td> : 代表一个标准单元格

创建表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OqWDpq3H-1602818986814)(mdImg/%E8%A1%A8%E6%A0%BC.png)]

代码：

<table>
	<tr>
		<td>单元格</td>
		<td>单元格</td>
	</tr>
	<tr>
		<td>单元格</td>
		<td>单元格</td>
	</tr>
</table>

表格的属性

属性	作用
border	边框
width	给表格设置宽
height	给表格设置高
cellspacing	规定单元格与单元格之间的空白
cellpadding	单元格内部边框与内容的空白
align	对齐方式（table、tr、td分别设置有不同效果）

虽然我们可以使用table中的标签来设置标签的一些样式，但是最好不要用，因为将来凡是与样式相关内容都是由css来设置的

表格中的其他标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQSl4axA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6.PNG)]

总结：

标签	作用	特点
`<th></th>`	起到表头单元格、标题的作用（代替td）	文字加粗居中
`<caption></caption>`	给表格设置标题	在表格的最上面显示标题
`<thead></thead>`	（结构）存放当前表的表头	高度自适应（由内容撑开）
`<tbody></tbody>`	（结构）存放表格主体数据
`<tfoot></tfoot>`	（结构）一般不用、有兼容性问题	高度自适应（由内容撑开）

注意：

<tr></tr>中只能嵌套<td></td>或者<th></th>
<td></td>标签像一个容器，可以容纳所有的元素

合并单元格 (左上原则)

上下合并------》跨行合并：属性: rowspan=“合并的个数”------》留住最上，删除其他

左右合并------》跨列合并：属性: colspan=“合并的个数”-------》留住最左，删除其他

1.确定合并哪几个单元格

2.利用左上原则，确定保大保小

3.确定跨行（rowspan）还是跨列合并（colspan）

步骤：

通过左上原色，确定保留的单元格，给他添加属性（rowspan/colspan），属性值就是合并单元格的个数
找到要删除的单元格，删除掉就行了~

合并单元格练习:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7Ex4lKA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E7%BB%83%E4%B9%A0.PNG)]

**其实：**在早期的网站开发中，表格的使用非常的泛滥

表单系列标签（重点）

表单的目的是收集用户信息

注册页面

有一种生物叫做后端

input (输入框系列) 基本表单控件

先简单的过一遍~

<input type="text">

单标签、type：用于指定不同的控件类型

文本框 text 、密码框 password

昵称：<input type="text" value="小姐姐" name="nicheng" maxlength="6"> 
密码：<input type="password" name="password" maxlength="6">

注意：

value ：用户输入的值（提前在标签设置好就是默认值）
name：告诉后端对应的值的含义。后端接收到的格式：name的属性值=value的属性值

拓展：页面中的信息需要传给后台服务器，但是直接发一个值（value）过去，后端不知道是什么，所以需要加上一个属性name 代表数据的含义。

后端接收的数据结构为： name属性值=value属性值这样后端就知道传过去的是什么（前后端交互在就业班会重点说明，基础班不会使用）
maxlength：设置表单的最大输入值

小bug ：如果是密码输入框，type="password" 的password不能拼错且后面不能有空格，否则浏览器会认为type属性设置无效，会以默认的text方式显示，此时不会密文，相当于是文本框。

单选框 radio 、多选框 checkbox

单选框 radio

性别 : <input name="sex" type="radio" value="nan"> 男 
      <input name="sex" type="radio" value="nv" checked> 女

注意：

通过name进行分组（有相同name属性值的单选框是一组的，一组中同时只能有一个选中），并且告诉后台传的是什么
在实际工作中，需要写value值
checked 属性设置默认选中，属性值省略。

多选框 checkbox

爱好：<input type="checkbox" name="hobby" value="code" checked>敲代码
     <input type="checkbox"  name="hobby" value="nosleep" checked>熬夜
     <input type="checkbox"  name="hobby" value="game">玩游戏

通过name进行分组，并且告诉后台传的是什么
需要写value值
checked属性设置默认选中，属性值省略

文件选择框 file

<input type="file">   单文件上传
<input type="file" multiple>   多文件上传

注意：

multiple设置一次同时可以选中多个文件（ctrl+选中/鼠标框选）属性值可以省略
现在html只负责结构，之后真正的上传相关功能通过js来实现

表单按钮

需要配合form表单一起使用

说白了就是用form标签把表单标签都包起来~

提交按钮submit

将表单的内容提交给后端

<input type="submit">

重置按钮reset

将表单的内容重置为默认值

<input type="reset">

普通按钮button

之后配合js使用

<input type="button">    // 配合后面的js使用

图片按钮image

功能相当于提交按钮，样式为一张图片

<input type="image" src="a.jpg">

select 下拉菜单

出生年月：<select name="year">
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999" selected>1999</option>
		</select>

注意：

name属性设置在select标签上（告诉后台传过去的是什么）
value属性设置在option上，表示选中的值
selected属性设置默认选中，属性值省略

textarea文本域

用于输入大段文字

<textarea cols="规定文本区内的可见宽度" rows="规定文本区内的可见行数">
  文本内容
</textarea>

**注意：**不能通过设置value使文本域有默认值，无效！

Form 表单域

form标签用于定义表单域，将各种表单包裹起来，用于表单提交

<form action="url地址">
  各种表单控件
</form>

**属性：**action 用于指定处理请求的服务器URL地址（就业班的内容）

label 标签（记忆）

示例 : 新浪网页注册

作用：让文本和表单元素绑定到一起（结拜兄弟）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CBARlNXR-1602818986816)(F:/前端/笔记/mdImg/label.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLjixZIi-1602818986816)(F:/前端/笔记/mdImg/猫哥.jpg)]

用法：

写 for ，值为 id，规定 label 与哪个表单元素绑定

性别 : 
<input  id="nan" name="sex" type="radio">  <label for="nan">男</label>
<input  id="nv" name="sex" type="radio"> <label for="id名">女</label>   

步骤：
1.在表单元素上添加id属性
2.给label添加for属性，for的属性值与对应表单元素的id值相同即可

不写 for，默认绑定 label 内的表单控件

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

步骤：用label把表单元素和文字包在一起即可

没有语义的布局标签（记忆）

div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到）

div：div盒子

<div>长亭外</div><div>古道边</div>

特点：

width由屏幕宽度决定（独占一行）height自适应（由内容撑开）
默认占一整行（一行只能显示一个）

页面布局中用的最多~

span

<span>芳草碧连天</span>

特点：

width、height由内容来决定（都由内容撑开）
一行里面可以显示多个

除了没有语义的标签可以用于布局，还有一些有语义的标签可以用于布局

HTML5新标签与特性（了解）

就业班会有专门的H5C3的课，来学习html5的一些新标签和属性

HTML5新增语义标签（记忆）

头部：header标签

header：定义网页的头部---》头部语义 + div

导航：nav标签

nav：定义网页的导航---》导航语义 + div

底部：footer标签

footer：定义网页的底部---》底部语义 + div

侧边栏：aside标签

aside：定义网页的侧边---》侧边语义 + div

区块：section标签

section：定义网页的区块---》区块语义 + div

文章：article标签

article：定义网页的文章---》文章语义 + div

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7dXEVgc-1602818986817)(F:/前端/笔记/mdImg/h5新标签.png)]

**注意：**html5标签有兼容性问题（老浏览器没效果），所以为了客户群多，会少用。

其他表单新属性(记忆)

用法	属性	含义
`<input type="text" placeholder="请输入用户名">`	placeholder	提示用户输入对应的信息
`<input type="text" autofocus>`	autofocus	自动获得焦点
`<input type="file" multiple>`	multiple	多文件上传，可选多文件

多媒体标签—audio 音频

在网页中播放音频（声音）

属性：

controls 是否显示播放控件
autoplay 自动播放（有兼容性问题）
loop 循环播放（有兼容性问题）

兼容性处理：

<audio controls autoplay loop>
  <source src="1.mp3">
  您的版本过低,请升级高级版本 <a href="http://www.itcast.cn/">点击下载</a>
</audio>

多媒体标签—video 视频

在网页中播放视频

属性（和audio类似）：

controls 是否显示播放控件
autoplay 自动播放（有兼容性问题）（muted）
loop 循环播放（有兼容性问题）

**区别：**可以设置宽高，并且显示视频

**注意：**宽度和高度只需要设置一个，另一个会根据等比例缩放，如果同时指定两个，视频的实际宽高会以小的为基准（类似图片）

HTML笔记（详细）

HTML的标签分类

HTML中的标签（熟练）

h 系列的标签 : 标题标签

p 标签 : 段落标签

hr 标签：水平线标签

br 标签：换行标签

(4组)文本格式化标签

图片标签（重点）

img 标签 ：图片标签

路径问题（难点）

绝对路径

相对路径

同级目录

下级目录

上级目录

链接标签（重点）

a 标签 (Anchor ) : 超链接（锚）

a标签的跳转功能

a 标签的属性

a 标签的其他用法

a标签的定位功能（快速定位）

在当前页面进行定位

在跳转的页面进行定位

结构中每个标签的含义（了解）

DOCTYPE : 文档类型

html 标签

head 标签

body 标签

meta 标签

title 标签

SEO与标签语义化（了解）

SEO : 搜索引擎优化

怎样提升网站的SEO（记忆）

标签语义化的好处

列表（熟练）

无序列表 ul （Unordered List）

有序列表 ol（了解）

自定义列表 dl（了解）

HTML中的特殊字符（记忆）

HTML的空格合并现象

合并现象案例

表格table（难点）

创建表格

表格的属性

表格中的其他标签

合并单元格 (左上原则)

合并单元格练习:

表单系列标签（重点）

input (输入框系列) 基本表单控件

文本框 text 、 密码框 password

单选框 radio 、多选框 checkbox

单选框 radio

多选框 checkbox

文件选择框 file

表单按钮

提交按钮submit

重置按钮reset

普通按钮button

图片按钮image

select 下拉菜单

textarea文本域

Form 表单域

label 标签（记忆）

没有语义的布局标签（记忆）

div：div盒子

span

HTML5新标签与特性（了解）

HTML5新增语义标签（记忆）

其他表单新属性(记忆)

多媒体标签—audio 音频

多媒体标签—video 视频

猜你喜欢

img 标签：图片标签

文本框 text 、密码框 password