一、HTML5
- 简介
HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 - 特性
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求(比如 Flash)
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
二、常用标签
- meta标签
meta主要用于设置网页中的一些元数据,元数据不是给用户看的
指定网页的字符集。比如:
指定的数据的名称
指定的数据的内容
表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开。
比如:
"网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中 心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
用于指定网站的描述,
比如:
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母 婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
标签的内容会作为搜索结果的超链接上的文字显示,就是网页名称。
2.基础标签
<!DOCTYPE>定义文档类型
<html>定义HTML文档
<title>定义标题
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。
- 格式标签
<acronym>定义只取首字母的缩写
<abbr>定义缩写
<b>定义粗体文体
<cite>定义引用
<font>定义字体尺寸和颜色
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
- 特殊符号
在HTML中有些时候,我们不能直接书写一些特殊符号,比如:多个连续的空格(大概率会被自动解析为一 个空格),比如字母两侧的大于和小于号,那么,我们就需要在网页中使用转义字符:
 :空格 >: 大于号 <: 小于号 ©: 版权符号
5.语义化HTML标签
在页面中独占一行的元素称为块元素(block element) 块状元素特征:(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
在页面中不会独占一行的元素称为行内元素(inline element)
行内元素特征:(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空 间
(3)不会自动进行换行
6.列表
在html列表一共有三种: 1、有序列表 2、无序列表 3、定义列表
有序列表,使用ol标签来创建无序列表
使用li表示列表项
无序列表,使用ul标签来创建无序列表
使用li表示列表项
定义列表,使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
7.超链接
超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置
使用 a 标签来定义超链接
属性:
href 指定跳转的目标路径 :
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径
相对路径都会使用.或..开头
例如: ./,../
./可以省略不写,如果不写./也不写../则就相当于写了./
./ 表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录
target属性,用来指定超链接打开的位置
可选值: self 默认值 在当前页面中打开超链接
blank 在一个新的要么中打开超链接
8.表格和表单
text 用于没有任何限制的文本和字符 password用于输入密码 email 用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。 url 用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。 number 用于应该包含数值的输入域。
range 用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。 属性同 number Date pickers (date, month, week, time, datetime, datetime-local) HTML5 拥有多个可供选取日期和时间的新输入类型: date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间(小时和分钟) datetime - 选取时间、日、月、年(UTC 时间) datetime-local - 选取时间、日、月、年(本地时间) search 用于搜索域 color 用于选择颜色 submit 定义提交按钮(提交表单)
CSS基础知识
一、简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二、语法基础
1.属性值
整数和实数
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数,而不能像其他编程语言那样使用科学记数法表示实数,即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313,实数:12.20、1415、-12.03。
长度量
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位,因而长度单位也分为相对长度单位和绝对长度单位。
相对长度单位有:em--当前字体的高度,也就是font.size属性的值;ex--当前字体中小写字母x的高度;Dx--一个像素的长度,其实际的长度由显示器的设置决定,比如在800木600的设置下,一个像素的长度就等于屏幕的宽度除以800。
另一一点值得注意的是,子级元素不继承父级元素的相对长度值,只继承它们的实际计算值。
百分数量(percentages)
百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。
2.选择器
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{
}
h1{
}
div{
}
id选择器
ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。
需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。
语法:#id属性值{}
类选择器
CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。
语法:.class属性值
通配选择器
作用:选中页面中的所有元素
语法: *{}
例子:
*{
color: red;
}
复合选择器
可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。
first-child 伪类
first-child 伪类来选择父元素的第一个子元素。
注意:在IE8的之前版本必须声明<!DOCTYPE> ,这样 :first-child 才能生效。
lang 伪类
lang 伪类使你有能力为不同的语言定义特殊的规则
注意:IE8必须声明<!DOCTYPE>才能支持;lang伪类。
伪元素
伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用
CSS长度
一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。
长度有一个数字和单位组成如 10px, 2em, 等。
数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。
对于一些 CSS 属性,长度可以是负数。
有两种类型的长度单位:相对和绝对
选择器的权重
样式的冲突 - 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲 突。发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定 选择器的权重 内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级 可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式, 注意:在开发中这个玩意一定要慎