html css

发布时间：2020-04-09 23:21:02 作者：方花
来源：网络阅读：890

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) 标签两种形式
① 成对出现标签(双标签)
<p>内容</p>
<body>内容</body>
② 不成对出现标签(单标签)
<hr/>
<meta/>

(3) 关于标签大小写问题
① 标签是大小写无关系 <body>和<BODY>表示的意思是一样的但是标签推荐使用小写

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) 最顶部声明<!DOCTYPE html>
告诉浏览器以什么样的标准解析这个网页，HTML5的标准老浏览器都兼容的标准
声明时文档的第一个成分位于最顶部该标签告诉浏览器文档所使用的的HTML规范
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html 4.01
<!DOCTYPE html> HTML5

(2) 以<html> 开始以</html>结束中间包含头部标签<head></head>和主体标签<body></body>
(3) HTML文档的头部元素 <head></head>
head标签代表html文档的头部信息以<head></head>结束
头部包含了当前文档的一些信息比如: 标题信息 meta信息正常情况下面的不会显示的一些HTML文档信息
<title></title> 设置网页标题
<meta charset="utf-8"/> 设置页面字符集(推荐使用)
http-equiv 告知浏览器的行为
<meta http-equiv="refresh" content="5"/> 5s后刷新

<meta http-equiv="refresh" content="5;url= "/>

什么是物理标记
b是bold的简写传递的意思是加粗 html
什么是逻辑标记
strong 是强调的意思强调某段文字 Xhtml
<i></i> 斜体标签
<em></em> 强调文本效果是斜体
<br/> 换行
<hr/> 水平线
<u></u> 下划线
<del></del> 删除线
<hn></hn> n代表数字 6 -1 只有h2到h7 h2为最大 h7为最小定义标题
<sub></sub>定义下标文本
<sup></sup>定义上标文本
<details></details> 定义元素细节用户点击查看点击隐藏
<summary><summary> 为details标签定义标题

了解级别：
<center></center> 居中标签 H5中已舍弃
<font></font> 字体标签 H5中已舍弃
属性:
size 设置字体的大小最大支持7 最小是1
color 设置字体的颜色
face 设置字体的族科就是你是什么样的字体如宋体黑体等...
注意:face 属性设置的值必须在用户的电脑中存在才能使用

HTML5
1.<dialog></dialog> 配合open=“true”
Eg: <dialog open=”true”>
<dt>在？</dt>
<dd>嗯！</dd>
</dialog>
2.<ul></ul> 定义无序列表
3.<ol></ol> 定义无序列表
4.<li></li> 定义列表项
5.<dl></dl> 定义一个定义列表
6.<dt></dt> 定义类额标准的项目，以及dialog标签中定义一个角色
7.<dd></dd> 定义一个项目的描述
8.<pre></pre> 原格式输出(用来调试代码)
9.<a></a> 超链接标签
常用属性
1）href 定义a标签要跳转的地址

1.1）相对路径：   （如果是当前目录，不使用./也代表当前）
                ./  当前目录
                ../ 上级目录
1.2）绝对路径：   从根开始查找，在使用绝对路径时要加上对应的协议
                http://     +网址
                    eg: http://www.baidu.com
                File:///        +绝对路径
                    Eg: file:/// E:\wamp\www\PHP09\20170925

2）target 打开链接地址的方式
i. _self 默认值在当前窗口打开
ii. _blank 在新窗口打开
10.锚点的应用
1）作用：快速定位页面中需要定位的位置
声明锚点：在需要的地方定义一个标签a标签属性定义一个name或id属性任意值
Eg: <a name=”one”></a>
使用锚点：在查询的a标签中写#后面跟id或者name的值
Eg:<a href=”#one”></a>
11.发送邮件跳转
Mailto: 表示邮件给谁
？开始传参
参数名CC 代表抄送
参数名BCC 代表密送
参数名Subjec 代表邮件的主题
参数名body 代表邮件的主体
12.进度条标签
1）<progress></progress> IE不支持此标签
属性：
Min: 设置最小值
Max: 设置最大值
Value: 设置当前值
Eg: <progress min=”0” max=”100” value=”60%”></progress>
2）<meter></meter>定义范围内的度量
属性：
Min: 设置最小值
Max: 设置最大值
Value: 设置当前值
Low: 优化最小值
High: 优化最大值
Optimum: 良好值
Eg:<meter min=”0” max=”100” value=”60%” low=”30” high=”100” optimum=”100”></meter>
13.<img/>定义图像
属性：
Src 定义图片地址
Width 设置图片宽度
Height 设置图片高度
Alt 提示信息（图片不存在时）
Title 提示信息（鼠标移动到图片上时）
Usemap 定义为图片客户端映射，带有可点击区域的图片(写法相当于使用锚点)
Eg:<img src=”./1.jpg” width=”300” height=”300” title=”鼠标移动到图片的时候显示的字” alt=”图片不存在时显示的内容” usemap=”#wre”>
14.<map></map>定义客户端图像映射（相当于声明锚点）
Name/id 用来关联
<area/> 定义图像映射区域
Shape 定义区域的形状
Rect 矩形
Circle 圆
Poly 多边形
Default 默认值整张图
Cords 坐标值
1) 在map标签中添加name或id属性，属性值任意
2) 在usemap属性后面使用#后面跟name或id的属性值即可实现
Eg:<map name=”wre”>
<area
</map>
15.多媒体标签
1）<audio></audio> 定义声音
属性：
Src 声音的地址
Controls 播放控件
Loop 单曲循环
Autopray 自动播放
Eg:<audio src=”” controls ></audio>
2）<source></source>定义资源
<source src=””></source>备用
3）<video></video> 视频标签
属性：
Src 声音的地址
Controls 播放控件
Loop 单曲循环
Autopray 自动播放
Poster 定义视频在点击播放前显示的图像
Width
height
16.<embed/>加载多媒体一般用来加载flash
属性:
Src
Width
height
eg: <embed src=””>
注意：以上所有的多媒体都有type属性，执行媒介的类型，如果不知道可以不写

HTML表格标签
1．<table></table>
常用属性：
1) Border
2) Width
3) Height
4) Align left(默认值) right center
5) Cellspacing
6) Cellpadding
7) Background
8) Bgcolor
2 .<tr></tr>
1) Align
2) Valign top middle bottom
3) Bgcolor
4) Background
5) Height
注意：tr标签没有width属性

<td></td>
1) Align
2) Vlign
<th></th>
<caption></caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
HTML中的表单
<form></form>
常用属性：
1) Action
2) Methot
(1) GET
(2) POST
3)
<input/>
常用属性：
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

<label></label>
<input type=”submit” value=”提交”/>
= <button type=”submit”>提交</button>
= <button>提交</button>
<select></select>
常用属性：
1) Name
<option></option>
常用属性：
1) Value
注意：value定义列表项的默认值, 如果列表项中设置默认值提交时则拿默认值如果没有设置默认值，提交是获取的option标签中间的内容

2) Selected

<textarea></textarea>
常用属性：
1) Name
2) Rows
3) Cols
注意：多行文本域没有value属性，默认值写在标签texrarea中间
H5新增表单标签
<datalist></datalist> 可选数据列表
<option></option> 列表项
如何实现可选数据列表和普通文本域进行关联
在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></fieldset> 将表单内的相关元素进行分组
<legend></legend> 为fieldset定义标题
<optgroup></optgroup>为下拉列表定义分组
配合属性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框架标签
<frameset></frameset> 代替body标签定义框架页面并且定义框架页面分多少行与多少列
常用属性
cols 定义框架页含有多少列与列的大小
rows 定义框架页含多少行与行的大小(每个值使用逗号分隔，值可以是像素或者百分比 * 代表匹配所有大小)
<frame/> 定义frameset标签中每个框架页的内容
src - 定义了内容页URL
name 在一个框架页连接到另一个页面的时候使用定义名称
Iframe
<iframe></iframe> 在页面中开一块空间链接的子页面
常用属性：src
Width
height
frameborder
CSS3
CSS cascading style sheet
CSS的基本语法
1) CSS定义：由选择器、属性、属性值组成
格式：选择器{属性名：属性值; 属性名：属性值;}
2) CSS中的注释：/注释内容/
在HTML中放置css样式的几种方式
1) 内联样式表行内引用
<p style=”color:yellow”>内容</p>
2) 内嵌样式表内部引用写在head头的style标签里
<style> P{color:red;} </style>
3) 外部连接样式表外部引用
<link rel=”stylesheet” type=”text/css” href=””/>
Css文件以.css结尾
4) 引入方式<style>
@import”css文件路径”;
br/><style>
@import”css文件路径”;
注意：如果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页面中可就是只包含整个页面的<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
布局属性
<div></div>
<span></span>
布局属性
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 表示页面中的一个内容区域或者整体内容的标题
<header></header>
nav 表示连接导航部分
<nav></nav>
footer 表示整个页面或者页面中的一个内容区域的脚注一般用来他会包含作者姓名文章创建的时间或者是作者的联系方式
<footer></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 文字阴影
第一个参数必须写水平偏移值可以是负值
第二个参数必须写垂直偏移值可以是负值
第三个参数可选写模糊距离
第四个参数可选写颜色
每个参数之间都有空格隔开

html css

相关阅读