重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
htmlcss-创新互联
HTML5
- HTML5的发展路程
(1) 1993年IETF 发布了HTML1.0版本(internet工程任务组)
(2) 1995年 W3C(www)接管 发布HTML2.0(页面的布局表格布局)
(3) 1996年W3C 发布了 HTML3.2(很多，很乱)
(4) 1997年W3C发布了 HTML 4.0(精简版本)
(5) 1999年 W3C发布了 HTML4.01(普通使用版本)这时开始分路 分两个线路
(6) 线路1 XHTML 版本
1) 2000年的时候 W3C 发布了 XHTML 1.0版本
2) 2001年的时候 W3C 发布了 XHTML 1.1 版本
3) XHTML 严格HTML
线路2: HTML5版本(whatwg) 所有的浏览器厂商一起研发 - 2004年 whatwg 发布了HTML5草案
- 2004-2008年W3C 和whatwg合并了
- 2008年 W3C 和whatwg -> HTML5的正式版本(只是制定 没有推广和发布)
HTML5 到底是什么
HTML5≈HTML5的标签+CSS3+JavaScript+api(浏览器提供的操作接口) 如何创建HTML文档
(1) 文档的命名规则
① 不允许使用特殊字符@#￥%……&*（）
② 可以以中文命名.但是不推荐使用中文
③ HTML文档名推荐使用小写
④ HTML 文件就是以.html结尾
注意: 如果创建完html文件后面依然是文本文件格式 那么就将系统中隐藏已知文件扩展名选项勾选掉
win7:打开我的电脑->组织->文件夹选项->查看选项卡->高级设置->勾选掉隐藏已知文件类型扩展名- HTML标签(重点内容)
(1) 标签是HTML 中的最基本单位 也是最重要的组成部分，通常用两个尖括号包起来”<” 和”>”;
(2) 标签两种形式
① 成对出现标签(双标签)内容
内容
② 不成对出现标签(单标签)
(3) 关于标签大小写问题
① 标签是大小写无关系
- HTML标签属性
(1) HTML 属性一般都出现在HTML标签中 是html标签的一部分
(2) 标签可以有属性，他包含了额外信息 属性的值一定要在双引号中(规定)
(3) 标签可以拥有多个属性
(4) 属性由属性名和属性值成对出现
语法:
<标签名 属性名1=”属性值1 属性名2=”属性值2”>
<标签名 属性名1=”属性值1” 属性名2=”属性值2”/> - HTML颜色值的设置
大多数的浏览器都支持颜色名集合 颜色值是一个关键字或者是一个rgb格式的数字都可以
主要有一下两种:
英文单词作为颜色值: red 红色 green绿色 blue 蓝色 yellow ××× pink 粉色 purple 紫色...
可以使用6位的十六进制的颜色值:
#D6 E3 F1
十进制:0 1 2 3 4 5 6 7 8 9 10
十六进制: 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 十进制的:16
十进制颜色值: 红0-255 绿0-255 蓝0 -255
255 0 0
#FFFF00
91 113 164
#5B71A4
其中 前两位 表示红色 中间两位表示绿色 最后面两位表示 蓝色 - HTML的注释
我们经常要在代码旁做注释 这样的好处有很多，解析你下面的代码，方便我们查找 比如: 方便程序员了解你的代码，也方便以后自己对自己的代码理解和修改
格式:
注意: HTML注释不能进行嵌套使用 会影响注释内容也会影响代码 - HTML代码格式
任何回车或者空格在源代码中都不起作用 所以在编写HTML代码时，可以使用空格或者回车进行代码的排版 这样可以使代码清晰便于团队开发合作,而且必须保持严格的规范 以 tab键为准 - HTML字符实体
< <
>>
空格 - HTML文档的主体结构
(1) 最顶部声明
告诉浏览器以什么样的标准解析这个网页，HTML5的标准 老浏览器都兼容的标准
声明时文档的第一个成分 位于最顶部 该标签告诉浏览器文档所使用的的HTML规范
html 4.01
HTML5
(2) 以 开始 以结束中间包含头部标签
和主体标签(3) HTML文档的头部元素
head标签代表html文档的头部信息以结束
头部包含了当前文档的一些信息比如: 标题信息 meta信息 正常情况下面的不会显示的一些HTML文档信息
设置页面字符集(推荐使用)
http-equiv 告知浏览器的行为
5s后刷新
设置网页关键字
了解级别:
定义两个文档之间连接的关系
rel 表示文档与被连接文件的关系
type 表示被连接文件的类型
href 定义被连接文档的地址
网页标题小图标
连接css样式表
定义一段脚本
定义css样式
(4) body标签中常用的标签
常用属性:
text 设定页面文字的颜色
bgcolor 设定页面背景颜色
background 设置页面背景图片
粗体标签
定义语义的文本强调(加粗)
b 是物理标记 strong 逻辑标记
- 什么是物理标记
b是bold的简写 传递的意思是加粗 html - 什么是逻辑标记
strong 是强调的意思 强调某段文字 Xhtml
斜体标签
强调文本 效果是斜体
换行
水平线
下划线删除线n代表数字 6 -1 只有h2到h7 h2为大 h7为最小 定义标题
定义下标文本
定义上标文本定义元素细节 用户点击查看 点击隐藏为details标签定义标题
了解级别：
字体标签 H5中已舍弃
属性:
size 设置字体的大小 大支持7 最小是1
color 设置字体的颜色
face 设置字体的族科 就是你是什么样的字体如 宋体 黑体等...
注意:face 属性 设置的值必须在用户的电脑中存在才能使用
HTML5
1. 配合open=“true”
Eg:
2.
3.
4. 定义列表项
5.
6. 定义类额标准的项目，以及dialog标签中定义一个角色
7. 定义一个项目的描述
8. 原格式输出(用来调试代码)
9. 超链接标签
常用属性
1）href 定义a标签要跳转的地址
1.1）相对路径： （如果是当前目录，不使用./也代表当前）
./ 当前目录
../ 上级目录
1.2）绝对路径： 从根开始查找，在使用绝对路径时要加上对应的协议
http:// +网址
eg: http://www.baidu.com
File:/// +绝对路径
Eg: file:/// E:\wamp\www\PHP09\201709252）target 打开链接地址的方式
i. _self 默认值 在当前窗口打开
ii. _blank 在新窗口打开
10.锚点的应用
1）作用：快速定位页面中需要定位的位置
声明锚点：在需要的地方定义一个标签a标签属性定义一个name或id属性任意值
Eg:
使用锚点：在查询的a标签中写#后面跟id或者name的值
Eg:
11.发送邮件跳转
Mailto: 表示邮件给谁
？ 开始传参
参数名CC 代表抄送
参数名BCC 代表密送
参数名Subjec 代表邮件的主题
参数名body 代表邮件的主体
12.进度条标签
1） IE不支持此标签
属性：
Min: 设置最小值
Max: 设置大值
Value: 设置当前值
Eg:
2）
属性：
Min: 设置最小值
Max: 设置大值
Value: 设置当前值
Low: 优化最小值
High: 优化大值
Optimum: 良好值
Eg:
13.定义图像
属性：
Src 定义图片地址
Width 设置图片宽度
Height 设置图片高度
Alt 提示信息（图片不存在时）
Title 提示信息（鼠标移动到图片上时）
Usemap 定义为图片客户端映射，带有可点击区域的图片(写法相当于使用锚点)
Eg:
14.定义客户端图像映射（相当于声明锚点）
Name/id 用来关联
定义图像映射区域
Shape 定义区域的形状
Rect 矩形
Circle 圆
Poly 多边形
Default 默认值 整张图
Cords 坐标值
1) 在map标签中添加name或id属性，属性值任意
2) 在usemap属性后面使用#后面跟name或id的属性值即可实现
Eg:
15.多媒体标签
1） 定义声音
属性：
Src 声音的地址
Controls 播放控件
Loop 单曲循环
Autopray 自动播放
Eg:
2）
3） 视频标签
属性：
Src 声音的地址
Controls 播放控件
Loop 单曲循环
Autopray 自动播放
Poster 定义视频在点击播放前显示的图像
Width
height
16.加载多媒体 一般用来加载flash
属性:
Src
Width
height
eg:
HTML表格标签
1．
常用属性：
1) Border
2) width
3) Height
4) Align left(默认值) right center
5) Cellspacing
6) Cellpadding
7) Background
8) Bgcolor
2 .
1) Align
2) Valign top middle bottom
3) Bgcolor
4) Background
5) Height
注意：tr标签没有width属性
1) Align
2) Vlign
HTML中的表单
常用属性：
1) Action
2) Methot
(1) GET
(2) POST
3)
常用属性：
1) Name
2) Type
(1) Text
(2) Submit
(3) Password
(4) Radio
(5) Checkbox []
(6) File
(7) Reset
(8) Hidden
(9) Button
(10) Image alt
(11) Button
3) Checked
4) Value
=
=
常用属性：
1) Name
常用属性：
1) Value
注意：value定义列表项的默认值, 如果列表项中设置默认值提交时则拿默认值如果没有设置默认值，提交是获取的option标签中间的内容
2) Selected
常用属性：
1) Name
2) Rows
3) Cols
注意：多行文本域没有value属性，默认值写在标签texrarea中间H5新增表单标签
- 可选数据列表
列表项
如何实现可选数据列表和普通文本域进行关联 - 在datalist标签中定义id属性 属性值任意
- 在普通文本域中定义list属性 属性值为id的值即可实现关联
- 新增的表单类型 type值为:
email 设定当前表单的验证方式是email方式验证
url 设定当前表单的验证方式是URL验证方式
number 设定当前表单的验证方式是数值验证
range 设定当前表单的验证方式必须在指定的范围
search 设定当前表单为搜索表单
color 设定当前表单为颜色选取表单
tel 设定当前表单为电话号码表单
知道: 谷歌浏览器支持
data 日期选取表单
time 时间选取表单
week 周选取表单
month 月份选取表单
datetime-local 完整日期选取表单 - 新表单的用法:
HTML5中为了排版方便 表单中允许跳出表单之外 但是要实现提交功能需要做2件事 - 为form标签添加唯一id属性 属性值任意
- 需要提交的元素填写form属性 属性值为form标签的id属性值即可实现关联
- 将表单内的相关元素进行分组
为fieldset定义标题 - 为下拉列表定义分组
配合属性label 定义分组的标题 - form表单中的属性
readonly -- 只读 输入域可以选择 但是无法修改
disabled -- 禁用，输入域无法使用无法获取焦点 无法选择以灰色显示
autofocus -- 自动获取焦点
placeholder 表单信息提示
用于代替表单中显示默认值使用 value的情况 placeholder取代了value属性的显示提示信息的功能 并不会随着提交而去
required 用于强制用户必须填写该表单赋值否则有提示信息
min 用于设定表单的最小值
max 用于设定表单的大值
step 设定跳过的数值或者设定2个数值之间的间隔
multiple 设定当前表单允许同时选择多个文件 使用于 input type=file
pattern: 用户自定义验证规则(需要配合正则的语法)[A-Z] 表示大写字母A到Z 之前任意一个字母
novalidate 取消表单的验证 适用于form标签
tabindex tab键切换索引属性
formaction： 用于在提交按钮中修改当前表单的提交页面
formmethod 用于在提交按钮中修改当前表单的提交方式
formnovalidate 用于在提交按钮中修改当前表单的不验证
formenctype: 用于在提交按钮中修改当前表单提交数据编码类型(一般不用) 文件上传的 在php上传文件的时候我们讲
- HTML中全局属性 name id class style
contentEditable 内容可编辑属性
设定改属性的元素内容允许在页面中直接编辑
designMode 页面可编辑属性(标签无法使用 只能js用)
注意: 当前属性不是任何标签的属性 而是文档的属性 如果文档设置该属性为on 那么页面中所有元素均可修改
注意:以上两个属性在页面中修改只是临时修改，如果需要长期修改 需要以后学习JS和AJAX等技术配合使用
hidden 隐藏属性
在html5中允许对任何标签使用hidden属性，用于隐藏该标签的显示 - HTML框架标签
代替body标签定义框架页面 并且定义框架页面分多少行与多少列
常用属性
cols 定义框架页含有多少列 与列的大小
rows 定义框架页含多少行与行的大小(每个值使用逗号分隔，值可以是像素或者百分比 * 代表匹配所有大小)
定义frameset标签中每个框架页的内容
src - 定义了内容页URL
name 在一个框架页连接到另一个页面的时候使用 定义名称 - Iframe
- 在页面中开一块空间链接的子页面
常用属性：src
Width
height
frameborder
CSS3 - CSS cascading style sheet
- CSS的基本语法
1) CSS定义：由选择器、属性、属性值组成
格式：选择器{属性名：属性值; 属性名：属性值;}
2) CSS中的注释：/注释内容/ 在HTML中放置css样式的几种方式
1) 内联样式表 行内引用内容
2) 内嵌样式表 内部引用 写在head头的style标签里
3) 外部连接样式表 外部引用
Css文件以.css结尾
4) 引入方式
注意：如果style样式表引入css文件就不要在style标签中再写其他样式
5) 多重样式表叠加，依照优先级。
内联优先级最高,内部和外部连接之间是最后定义的优先- 选择器
1) 基本选择器
(1) 类选择器 class属性css: .class属性名{}
可以在class属性值中通过空格分隔起多个属性值
(2) 唯一选择器 id属性css: #id属性名{}
在当前id只能写一个属性值
(3) 标签选择器tagname 标签名{}
(4) 通用选择器 匹配所有标签
2) 层级选择器
(1) 组合选择器 div,p多个选择器之间用逗号隔开
(2) 包含选择器 div p 只要p标签被div包含
(3) Div>p 选择所有作为div元素的子元素(父子)
(4) Div+p 选择紧贴着div元素之后的p元素(同级)
(5) Div~p 选择div元素之后的所有兄弟元素p(同级)
3) 属性选择器
(1) 根据属性名或属性值来找到元素
E element 元素标签
ATT attribute 属性
VAL value 值
E[ATT] 匹配所有具有ATT属性事物E元素
E[ATT=val] 匹配所有att属性等于val的E元素
E[ATT~=val]匹配所有att属性具有多个空格分隔的值
E[ATT^=val]属性att的值以val开头的E元素
E[ATT$=val] 属性att的值以val结尾的E元素
E[ATT=val]属性att的值包含val的E元素
CSS3 结构性伪类选择器 - 伪元素选择器
(1) 不是对真正的元素进行选择
E:first-line E元素的第一行内容
E:first-letter E元素的第一个字母
E:before 在E元素内容之前
E:before{content:写要添加的内容}
E:after 在E元素内容之后
E:after{content:写要添加的内容} - 结构性伪类选择器
(1) 四个最基本的结构上伪类选择器
① :root 将样式绑定到页面的跟元素
所谓的根就是位于文档数中最顶层结构元素 在HTML页面中可就是只包含整个页面的部分
② E:not() 除了某一个元素
对某个元素使用样式 但是想拍出这个元素下的某个子元素
③ E:empty 所有为空的E元素
④ :target 连接到目标时
(2) 其他的伪类选择器
E:first-child 对一个父元素中的第一个子元素E设置样式
E:last-child 对一个父元素中的最后一个子元素E设置样式
E:nth-child() 对指定需要的子元素E设置样式(正序)
(odd) 所有正序下来的奇数个子元素
(even) 所有正序下来的偶数个子元素
E:nth-last-child() 对指定需要的子元素 E设置样式(倒序)
(odd) 所有倒序上去的第奇数个子元素
(even) 所有倒序上去的第偶数个子元素
E:nth-child(an+b) 循环样式
a 表示循环间隔的次数
b 表示循环开始样式
E:nth-of-type() 与nth-child作用类似但是他仅匹配使用同种标签的元素
E:nth-last-of-type() 与nth-last-child 作用类似但是他仅匹配使用同种标签的元素
E:fist-of-type 和filst-child 作用类似 但是他仅匹配使用同种标签的元素
E:last-of-type和 last-child 作用类似 但是他仅匹配使用同种标签的元素
E:only-child 匹配父元素下仅有一个子元素的并且这个子元素为E
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E
(父元素下可以有多个元素 但是只能有一个元素为E的)
E:enabled 匹配表单中激活元素
E:disabled 匹配表单中禁用元素
E:checked 匹配表单中被选中的radio或者checkbox元素
E:selection 在实现选中文本的时候 在火狐浏览器中为实验性质,要想测试需要在该浏览器前面加上火狐浏览器私有前缀-moz- 私有前缀
私有前缀的作用: 测试某个属性是实验性质时使用
火狐兼容
::-moz-selection{}
伪类选择器
定义好的 不能随便起名，是为固定的某个元素在不同状态上的定义 目前a标签有几种不同的状态
:link 设置超级链接a在未被访问前的样式
:visited 设置超级链接a在其他链接地址被访问的涡阳
:active 设置元素被用户激活(鼠标点击与释放之间)时的样式
:hover 设置元素在鼠标悬停时的样式（所有标签都可以使用）
:focus 设置元素在其获取鼠标焦点的样式
CSS 常用属性
1.字体属性:
font-size: 设置字体大小
常见的单位:
px 像素 屏幕中一个点就是一个像素
(相对单位)
em 相当于一个汉字的大小
font-style：设置字体样式 正常和斜体
normal 正常字体
italic 斜体
font-family 用于设置字体的类型
注意: 页面中该属性设置的字体必须存在与客户端电脑中才可以使用
font-weight : 设置字体的粗细
属性值:
bold 粗体
默认值:normal
font-variant 设置字体为小型的大写字母
取值:
normal 默认值
small-caps 将小写字母变为小型大写字母
font 字体样式统一设置标签
但是主要注意:使用该属性时 值具有顺序关系 必须依照顺序来写 不存在的可以省略
font 属性顺序 :<{斜体 小型大写字母 粗体}> <字体/行高><类型>
2.文本属性
text-indent 首行缩进
常用单位: em 一个汉字的大小
line-height:用于设置当前文本的行高就是一行的高度 - 设置行高美化效果
- 用于单行文本的垂直居中设置(行高设置为元素的高度即可)
text-align:设置元素内容的水平对齐方式
取值 :left center right;
text-decoration 设置文本修饰
取值:
none 不修饰
underline 下划线
line-through 删除线
word-spacing 设置单词之间的距离（对于中文需要加上每个字加上空格才有效果）
letter-spacing 设置字母之间的间距的
背景属性:
尺寸属性：
列表属性：
盒子模型
背景属性 - Background-color
- Background-image
- Background-repeat
- Background-position
- Background-attachment
尺寸属性 - Width
- Height
- Min-height
- Max-height
列表属性 - List-style-type：设置列表的符号样式
- List-style-image：使用指定的图片来代替列表的序号
格式：list-style-image：URL（图片地址） - List-style-position
字体颜色属性 - Color
定位属性 - Position：设置元素的定位方式
Static
Absolute
Relative
Fixed
布局属性
布局属性- Display
1) None
2) Inline
3) Block
4) Inline-block - Visibility
1) Visible
2) Hidden
注：visibility和display隐藏的区别，visibility占位隐藏，display不占位隐藏 - Overflow
1) Hidden
2) Scroll
3) Visible
4) auto - float
1) left
2) right - clear
1) left
2) right
3) both - 盒子模型
1) 外边距 margin
(1) Margin-top
(2) Margin-right
(3) Margin-bottom
(4) Margin-left
简写属性：
Margin:10px
Margin:10px(上下) 50px(左右)
Margin:10px(上) 50px(左右) 80px（下）
Margin:10px(上) 50px(右) 80px(下) 100px(左)
2) 内边距 padding
(1) Padding-top
(2) Padding-left
(3) Padding-bottom
(4) Padding-right
3) 边框 border
- Cursor
1) Text
2) Crosshair
3) Help
4) wait
5) pointer - border
1) border-color
2) border-width
3) border-style
(1) dotted 点线
(2) dashed
(3) solid
(4) double 双实线
(5) groove 槽状线
(6) ridge 脊线
(7) inset 内嵌效果
(8) outset
4) border-top
(1) border-top-width
(2) border-top-color
(3) border-top-style
5) border-left
6) border-right
7) border-bottom
兼容性
*{margin:0px;padding:0px;}
img{border:0px;}
a{text-decoration:none;}
ul li{list-style:none;}
body,h2,h3,h4,h5,h6,h7{
font:15px 微软雅黑;
}
布局
div+css布局
三列浮动布局
二列浮动布局
html5 布局
- 结构标签(重点)
header 表示页面中的一个内容区域或者整体内容的标题
nav 表示连接导航部分
footer 表示整个页面或者页面中的一个内容区域的脚注 一般用来 他会包含作者 姓名 文章创建的时间或者是作者的联系方式
section 定义文档或者应用程序的一区段 文章章节 页眉
article 文档中的一块独立内容 写文章 写新闻
aside 侧边栏 制作滚动广告
css3新属性 - 颜色单位
rgb(255,255,255) rgb(100%,100%,100%)
rgba(255,255,255,); a代表透明度(0-1)
hsl
H:hue(色调) 0-360 0 和360表示红色 120表示绿色 240表示蓝色 其他的数值就是指定颜色取值0-360
S:saturation 饱和度 取值为 0,0%-100% 0% 黑色 100% 全彩色
L:lightness 亮度 取值范围 0.0%-100% 0.0%黑色-100% 白色
hsla a 代表透明度 - 边框属性
border -color
border-width
border-style
border-image
border-radius 圆弧 - 一个值 四个角
- 二个值 第一个 左上 右下 第二个 右上 左下
- 三个值 第一个值 左上 第二个 右上左下 第三个值右下
- 四个值 左上 右上 右下 左下
- 背景图片
background-size: 设置图片大小的
background-size :100px 100px
background-size :100% 100%
background-size :cover 等比例缩放 超出部分不显示
background-size :contain 等比例缩放 缺少部分白色补全 - 文本属性(重点)
text-overflow
ellipsis 显示省略号
white-space
nowrap 不换行
以上内容是让你的中文超出部分以省略号显示 - text-shadow 文字阴影
第一个参数 必须写 水平偏移值 可以是负值
第二个参数 必须写 垂直偏移值 可以是负值
第三个参数 可选写 模糊距离
第四个参数 可选写 颜色
每个参数之间都有空格隔开
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享题目：htmlcss-创新互联
当前网址：http://cqcxhl.cn/article/edgds.html