HTML-CSS基础学习
Web概述
HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。
书籍推荐：
《代码整洁之道》 《程序员修炼之道: 从小工到专家》 《重构：改善既有代码的设计》
HTML5概述
术语
WWW：World Wide Web（Web） HTTP：HyperText Transfer Protocol（超文本传输协议） URL：Uniform Resource Locator（统一资源定位符） HTML：HyperText Markup Language（超文本标记语言） XML：Extensible HyperText Markup Language（可扩展标记语言） XHTML：Extensible HyperText Markup Language（可扩展超文本标记语言）
HTML5新增元素
结构元素
header 页面或页面中某个区块的页眉，一般为导航信息 footer 页面或页面中某一个区块的页脚 section 页面中的一块区域，通由内容和标题组成，应用于部分模块 article 独立的内容块，可独立于页面其他内容使用，也可以应用于整篇文章 aside 非正文内容，独立于页面的主要内容 hgroup 标识整个页面或页面中的一个内容区块的标题进行组合 nav 作为页面导航的辅助内容 figure 标识一段独立的流内容，一般表示文档主体流内容的一个独立单元 figcaption 定义figure标签的标题
功能元素
hgroup 用于对整个页面或页面中一个内容区块的标题进行组合 figure 表示一段独立的流内容，一般标识文档主题流内容中的一个独立单元 video 定义视频 audio 定义音频 embed 用来插入多媒体，格式：MIDI,WAV,AIFF,AU,MP3等 mark 高亮显示文字 time 标识日期或时间 canvas 表示图形 output 表示输出 source 为媒介元素定义媒介资源 menu 表示菜单列表，当需要列出表单控件时使用该标签 ruby 表示ruby注释 rt 表示字符的解释或发音 rp 在ruby解释中使用，定义不支持ruby的浏览器所显示的内容 wbr 表示软换行 command 表示命令按钮 detail 表示用户要求的到并且可以得到的细节信息，可与summary元素配合使用 datalist 可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 datagrid 表示可选数据的列表，以树形列表形式显示 email 表示必须输入E-mail地址的文本输入框 url 表示必须输入URL地址的文本输入框 number 表示必须输入数值的文本输入框 range 表示必须输入一定范围内数字值的文本输入框 Date Pickers 可供选取日期和时间的新型文本输入框
HTML5废除元素
可以使用CSS代替的元素
废除basefont,big,center,font,s,strike,u,tt s、strike可以用del替代 tt可以用css中的font-family替代
不再使用frame框架
不支持frame框架，包括frameset、frame、noframes 只保留内联框架iframe
只有部分浏览器支持的元素
废除applet、bgsound、blink、marquee applet可以由embed或object替代 bgsound可以有audio替代 marquee可以有js脚本替代
其他被废除的元素
使用ruby代替rb 使用abbr代替acronym 使用ul代替dir 使用form代替input和isindex结合 使用pre代替listing 使用code代替xmp 使用GUIDS代替nextid 使用text/plain MIME类型代替plaintext
HTML5新增属性
表单属性
autofocus 页面加载后元素会自动获得焦点 paceholder 用户输入时提示信息 form 声明属于表单 required 提交表单时，检测输入值不能为空 autocomplete 自动完成功能 on/off formaction 重置表单默认行为的新属性 image:width/height 设置图片的宽高 list与datalist结合 提供可供选择的选项 max、min和step 最大值，最小值，步长 pattern 正则表达式 multiple 允许输入域可选择多个值 fieldest disable属性 label:control 通过control可以访问表单元素 selectionDirection 选取文字的方向 正：forward 反：backward
连接属性
media 为a和area新增该属性，规定url的默认打开设备 area 新增hreflang、media、rel、type属性 link 新增sizes属性，规定链接资源尺寸 base 新增target属性 其他 ol 新增reverse属性，倒序 meta 新增charset属性，指定编码集 menu 新增type属性和label属性，label定义标注，type定义形式 style 新增scoped属性 script 新增async属性，指定脚本是否异步执行，仅适用外部脚本 HTML5 新增manifest，指向一个用于结合离线web应用API的应用程序缓存清单 iframe 新增sandbox、seamless、srcdoc属性，提高页面安全性，防止执行不信任操作
HTML5常用标签
head的子标签，位于文档头部，不包含任何内容，定义HTML文档的相关信息，描述文档的属性，可以提供有关页面的元信息，利于搜素引擎搜索和更新频度的描述和关键词
meta分为：HTTP标签部分(http-equiv)和页面描述信息(name)
http-equiv
可以利用其设定浏览器的一些信息，以正确显示网页 http-equiv:指定协议头类型，content：指定协议头类型的值
常用http-equiv类型：
-content-type 用于定义用户的浏览器以何种方式加在数据，或以何种应用程序打开资源
<meta http-equiv="content-type" content="text/html; charset=uft-8"/>
-refresh 指定页面的刷新或跳转的间隔时间和跳转的资源 url为空为刷新当前页面
<meta http-equiv="refresh" content="3;url=index.html"/>
-expires 用于指定网页的缓存的过期时间
-set-cookie 用于设置Cookie，必须使用GMT格式指定Cookie的过期时间
<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=Mon,12 May 2021 00:20:00 GMT"/>
name
页面描述信息有name和content属性指定。 name属性指定要描述的页面信息的类型，conten用来描述页面信息的值
常见页面信息的类型：
-keywords 为搜索引擎提供的关键字列表
<meta name="keywords" content="key1,key2,..."/>
-description 为搜索引擎提供网页主要内容的描述
<meta name-"description" conten="About it"/>
-author 标明网页的制作者
-robots 用于提示搜素机器人哪些页面需要索引，哪些不需要索引
robots-content参数：
-index 搜索页面
-noindex 不把页面展示在搜索结果中
-noimageindex 禁止搜索引擎索引页面上的图片
-none 页面将不背搜索，且页面上的连接不可以被查询
-follow 不管页面是否允许索引，页面上的链接可以被查询
-nofollow 页面上的链接不可以被查询
-all 文件将被检索，且页面上的链接可以被查询
常用标签
h1-h6:标题 br:换行 hr:分割线
特殊字符:&xxxx;
lt: 小于 gt: 大于 amp： & quot: 双引号 copy: 版权 reg： 已注册商标 trade： 商标美国 times： 乘号 divide： 除号
列表
无序列表：ul 有序列表：ol 定义列表：dl
li:type属性 -disc 实心圆 默认 -circle 空心圆 -square 实心方块
ol: type属性 -1 数字 默认 -a 小写字母 -A 大写字母 -i 小写罗马字母 -I 大写罗马字母 start属性:默认值是1，可以修改
dl: dt表示列表项 dd描述列表项
超级链接
链接跳转
跳转方式target值： _blank 新窗口打开 _self 当前窗口或框架中打开，默认值 _parent 父框架中打开 _top 在窗口主体重打开
文本链接
<a href="#" target="...">文本</a>
锚链接
文章太长,通过创建锚点方便跳转要指定锚点，如：目录
<a name="head">锚点</a>
<a href="#head">跳转到锚点</a>电子邮件链接
<a href="mainto:name@email">给xxx发邮件</a>
其他链接
下载链接或js脚本使用
<a href='name.file'>下载该文件</a>
<a href="javascript;">js脚本链接</a>
表格 table
表格属性： border:表格边框长度，为空为没有边框
td,th属性： colspan：横跨水平单元格数量 rowspan：纵跨垂直单元格数量
表格标签： table 表格 tr 行单元 td 单元格 th 单元格标题，表头行使用 thead 表头分组 tfoot 表尾分组 tbody 表格主体分组，只有一个可以省略 colgroup 对列进行组合，以便格式化 caption 表格标题
HTML5的新特性和新规则
新特性
用于绘画的canvas 用于媒介播放的video 对本地离线存储更好的支持 新的特殊内容 新的表单控件
新规则
新特性应该基于HTML、CSS、DOM以及JavaScript 减少对外部插件的需求 更优秀的错误处理 更多取代脚本的标记 HTML5应该独立于设备 开发进程透明
HTML5开发工具
Dreamweaver CS Nodeped++ HBuilder Sublime Text WebStorm Visual Studio Code
HTML5表单
form标签
form标签用于常见提供用户输入信息的表单 action：指定提交的处理程序 method：指定提交的方式
HTML5中： 使用id替代name autocomplete：表单的自动填充功能，on/off novalidate：提交表单不进行验证
HTML5新增的input元素
HTML4中input元素
单行文本框 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码框 <input type="password">
提交按钮 <input type="submit">
重置按钮 <input type="reset">
普通按钮 <input type="button">
滚动文本框 <textarea>
图像按钮 <input type="image">
隐藏域 <input type="hidden">
文件域 <input type="file">HTML5新增的input元素
提交表单时H5会自动检查输入格式是否正常
邮箱文本框 <input type="email">
url文本框 <input type="url">
数值文本框 <input type="number">
range文本框 <input type="range">
日期选择器 <input type="date">
搜索文本框 <input type="search">
tel文本框 <input type="tel">
颜色文本框 <input type="color">HTML5中新增的表单元素
datalist
可以为文本框提供选择的列表，也可以由用户自己输入，需要绑定文本框的list为datalist的id
<input type="text" list="editor" name="myEditor" id="myEditor">
<datalist id="editor">
<option value="DW"></option>
<option value="VSCode"></option>
<option value="Sublime"></option>
</datalist>keygen
密钥对生成器，用户提交表单时，会生成两个键，私钥存储在客户端，公钥发送到服务器，公钥可以用来验证用户的客户端证书。
output
用于浏览器中显示计算结果或脚本输出（需要js辅助）
<output name="result" for="a b" id="result"></output>HTML5画布
HMTL5音频视频与本地存储
离线应用和Web Workers
Geolocation地理位置
CSS3
CSS3概述
CSS结合DIV可以方便地控制页面布局 整个网站可以统一风格，只要整个网站使用统一的CSS文件 网站的风格维护起来简单，只需要修改对应的CSS文件 浏览器的页面更友好 开发与维护的成本降低 页面性能提高 CSS存在继承关系，就近原则使用CSS属性
CSS基本语法
选择符+属性+属性值
selector{
property1:value;
property2:value;
propertyN:value;
}CSS使用方式
内嵌方式
<a style="CSS">
<p style="CSS">内部样式表
<head>
<style>
CSS
</style>
</head>使用标签链接外部样式表
href为css文件路径，link可以引入其他资源文件，跟页面同时加载
<head>
<link href="CSS_href" rel="stylesheet" type="text/css"/>
</head>使用CSS的@import标记导入样式表
url为css路径，只可以引入css文件，页面加载完成后才加载css文件
<head>
<style>
@import url("CSS_adr");
</style>
</head>CSS3元素选择符
通配选择符 *
所有标签都具有属性
*{
property:value;
}
类的后代才具有属性
.myclass *{
property:value;
}类型选择符 HTML选择符
HTML标签设置对应属性
p{
property:value;
}
a{
property:value;
}ID选择符
指定id设置对应属性
#my_ID{
property:value;
}类选择符 .
指定类设置对应属性
.classname{
property:value;
}
类型选择符.classname{
property:value;
}CSS3关系选择符
包含选择符
只有存在包含关系(包括子类)对应的标签才设置属性
p em{
property:value;
}
<p><em>包含选择符</em></p>
子选择符 >
E>F中F仅仅是E的子元素，其他的子代不包含这内
p>em{
property:value;
}
<p><em>子选择符</em></p>相邻选择符 +
只有+相邻的标签设置属性
h1+p{
property:value;
}
<h1>h1</h1>
<p>p1相邻</p>
<p>p2不相邻</p>兄弟选择符 ~
只要~后的标签都设置属性
h1~p{
property:value;
}
<h1>h1</h1>
<p>p1相邻</p>
<p>p2不相邻</p>CSS3属性选择符
正则选择符
E[att] 具有att属性的E元素
E[att="val"] 选择具有且att值等于val的E元素
E[att~="val"] 选择具有属性值为使用空格分隔的且att包含val的E元素
E[att^="val"] 选择具有att且以val开头的E元素
E[att$="val"] 选择具有att且以val结尾的E元素
E[att*="val"] 选择具有且att包含val的E元素
E[att|="val"] 选择具有att且以val开头并用连接符'-'分隔属性的E元素CSS3伪类选择符
语法：已定义好的对象
seletor:pseudo-class{
property1:value;
propertyN:value;
}常见伪类选择符
a标签：
:acitve 将样式添加到被激活的元素
:foces 将样式添加到被选中的元素
:hover 当鼠标悬浮这元素上方时，向元素添加样式
:link 将样式添加到未访问的元素
:visited 将样式添加到已被访问过的元素
:first-child 将样式添加到元素的第一个子元素
:lang 设置元素使用特殊语言的内容的样式
p标签：
p:empty 选择没有子元素的每个p元素
p:ratget 选择当前活动的p元素
:not(p) 选择非p元素的每个元素
....
表单：
:enabled 控制表单控件的可用状态
:disabled 控制表单空间的禁用状态
:checked 单选框或复选框被选中CSS伪元素选择符
使用定义的伪元素设置一些特殊的字体格式
::after 用来跟content属性一起使用，设置这元素后发生的内容
::before 用来跟content属性一起使用，设置这元素前发生的内容
::first-letter 设置元素内的第一个字符的样式，适用于块元素，
内联元素使用时，需要设置元素的height或width或设置position属性为absolute或设置display属性为block
::first-line 设置元素内的第一行字符的样式，使用于块元素,内联元素使设置于first-letter一样
::selection 设置浏览器默认的背景颜色和文字颜色
::placeholderCSS3样式属性
字体属性
font-style 字体样式 normal 正常, italic 斜体, oblique 倾斜
font-variant 是否为小型的大写字母 normal 正常, small-caps 小型
font-weight 字体的粗细，normal 正常, lighter 细体, bold 粗体,bolder 特粗体
font-size 文本的字号，absolute-size 根据对象字号调节,relative-size 相对于父元素调节,length 文字大小，percentage 百分比表示字号
font-family 文本的字体，多种字体逗号隔开,字体多单词双引号括起来
font-stretch 文字是否横向拉伸变形，normal,ultra-condensed,extra-condensed,condensed
font-size-adjust 对象的aspect，用以保持首选字体的x-height
font：font-style、font-variant、font-weight、font-size、font-family 文本和文本装饰属性
文本属性
text-transform 文本大小写
white-space 空格的处理方式
tab-size 制表格的长度
overflow-wrap 当内容超过指定容器的边界时是否断行
word-break 对象内文本的字内换行行为，默认normal，允许字内换行
text-align 内容的水平对齐方式
text-align-last 块内最后一行或者被强制打断的行的对齐方式
text-justify 调整文本使用的对齐方式
word-spacing 单词直接的间距
letter-spacing 字符之间的间距
text-indent 文本的缩进
vertical-align 内容的垂直对齐方式
line-height 对象的行高文本装饰属性
text-decoration-line 文本装饰线条的位置
text-decoration-color 文本装饰线条的颜色
text-decoration-style 文本装饰线条的形状
text-decoration-skip 文本装饰线条略过的部分
text-underline-position 文本下画线的位置
text-shadow 文本的阴影及模糊效果
text-decoration 复合属性背景属性
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像如何铺排填充
background-attachment 背景图像随着对象内容滚动或者固定
background-position 背景图像位置
background-origin 背景图像显示的原点
background-clip 背景向外剪裁的区域
background-size 背景图像的尺寸大小
background 复合属性边框属性
边框颜色
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-color 复合属性 参数（all；上下左右；上下、左右；上、左右、下）边框样式
border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
border-style 复合属性 参数（all；上下左右；上下、左右；上、左右、下）
取值：
-none 无边框
-hidden 隐藏边框
-dotted 点线边框
-dashed 虚线边框
-solid 实现边框
-double 双线边框
-groove 3D凹槽边框
-ridge 菱形边框
-inset 3D内嵌边框
-outset 3D凸边框边框宽度
border-top-width 上边框宽度
border-right-width 右边框宽度
border-bottom-width 下边框宽度
border-left-width 左边框宽度
border-width 复合属性 参数（all；上下左右；上下、左右；上、左右、下）圆角边框
border-top-left-radius 边框左上角圆角半径
border-top-right-radius 边框右上角圆角半径
border-bottom-right-radius 边框右下角圆角半径
border-bottom-left-radius 边框左下角圆角半径
border-radius 复合属性 参数（all；上下左右；上下、左右；上、左右、下）边框阴影
box-shadow: h-shadow v-shadow blur spread color inset;
-h-shadow 必需，水平阴影位置，允许负值
-v-shadow 必需，垂直阴影位置，允许负值
-blur 可选，模糊距离
-spread 可选，阴影尺寸
-color 可选，阴影颜色
-inset; 可选，将外部阴影改为内部阴影图像边框
border-image-source 用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 指定这边框外部绘制的量
border-image-repeat 用于设置图像边界的平铺方式
border-image 复合属性
border-image: source slice width outset repeat;定位属性
position 对象的定位方式 static 无特殊定位,relative 相对定位对象不可层化,absolute 绝对定位对象可以层叠
z-index 对象的层叠顺序 auto表示遵循父元素的定位，自定义数值：无单位的整数值，可为负数，值大会覆盖值小的对象，相同值先声明的显示
top 对象参照相对物相对顶边界向下偏移的位置。auto表示无特殊定位；自定义数值：百分比或长度，只有position取值为absolute或relative时生效。
right 对象参照相对右边界向左偏移的位置，auto类似top
bottom 对象参照相对上边界向左偏移的位置，auto类似top
left 对象参照相对左边界向左偏移的位置，auto类似top
clip 对象的可视区域，区域外的部分是透明的。auto表自动；shape表按照形状定义显示布局属性
display属性 用来确定页面元素是否显示以及显示方式，不可继承
float属性 用来定义元素是否浮动以及浮动方式
clear属性 用来定义不允许有浮动对象的边
visibility属性 用来确定元素是否显示，不可继承
overflow属性 复合属性，指对象处理溢出内容的方式
overflow-x属性 指明如果溢出元素内容区域的话是否对内容的左右边缘进行裁剪
overflow-y属性 指明如果溢出元素内容区域的话是否对内容的上下边缘进行裁剪
overflow
-visible 不裁剪内容，可能会显示这内容框外
-hidden 裁剪内容，不提供滚动机制
-scoll 裁剪内容，提供滚动机制
-auto 如果溢出，则赢提供滚动机制
-no-display 如果内容不适合内容框，则删除整个内容
-no-content 如果内容不适合内容框，则隐藏整个内容 列表属性
list-style-type属性 用来定义列表项的现实符号，可继承
-disc 实心圆
-circle 空心圆
-sqiare 实心方块
-decimal 阿拉伯数字
-lower-roman 小写罗马数字
-upper-roman 大写罗马数字
-lower-alpha 小写英文字母
-upper-alpha 大写英文字母
list-style-position属性 用来定义项目符号这列表中显示的位置，可以继承
-outside 项目符号放置这列表项文本以外
-inside 项目符号放置这列表项文本以内
list-style-image属性 用来定义代替列表项符号的图像
复合属性：
list-style:list-style-type list-style-position list-style-image;光标属性
cursor属性 设置光标的现实图形
-crosshair 十字准线
-pointer|hand 手形
-wait 表或沙漏
-help 问号或气球
-no-drop 无法释放
-text 文字或编辑
-move 移动
n-resize 向上改变大小
s-resize 向下改变大小
e-resize 向右改变大小
w-resize 向左改变大小
ne-resize 向上右改变大小
nw-resize 向上左改变大小
se-resize 向下右改变大小
sw-resize 向下左改变大小CSS3页面布局
概述
盒子和DIV
盒子：content（内容）+padding（边框）+border（填充）+margin（间隔） width/height
position
overflow
display
float
clear
页面布局
DIV浮动
实用技巧
CSS hack
主流的浏览器
IE、Firefox、Safari、Chrome、Opera
CSS hack的分类
CSS属性前缀法
选择器的前缀法
IE条件注释法