- A+
〇、基础概念
浏览器和服务器
了解什么是浏览器和服务器。
访问原理
了解浏览器访问网页的原理和请求数据的过程。
什么是URL
了解什么是URL，HTTP协议等内容。
一、认识HTML
1.概念
HTML是超文本标记语言。
2.作用
描述文本语义的，告诉浏览器哪些是标题，哪些是段落，用于描述文本语义的文本，称为标签，并且在浏览器中不会显示，我们称这些文本为“超文本”。
3.注意事项
利用标签描述一段文本之后，在浏览器中显示会被放大或加粗，但是要记住它是添加语义的，而不是修改样式的。
二、HTML发展史
1993年IETF发布1.0——1995年W3C发布2.0——2000年W3C发布XHTML——2004年TWG发布HTML5——W3C放弃XHTML。
1.IETF简介
2.W3C简介
三、网页格式
1.HTML基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>王清</title> </head> <body> </body> </html> HTML基本结构所有的标签都是成对出现的，分为开始标签和结束标签。其他所有的标签都写在html标签中。
1.Head标签
作用
给网站添加一些配置信息。
比如网站的标题，图片，关键字，SFO相关的，外挂一些css/js文件。
注意点：写在head内的内容都不会显示给用户查看。
2.Title标签
作用
专门用于指定网站的标题，作为用户保存网页的默认标题。
必须写在head标签内。
3.Body标签
作用
定义html文档中给用户查看的内容。
注意点：一对HTML标签中只能一对body标签。
2.字符集
<meta charset="UTF-8"> ‘写在head里面 1.meta标签
，指定当前网页的字符集，解决网页没有指定字符集出现的乱码问题。
字符集，就是字符的集合，就像活字印刷术。
2.GBK（gbk2312）与UTF-8区别
GBK（gbk2312）存储的字符比较少，存储了汉字和常用的外文。体积较小。
UTF-8存储了所有的字符。体积较大。
注意点：仅仅指定字符集不一定解决乱码，还要文件的保存编码与指定字符一致。
3.标签分类
单标签
只有开始标签，没有结束标签，如meta标签。
双标签
由<>和</>组成。
并列关系（兄弟/平级）
嵌套关系（父子/上下)
4.DTD文档声明
概念
DTD声明在网页第一行，告诉浏览器我们用的哪一个版本的HTML，能够正确的渲染/解析网页。
每一个版本的声明都不一样。
规范
<!DOCTYPE html> “ 不区分大小写 DTD声明不是一个标签。不写也能正常运行。按规定写。
5.开发工具
记事本：提示功能差；
editpus/nodepad：提示功能差。
Dreamwaver：偏向设计。
Sublime：轻量级，自带功能不全，插件丰富。
Webstorm：重量级，自带功能全面。
四、基础标签
注释
W3C网址：www.w3school.com.cn
● 格式
<!--内容--> H标签
● 作用
给文本添加标题语义。
● 格式
<h1> 内容</h1> ● 注意
——H标签包裹的内容会独占一行；
——H标签最多6个，H1最大，H6最小。
——H标签要慎用，H1标签一个界面只能一个，和SFO有关。
P标签
● 作用
段落标记
● 格式
<p>内容</p> ● 注意
在浏览器中会独占一行。
Hr标签-废弃
● 作用
在浏览器中显示一条分割线
● 格式
<Hr> ● 注意
在浏览中独占一行。
br标签-废弃
● 作用
换行
● 格式
<br> ● 注意
——可以连续使用，一个br标签换一行。
——br标签的语义是补灵气一个段落换行，企业开发使用很少。
img标签
● 作用
告诉浏览器显示一张图片
● 格式
<img src=""> 'image,source缩写' src是图片需要显示的图片名称。
● 注意
——img标签不会独占一行。
——未指定宽高或按照默认的显示。。
——手动指定了宽高，可能会导致图片变形；只指定宽高一个值，会自动计算另一个值，保持等比。
● 属性
——width：宽度
——height：高度
——title：当鼠标悬停到图片，显示什么内容。
——alt：应为alternate的缩写，显示的图片找不到时，显示什么内容。
● 图片路径
src赋值有两种方式。
相对路径
概念
从文件所在的文件夹开始查看。
方法
——同级
图片和html文件存储在同一个文件夹
格式
src = "图片名称" ‘带后缀 ——下级
存储图片的文件夹和html文件在同一个文件夹。
格式
src = "图片文件夹/图片名称" ——上级
图片和htnl文件夹在同一个文件夹。
格式
src = "../图片名称" '../代表从当前位置找到上一级 绝对路径
每次都从指定的盘符查找。
格式
src="图片路径/图片名称" 注意
路径不要出现中文，不能夸盘符，开发中基本不用。
a标签
● 作用
用于控制页面与页面之间跳转。
● 格式
<a href="跳转的目标界面">需要展示给用户的内容</a> ● 注意
——a标签可以让文字、图片点击。
——a标签必须有href属性，否则抓瞎了。
——Href属性是完整的URL地址或路径。
——可以跳转到网络地址，也可以跳转到本地html文件。
● 属性
——Target：控制如何跳转，有两个属性。
_self：用于在当前选项卡中跳转，不新建界面跳转。
_blank：用于在新的选项卡跳转。
——title：鼠标悬停提示文本。
base标签
● 作用
专门用来统一指定当前网页中所有的超链接（a标签）如何打开。
● 格式
<base target=""> ● 注意
——必须写在head标签内。
——如果base和a都指定了，浏览器会按照a指定的执行。
假链接
● 作用
点击之后不会跳转的链接，存在的意义，就是其他界面还未写出时，不知道跳转何处，用来代替。
● 格式
分为两种
<a href="#"></a> <a href="javascript"></a> ● 区别
—— #：会自动回到网页的顶部。
—— javascript：不会自动回到网页的顶部。
锚点
● 作用
就像目录，点击跳转到页面的指定位置。
要想通过a标签跳转的页面指定位置，必须给a标签添加一个id属性，id属性是跳转到指定地方的id。
● 格式
<a href="#h2id"> xx</a> 'h2id为id' <br> <h2 id="h2id">内容</h2> ● 注意
——通过a标签跳转到当面页面指定位置，没有过度动画，一下子跳转到。
——a标签除了 可以跳转到当前指定位置，还可以跳转到其他界面的指定位置。就是在href属性“#”前面加上网页地址。
列表标签
● 列表标签
是给一堆数据添加列表语义，是一个整体。
● 列表分类
有序列表（ordered list），有前后之分，用的最少。
无序列表（unordered list），用的最多。
定义列表（defintion list），其次。
● 无序列表
作用
是给一堆数据添加列表语义，并且无先后之分。
格式
<ul> <li>需要显示的条目内容</li> <li>需要显示的条目内容</li> </ul> ul：unordered list的缩写。
li：list item的缩写。
其他标签添加在li标签内，也可以在嵌套ul标签，表示多级列表形式。
应用场景
——新闻列表
——商品列表
——导航条
● 定义列表
格式
<dl> <dt>北京</dt> <dd>中国的首都</dd> <dt></dt> <dd></dd> </dl> dt：definition title的缩写，用来定义列表中的标题。
dd：definition description的缩写，用来定义列表对应的描述。
应用场景
——网站尾部的相关信息。
——图文混排。
注意
——成对出现，组合标签。
——一个dt可以没有对应的dd，也可以对应多个dd，推荐对应一个。
——在dt和dd里添加其他标签。
表格标签
是一个时代的代表，以前经常用！
● 作用
给一堆信息添加表格语义，当数据量非常大的时候，是最为清晰的展现形式。
● 格式
<table> <tr> <td></td> </tr> </table> table：代表整个表格。
tr：代表整个表格中的一行数据。
td：代表表格中一行中的一个单元格。
● 注意
——表格标签有一个边框属性，决定了边框的宽度，默认是0，看不到；
——是一个组合标签。
● 属性
以下内容作为了解，开发中用CSS修改样式。
——宽度和高度：width/height
给table标签和td标签使用。
默认是按照内容的尺寸来调整的，也可以通过给table标签设置width/height属性手动指定。
如果给td标签设置宽高，会修改当前单元格的宽高，不会影响整个表格的宽高。
——水平对齐：align
水平对齐给table标签、tr标签、td标签都可以使用。
给table设置align属性，控制表格在水平方向的对齐方式。
给tr标签设置align属性，控制当前行所有单元格的对齐方式。
给td标签设置align属性，控制当前单元格内容中的对齐方式。
——垂直对齐：valign
垂直对齐只能给tr和td使用。
——外边距：cellspacing
只能给table标签使用
外边距就是单元格和单元格之间的距离。
默认情况下外边距是：2px。
——内边距：cellpadding
只能给table标签使用
单元格的边框和文字之间的间隙。
——细线表格
通过指定外边距为0是不靠谱的，是2条线合并为一条线。
设置方式：给table设置bgcolor属性颜色，给tr标签设置bgcolor属性颜色，给table设置外边距等于1px。
● 其他标签
——表格标题
caption标签 ，必须放到table标签，自动居中。
——列标题
th标签。表示为列标题，自动加粗。
——页尾信息
tfoot标签。
● 表格结构
表格存储的数据分类
表格的标题
表格的表头
表格的主题
表格的页尾
表格完整结构
<table> <caption>表格的标题</caption> '表格的标题 <thead> <tr> <th>每一行的标题</th> '表格的表头 </tr> </thead> <tbody> '表格的数据 <tr> <td>数据</td> </tr> </tbody> <tfoot> '表格的页尾 <tr> <td>数据</td> </tr> </tfoot> </table> 注意
——如果没有编写tbody，浏览器会自动添加。
——thead与tfoot，高度不会随着表格高度变化，手动指定也不会变化。
● 单元格合并
水平方向上的单元格合并
方法：td添加colspan属性。向后合并——把某一个单元格当做多个单元格看待。需要注意的是，后面会多出一些单元格，需要手动删掉多出的单元格。
垂直方向上的单元格合并
方法：td添加rowspan属性。
表单标签
● 作用
收集用户信息
● 格式
<form> <表单元素> </form> 表单元素
在HTML中，标签/标记/元素都是指标签，有自己的默认功能。
表单_input标签
● type属性
属性值的不同，决定input各项功能和外观。
type属性值介绍
——明文输入属性：text
——暗文输入属性：password
<input type="text"> <input type="password"> ——默认值属性：value
<input type="text" value="默认"> ——单选框属性
默认情况下是不互斥的，要想互斥，必须设置一个name属性，name属性的值要相同，值随便写。
要想设置默认选择某一个，添加checked属性。
<input type="radio" name="X" >男 <input type="radio" name="X" >女 <input type="radio" name="X" checked='checked'>保密 ——多选框属性
要想设置默认选择某几个，添加checked属性。
<input type="checkbox">篮球 <input type="checkbox">足球 ——按钮属性
定义一个普通按钮
作用：配合js完成一些操作。onclick会有弹窗
<input type="button" value="我是按钮" Onclick="alert('弹出提示')" > 定义一个图片按钮
<input type="image" srce="图片" Onlick="alert('inj')" > 定义一个重置按钮
作用：清空表单中的数据，有默认的标题。通过value修改。
<input type="reset" value="显示内容" > 提交按钮
作用：将表单中的数据提交到远程服务器，条件，需要指定哪个服务器，哪些数据需要提交。
通过form标签的action属性告诉表单，提交的服务器。
通过input的name属性代表的提交的内容。
<input type="submit" value="显示内容" > <form action="服务器地址" > ——隐藏域：hidden
作用：悄悄咪咪的收集信息。
● HTML5新增类型
仅供了解，很多浏览器不支持。
邮箱——自动校验输入的是否为邮箱格式
<input text="email"> 域名——校验域名
<input text="url"> 电话号码——数字
<input text="number"> 时间——通过日历选择时间
<input text="date"> 颜色——通过取色版选择颜色
<input text="color"> 表单-Label标签
默认情况下，文字和输入框是没有关联关系的，如果想点击文字时让对应的输入框聚焦，需要进行绑定，使用Label标签。
● 格式
<form> <label for ="account">账号：</label><input type="text" id="account"><br> <label for ="account">密码：</label><input type="password" id="account"><br> </form> 将文字用label标签包裹起来；
给输入框添加一个ID属性；
将ID属性值赋给label进行绑定。
● 注意
不用id，将文字和输入框整个放到label也可以绑定，但有局限性，不建议使用。
<label >账号：<input type="text" ></label> 表单_dalist标签
给输入框绑定待选项。
很多浏览器不支持，仅供了解。
● 格式
<input type"text" list="cars"> <dalist id="cars"> <option>待选项内容1</option> <option>待选项内容2</option> </dalist> 给dlist添加一个id属性，将该属性值赋值给input的list属性。
表单_select标签
定义一个下拉列表。
● 格式
<select> <option>内容1</option> <option selected="selected">内容2</option> </select> 可以通过给option添加一个 selected属性更改默认内容。
分组显示格式
<select> <optgroup label="北京"> <option>区1</option> <option selected="selected">区2</option> </optgroup> <optgroup label="上海"> <option>区1</option> <option selected="selected">区2</option> </optgroup> </select> 表单_textarea标签
定义一个可以换行的文本框，多行输入文本框。
● 格式
<textarea></textarea> 默认，输入框可以无限换行，有默认的宽度和高度。
修改宽高参数，即使指定了也可以无限往下输入，也可以手动拉伸。
不想手动拉伸，通过css修改（reseze:none）。
<textarea cols="列数" rows="行数"></textarea> video标签
了解HTML5新增标签，学习浏览器用过的标签，不支持的了解即可，不建议重点掌握学习。
● 作用
播放视频
● 格式
<video src="" autoplay="autoplay" controls="controls" >.....</video> ● 属性
src：视频地址，必须的属性。
autoplay：是否需要自动播放。
controls：是否需要显示控制条。
poster：没有自动播放之前的占位图片等。
<video src="" controls="controls" poster="图片地址">.....</video> loop：做广告视频，视频播放完毕之后，是否需要循环播放。
preload：预加载视频。（不是自动播放使用）
muted：静音播放
width：视频宽度
height：视频高度
video第二种格式
<video> <source src="" type="video/webm"></source> <source src="" type="video/mp4"></source> <source src="" type="video/ogg"></source> </video> 存在的意义，解决浏览器适配不同视频格式的问题。
● 注意
当前通过video标签，想要浏览器都通过video播放，浏览器必须支持HTML5，不然无法播放；若想所有浏览器都支持，可通过js的media标签。
audio标签
● 作用
播放音频。
● 格式
和video一样。
● 注意
——使用方式基本和video一样。
——有三个属性不能用：height、width、poster。
详情和概要标签
● 作用
利用summary描述概要信息，用details描述详情，默认情况下，是折叠模式。
● 格式
<details> <summary>概要信息</summary> 详情信息 </details> marquee标签
● 作用
跑马灯效果。
● 格式
<marquee>内容</marquee> ● 属性
滚动方向：direction，上下左右方向控制
<marquee direction="方向控制right、left、up、down">内容</marquee> 滚动速度： scrollamount
<marquee scrollamount="数值">内容</marquee> 循环次数： loop，默认是-1，无限。
<marquee loop="数值">内容</marquee> 滚动类型：behavior，两个值，slide滚动到边界停止，alternate滚动到边界弹回。
<marquee behavior="alternate、slide">内容</marquee> ● 注意
——不是W3C推荐的，在其文旦各种查找不到，但各浏览器都支持。
——还可以设置图片滚动。
五、HTML中被废弃的标签
因为当前HTML标签只有一个作用就是添加语义，有部分标签是修改样式的，虽有被废弃了。
1.标签类型
换行
<br> 分割线
<hr> 大小
<font> 文本加粗：bold的缩写。
<b> 文本添加下划线：underlined的缩写。
<u> 文本倾斜：italic的缩写。
<i> 文本删除线：strikethrough的缩写。
<s> 2.注意
——不到万不得已不能使用。
——如果要使用，一般作为css的钩子来使用。
3.替代标签
strong == b：定义重要性强调的文字。（strong）
ins == u：定义插入的文字。（inserted）
em == i：定义强调的文字。（emphasized）
del == s：定义删除的文字。（deleted）
六、字符实体
在HTML中对空格/tab/回车不敏感，会把空格/tab/回车当一个空格处理。
实体区分大小写哦！
1.空格
一个代表一个空格，记得后面还有分号。
2.大于小于
< ‘less than > 'greater than 3.版权符号
© 4.其他
查找吧，网址：https://www.w3school.com.cn/html/html_entities.asp。
------结束-----
