系统学习前端之HTML基础
近期打算对所学前端做一个总结，以便后面的深入学习。那就从最基础的开始吧。夯实基础。
此篇文章较长，尽量的详细的记录了
HTML涉及的基础内容适合初学者，大神请略过。同时敬请指教。
学完此篇文章的中的内容可以做个练习来巩固一下掌握的内容
文章目录
- 什么是
html- 字符集问题
- 标签分类
- DTD 文档声明
HTML、XHTML和HTML5的区别HTML标签- 路径问题
- 列表标签
- 表格标签
- 表单标签
html中废弃的标签- 字符实体
什么是html
- html是HyperText Markup Language的缩写，超文本标记语言
html作用
- 专门用来给纯文本中的内容添加语义的。也就是说可以利用
html来告诉浏览器哪些是标题，哪些是段落等等。 - 用来描述其他文本语义的语言我们称之为“标签”，并且这些用来描述其他文本语义的标签将来不会再浏览器中显示出来。所以称这些文本为“超文本”，而这些文本又叫做标签，所以
HTML被称之为“超文本标记语言” - 注意事项：浏览器中显示出来的内容可能会改变原来的样式，但是一定记住，
HTML的作用只有一个，它是专门用来给文本添加语义的，而不是用来修改文本样式的。
- 例如：H1标签的作用是什么？
- H1标签的作用是用来告诉浏览器哪些文字是标题，也就是说H1标签是专门用于给指定的文字添加标题语义的。
HTML发展史
名词解释：
IETF简介
IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是”互联网工程任务组”IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等
W3C简介
W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟,W3C是全球互联网最具权威的技术标准化组织.W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-LeeW3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。
HTML基本结构
<html>
<head>
<title>title>
head>
<body>
body>
html>HTML基本机构中的标签都是成对出现的， 不带“/”的策划能够为开始标签，带“/”的标签称之为结束标签
下面就来分布介绍一下HTML基本结构中各标签的含义及作用
head标签
- 作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器这是一个
HTML文档 - 注意点：其他所有的标签都必须写在
html标签中，也就是写在HTML开始标签和结束标签中间。
- 作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器这是一个
head标签
- 作用：用于给网站添加一些配置信息
- 例如：
- 指定网页的标题及小图标
- 添加网站的
SEO相关的信息（指定网站的关键字/指定网站的描述信息） - 外挂一些外部的
css/js文件 - 添加一些浏览器适配相关的内容
- 注意点：一般情况下，写在
head标签内部的内容都不会给用户查看，是用来告诉浏览器网站的配置信息的。
title标签
- 作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
- 注意点：
title标签必须写在head标签中
body标签
- 作用：专门用于指定
HTML文档中需要显示给用户查看的内容（文字/图片/音频/视频） - 注意点：
- 一定要将需要显示的内容写在
body标签中 - 一对
html标签中（一个html开始标签和一个html结束标签）只能有一对body标签
- 作用：专门用于指定
字符集问题
- 什么是字符集？
- 字符集就是字符的集合，也就是很多对字符堆在一起。
- GBK（GB2312）和UTF-8的区别？
- GBK（GB2312）里面存储的字符比较少，仅仅存储了汉字和一些常用的外文
- 体积比较小
- UTF-8里面存储了世界上所有的文字
- 体积比较大
- 在企业开发中应该选择哪个字符集呢？
- 如果网站中仅仅包含了中文，那么推荐使用GB2312，因为它的体积更小，访问速度更快。
- 如果网站中除了包含中文外，还含有一些其它国家的语言，那么推荐使用UTF-8。
- 懒人推荐：不管三七二十一，都使用UTF-8。
- 注意点：
- 在
HTML文件中指定的字符集必须和保存这个文件的字符集一致，否则还是会出现乱码。
- 在
head标签内部的标签
meta标签
- 作用：用来指定文档的字符集
HTML标签分类
根据标签个数来分
- 单标签
- 只有开始标签没有结束标签，也就是只有一个<>组成的
<meta charset="UTF-8">- 双标签
- 有开始标签和结束标签，也就是由<>和
根据标签所处的位置来分
- 并列关系（兄弟/平级）
<html>
<head>
head>
<body>
body>
html>- 嵌套关系（父子/上下级）
<html>
<head>
<meta />
<title>
head>
html>DTD文档声明
- 什么是
DTD文档声明？
- 由于
HTML有很多个版本的规范，每个版本的规范又有一定的差异，所以为了让浏览器能够正确的编译/解析/渲染网页，需要在HTML文档的第一行告诉浏览器，当前的文档用的是哪一个版本的规范。
- 由于
- 企业开发中一般都使用
HTML5的规范
html5是向下兼容的，可以兼容低版本的规范，同时还可以兼容XHTML的规范 - 注意：
- 任何一个标准的
html网页，第一行一定是DTD文档声明。 DTD不区分大小写DTD不是一个标签- 虽然
DTD文档的作用是告诉浏览器网页是由哪一个版本低的标准来编写的，以便于浏览器解析和渲染，但是浏览器并不是完全按照这个DTD文档声明，浏览器有一套属于自己的机制，也就是说不写DTD文档，网页也能正常运行，但是由于w3c规定了第一行必须写DTD文档声明，所以为了遵守规定，无论怎样都要在第一行写上DTD文档声明。
- 任何一个标准的
DTD文档在html5之前还有两大规范，每一个大的规范又分为三个小标准
| 规范 | 标准 |
|---|---|
| HTML | strict（严格的） |
| HTML | Transitional（普通的） |
| HTML | Frameset（带有框架的） |
| XHTML | strict（严格的） |
| XHTML | Transitional（普通的） |
| XHTML | frameset（带有框架的） |
主要参考W3C school文档教程
W3C文档声明教程
HTML、XHTML和HTML5的区别
HTML代码非常宽松，容错性强XHTML更为严格，它要求标签必须小写，必须严格闭合，标签中的属性必须使用引号等等。html5是html的下一个版本，除了非常宽松容错性强以外，还增加了许多新的特性。
.htm和.html的区别？
- DOS操作系统（win95或win98）只支持长度为3后缀名，所以是
htm - 在
windows后缀长度可以大于3位，所以windows下无所谓htm与html,html是为长文件的格式命名的。 - 所以
htm是为了兼容过去的DOS命令而存在的。
HTML标签
H系列标签（header1~heade6）
- 作用：用于给文本添加标题语义
- 格式：
...
- 注意点：H系列标签一共有6个，超过6个则无效。被
H系列的标签包裹的内容会独占一行
- 在企业开发中，一定要慎用
H系列标签，特别是H1标签，在企业开发中，一般一个页面只能出现一次H1标签（与SEO有关）
- 在企业开发中，一定要慎用
p标签
- 作用：告诉浏览器哪些是段落
- 格式：
...
- 注意点：在浏览器中单独占一行。
hr标签
- 作用：在浏览器中显示一条分割线
- 格式：
- 注意点：（可以参考W3C标准）
- 在浏览器中单独占一行
- 可以写
XHTML中的规范，HTML中的规范，在HTML5中兼容这两种写法 - 在以后的前端开发中根据高级开发工具的提示来写。
HTML中的注释
- 适当的注释能够增加程序的可读性
- 格式：
<--注释的内容--> - 注意：注释中的内容不再浏览器中显示
img标签
- 作用：告诉浏览器需要显示一张图片
- 格式：
src是source的缩写，告诉img标签需要显示的图片名称。- 属性：
width:指定图片宽度height：指定图片高度title：当鼠标悬停在图片上时，显示title描述的内容alt:当找不到图片时，显示的内容
- 注意：
- 不独占一行
- 指定高度或宽度中的一个，浏览器会自动计算另一个的值。
br标签
- 作用：换行
- 格式：
- 注意：
- 使用几个
br标签就会换几行 - 如果一段内容为描述完可以用
br,若一段描述完了需要换行应使用p标签。 - 在企业开发中很少使用
- 使用几个
路径问题
- 相对路径：每次都在
.html文件所在的文件夹开始查找
- 同级：
.html文件与图片存在一个文件夹中 - 下级：
.html文件与存储图片的文件夹在同一个文件夹 - 上级：存储图片的位置和存储代码的文件夹在同一个文件夹中
- 同级：
- 绝对路径：每次都从指定的盘符开始查找（了解，可移植性不好，企业开发中一般不使用）
- 注意：
- 路径中不能出现中文，否则可能出现未知问题
- 如果通过相对路径来指定，那么不能跨盘符
- 需要编写路径的地方统一使用反斜线”/”,以便将来其它操作系统可以识别。
a标签
- 作用：控制页面与页面之间的跳转
- 格式：
展现给用户查看的内容 - 属性：
target:专门用于控制如何跳转_self（默认）：当前选项卡的跳转，不新建界面_blank：新的选项卡跳转，新建一个界面title:鼠标悬停时显示的提示文本，与a标签和img标签中的title作用一样。
- 注意：
- 可以让文字或图片点击
- 一个
a标签必须有一个href属性，用来指定跳转到的地方 - 如果通过
a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// - 除了可以指定一个网络地址以外，还可以指定一个本地地址
base标签
- 作用：专门用来统一的指定当前网页中所有超链接（
a标签）需要如何打开 - 注意：
base必须写在head标签的开始标签和结束标签之间- 如果即在
base标签中制定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
假链接：点击之后不会跳转的连接
- 意义：企业开发前期，其它界面没有写出来，未知跳转到什么地方，用假链接代替，后期再替换成真链接。
- 格式：
#JavaScript:- 两者区别：
#的假链接会自动回到网页的顶部，而JavaScript：不会回到页面的顶部
锚点链接
- 作用：跳转到指定的位置
- 格式：
<a href="#center">跳转到中部a>
<h2 id="center">我是中部h2>- 注意：
- 通过
a标签跳转是没有过度效果的，直接一下就跳转到目标位置 a标签既可以跳转到当前页面的指定位置，还可以跳转到其它界面的指定位置
- 通过
列表标签
- 作用：给一堆数据添加列表语义，告诉浏览器这一对数据是一个整体
- 分类：无序列表（最常用）、有序列表（最少）和定义列表（其次）
无序列表（unordered list）
- 作用：给一堆数据添加列表语义，并且这一堆数据没有先后之分
- 格式：
<ul>
<li>需要显示的条目内内容li>
ul>- 应用场景：
- 新闻列表
- 商品列表
- 导航条
- 注意：
ul标签是给一堆数据添加语义的，而不是给他们添加小圆点的ul和li标签是一个整体，一般情况下都是结合使用的，不会单独出现ul和li是一个组合，所以以后在ul标签中只会看到li标签- 通过标签属性也能修改样式，但是在企业开发中一般不要这么做！！
ul标签中最好只放li标签，但是在li标签中可以继续放其它的标签内容
有序列表（ordered list）
- 作用：给一堆数据添加列表语义，并且一堆数据中所有数据都有先后之分
- 格式：
<ol>
<li>li>
ol>- 注意：其它用法和
ul都差不多，也就是应用场景/注意点都和ul差不多
定义列表（definition list）
- 作用：
- 给一堆数据添加列表语义
- 先通过
dt标签定义列表中的所有标题，然后通过dd标签给每个标题添加描述信息
- 格式：
<dl>
<dt>dt>
<dd>dd>
<dt>dt>
<dd>dd>
dl>- 名词解释：
dt：definition title的缩写，定义列表中的标题dd:definition description的缩写，定义标题对应的描述的。
- 应用场景
- 做网站尾部的一些相关信息
- 做图文混排
- 注意
- 和
ul/ol一样，dl和dt/dd是一个整体，所以一般情况下都是一起出现的 dl标签中一般只放dt和dd标签- 推荐使用一个
dt标签对应一个dd - 可以在
dt和dd标签中添加其他标签
- 和
表格标签
- 什么是表格？
- 一种数据的展现形式，当数据量比较大时，表格标签被认为是最为清晰的一种表现形式
- 一个时代的代表
- 作用
- 用来给一堆数据添加表格语义
- 格式
<table>
<tr>
<td>td>
tr>
table>tr标签代表整个表格中的一行数据td标签代表表格中一行中的一个单元格- 属性
- 高度(
height)和宽度(width) - 可以给
table标签和td标签使用 - 默认是根据内容来调整，也可以用
width/height手动指定宽高 - 如果给
td设置width/height属性，会修改当前单元格的宽高，但不会影响整个表格的宽高 - 水平对齐(
align)和垂直对齐(valign) - 水平对齐：
table,tr,td都可用
- 给
table设置align属性，控制表格在水平方向上的对齐方式 - 给
tr设置align属性，控制当前行中所有单元格内容的水平方向上的对齐方式 - 给
td设置align属性，控制当前单元格中内容在水平方向上的对齐方式 - 注意：如果
table/tr/td都设置了align属性，那单元格会按照td中设置的来对齐
- 给
- 垂直对齐：只能给
tr,td使用
- 给
tr标签设置valign属性，可以控制当前行中所有单元格中的内容在垂直方向上的对齐方式 - 给
td标签设置valign属性，控制当前单元格中的内容在垂直方向上的对齐方式 - 注意：如果
tr/td都设置了valign属性，那么单元格会按照td中的设置来对齐
- 给
- 外边距(
cellspacing)和内边距(cellpadding)：只能给table标签设置 - 单元格与单元格之间的距离，默认是2px
- 单元格与文字之间的距离，默认是1px
- 高度(
- 其它属性
bgcolor
- 其它标签
caption:表格标题th:标题单元格（自动加粗+居中）
- 表格的完整的结构（企业开发中一般不这么写，作为了解）
<table>
<caption>表格的标题caption>
<thead>
<tr>
<th>每一列的标题th>
tr>
thead>
<tbody>
<tr>
<td>数据td>
tr>
tbody>
<tfoot>
<tr>
<td>数据td>
tr>
tfoot>
table>caption:指定表格标题thead:指定表格的表头信息tbody:指定表格的主体信息tfoot:指定表格的附加信息- 如果没有编写,系统会自动添加
单元格合并
- 垂直方向上(
rowspan)的单元格合并 - 水平方向上(
colspan)的单元格合并 - 注意：
- 表格标签有一个默认属性，这个属性决定了边框的宽度，默认情况下这个属性值是0，所以看不到边框
table标签和tr/td标签是一个组合标签，一般都是一起出现- 表格标签属性仅做了解，在企业开发中样式统一由
CSS来控制
表单标签
- 什么是表单？
- 专门用来收集信息
- 什么是表单元素？
- 表单元素是一些比较特殊的标签，在浏览器中所有的表单元素都有特殊的外观和默认的功能
- 表单的格式
<form>
<表单元素>
form>常见的表单元素
input标签
- 有一个
type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观
- 有一个
<form>
账号：<input type="text"><br>
密码：<input type="password"><br>
账号：<input type="text" value="123"><br>
密码：<input type="password" value="123">
<input type="radio" name="gender" checked="checked">
<input type="checkedbox" checked="checked">
<input type="button" value="按钮">
<input type="img" src="">
<input type="reset">
<input type="submit">
<input type="hidden">
form>label标签
- 作用：让文字和输入框绑定，使得点击文字时，对应的输入框聚焦
<label for="account">账号：label><input type="text" id="account" /><br>
<label for="pwd">密码：label><input type="password" id="pwd" />select标签
- 作用：用于定义下拉列表
- 格式：
<select>
<option>列表数据option>
select>- 下拉列表不能输入内容，可以直接选择内容
- 可以给
option标签添加selected属性来指定列表的默认值 - 可以给
option标签包裹一层optgroup标签来个下拉列表中的数据进行分类
textarea标签
- 作用：定义一个多行输入框
- 默认情况下输入框可以无限换行
- 默认情况下输入框有自己的宽度和高度
- 可以通过
cols和rows来指定输入框的高度和宽度，但是虽然指定了列数和行数，但还可以无限往下输入 - 默认情况下是可以手动拉伸的
video标签
- 作用：播放视频
- 格式：
<video src="">video>- 属性
autoplay:告诉video标签是否需要自动播放controls:告诉video标签是否显示控制条poster:告诉video标签未播放之前显示的占位图片loop:告诉video标签时候循环播放，一般用于广告视频preload:预加载视频，但是需要注意preload属性和autoplay相冲，如果设置了autoplay属性，那么preload就会失效muted:静音widthheight
- 第二种格式
<video>
<source src="" type="">source>
<source src="" type="">source>
video>- 由于视频数据非常重要，五大浏览商都不愿支持别人的视频格式，所以导致了没有一种视频格式所有的浏览器都支持，所以
W3C推出了第二种video格式，通过source标签把所有的视频格式都指定给video标签，这样就解决了浏览器不兼容的问题 - 虽然第二种格式可以解决所有浏览器都支持的视频格式，但是前提条件是浏览器必须支持
HTML5标签，否则同样不会播放，以后可以用JS的一个html5media框架来实现
audio标签
- 作用：播放音频
- 注意：
audio标签的使用和video基本一致，除了height/width/poster属性外，audio能够使用video中的其它所有属性
details和summary标签
- 作用：显示内容简介与详情
- 格式：
<details>
<summary>概要summary>
详情
details>marquee标签
- 作用：跑马灯
- 格式
<marquee>内容marquee>- 属性
direction:设置滚动方向：left/right/up/downscrollamount:控制速度loop:控制滚动次数，默认是-1，也就是无限滚动behavior:设置滚动的类型，slide:滚动到边界就停止alternate:滚动到边界就弹回
- 注意：
marquee标签不是W3C推荐的标签，在W3C官方文档中也无法查到，但是各大浏览器兼容的很好
html中废弃的标签
- 当前
html中的标签就只有一个作用，就是添加语义，而早期的一些html标签中不是用来添加语义的，所以这部分标签就被淘汰了
- strong == b
- ins == u
- em == i
- del == s
- 注意：以后在企业开发中，不到万不得已不要使用这些被淘汰的标签，如果一定要用，一般情况下都是用来作为
CSS钩子来使用
字符实体
- 在
html中对空格/回车/tab不敏感，会把多个空格/回车/tab当做一个来处理 - 字符实体是可以在浏览器中显示一些特殊的本身不能再浏览器中显示的字符
- 例如：&nbs p;是代表空格
- 可以参考W3C字符实体
学完这么多了，做个练习来练练手吧百度前端学院小薇课堂任务一
此文尽量的涵盖了HTML基础内容，后续会继续修改添加。