HTML5（超文本标记语言）
目录
一、web概念概述
1. C/S: Client/Server 客户端/服务器端
2. B/S: Browser/Server 浏览器/服务器端
（1） 静态资源：
（2）动态资源：
二、HTML
1. 概念：是最基础的网页开发语言
2. 快速入门：
3. 标签学习：
（1）文件标签：构成html最基本的标签
（2）语义化标签（html5新的语意结构元素）
（3）分割线标签
（4）文本标签：和文本有关的标签
(5) 超链接标签
(6) 表格标签
（7）图片标签
（8）音乐标签：audio
（9）视频标签：video
（10）列表标签
（11）表单标签
（12）容器（盒子）标签
4. 属性
5. 元素（标签）属性
https://www.w3school.com.cn/ w3school在线教程学习网站
https://www.runoob.com/ 菜鸟教程学习网站
一、web概念概述
* JavaWeb：
* 使用Java语言开发基于互联网的项目
* 软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷...
* 优点：
（1） 用户体验好
* 缺点：
（2）开发、安装，部署，维护 麻烦
2. B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
（1）开发、安装，部署，维护 简单
* 缺点：
（2）如果应用过大，用户的体验可能会受到影响
（3）对硬件要求过高
* B/S架构详解
* 资源分类：
（1） 静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
静态资源：
* HTML：用于搭建基础网页，展示页面的内容
* CSS：用于美化页面，布局页面
* JavaScript：控制页面的元素，让页面有一些动态的效果
（2）动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
二、HTML
1. 概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言
2. 快速入门：
（1） html文档后缀名 .html 或者 .htm
（2）标签分为
a. 闭合标签：有开始标签和结束标签。如
b. 自闭和标签：开始标签和结束标签在一起。如
（3） 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确：
（4） 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
（5） html的标签不区分大小写，但是建议使用小写。
(6) 快捷操作emment语法：
生成标签，直接输入标签名按tab键即可
如果想要生成相同标签加上*号即可，如div*3
如果生成的div类名是有顺序的，可以用自增符号$
如果有兄弟关系的标签，用+就可以了div+p
如果生成带有类名或ID名字的，直接写.demo或#two 点tab键就可以了
（7）默认目录结构：
css：存放css文档-页面装修，文字颜色，字号，大小间距，排版
img：存放图片-icon，logo、banner，产品图
js：javascript-页面交互，轮播图，登陆注册验证，加载效果
index：默认的网站首页
（8）注释符：ctrl+？
（9）存储页面：ctrl+s
3. html5新特性
HTML5 现在已经不是 SGML 的子集
图像，位置，存储，多任务等功能的增加
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术 webworker、websocket、Geolocation
移除的元素：
纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame 、frameset 、noframes
支持 HTML5 新标签：
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
可以利用这一特性让这些浏览器支持 HTML5 新标签
浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如 html5shim4. 标签学习：
（1）文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* ：html5中定义该文档是html文档
使用ico图标：首先把facicon.ico这个图标放到根目录下，在html的head里引入代码
网页设计知识点
（2）语义化标签（html5新的语意结构元素）
定义文档或节的页眉
定义文档的主要内容
定义文档内的文章
定义文档中的节
定义用户可查看或隐藏的细节
（默认隐藏，点击查看）
定义details元素中的可见标题
定义自包含内容，比如图示、图标、照片、代码清单等（常用于图像与其描述组合）
figere标题
定义重要或强调内容
定义用户能够从弹出菜单调用的命令或菜单项目
定义已知范围内的标量测量
语义化的理解
用正确的标签做正确的事情！
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO 。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
（3）分割线标签
hr{
width：200px；height：300px
border：none（清除边框描边-默认自带）
background-color：yellow
}（4）文本标签：和文本有关的标签
空白折叠现象：
html中所有文字内容之间的空格，换行，缩进都会被折叠成一个空格显示
解决方法：空格符： （表示一个空格）
其他特殊字符：
< ：<
> : >
预格式化标签：浏览器完整保留源文件中所定义的格式，包括换行、空格、缩进以及其他特殊格式
预格式化标签
标题标签h
（从1级标题到6级标题）,默认字体进行加粗，字号从h1到h6逐级递减
~ 段落标签
一段落一标签字节标签
（用来包裹一小段或几个文字在同一行显示）多行文本标签
（开始和结束标签之间不留空格）
textarea{
outline：0；取消轮廓线
resize：none；防止拖拽文本域
}滚动文字
强调加粗标签（自带加粗效果）
内容* ：字体加粗
强调倾斜标签（自带倾斜效果）
内容* ：字体斜体
强制换行标签
一换行一标签(5)超链接标签 , 插入超链接
阻止超链接跳转
链接地址：
绝对地址：http协议（https://baidu.com）
相对地址：新建的同级html页面（homework.html）
#代表空链接
属性值：“_blank” 表示在在新标签页面打开链接
/“_parent”上一级窗口打开/“_self”同一窗口打开，默认值
/“_top”整个窗口打开/“_framename”框架或浮动框架名
设置鼠标悬停文本：指向链接时的提示信息
a{
text-decoration：none；超链接下划线隐藏
}(6)表格标签
标签定义表格
表格标题 （标题会居中显示在表格之上）
用于定义表格头部，用来放标题
table标签的属性：
cellspacing：表示单元格与单元格之间的距离
cellpadding：表示单元格
border：边框
border-collapse:collalse;边框重叠合并
合并单元格：
a.先确定跨行还是跨列合并（rowspan：跨行 colspan：跨列）
b.根据 先上后下 先左后右 的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量，比如
rowspan=“2”：跨行（上下合并-2行）
colspan=“3”：跨列（左右合并-3列）
c.删除多余的单元格
学生课程表
-第一行
星期一 第一列
星期二 第二列
星期三 ...
星期四
星期五
星期六
星期日
第二行
语文
数学
英语
物理
化学
生物
历史
第三行
语文 合并需删除
数学
英语
物理
化学
生物
历史
...
编号
姓名
成绩
小龙女
100
2
杨过
（7）图片标签
![]()
,插入图片
图片的链接地址：
绝对地址：盘符 ：src = E:"\图片\动漫\2.pang"
（盘符：C、D、E盘）-利用盘符（原文件目录位置）方能打开 -不常用
http协议：src="https://baidu.com/u=193&f=GIF" -网址打开
相对地址：src="img/1.pang"（img文件夹里）
的 title 和 alt 有什么区别
title 通常当鼠标滑动到元素上的时候显示
alt 是 的特有属性，是图片内容的等价描述，用于图片无法加载显示、读屏器阅读图
片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分
析。
元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）
vertical-align: baseline（默认底部基线对齐）/
middle（垂直居中）/auto/top（顶部对齐）/bootom;注意：
若父盒子由图片撑开，图片下面会留空隙，因为图片或表单等行内块元素，他的底线会和父级盒子基线对齐
a.解决办法：给img：vertical-align：middle/top，即不要基线对齐
b.把图片转换为块级元素
src 与 href 的区别
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在
位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和
frame 等元素
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）
或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为 css 文件，就
会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加
载 css ，而不是使用 @import 方式图像热区链接：
热区形状shap：rect矩形/circle圆形/poly多边形
coords与shap对应的坐标值：
rect：x1，y1 x2，y2 （4个值）
circle：center-x，center-y，radius（3个值）
poly：x1，y1 x2，y2 ...（（n+1）*2个值）（8）音乐标签：audio
(controls="controls"):播放控件
(autoplay="autoplay"):自动播放
（loop="loop"）：循环播放
preload = "auto页面加载即加载视频/metadete只加载元数据/none不加载")
视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）
poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面
（9）视频标签：video
play播放/pause暂停
视频可以设置宽度
(controls="controls"):播放控件
(autoplay="autoplay"):自动播放
（loop="loop"）：循环播放
(preload="auto页面加载即加载视频/metadete只加载元数据/
none不加载")视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）
poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面
（10）列表标签
a.有序列表：重点强调顺序性
代表有序列表
- 列表项内容
代表列表项（按先后顺序默认用阿拉伯数字标序号并先后排列）
简写方式：ol>li*2(表示ol标签里嵌套2个li标签)单击Tab键 快速生成
b.无序列表：重点强调并列关系
代表无序列表
（按先后顺序默认用实心圆点标注并列排列）
- 列表项内容
代表列表项
li{list-style：none；} -列表符号隐藏c.自定义列表：用来描述名词以及解释
定义
- 名词
- 解释
列表声明
css列表属性：可以设置、改变列表项标志，或者将图像作为列表项标志
list-style:（简写属性。用于把所有用于列表的属性设置于一个声明中）
list-style-position：inside 内部/outside 外部-默认 （将设置列表中列表项标志的位置）
list-style-type：disc 实心圆点/square 小方块/circle 空心圆/none 取消列表标志（设置列表项标志的类型）
list-style-image：url（图片路径-- ..表示返回上一级路径）（将图像设置为列表项标志）
（11）表单标签
:输入框
label 标签：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会自动获得输入焦点。
第一直种用法：label标签直接包括input标签（适合单个表单选择）
第二种用法：用for属性规定label与哪个表单绑定
取消边框：border：none
取消外边框轮廓线：outline：none
取消默认背景：background：none属性（输入限制）
disabled 规定输入字段应该被禁用
readonly 规定输入字段只读（不可修改）
required 规定输入字段必填
pattern 规定通过其检查输入值的正则表达式
正则表达式：pattern="^[1][3-8]+\\d{9}$"
^表示一行的开始，$表示正则结束，[0-9]等价于\\d，
{9}表示整数长度为任意的9个数字，+\\d表示正整数
maxlength 规定输入字段的最大字符数
max 规定输入字段的最大值
min 规定输入字段的最小值
size 规定输入字段的宽度
step 规定输入字段的合法数字间隔
value 规定输入字段的默认值
修改placeholder属性的样式
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
color: red;
}单选按钮
复（多）选框
下拉菜单
（部分浏览器可能不支持datelist属性.......）提交按钮：submit
重置按钮：reset
value：（初始值）文件选择框
（选择文件后并不能真正打开，只是将文件名回填到文件输入框内）
图像按钮
//将一张图片作为按钮使用
普通按钮
隐藏框
（隐藏框不显示在表单中，随用户表单一起提交给服务器）html5新增输入类型
.number （属性：max（可输入最大值）/min（可输入最小值））
.email
.color
.date
.time
.datetime
.datetime-local
.month
.week
.range（滑动控件）
.search
.tel
.url
.multiple 可以多选文件提交
.date pickers（12）容器（盒子）标签
:容器（盒子），打组标签-用于页面模块划分，包裹和分割模块，相当于打组。
改变容器（内容的显示）位置：
align：改变内容的显示位置（center居中/left居左/right居右 ）
div{ margin：0 auto；（上下边距为0，水平居中）}4. 属性
语法： 属性名=“属性值”
属性的作用：帮助标签实现效果，标签与属性之间，属性与属性之间都用空格隔开
可继承的属性：font-size font-faminly color
不可继承的样式：border,padding,margin,width,height（1）文本属性
通过css文本属性可以定义文本的外观（字体颜色、字号大小、文本加粗、倾斜......）
字体颜色 color ：#666 ；
字号大小 font-size：18px ；
文本加粗（字重）font-weight：normal（等价于400）（常规字体）
/lighter（更细的-浏览器可能不支持）/bold（等价于700）（加粗）/bolder（更粗的-常用）；
字体样式 font-style：normal（常规字体）/italic（倾斜）/oblique（更倾斜的-常用））；
行高 line-height：27px （字体大小1.5倍起）；
单行文本在什么高度里上下垂直居中显示（设置文本行高等于父级标签高度，则文本对于标签垂直居中）
字间距 letter-spacing：2px （默认为0，中文英文都适用）；
词间距 word-spacing：4px （只适用于英文单词）；
首行缩进 text-indent ：36px （字体大小两倍）；
文本显示（水平-对齐）方式 text-align：left/center/right ；
（不止作用于文本，对行内块元素同样有效）（文本居中不能使用margin：0 auto）
文本修饰 text-decoration ：overline 上划线/line-through 删除线
/underline 下划线/none取消文本修饰效果（取消超链接下划线）；
英文大小写 text-transform：capitalize（开头首字母大写）
/uppercase（全部大写）/lowercase（全部小写）；
文字字体 font-family：Ariel,“思源黑体”（各种字体之间必须使用英文状态下的逗号隔开；
中文字体需要加英文状态下的引号，当需要设置英文字体时，英文字体必须位于中文字体之前。）
（可以添加到通配符选择器里面——页面所有字体都确定了）；
font：italic 700 20px "思源黑体"；
（总写，严格按照
vertical-align: baseline（默认底部基线对齐）/middle（垂直居中）/auto/top（顶部对齐）/bootom;元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）
clip: auto;设置元素的形状，元素被剪入这个形状中显示出来
注意：
若父盒子由图片撑开，图片下面会留空隙，因为图片或表单等行内块元素，他的底线会和父级盒子基线对齐
a.解决办法：给img：vertical—align：middle/top，即不要基线对齐
b.把图片转换为块级元素
5. 元素（标签）属性
根据是否可以设置宽高，是否可以独立成行来进行区分
（1）块级元素（默认独占一行，可以设置宽高，宽度默认是容器即父级100%的宽度，里面可以放置块级元素和行内元素，但文字类标签里不能放div标签）：
标题标签
段落标签
有序列表
，无序列表
，自定义列表
div标签（2）行内元素（设置宽高无效，默认在行内逐个显示，尺寸是由内容决定的，行内元素只能容纳文本或其他行内元素）：
超链接标签
字节标签
（3）行内块元素（在行内逐个进行展示，但是之间会有空白间隙，但可以设置宽高）：
元素属性转换
display：block（展示转化为-块级元素）
inline（展示转化为-行内元素）
inline-block（展示转化为-行内块元素）
none（属性展示-隐藏）