【web前端开发】HTML知识点超详细总结
文章目录
- 什么是网页
- 常用的浏览器及内核
- VScode和WebStrom使用
- HTML常用标签
- 文档类型<!DOCTYPE>
- 网页语言lang
- 字符集
- title标签
- 标题标签
- 段落和换行标签
- 文本格式化标签
- div和span标签
- 图像标签
- 路径
- 相对路径
- 同一级路径
- 上一级路径:
- 下一级路径
- 绝对路径
- 链接标签
- 超链接标签
- 外部链接:
- 内部链接:
- 空链接:
- 下载链接
- 锚点链接
- 注释与空格符
- 表格相关标签
- 表格标签
- 表头单元格
- 表格的相关属性
- 表格的结构标签
- 合并单元格
- 列表标签
- 无序列表(重要)
- 有序列表
- 自定义列表
- 表单标签
- 表单域
- 表单控件(表单元素)
- label标签
- select标签
- textarea文本域标签
- 表单属性
- 语义标签
- 多媒体标签
- 视频标签
- 音频标签
- 总结:
什么是网页
网页是构成网站的基本元素，是承载各种网站应用的平台
网页通常是指HTML格式的文件(==文件扩展名为.html或.htm ==),它通过浏览器来阅读
HTML不是一种编程语言,而是一种标记语言
常用的浏览器及内核
常用的浏览器有 IE浏览器（Internet explorer）火狐浏览器 谷歌(chrome) Safari浏览器 Opera浏览器
浏览器内核（Rendering Engine），是指浏览器最核心的部分，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页
| 浏览器 | 内核 | 说明 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | webkit | 苹果浏览器内核 |
| chrome | Chromium/Blink | 大部分国产浏览器最新版都采用Blink内核 |
| Opera | Blink | 跟随chrome使用Blink内核,Blink其实是webkit的分支 |
VScode和WebStrom使用
工欲善其事,必先利其器.前端开发的软件有很多,下面给大家介绍一下VScode和WebStrom的使用,我们可以在VScode和WebStrom上写一些HTML文件
VScode
下载地址:https://code.visualstudio.com/
WebStorm
下载地址:https://www.jetbrains.com/webstorm/
使用VScode要下载一些插件,如果嫌麻烦,可以使用WebStorm.
HTML常用标签
在讲HTML标签之前,先看下面这段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
我们平时在使用编译器编写前端内容的时候，会生成这样一些代码，这些代码就相当于HTML的骨架了,下面给大家简单解释一下这些代码是什么意思
文档类型<!DOCTYPE>
<!DOCTYPE>文档类型的声明，作用是告诉浏览器是以那种HTML版本来显示网页
其中要注意两点：
- <!DOCTYPE html> 这句代码的意思就是说当前是以HTML5版本来显示网页的
- <!DOCTYPE>不是HTML5的标签，只是文档类型声明标签
网页语言lang
<html lang="en">
lang是用来定义语言的种类
- en 定义的语言为英语
- zh-CN 定义的语言为中文
出现这个就说明当前网页是一个英语网站,定义的语义为英语
字符集
<meta charset="UTF-8">
字符集（Character set）是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。
- UTF-8也叫万国码 ，是最常用的字符集编码方式，基本上包含了所有国家需要用到的字符。
title标签
定义文档的标题, 浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上
<title>Document</title> #可以自己修改
简单来说就是设置网页的名字
标题标签
在HTML中,标题标签一共有6种,如下:
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>文本</p>
</body>
效果图:
h1~h6标题标签文字是逐渐变小的,一般常用的是h4标题标签.
段落和换行标签
<p></p>标签用于定义段落 可以将文档文字分成若干段落
大家理解为是写作文,作文中的每一段文字就在一对<p></p>里面
文本在浏览器中会根据游览器大小子自动换行
段落与段落之间有空隙
<br /> 强制换行标签
<br /> 是一个单标签
段落与段落之间的距离比较大,换行之间的距离比较小
文本格式化标签
在网页中,有些内容需要以特殊方式显示,这时就需要用到文本格式化标签
常用的文本格式化标签如下:
加粗标签:<strong></strong>
粗体标签:<b></b>
倾斜:<em></em>
斜体:<i></i>
闪烁标签:<blink></blink>
放大标签:<big></big>
缩小标签:<small></small>
上标效果标签: <sup></sup>
下标效果标签: <sub></sub>
删除线标签:<del></del>和<s></s>
下划线标签:<ins></ins>和<u></u>
div和span标签
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
div和span是没有语义的,它们就是盒子,用来放内容的
图像标签
<img> 单标签
<img src = "图片路径" >
下面是一些图像标签中一些常见属性:
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须要有的属性 |
| alt | 文本 | 替换文本,图片不能正常显示时,显示文本 |
| title | 文本 | 提示文本,鼠标放在图片上,显示的文字 |
| width | 像素 | 设置图片宽度 |
| height | 像素 | 设置图片高度 |
| border | 像素 | 设置图片边框 |
图像标签的注意点:
- 图像可以有多个属性,必须在标签名后面
- 属性之间不分先后
- 属性采用键值对的格式,即 “属性 = 属性值”
路径
相对路径
相对路径就是以引用图片作为参考,得到的路径
相对路径分为3种,==同一级路径,上一级路径和下一级路径 ==
同一级路径
以图片文件举例,这里的图片文件和HTML文件就是在web文件夹里面,这就是同一路径下,此时如果要引用这里的图片文件就可以这么写:
<img src="1.png"/>
上一级路径:
index2文件是code文件夹里的,而code文件夹和1.png这个图片文件都在WEB文件夹下,那么1.png文件就是在index2的上一级路径
如果在index2里面引用1.png文件的话,写法如下:
<img src="../1.png"/>
# ../就是返回上一级路径
# ../ ../就是返回上两级路径 以此类推
下一级路径
如果index1要引用images里面的2.png路径,因为index1与images文件是同一级,图片在images文件夹里面,那么图片文件就是在index1的下一级路径
如果index1文件要引用2.png图片文件的话,写法如下:
<img src="images/2.png" />
绝对路径
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如:
这个一般使用的很少,毕竟这只是我电脑里的文件,别人电脑在我这个路径下没有我想要的文件
链接标签
超链接标签
外部链接:
<a> 标签用于定义超链接标签 作用是跳转到另一个链接
语法格式:
<a href="跳转链接", target="目标窗口的弹出方式">文本或者图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定目标的url地址,从而实现超链接(必有属性) |
| target | 用于指定连接的打开方式,_self是将当前页面跳转到链接地址,_blank是以新窗口打开 |
内部链接:
链接标签也可以跳转到写好的HTML界面,例如我要在test里面设置一个超链接跳转到index1的界面,那么可以这么写:
<a href="index1.HTML">文本或者图片</a> #同一级路径
空链接:
如果没有想好跳转的地址,就可以使用空链接
<a href="#">文本或者图片</a>
下载链接
下载链接地址是文件(.exe 或者是zip等压缩包形式) 跳转后会自动下载文件
锚点链接
锚点链接:当我们点击链接,可以跳转到页面中的某个位置
- 在链接文本的href属性中,设置属性名为"#名字"的形式
- 在目标标签中,添加一个属性 id = 刚才的名字
注释与空格符
注释在写代码时还是很重要的,如果代码很多,如果要改之前写的某个地方,就非常难找.那么在写代码时就可以写注释标识一下,这里写的是什么内容. 方便后续的检查和修改 . 一般编译器都有自己生成注释的快捷键,我只用过WebStorm和VScode,快捷键都是 ctrl + / 如果不喜欢也可以自定义快捷键
然后在HTML中会有一些特殊符号或者不方便使用,对于这些符号就需要用特殊符号来代替
最常用的就是空格符了
空格:  
表格相关标签
表格三要素 table、tr、td 缺一不可
表格标签
<table></table> 用来定义表格的标签
<tr></tr> 用来定义表格中的行
<td></td> 用来定义表格中的单元格
表头单元格
一般表头位于表格的第一行,使用表头单元格标签可以用来突出表头内容的重要性
<th></th> 表头单元格里面的文本会加粗居中显示
表格的相关属性
这些属性要写到table标签里面
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,right,center | 单元格整体的对齐方式 |
| border | 0或""(空) | 规定单元格是否有边框,默认是没有的 |
| cellpadding | 像素值 | 创建单元格内容与其边框之间的空白 |
| cellspacing | 像素值 | 设置单元格之间的距离 |
| width | 像素值或百分比 | 设置表格的宽度 |
| height | 像素值或百分比 | 设置表格的高度 |
表格的结构标签
有的时候表格很大,为了更好的表示语义,就可以使用表格结构标签来解决这个问题
<thead></thead> #表格的头部区域 里面必须有<tr>标签 一般位于第一行
<tbody></tbody> #表格的主体区域
合并单元格
合并单元格的方式
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
目标单元格用来写合并代码
- 跨行合并:最上测为目标单元格
- 跨列合并:最左侧为目标单元格
合并单元格的三个步骤:
- 先确定是跨行合并还是跨列合并
- 找到目标单元格,写合并代码
- 删除多余的单元格
列表标签
列表有三大类:== 无序列表,有序列表和自定义列表==
无序列表(重要)
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</body>
#<ul>标签表示的就是无序列表 里面只能放<li>标签
#列表项用<li>标签来定义 <li>标签里面可以放任意的标签
效果如下:
有序列表
<body>
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol> #<ol>标签表示的就是有序列表 只有这一点不同
</body>
效果:
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
<body>
<dl>
<dt>表格</dt>
<dd>无序列表</dd>
<dd>有序列表</dd>
<dd>自定义列表</dd>
</dl>
#<dl>标签用于定义自定义列表
#<dt>自定义列表项目
#<dd>用于解释自定义列表项目
</body>
效果:
虽然解释自定义列表项目的内容不和自定义列表项目对齐,这是正常现象,可以通过CSS进行修改
表单标签
一张完整的表单通常是由表单域,表单控件(表单元素)和提示信息构成
表单域
表单域是表示表单元素的区域
<from action="url地址" method="提交方式" name="表单域名称">
<!-- 表单元素 -->
</from>
# <from>标签用于定义表单域
# <from>会把表单元素信息提交给服务器
常用属性:
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接受并处理表单数据的服务器的url的地址 |
| method | get或post | 用于设置表单的提交方式,值为get或post |
| name | 名称 | 指定表单的名称,用于区分同一区域内多个表单域 |
表单控件(表单元素)
表单元素是允许用户在表单中输入内容
接下来重点介绍以下表单元素:
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
<input type="属性值">
#type是必须要写的属性
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览"按钮,供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段,该字段的字符会被掩盖 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮,重置按钮会清楚表单内的所有数据 |
| submit | 定义提交按钮,提交按钮会将表单元素提交给服务器 |
| text | 定于单行的输入字段,用户可输入文本,默认宽度为20字符 |
| 限制用户必须输入Email类型 | |
| url | 限制用户必须输入url类型 |
| date | 限制用户必须输入日期类型 |
| time | 限制用户必须输入时间类型 |
| month | 限制用户必须输入月份类型 |
| week | 限制用户必须输入周类型 |
| number | 限制用户必须输入数字类型 |
| tel | 手机号码 |
| searc | 搜索框 |
| color | 生成一个颜色选择表单 |
label标签
<label for="值">文本</label>
<input type="" name="" id="值">
#<label>标签为input元素定义标注
#<label>标签用于绑定一个表单元素,
#当点击<lable>标签里面的文本时,
#浏览器会自动将光标转到或者选择对应的表单元素上,
#增加用户的体验
#注意:for里面的值和id里面的值必须是一样的
select标签
select标签就是下拉列表标签,应用场景:如填写家庭地址之类的,会提供省份和城市供用户选择,这时候就可以使用select标签来实现这个功能
<body>
选择:
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
</body>
#<select>标签里面至少有一对<option>标签
#<option selected="selected">文本</option> ->
#<option>标签里面可以加selected="selected"这一句话,那么此时默认选项就是当前选项
效果:
textarea文本域标签
在表单元素中,textarea标签用于定义多行文本输入的控件,使用textarea标签可以输入更多的文字
<from>
<textarea rows="5" cols="20">
默认文字
</textarea>
</from>
# rows="" 这是显示的行数
# cols=""这是每行有多少字
# 默认文字可加可不加
效果:
表单属性
在HTML5中还新增了一些表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性的内容不能为空,一定要填 |
| placeholder | 提示文本 | 表单的提示信息,存在默认值不显示 |
| autofocus | autofocus | 页面加载完成后自动聚焦到指定表单 |
| autocomplete | off/on | 在用户进行输入时,会提示之前输入过的值,需要放在表单内,要有name属性且成功提交才可以 |
| multiple | multiple | 同时多选文件提交 |
语义标签
之前布局页面使用div来做的,但是对搜索引擎来说,div是没有语义的
因此HTML5里面就新增了一些语义标签
<header></header> #头部标签
<nav></nav> #导航标签
<article></article> #内容标签
<section></section> #定义文档某个区域
<aside></aside> #侧边栏标签
<footer></footer> #底部标签
#这些标签要配合CSS来使用
#在IE9中,需要将这些元素转化为块级元素
多媒体标签
在HTML5中新增了多媒体标签video和audio标签,这两个标签可以帮助我们很方便的在网页中嵌入音频和视频
视频标签
<video></video> # 视频标签
语法格式:
<video src="文件地址" 属性=""></video>
video里的常用属性:
| 属性 | 值 | 描述 |
|---|---|---|
| controls | controls | 向用户显示播放控件 |
| autoplay | autoplay | 视频就绪自动播放 |
| width | 像素 | 设置播放器宽度 |
| height | 像素 | 设置播放器高度 |
| loop | loop | 设置播是否继续播放视频,循环播放 |
| preload | auto(预先加载视频) none(不预先加载视频) | 是否加载视频 |
| src | url | 视频url地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
video标签只支持3种视频样式,分别是MP4,WebM和Ogg 尽量使用MP4的视频样式
音频标签
<video src="文件地址" 属性=""></video>
音频标签同样支持3中格式的音频,分别是MP3,Wav和Ogg格式的音频,尽量使用MP3格式的音频
常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频就绪后马上播放 |
| controls | controls | 向用户显示播放控件,如播放按钮 |
| loop | loop | 设置音频循环播放 |
| src | url | 音频url地址 |
总结:
前端的知识点很多,有些地方最好还是自己尝试一下比较好,可以方便理解和记忆.
可能对于HTML的知识点整理的不是很全,如果后面想到了也会添加!
