html+css语法基础

一，html5语法基础

1，<!–注释-- >，/* */注释语句(因为直接输出不会显示，所以在每个标签前都加了空格)
2，< head>< /head>头部标签，主要用来说明文件有关信息，如文件标题，作者编写时间，搜索引擎可用的关键词
3，< title>< /title>，定义了首页的标题
4，它是一个单标签，用于定义页面的基本信息，可重复出现在头部标签< head>中
< meta name=“名称” content=“值”/
5，< body>< /body>，主体部分，包括文字，表格，图像，声音和动画等
6，< h1 >< h2 >数字越小文字越大，文章标题标签
7，< p>< /p>，段落标签
8，< br/>，换行标签
9，< font> 改变文本格式
< center> ; 可直接改变文字的居中
size 尺寸数字越大字越大
face 可以设置字体的样式
arial 字体名称
comic sans ms 似手写的字体
< b>加粗
< em>< /em>,< i>< /i>斜体
< u>< /u>加下划线
10，< color> 设置字体颜色
11，< pre>< /pre>与==预格式化标签
12，< hr/>定义水平线标签
13，< ul>
< li>列表项目1< /li>
< li>列表项目2< /li>
< /ul>
无序列表
14，< ol>
< li>< /li>
< li>< /li>
< /ol>
有序列表
15，< dl>
< dt>列表项< /dt>
< dd>列表项解析< /dd>
< /dl>
16，< table>
< tr>行
< td>列< /td>
< /tr>
< /table>
注释：< table> < /table> 定义表格的开始和结束
< tr>< /tr> 定义一行标签，下一个标签就是第二行
< td>< /td> 定义单元格一个td就是一个格子下一个就是第二格
< table>的属性
bgcolor背景颜色 background 背景图像
align 表格摆放的位置 height表格高度 weight 表格宽度
border表格边框的宽度 bordercolorlight边框明亮部分的颜色 bordercolordark边框昏暗部分的颜色
cellspacing单元格之间的间离 cellpadding单元格内容和单元格边界的距离
colspan=“2”,表示合并同行的相邻两个单元格
rowspan:合并列，表示合并同列的相邻两个单元格
②表格的属性 < table frame=“” >
void 不显示表格边框
box显示整个表格边框
hsides显示上下边框 vsides显示左右边框
lhs左 rhs右 above上 below下
③< table rules=“”>
all显示所有分割线
groups 显示组与组的分割线
rows显示行与行的分割线
cols显示列与列的分界线
none 所有分界线都不显
17，< img src=“img-url” alt=“替代文字” title=“提示文字”>嵌入图像
< body background=“”> 嵌入背景图像
< embed>嵌入多媒体对象
< bgsound>背景音乐
18.< video src=“视频文件路径”>< /video>
autoplay:视频就绪后就会自动播放
controls:向用户显示控件，如播放按钮
loop:当媒体文件播放完后再次开始播放
width:设置播放器的宽度
height:设置播放器的高度
poster:加载等待的画面图片
< video controls>
< source src=“视频播放地址” type=“video/mp4”>
< /video>
19,< audio src=“音频文件路径”>< /audio>音频标签
< audio control>
< source src=“” type=“audio/mpeg”>
< /audio>
20,绝对路径：D:文件夹名/文件名
相对路径：…/img/img01
…/返回上一级
21，< div>< /div>块级元素
22,< marquee> < /marquee> 滚动字幕
属性 bgcolor 设置滚动字幕的背景颜色
属性loop 设置文字滚动次数次数太少转完设定的次数就不转了
属性scrollamount 设置滚动速度速度越大转的越快
属性hspace 设置字幕左右空白区域的大小
属性vspace 设置两个字幕上下空白区域的大小
属性direction 设置文字的滚动方向 right：从左向右 up:从下往上（先设置字幕高度height）
属性 behavior scroll表示滚动播出，slide滚动到一方后停止（一直停止）alternate：滚动到一方后反方向滚动
属性onMouseOver=“this.stop()” onMouseOut=“this.start()” 鼠标进入停止鼠标离开继续

css语法规则

1,例

h2{
font-family:宋体;
font-size:15px;
color:red;
}

2,类别选择器 .class{property:value;}
ID选择器 #id{property:value;}
通配符选择器 * 用来描述所有标签*{color:gray;}
3,内联样式，通过标签style属性来设置元素样式
< p style=“font-family:‘黑体’; color:gold;”>文字内容< /p>
4,内部样式，也称内嵌式样式表，是将css代码集中卸载html文档的< head>与< /head>之间，并用< style>标记定义

< head>
< style>
h2{font-family:'黑体'; color:gold;}
< /style>
< /head>

5,外部样式表也称链接样式表，将所有样式规则放在一个或多个以.css为扩展名的外部样式表文件中，通过< link/>标记将外部样式表文件链接到html文档中

< link rel="stylesheet" type="text/css"  href="..'css/demo/3.css"/>

6,导入样式表，与外部样式表共鞥你基本相同，知识语法不同而已

< style type="text/css">
@import url("../css/demo/css3");
< /style>

7,css文本样式

font-family：用于设置字体系列
font-size:用来设置字体大小
相对长度单位：em相当于当前字体的尺寸，px像素
绝对长度单位：in英寸，毫米，cm厘米，点
font-weight:用于定义字体粗细
normal：标准字符，
blod：加粗，bolder：更粗；
lighter：更细；
100-900：400等于normal，700等于blod
字体风格font_style
italid:显示斜体，oblique：显示倾斜的字体样式
字体变形：font-variant
small-caps:显示小型大写的字体
8，颜色规则
①预定义文本颜色color:red
②RCB(红绿蓝)：后跟3为或6为十六进制字符，3位数表示法为#RGB,6位数表示法为#RRGGBB.例如color:#ffo;,表示设置颜色为黄色
③RGBA，RGB的取值范围都是0-255，A表示颜色透明度，取值范围0-1
例color:rgba(255,100,0,0.2)也可以不设置透明度
9，字符间距，单词间距
word-spacing:10px :表示字符之间的间隔增加了10px
letter-spacing:-0.2en:表示字符之间的间隔缩小了
white-space 设置如何处理元素内的空白 normal/pre/nowrap/inherit
10，行间距 line-height
属性值单位可以是像素px，相对值em，百分比%

11，字符转换

text-transform用于控制英文字符的大小写
none不转换，默认值
capitalize首字母大写
uppercase：全部字符转换为大写
lowercase:全部字符转换为小写

12，文本装饰

text-decoration;用于设置下划线，上划线，删除线等装饰效果
none：没有装饰
underline：下划线
overline：上划线
line-through：删除线
13，水平对齐
text-align属性用于设置文本内同的水平对齐方式
left，right，center
14，文本缩进
text-indent属性用于设置段落首行文本的缩进
属性值en，字符宽度的倍数；相对于浏览器窗口宽度的百分比%（通常使用em）
15，空白符处理
white-space可以设置空白符处理方式
normal：文本中的空格，空行无效，满行后自动换行
pre：预格式化，按文档的书写格式保留的空格，空行，换行等都原样显示
nowrap：空格，空行无效，强制文本不能换行，除非遇到< /br>内容超出边界也不换行，若超出浏览器界面则会自动增加滚动条

css复合选择器机器特性

1，标记类别选择器
p{text-indent:2em;}两端文字都会应用首行缩进
p.test1{text-decoration:underline;}第二段文字会应用下划线
.test1{font-style:italic;}第二段文字应用斜体样式
2，后代选择器
两个选择器之间用空格来描述
例h1 spam{color:red;}
3，子元素选择器
描述的是某个元素的子元素，在两个选择器之间用 > 来描述
例 p > span{color:blue;}
4,兄弟选择器
相邻兄弟兄弟选择器和普通兄弟选择器
相邻兄弟选择器h1+p{color:red;}
普通兄弟选择器h1-p{color:red;}
5,根据属性名称选择元素
例img[title]{width:200px}表示带有title属性的元素
6，根据属性值选择元素
[attribute-=value]表示匹配某个属性为value的元素
[class=one]{color:red;}

css伪类

1，状态伪类
< a>< /a> 名字为< a>的属性href 为图片设置链接的名字
< a name=“xiaohua”>< /a> 为下一个< a>< /a>之前的内容设置链接名
< a href=“#xiaocao”>小草< /a> 获取链接名并为文字或图片赋予链接
< a href=“#top”>置顶< /a> 里面可以设置图片也可以设置文字，都可置顶
a:link{},未被访问过的状态
a:hover,鼠标悬停状态
a:active,活动状态
a:visited,已被访问过的状态与link互斥
hover必须被置于visited和link后才能生效
active必须被置于hover后
2，结构性伪类
:first-child 匹配父元素的第一个子元素
:last-child匹配父元素的最后一个子元素
:only-child 匹配父元素有且只有一个子元素
:only-of-type 匹配父元素有且只有一个指定类型的元素
：nth-child(n) 匹配父元素第几个子元素
例

th,td{border:1px solid}
tr:first-child{font-size:18px;} 设置第一行
tr:nth-child(2n+1){background-color:aliceblue;} 设置单数行

3，css伪元素
：first-letter,选择元素文本的第一个字母
：first-line 选择元素文本的第一行
: before,在元素内容的最前面添加新内容
：after，在元素内容的后面添加先内容
例

h1:before{content:url(../img/2.ipg);}
p:first-letter{color:red;font-size;24px;}

css特性

1,css的继承性
子元素继承父元素部分的css样式风格
子元素可以产生新的css样式，不会影响父元素
父元素的以下属性就不会被继承
边框属性；
外边距属性，内边距属性
背景属性；
定位属性，布局属性
元素宽，高属性
2，css的层叠性
是指将多种css样式叠加在同一个元素上，层叠既包括来自同级元素的样式的层叠，还包括由于继承性引起的样式层叠。
3，css的优先级
①引用样式表的优先顺序，优先级的顺序内联样式>内部样式>外部样式
②继承性的优先级，自定义样式>最近祖先>其它祖先
③选择器的优先级
!important>内联样式表>ID选择器>类选择器>标签选择器>继承样式
h1{color:blue!impotrant}
④其它选择器的优先级
属性选择器=伪类选择器=类别选择器
伪元素选择器=标签选择器。

css盒子模型

1，元素的宽度和高度
指的是内容区域即content的宽度和高度

2，盒子的边框border
例

< div class="main">< /div>
.main{
Border-top:10px double #300
Border-right:1px dshed #000
Border-bootom:10px double #300
Border-left:1px dashed #000
margin:0 auto;
}

3,背景属性

background-repeat用来设置背景图像是否平铺及平铺的方式
repeat：沿水平和竖直两个方向平铺
no-repeat：不平铺，图像位于元素的左上角，只显示一次。只有在no-repeat下，图片的定位属性才有用
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺
4，background-position，用于改变图像在背景中的位置
背景图像默认从元素的左上角开始平铺
①例background-position:160px 80px;
表示距离x轴和y轴的长度
②用百分比来表示
③方位关键字，top，bottom，right，center
5，background-attachment，用于改变默认的背景图滚动模式
background-attachment:scroll;默认设置，背景图像随文档一起滚动。
background-attachment:fixed;背景图像固定于窗口的相对位置。
注意:fixed是相对于父级元素定位的，一旦设置了该属性值，background-position的坐标原点就不再图像元素的左上角，而是其父元素的左上角
6，其它背景属性
background-size:设置背景图像的尺寸
background-origin:设置背景图像的定位区域
background-clilp:设置背景图像的绘制区域
7，background-size属性
length，background-size:300px 400px; 根据设置的尺寸显示背景图像
percentage background-size:50% 60%; 以父元素的百分比来设置背景图像的宽度与高度
cover background-size:cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain background-size:contain; 把背景图形扩展至最大尺寸，以使其宽度或高度完全适应内容区域
8，background-origin 用于设置背景图像的定位区域
Background-origin: padding-box/border-box/content-box;
padding-box:默认值，背景图像相当于内边距框来定位
border-box:背景图像相对于边框盒来定位
content-box:背景图像相对于内容框来定位
9，background-clip 用于设置背景图像的绘制区域
例background-clip: padding-box/border-box/content-box;
10,注意区别：
background-clip，该属性制定了背景在那些区域（边框，内边距或内容）可以显示，但与背景开始绘制的位置无关；background-origin,该属性指定了背景从哪个区域（边框，内边距或内容）开始绘制，可以用这个属性在边框上绘制背景，但边框上的背景是否显示出来就要由background-clip来决定了。
11，css允许为元素设置多个背景
例background:url(…/img/1.png) top left,url(…/img/2.png)bottom right
12,元素的分类
①块元素(block)
常见块元素：< p>,< ul>,< div>
可以对其设置宽度，高度，对齐方式等属性，如不设置，将继承父元素的宽度
②行元素（inline）
常见行元素< a>,< em>,< strong>,< span>
不可以对其设置宽度等属性，常用于控制页面的文本样式
③行块元素(inline-block)
< img>< input>等
可以对其设置宽度，高度，对齐方式等属性
13，display属性
none：此元素不会被显示，一般用于隐藏元素
block:转换为块元素，此元素前后会有换行符
inline：转换为行元素，元素前后没有换行符
inline-block：转换为行块元素

14,列表属性

15，表格属性

16，浮动属性

浮动与定位

1,浮动简介
浮动利用float属性使元素脱离文档流，并定义元素向左享有浮动，当元素的外边缘遇到父元素的边框或另一个浮动元素的边框为止
例selector{float: left/right/none/inherit}
.box1{float:left}
2，clear属性,清除浮动影响而提供的属性
Clear: left/right/both;
3，overflow属性，用于规定当内容溢出元素框时溢出的内容如何处理
visible 默认值，溢出的内容会呈现在元素框之外
hidden 内容会被修剪，并且其修剪掉的内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看内容
inherit 规定应该从父元素继承overflow属性的值
4，after伪元素
利用after伪元素和添加空标记的原理类似，但又不会破坏html原文档的结构，对父元素container添加after伪元素

.container:after{
Clear: both;
Content:;
Display: block;
width:0;
height:0;
Visibility: hidden;
}

5,定位
static: 静态定位，默认值
relative: 相对定位，相对于其原标准流中的位置进行定位。
absolute: 绝对定位，相对于最近一个已经定位的父元素进行定位
fixed: 固定定位，相对于浏览器窗口进行定位。
6，z-index层叠
所有元素值都默认为0；z-index属性仅对定位元素有效；
z-index取整数值时，值越大，定位元素在层叠元素中越居上
z-index:用于设置目标对象的定位层序，数值越大，所在的层级越高覆盖在其他层级之上，该属性仅在position:absolute时有效。其默认值时auto，堆叠顺序与父元素相同。

<div cllass="con">定义外围容器
<header class="header"></header>定义页眉
<nav class="nav"></nav>定义导航
<aside class="liftside"></aside>定义左侧边栏
<section class="section"></section>定义主体
<aside class="rightaside"></aside>定义右侧边栏
<footer class="footer"></footer>定义页脚
</div>

表单的制作与美化

1,创建表单
< form action=“url地址” method=“提交方式” name=“表单名称” autocomplete=“novalidate”>各种表单控件< /form>
action属性：在表单手机到信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址
例如< form actioon=“login.php”>表示表单数据收集后提交给login.php这个程序进行处理
method属性：用于设置表单数据的提交方式，其取值为get或post
get为默认值，使用这种方式提交的数据将显示在浏览器的地址栏中，保密性差，对浏览器容量有限制。
post方式保密性好，并且无数据量的限制，使用method=“post”可以大量地提交数据。
name属性用于指定表单的名称，以区分同一个页面中的多个表单。
autocomplete属性用于指定表单是否有自动完成功能。即通过表单控件输入的内容记录下来，当再次输入时，会将输入记录显示在一个下拉列表里，即可通过选择完成输入。
on：表单启用自动完成的功能
off：表单关闭自动完成地功能
novalidate:指定在提交表单时取消对表单进行有效地检查，即关闭对表单的验证，可用于调试程序。

input控件及属性

1，基本语法格式为< input type=“类型”/>,type是必选项
属性值属性值描述
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
hidden 隐藏域
file 文件域
email E-mail地址的输入域
url URL地址的输入域
number 数值的输入域
range 一定范围内数字值的输入域
date pickers(date,month,week,time, datetime,datetime-local) 日期和时间的输入类型
search 搜索域
color 颜色输入类型
tel 电话号码输入类型
name 自定义控件的名称
value 自定义控件的默认值
size 正整数控件在页面中的显示宽度
readonly readonly 该控件内容只读
disabled disabled 禁用该控件（显示为灰色）
checked checked 定义该控件默认被选中
maxlength 正整数控件允许输入的最多字符数
autocomplete on/off 开启／关闭自动完成功能
autofocus autofocus 页面加载时是否自动获取焦点
multiple multiple 指定输入框是否可以选择多个值
id 自定义表单控件的id号,在表单中唯一
min、max和step 数值规定输入框的最小值、最大值和步长值
pattern 字符串定义正则表达式，验证内容是否与正则表达式匹配
placeholder 字符串为input类型的输入框提供一种提示信息
required required 规定输入框的内容不能为空
提示:input控件是inline-block元素。一行排列,可以设置width、height。
例如

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>input基本类型</title>
</head >
<body >
<form action="#"method="post">
<!--text单行文本输入框,默认值张三,最多可以输入20个字符, id为name-->
用户名:<input type ="text"id="name"value="张三"maxlength="20"><br/>
<!--password密码输入框,最多可输入20个字符, id为psd-->
密码:<input type ="password"id="psd"size="20"><br/>
<!--radio单选按钮, name的取值必须相同,默认被选中的是男-->
性别:<input type="radio"id="man"name ="sex"checked="checked"/>男
<input type ="radio"id="woman"name="sex"/>女<br/>
<!--checkbox复选框-->
兴趣:<input type ="checkbox"/>唱歌<input type ="checkbox"/>跳舞
<input type ="checkbox"/>游泳<br/>
<!--file文件域-->
上传头像:<input type ="file"/><br/>
<!--button普通按钮-->
<input type ="button"value ="普通按钮"/>
<!--submit提交按钮-->
<input type ="submit"value="提交"/>
<!--reset重置按钮-->
<input type ="reset" value="重置"/>
<!--image图像按钮-->
<inputtype="image''sxC="images/but.jpg"/>
</form >
</body>
</html>

2,< input type=“checkbox”/>
复选框常用于多项选择，如兴趣爱好等，可应用checked属性，默认选中项
3，< input type=“file”/>
当定义文件域时，页面中将出现一个文本框和一个浏览按钮，用户可以通过填写文件路径或直接选择文件地方式，将文件提交给后台服务器。
4，< input type=“email”/>
email类型是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合邮件地址格式。如果不符合，将提示相应地错误信息。
5，< input type=“url”>
用于输入url地址的文本框。如果输入地不符合将会不允许提交，并且会有提示信息。
6，< input type=“search”/>
是一种专门用于输入搜索关键词地文本框，它能自动记录一些字符，如站点或搜索或者google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标可以快速清除内容。
7，number类型< input type=“number”/>
value：指定输入框的默认值
max：指定输入框可以接受的中最大的输入值
min：指定输入框可以接受的最小的输入值
step：指定输入与合法的间隔，如果不设置，默认值是1.
8，range类型 < input type=“rang”/>
用于提供一定范围内数值的输入范围，在网页中显示为滑动条。通过min和max来设置最小和最大值。通过step来指定每次滑动的步幅。
9，其他属性
randonly="readonly"只读属性
disabled="disbled"属性控件禁用，被禁用的控件元素是无法使用和选中的，外观为灰色
autofocus="auutofocus"属性，控件是否自动获取焦点
multiple="multiple"属性，指定输入框可以选择多个值，常适用于email和file类型的input元素。表示可以输入多个email地址，多个地址之间通过逗号隔开；multiple属性用于file时可以选择多个文件。
10，placeholder属性
用于为input类型的输入框提供相关信息，以描述输入框期待用户输入何种内容。当输入框为空时显示出现，而当输入框获得焦点时则会消失。
11，requered="required"属性
html5中的输入类型不会自动判度胺用户是否在输入框中输入了内容，如果开发者要求输入框中的内容是必须填写的，那么需要为input元素指定为required属性。required属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。
12，其它表单控件
label标记控件，一般提示信息会用label标记来定义
select控件，浏览网页时，经常会看到包含多个选项的下拉列表，html使用select控件定义下拉列表，其基本语法格式如下：
< select>
< option>选项1< /option>
< option>选项2< /option>
< option>选项3< /option>
< option>选项4< /option>
< /select>
textarea控件，可以创建一个单行文本输入框