HTML笔记

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

---

…
1
2
3
4
5
6
HTML中的标签（熟练）
用<>包裹的英文单词

h 系列的标签 : 标题标签
h1，h2，h3，h4，h5，h6

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

代码 :

我就是h1标签

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

特点 : 独占一行

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

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

代码:

这是段落

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

hr 标签：水平线标签
作用: 在页面上显示一条横线

代码:

---

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

代码：

(4组)文本格式化标签
作用:

b: 加粗
u: 下划线
i: 倾斜
s: 删除线
建议不要使用, 因为这些标签没有语义

作用:

strong: 加粗
ins: 下划线
em: 倾斜
del: 删除线
可以使用

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

图片标签（重点）
img 标签 ：图片标签
作用： 在页面中显示一张图片

代码：

特点： 就是显示图片

属性：

src：图片显示的路径（必须）
alt：如果图片加载不出来，会显示这个属性中的文字
title：介绍这张图片
width：图片的宽度
height：图片的高度
图片宽高只设一个, 另一个会等比例缩放

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

路径问题（难点）
当前文件找目标文件的过程

(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

相对路径
用的很多，可移植性很好

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

(mdImg/path-01.png)]

或者 1 2 3 下级目录 下级目录：如果图片在同级目录image文件夹下

(mdImg/path-02.png)]

1 步骤：

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

(mdImg/path-03.png)]

1 步骤：

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

通过文件夹名 / 可以来到下一级目录，通过…/ 可以来到上一级目录
一般开发中用的最多的是相对路径，因为相对路径的可移植性要强。（我发给你，你能看~）
链接标签（重点）
a 标签 (Anchor ) : 超链接（锚）
超链接在页面中起到跳转或定位的作用（超链接、锚链接、a链接、a标签）

a标签的跳转功能
作用: 可以从一个页面跳转到另一个页面

代码: 文本或图像

效果：

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

在 a 标签之内必须写上内容, 如果没有内容, 页面上会看不到
a 标签不能嵌套（如果有两个a标签嵌套，那么点击的时候去哪里呢？）
a 标签的属性
**href：**a 标签跳转的目标地址（路径）

外部链接（互联网上）需要添加 http:// www.baidu.com
内部链接（文件夹中）直接链接页面的路径即可 比如 < a href=“index.html”> 首页
**target：**用于指定链接页面的打开方式

_self ：在当前页面，进行跳转
_blank : 保留原始页面，再进行跳转
相关标签 ：

base 标签：

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

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

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

在当前页面进行定位
步骤：

给目标标签加上id属性

我是一只猫

1 给链接的href属性中写上#目标标签的id属性值

吸猫大法
1
在跳转的页面进行定位
步骤：

给目标文件中的目标标签加上id属性

我是一只猫

1 给当前文件的链接的href属性中写上 目标文件路径#目标标签的id属性值

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

结构中每个标签的含义（了解）
DOCTYPE : 文档类型
作用： 用来定义文档类型（告诉浏览器，使用哪种规范去解析html页面）

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

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

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

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

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

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

en-英文 zh-中文
英文的意思并不是告诉浏览器，我们这就是纯英文的，而且告诉浏览器我们的内容以英文为主，提高浏览器的渲染性能
1
2
3
4
5
head 标签
作用：用于存放网页的配置标签和引入文件的标签

title、meta、base、style、script、link

注：在head标签中我们必须要设置的标签是title, 其他可有可无
1
2
3
body 标签
**作用：**页面在的主体部分，用于存放页面中的html标签

p、h、a、b、u、i、s、em、del、ins、strong、img
1
meta 标签
**作用：**设置网页的元信息

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

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

Charset（字符集的格式）：UTF-8
1
2
3
最常见的3种字符集（字典）：

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

1汉字 = 3个字节

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

1个汉字= 2个字节

GB2312：收录了大陆汉字

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

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

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

SEO与标签语义化（了解）
SEO : 搜索引擎优化
Search Engine Optimization

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

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

百度自己写的一个程序来收录每个网站的信息。
1
2
3
怎样提升网站的SEO（记忆）
花钱买排名

缺点：烧钱。

优点：效果杠杠的

将页面做成静态页面（html后缀）

发外链（类似于广告）

标签语义化（语义化规范）

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

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

标签语义化的好处
在合适的地方使用合适的标签（比如title和h1）

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

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

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

代码：

• 列表项1
• 列表项2
• 列表项3
• ......

1 2 3 4 5 6 注意：

无序列表中的数据没有先后顺序之分

中只能嵌套

• ，不能放其他标签或者文字
• 标签中可以嵌套任意标签（嵌套ul都可以） 有序列表 ol（了解） 一列有顺序的列表（用的很少）

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

  语义：一组有顺序的数据

  1. 列表项1
  2. 列表项2
  3. 列表项3
  4. ......
  1 2 3 4 5 6 注意：

  有序列表中的数据有先后顺序之分

  中只能嵌套
• ，不能放其他标签或者文字
• 标签中可以嵌套任意标签（ul都可以） 现在一般情况下ul标签用的比较多，ol标签用的比较少（关键看语义，和样式无关）。

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

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

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

  dt : 标题

  dd : 列表正文

  代码：

  小标题

  小标题的解释1

  小标题的解释2

  1 2 3 4 5 注意：

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

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

  HTML中的特殊字符（记忆）
  有时候需要在页面中显示空格、<、>等特殊字符

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

  合并现象案例
  女孩：宝贝，靠近点_{男孩：darling，我离不开你}
  拆了他们！
  1
  2
  **总结：**html代码中对空格、缩进、换行不敏感，如果同时出现多个空格、缩进、换行, 页面只会把它们当做一个空格来解析

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

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

  表格table（难点）
  将数据以表格的形式在网页中展示

  感知表格相关标签：

  : 代表 表格 : 代表一行 (row : 行 ) : 代表一个标准单元格 1 2 3 4 创建表格 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OqWDpq3H-1602818986814)(mdImg/%E8%A1%A8%E6%A0%BC.png)]

  代码：

  单元格	单元格
  单元格	单元格

  1 2 3 4 5 6 7 8 9 10 表格的属性 属性 作用 border 边框 width 给表格设置宽 height 给表格设置高 cellspacing 规定单元格与单元格之间的空白 cellpadding 单元格内部边框与内容的空白 align 对齐方式（table、tr、td分别设置有不同效果） 虽然我们可以使用table中的标签来设置标签的一些样式，但是最好不要用，因为将来凡是与样式相关内容都是由css来设置的

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

  总结：

  标签 作用 特点

  起到表头单元格、标题的作用（代替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 (输入框系列) 基本表单控件
  先简单的过一遍~

  单标签、type：用于指定不同的控件类型
  1
  2
  3
  文本框 text 、 密码框 password
  昵称：
  密码：
  1
  2
  注意：

  value ：用户输入的值（提前在标签设置好就是默认值）

  name：告诉后端对应的值的含义。后端接收到的格式：name的属性值=value的属性值

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

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

  maxlength：设置表单的最大输入值

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

  单选框 radio 、多选框 checkbox
  单选框 radio
  性别 : 男
  女
  1
  2
  注意：

  通过name进行分组（有相同name属性值的单选框是一组的，一组中同时只能有一个选中），并且告诉后台传的是什么
  在实际工作中，需要写value值
  checked 属性设置默认选中，属性值省略。
  多选框 checkbox
  爱好：敲代码
  熬夜
  玩游戏
  1
  2
  3
  通过name进行分组，并且告诉后台传的是什么
  需要写value值
  checked属性设置默认选中，属性值省略
  文件选择框 file
  单文件上传
  多文件上传
  1
  2
  注意：

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

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

  提交按钮submit
  将表单的内容提交给后端

  1 重置按钮reset 将表单的内容重置为默认值 1 普通按钮button 之后配合js使用

  // 配合后面的js使用
  1
  图片按钮image
  功能相当于提交按钮，样式为一张图片

  1 select 下拉菜单 出生年月： 1996 1997 1998 1999 1 2 3 4 5 6 注意：

  name属性设置在select标签上（告诉后台传过去的是什么）
  value属性设置在option上，表示选中的值
  selected属性设置默认选中，属性值省略
  textarea文本域
  用于输入大段文字

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

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

  各种表单控件 1 2 3 **属性：**action 用于指定处理请求的服务器URL地址

  label 标签（记忆）
  示例 : 新浪网页注册

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

  (F:/前端/笔记/mdImg/label.jpg)]

  (F:/前端/笔记/mdImg/猫哥.jpg)]

  用法：

  写 for ，值为 id，规定 label 与哪个表单元素绑定
  性别 :
  男
  女

  步骤：
  1.在表单元素上添加id属性
  2.给label添加for属性，for的属性值与对应表单元素的id值相同即可
  1
  2
  3
  4
  5
  6
  7
  不写 for，默认绑定 label 内的表单控件
  男

  步骤：用label把表单元素和文字包在一起即可
  1
  2
  3
  没有语义的布局标签（记忆）
  div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到）

  div：div盒子

  长亭外
  古道边
  1 特点：

  width由屏幕宽度决定（独占一行）height自适应（由内容撑开）
  默认占一整行（一行只能显示一个）
  页面布局中用的最多~

  span
  芳草碧连天
  1
  特点：

  width、height由内容来决定（都由内容撑开）
  一行里面可以显示多个
  除了没有语义的标签可以用于布局，还有一些有语义的标签可以用于布局

  HTML5新标签与特性（了解）
  就业班会有专门的H5C3的课，来学习html5的一些新标签和属性

  HTML5新增语义标签（记忆）
  头部：header标签

  header：定义网页的头部—》头部语义 + div
  1
  导航：nav标签

  nav：定义网页的导航—》导航语义 + div
  1
  底部：footer标签

  footer：定义网页的底部—》底部语义 + div
  1
  侧边栏：aside标签

  aside：定义网页的侧边—》侧边语义 + div
  1
  区块：section标签

  section：定义网页的区块—》区块语义 + div
  1
  文章：article标签

  article：定义网页的文章—》文章语义 + div
  1
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7dXEVgc-1602818986817)(F:/前端/笔记/mdImg/h5新标签.png)]

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

  其他表单新属性(记忆)
  用法 属性 含义
  placeholder 提示用户输入对应的信息
  autofocus 自动获得焦点
  multiple 多文件上传，可选多文件
  多媒体标签—audio 音频
  在网页中播放音频（声音）

  属性：

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

  您的版本过低,请升级高级版本 点击下载 1 2 3 4 多媒体标签—video 视频 在网页中播放视频

  属性（和audio类似）：

  controls 是否显示播放控件
  autoplay 自动播放（有兼容性问题）（muted）
  loop 循环播放（有兼容性问题）
  **区别：**可以设置宽高，并且显示视频

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