CSS
css是为了修饰html的
CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
命名规则：使用字母、数字或下划线和减号构成，不要以数字开头
格式： 选择器{属性:值;属性:值;属性:值;....}
CSS中注释：/* ... */
html中嵌入css的方式三种,1行内,2内嵌3外部链入
行内样式,简单的说就是写在html标签中的样式,一般项目不用,看起来太乱
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签。
内嵌样式,简单的说就是用一对<style>写在<head>标签内的那种样式
格式：<style type="text/css">
选择器{属性:值;
属性:值;
属性:值;}
</style>
特点：作用于当前整个页面
外部链入,简单的说就是是在html文件外写一个专门的css文件,再用<link>标签链接到html内.
（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置
格式：<link href="文件名.css" rel="stylesheet"/>
还可以使用import在style标签中导入css文件。
如：<style>
@import "style.css";
</style>
选择器(又叫选择符)
基本，关系，属性，伪类，结构型伪类选择器,属性选择器
总结选择器有很多很多,但是要记住学习的目的是为了做出效果更简单,所以不用记太多,用的时候找到相同点或者创造相同点最好
基本选择器包含
标签选择器,类选择器,id选择器
标签选择符
把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
类选择符
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用
id选择器
定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次.与类选择器的区别就在这,另外,类选择器 前面要加 点. id选择器要加#号
* 通配符
*{}
注意星号表示所有的标签,其中*{
padding:0px;
margin:0px;
}表示去除浏览器自己加的留白部分
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
关系选择器
关联选择器,组合选择器
关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{属性名 : 值;}
例如： table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
5. 组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{属性名 : 值 ;}
h3,h4,h5,#one,.one{color:green;}
关联选择器和组合选择器的区别
关联的是选择符至少两个,且两个有关系,因为标签是可以层层嵌套的,所以一般用来表示这种关系,例如,一个段落<p>标签里有一个斜体标签,为了更加突出斜体部分的重要性,要加一个要加红颜色,这个时候就可以写成
p clit{color:red;}
组合选择器可以是几个没有关系的标签或者其他都要实现同一种效果,才用到,组合选择器的选择符用逗号隔开,不分先后的顺序.
关联选择器标签的前后顺序不能乱,且中间不能有逗号,只用空格分隔
伪类
伪类选择器
格式： 标签名:伪类名{属性名:值;}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
伪类选择器很好辨认,标签名:伪类名{样式;}
结构性伪类选择器：
::first-letter设置对象内的第一个字符的样式。
::first-line设置对象内的第一行的样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。
:lang(language)匹配使用特殊语言的E元素。
:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素
:only-of-type匹配同类型中的唯一的一个同级兄弟元素
:only-child匹配父元素仅有的一个子元素
:nth-child(n)匹配父元素的第n个子元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
:last-child()匹配父元素的最后一个子元素
:root匹配元素在文档的根元素。在HTML中，根元素永远是HTML
:empty匹配没有任何子元素（包括text节点）的元素
状态伪类选择器
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
属性选择器
很好辨认,标签名称[属性名]
注意,如果属性可以给一个值,也可以不给值,也可以对属性值进行条件限制
/*所有拥有type属性的input标签有此样式*/
input[type]{
color:blue;
}
/*拥有type属性且值为password的input标签有此样式*/
input[type="password"]{
color:red;
}
/*拥有name属性且值以ua开头的input标签有此样式*/
input[name^="ua"]{
color:pink;
}
CSS中常用的属性
color颜色属性 ,字体属性font 文本属性text 边框border 背景属性background 内补白（内补丁)padding 外补白（外补丁）margin
颜色color,这个颜色以后用取色器十六进制就行,下面的基本上是废话
color颜色属性：
a. HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.
background-color: hsl(240,100%,50%);color:white；
b. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
background-color: rgba(200,100,0);
d. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图片透明度的设置 img.opacity{ opacity:0.25;}
字体font
font-size:字体的大小,单位有px和em,一个em表示一个字符
font-family:设置字体风格,他的值可以用汉字.,多个字体用逗号隔开,(font-family:儿童卡通字体,楷体,黑体;)原因是一些特殊的字体有的电脑加载不出来,写多个可以有备用的选项,优先顺序是从左到右.
font-weight:设置字体的粗细.
font-style:设置字体的样式,normal正常,italic斜体.
font-variant:samll-caps;设置小型的大写字母.
大招,所有的属性写到一个里面顺序是
font:style(样式) variant(字母大小写) weight(粗细) size(大小) family(样式).
文本属性 text
text-indent:设置首行缩进,值是(数字+em),一个em表示一个字符(关于文字的有两个,em是一个px也是一个).
letter-spacing:设置字符之间的距离,值是(数字+px).
word-spacing单词间距
line-height:设置行与行之间的间距(行高),值是(数字+px).这一行代码与text-align:center;配合可以得到文字居中.
text-decoration:当值为none设置a链接下划线不显示.当值为underline则下划线显示 line-through贯穿线
text-align:设置文本的对齐方式,值有left,center,right
text-shadow:设置文本的阴影.值有四个,都是数字加px,依此是1,相对于X轴的偏移量 2相对于Y轴的偏移量 3阴影虚化程度 4阴影颜色
text-overflaw:文本溢出显示省略标记(....)clip或ellipsis
vertical-align设置文本垂直对齐的方式
color:字体的颜色
边框 border 边框的样式有三个,依此是宽度width 样式style 颜色color
border-color:设置颜色的值,十六进制或者单词都可以
border-方位词-color:设置某个边框的颜色,方位词是left,right,top,bottom
border-width:设置边框的宽度,值是数字加px.
border-方位词-width:设置边框的四个的任意一个
border-style:设置边框的样式,solid是实线 dotted是点状线 dashed虚线 当值为ridge时,是一个3D的边框样式
border-方位词-style:设置边框任意一边的样式
border-radius:设置边框半径,一般设置角的样式用到,设置圆角,当框的半径值为边框的一边长时,视觉效果就会是一个圆,所以可以用这个来画圆,注意,当值为一个时,他是直接设置四个角,当为两个值时,设置的是对角,当为四个值时,设置的是四个角,依此顺序是左上,右上,右下,左下
背景 background
background-color:设置背景的颜色可以是十六进制或者单词
background-size:100%;设置背景显示是100%;
background-repeat:设置背景是否平铺,当值为no-repeat设置背景不平铺.
默认是平铺, (repeat-x背景图像将在水平方向重复)
(repeat-y背景图像将在垂直方向重复)
background-image:设置背景图片,值为url("一个路径");默认是平铺的.
background-attachment:设置背景是否随着滑轮滚动,scroll为滚动,fixed为不滚动.
大招,设置背景属性的
background:颜色color 图片url(路径) 平铺repeat 滚动attachmeat 定位position
多层背景的实现:本质上是
内补白padding 和 外补白margin
padding是设置内边距的,(值为数字+px),加了padding的div会改变原大小,变大,可以运用这个原理给div加padding撑大,达到想要的效果.
padding-方位词:可以设置单独以个边的内边距;方位词上下左右.
padding:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
padding值为四个的时候,依此设置的是上右下左.
margin是外边距,值为(数字+px),加了margin的div不会改变原大小,会把外面撑开.达到想要的效果.
margin-方位词:可以设置单独以个边的内边距;方位词上下左右.
margin:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
margin值为四个的时候,依此设置的是上右下左.
*{
margin:0px;
padding:0px;
}这个代码是去除浏览器默认留白的
设置div左右居中margin:0px auto;如果让第一个值为auto,第二个值为0px,则表示左右占满,上下居中,在开发中没有什么意义,没有这样设计的.
padding若是想撑开宽度的时候可以设置连个值,第一个为0,第二个为要加的高度的一半.(撑开高则相反)
div与span,
div就是一个块装元素，就是一个盒子，一个容器，盒子有宽高来控制大小，里面可以存放你想存放的内容，但是他是一个占据一整行，控制宽高
div盒子
box-shadow:设置盒子的阴影,共四个数值1沿X轴的偏移量 2沿Y轴的偏移量 3虚化程度 4颜色,当值为none时,表示无阴影效果
鼠标移入的单词是hover
浮动float 和定位position
Layout布局
position定位
绝对定位:绝对定位就是让你相对于整个浏览器的左上角为初始点,然后设置与初始点的距离,画一个有宽有高的div,设置绝对定位的步骤,1.position:absolute;这句就是设置当前的div盒子为绝对定位.2.设置绝对定位盒子的位置left:100px;top:200px;3.设置盒子div的宽和高.
相对定位:相对定位是根据父窗体来做的一个定位,父窗体可能也是一个div,相对定位的初始点是父窗体的左上角,设置的步骤1./*设置小盒子的定位为相对定位*/position:relative; 2./*设置小盒子相对移动的位置*/left:20px;top:20px;(注意这里是用的left和top配合定的位,也可以right和bottom配合定位) 3.设置盒子div的宽和高.
固定定位:一般是设置一个图片固定在网页的某个位置,不随滚轮而滚动,设置的步骤是position:fixed;
right:0px;
bottom:300px;
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
注意：
绝对定位会让div盒子脱离当前文档流，自己进入一个维度，此时，我们可以使用left、top或right、bottom
来对脱离文档流的div盒子进行位置的设置，它会相对与当前的整个窗体来进行移动；
相对定位会让div盒子相对于它的父级元素进行移动，它原来的位置还保留，同时，它只能通过left或top
进行位置的设置，而不能使用right和bottom进行位置的定义
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
float浮动
浮动的原理:首先网页上的标签都是排列在网页上的,自上而下,占用了水平的空间,而浮动是占用的垂直空间,设置了float的div会浮到其他容器标签的上面,挡住下面的东西.浮动一般都是为了横向排列,所以一般会有一个float:left和float:right,
一旦div浮起来,他后面的不浮起来的话就会跑到浮起来的下面.这个时候就需要清除浮动,可以只清除左浮动,clear:left;也可以清除右浮动clear:right;也可以同时清理两种浮动,clean:both;
layout 布局
Layout布局
*display： 是否及如何显示：none隐藏，block块状显示...*作用三：让行内元素变为块级元素*/
/*display:block;*/
*float: 指出了对象是否及如何浮动:值none | left | right
*clear： 清除浮动：none | left | right | both两侧
visibility：设置或检索是否显示对象。visible|hidden|collapse。
与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隐藏：hidden，visible：不剪切内容
overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y：内容超过其指定高度时如何管理内容
鼠标 样式
css---html
HTML
基础 HTML的格式 <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
1. <!doctype html>意思是告诉浏览器当前文档的类型是一个html文档,让浏览器解析. 2. 所有的标签都必须包含在两个<html>标签中. 3. <head>标签的内容应该是不显示在网页中的,(不是不鞥显示,而是逻辑上不应该显示)他是对当前文档的一些修饰,定义搜索引擎用的. 4. <body>标签是显示网页的主题内容.
双标签:需要使用自己的标签加上斜杠来结束,例如<html></html> 单标签:必须子午结束,例如<meta />
标签可以嵌套在一起,属于包含关系,标签有属性,属性有不同的值.属性和值可以写在标签内,一个标签可以有多个属性,属性也可以有多个值,html中的标签是不区分大小写的,语法格式是 <标签名 属性名1="属性值1" 属性名2="属性值2" ....>被标签包裹的内容</标签名>
实体内容 1. 表示空格 2. <表示尖括号的左边<,可以当做lift的缩写. 3. >表示尖括号的右边>,可以当做是right的缩写
<head>标签内的内容<title></title>这是一个双标签,是网页中的标题,它的值就是在浏览器打开一个网页的时候的标题.2. <meta />是一个单标签,一般设置当前页面的编码格式,例如<meta charset="utf-8" /> 3. <link />标签是一个单标签,一般是为了链接一些外部的文件,例如<link rel="定义链入文件与当前文件的关系" href="定义链入文档的路径,一般用相对路径表示" />
重点 路径一个点表示当前路径,例如 ./test.html 表示当前目录下的test.html文件,两个点表示上一级路径,例如 ../hello.java 表示上一级目录下的hello.java文件.上上一级用 . ./. ./qing.php 每多一级就加两个点,一个斜杠
<meta http-equiv="refresh" content="3,www.baidu.com" />表示每三秒刷新一次,刷新之后跳转到百度
弹框 alert('弹得内容');
html标签中的颜色可以用16进制的格式表示,例如<b color="#fffffff">这个标签的颜色是用#号加六个数字来表示的</b> 颜色也可以用英文表示,例如<u color="red">U标签内的内容被设置为了红色</u>
在html代码中,空格和回车是不起作用的,
重点 html中的常见标签,<head>中包含的常见标签有,<link><meta><script><style><title>
<meta charset="utf-8"/>设置的是编码格式
<meta name="keyboard" content="当name等于keyboard时,是设置给搜索引擎关键字用的"/>
<meta name="description" content="当name属性的值为description时,content的内容就是关于网页的介绍"/>
<meta name="revised" content="小王,
2017年3月2日09:55:00" 当name值为revised时,content中的内容是为了版权,会显示一些作者名称和更新时间/>
<meta http-equiv="refresh" content="3,
http://www.bing.com" 当http-equiv属性的值是refresh时,会定时更新网页,content中的逗号前的数字是每多久更新一次,单位是秒.逗号后的内容是一个网站链接,更新之后会跳转到另外的一个网站/>
<link> 标签最常见的用途是链接样式表。
<link rel="stylesheet" href="./css.css" type="text/css"/ 引入一个外部的层叠样式表, rel定义当前文档与被链接文档之间的关系。href的值是一个url,定义被链接文档的位置。type这个属性和它的值可以不写>
<link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/ 这个是设置标签上的小图标的代码,rel的值是shortcut icon. href是小图标所在的路径,type是 类型/后缀类型,type属性可以不写>
标签<script> 标签用于定义客户端脚本，比如 JavaScript,例如<script src="1.js">这是一个从外部引入的javascript文件,利用js里的内容来达到想要的效果</script>
<script>alert('欢迎来到lamp183班期');</script>也可以直接在两个标签中间加上内容达到自己想要的效果,不过这样代码看起来会很多,不简洁,所以一般都用来引用js的效果
<style>标签是双标签,主要是引用css样式来给网页做修饰达的,例如<style>font{color:red;}</style>这种是不常用的,一般为了代码的简洁,会把样式信息写到css文件中,然后再引用.
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>这个是直接在<head标签内写入css,只针对h1标签和p标签来修改样式>
<link rel="stylesheet" type="text/css" href="theme.css" 是直接从外部链接一个css文件./>
<title>title是定义网页的标签</title>
网页的主体部分<body>常见的标签,这些是文本标签<font><h><p><b><stong><i><cite><em><u><sup><sub><q><abbr><bdo><del><details><summary><dialog><ol><ul><li><pre>
<font> 规定文本的字体、字体尺寸、字体颜色。
<font face="verdana" size="6" color="red">这是一行红色,大小为6的,字体为最一般的那种的字</font>
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<p>两个p标签之间的内容是一个段落</p>
<b>标签和<stong>标签都是加粗标签,但是<stong>标签加粗强调的作用，SEO可以着重抓取到的内容.
<i>和<cite>是普通的斜体,<em>是具有强调作用的斜体
<sub>和<sup>是下标签和上标签,都是双标签,一般用在化学方程式和2的平方的表示.记忆方法,b的口在下是下标签,p的口在上是上标签
<u> 标签定义下划线文本。
<q> 标签定义一个短的引用。q标签是一般引用别人的话,效果是双引号
<bdo>标签是定义文档的输出方向<bdo dir="ltr">正大光明</bdo>效果是倒序输出,
<abbr>标签是表示缩写,在浏览器中,鼠标放上去显示全称,<abbr title="鼠标放上显示的全称部分">网页内的缩写</abbr>
<del>标签包裹的文字的中间会出现一条横线,<del>海波老师？</del>一般表示去世的人和错误的地方
<details>是双标签显示出来的效果是一个下拉框,需要与<summary>标签配合使用,summary标签是下拉框中的选项.
代码如下:<details>
<summary>下拉框标题</summary>
下拉框的选项1<br/>
下拉框的选项2<br/>
下拉框的选项3<br/>
</details>
<dialog>标签表示的是对话框标签,可以显示对话的格式,还要配合<dd>和<dt>标签,<dt>dt包裹住对话人</dt> ,<dd>dd包裹住对话人的说话内容</dd>,<dialog>包裹着所有的dt和dd标签。
<!--对话标签-->
<dialog>
<dt>男：</dt><dd>我们分手吧~~</dd>
<dt>女：</dt><dd>为什么？</dd>
<dt>男：</dt><dd>我怀孕了~~</dd>
<dt>女：</dt><dd>不，不可能，我不相信……</dd>
<dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>
<dt>女：</dt><dd>…………</dd>
</dialog>
有序列表和无序列表<ol>表示有序列表.有序类表有一个type属性,属性值不同可以显示出的123,abc等排列顺序的字.<ul>表示无序列表也有一个type属性,但是多个值显示出来的效果是一样的. 注意,列表要借助<li>标签来进行分,谁是第一个,谁是第二个例如
<!--有序列表-->
<ol type="A">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ul>
<pre>标签表示格式化输出,首先,html中的空格和回车是不显示出来的,但是用这个标签包裹的内容可以将空格和回车的效果输出显示
html的注释<!--填写的注释内容-->
<hr/>是水平线,<br/>是换行
链接标签 <a> 锚点
定义和用法
<a> 标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
<a href="#one">第一章：三打白骨将</a><br/>
<a href="#two">第二章：倒拔垂杨柳</a><br/>
<a href="#three">第三章：火烧赤壁</a><br/>
<a href="#four">第四章：刘姥姥进大观园</a><br/>
<h2><a id="one"></a>第一章：三打白骨将</h2>
<h2><a id="two"></a>第二章：倒拔垂杨柳</h2>
<h2><a id="three"></a>第三章：火烧赤壁</h2>
<h2><a id="four"></a>第四章：刘姥姥进大观园</h2>
锚点的原理很简单,定义几个a标签,把要跳转的id号码给他,然后通过这个id就能找到要链接到的位置
定义和用法
<a> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
<!--链接到了一个外部的网站-->
<a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>
注意:href属性是值可以是一个网址,可以是一个绝对路径,可以是一个相对路径,这个属性值就是一个url地址.
target属性的值1._blank在新窗口中打开被链接文档。
2._self默认。在相同的框架中打开被链接文档。
3._parent在父框架集中打开被链接文档
4._top,在整个窗口中打开被链接文档
5.framename在指定的框架中打开被链接文档
多媒体相关标签,<img><map><area><audio><video><source><canvas>
<embed>
热区绘制的步骤：
1.img标签引入一张图片，注意，图像需要时原大小
2.给img标签一个usemap属性，使用一个地图区域
3.然后使用map定义一块地图区域，注意，map需要给定id
4.使用area定义一个图形的图区
<img src="这个位置是一个图片文件的路径" usemap="usemap是img标签的一个属性,表示将图像定义为客户器端图像映射。这里是一个id地址,#id名称,手册上显示的是这个位置是一个url地址"/>
<map id="map标签要与img标签配合在一起才能制作热区,这个是为了给指定的区域设置一个id,名字随便写">
<!-- <area shape="图形的名称" coords="图形的坐标点"
οnclick="这里是在监听,鼠标点了之后给一个触发事件"/> -->
<area shape="circ" coords="332,278,130"
οnclick="alert('别看了，再看嫁给你！')"/>
</map>
<img />：图像标签
属性： 值：
src： 引入图像的路径
width： 设置图像的宽度(单位：像素px)
height： 设置图像的高度(单位：像素px)
alt： 图像加载失败时显示的信息
title： 鼠标移入图像时的提示信息
<area />标签
属性 值
shape 形状,值有矩形rectangle,圆形circle,多边形polygon
coords 坐标,圆有三个坐标,原点占两个点,半径占一个长度,
矩形是对角两个点的坐标,
多边形是有几个角,就写几个点的坐标
屏幕坐标是从左上角开始的.
<audio>标签
音频标签：audio
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放音频
border： 数字 边框线粗细
<audio controls src="给一个音频标签的文件地址就行" autoplay ></audio>
<video>视频标签
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放视频
height 高度
width 宽度
<video width="视频款显示出来给一个宽度" controls src="给一个视频文件所在的路径" poster="这个是封面,需要给一个图片的地址路径" ></video>
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
属性 值
media media query 定义媒介资源的类型，供浏览器决定是否下载
src url 这里写的是一个视频或者音频的地址
<!--引入一个外部插件-->
<!-- <embed src="haowan.swf" /> -->
表格相关标签,<table><caption><th><tr><td><thead><tbody><tfoot>
<table>标签
table表格：
属性： 值： 含义：
border: 像素值(px) 设置表格边框粗细的
width: 宽度(px) 设置表格的宽度
height: 像素 设置表格的高度
cellspacing： 像素 设置单元格和单元格之间的间距
cellpadding： 相许 设置单元格中的值和单元格边框之间的间距
table中的标签：
caption标签：标题标签
th标签：表头标签(字体加粗，默认居中)
tr标签：表格中的一行
属性： 值：
align： 对齐方式(left、center、right)
td标签：表格中的一个单元格
属性： 值：
rowspan： 合并行
colspan： 合并列
align： 对齐方式(left、center、right)
表单相关标签<form><input><select><option><textarea><button>
<form>标签
<form></form> --表单标签
form标签常用属性：
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.HTML5不支持。用 id 代替。
<input>标签
<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
<input/> 表单项中的属性，可以提供
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性:表单项名,用于存储内容值的
*value属性:输入的值(默认指定值)
size属性:输入框的宽度值
maxlength属性:输入框的输入内容的最大长度
readonly属性:对输入框只读属性
*disabled属性:禁用属性
*checked属性:对选择框指定默认选项
accesskey属性:指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性:通过数字指定tab键的切换顺序(不常用)
<select>下拉列表标签
<select> 标签创建下拉列表。
*name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
<textarea>标签文本域
<textarea> 多行的文本输入区域
*name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。
*rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读
...
默认值是在两个标签之间
<button>标签
按钮 您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
CSS
css是为了修饰html的
CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
命名规则：使用字母、数字或下划线和减号构成，不要以数字开头
格式： 选择器{属性:值;属性:值;属性:值;....}
CSS中注释：/* ... */
html中嵌入css的方式三种,1行内,2内嵌3外部链入
行内样式,简单的说就是写在html标签中的样式,一般项目不用,看起来太乱
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签。
内嵌样式,简单的说就是用一对<style>写在<head>标签内的那种样式
格式：<style type="text/css">
选择器{属性:值;
属性:值;
属性:值;}
</style>
特点：作用于当前整个页面
外部链入,简单的说就是是在html文件外写一个专门的css文件,再用<link>标签链接到html内.
（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置
格式：<link href="文件名.css" rel="stylesheet"/>
还可以使用import在style标签中导入css文件。
如：<style>
@import "style.css";
</style>
选择器(又叫选择符)
基本，关系，属性，伪类，结构型伪类选择器,属性选择器
总结选择器有很多很多,但是要记住学习的目的是为了做出效果更简单,所以不用记太多,用的时候找到相同点或者创造相同点最好
基本选择器包含
标签选择器,类选择器,id选择器
标签选择符
把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
类选择符
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用
id选择器
定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次.与类选择器的区别就在这,另外,类选择器 前面要加 点. id选择器要加#号
* 通配符
*{}
注意星号表示所有的标签,其中*{
padding:0px;
margin:0px;
}表示去除浏览器自己加的留白部分
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
关系选择器
关联选择器,组合选择器
关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{属性名 : 值;}
例如： table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
5. 组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{属性名 : 值 ;}
h3,h4,h5,#one,.one{color:green;}
关联选择器和组合选择器的区别
关联的是选择符至少两个,且两个有关系,因为标签是可以层层嵌套的,所以一般用来表示这种关系,例如,一个段落<p>标签里有一个斜体标签,为了更加突出斜体部分的重要性,要加一个要加红颜色,这个时候就可以写成
p clit{color:red;}
组合选择器可以是几个没有关系的标签或者其他都要实现同一种效果,才用到,组合选择器的选择符用逗号隔开,不分先后的顺序.
关联选择器标签的前后顺序不能乱,且中间不能有逗号,只用空格分隔
伪类
伪类选择器
格式： 标签名:伪类名{属性名:值;}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
伪类选择器很好辨认,标签名:伪类名{样式;}
结构性伪类选择器：
::first-letter设置对象内的第一个字符的样式。
::first-line设置对象内的第一行的样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。
:lang(language)匹配使用特殊语言的E元素。
:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素
:only-of-type匹配同类型中的唯一的一个同级兄弟元素
:only-child匹配父元素仅有的一个子元素
:nth-child(n)匹配父元素的第n个子元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
:last-child()匹配父元素的最后一个子元素
:root匹配元素在文档的根元素。在HTML中，根元素永远是HTML
:empty匹配没有任何子元素（包括text节点）的元素
状态伪类选择器
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
属性选择器
很好辨认,标签名称[属性名]
注意,如果属性可以给一个值,也可以不给值,也可以对属性值进行条件限制
/*所有拥有type属性的input标签有此样式*/
input[type]{
color:blue;
}
/*拥有type属性且值为password的input标签有此样式*/
input[type="password"]{
color:red;
}
/*拥有name属性且值以ua开头的input标签有此样式*/
input[name^="ua"]{
color:pink;
}
CSS中常用的属性
color颜色属性 ,字体属性font 文本属性text 边框border 背景属性background 内补白（内补丁)padding 外补白（外补丁）margin
颜色color,这个颜色以后用取色器十六进制就行,下面的基本上是废话
color颜色属性：
a. HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.
background-color: hsl(240,100%,50%);color:white；
b. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
background-color: rgba(200,100,0);
d. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图片透明度的设置 img.opacity{ opacity:0.25;}
字体font
font-size:字体的大小,单位有px和em,一个em表示一个字符
font-family:设置字体风格,他的值可以用汉字.,多个字体用逗号隔开,(font-family:儿童卡通字体,楷体,黑体;)原因是一些特殊的字体有的电脑加载不出来,写多个可以有备用的选项,优先顺序是从左到右.
font-weight:设置字体的粗细.
font-style:设置字体的样式,normal正常,italic斜体.
font-variant:samll-caps;设置小型的大写字母.
大招,所有的属性写到一个里面顺序是
font:style(样式) variant(字母大小写) weight(粗细) size(大小) family(样式).
文本属性 text
text-indent:设置首行缩进,值是(数字+em),一个em表示一个字符(关于文字的有两个,em是一个px也是一个).
letter-spacing:设置字符之间的距离,值是(数字+px).
word-spacing单词间距
line-height:设置行与行之间的间距(行高),值是(数字+px).这一行代码与text-align:center;配合可以得到文字居中.
text-decoration:当值为none设置a链接下划线不显示.当值为underline则下划线显示 line-through贯穿线
text-align:设置文本的对齐方式,值有left,center,right
text-shadow:设置文本的阴影.值有四个,都是数字加px,依此是1,相对于X轴的偏移量 2相对于Y轴的偏移量 3阴影虚化程度 4阴影颜色
text-overflaw:文本溢出显示省略标记(....)clip或ellipsis
vertical-align设置文本垂直对齐的方式
color:字体的颜色
边框 border 边框的样式有三个,依此是宽度width 样式style 颜色color
border-color:设置颜色的值,十六进制或者单词都可以
border-方位词-color:设置某个边框的颜色,方位词是left,right,top,bottom
border-width:设置边框的宽度,值是数字加px.
border-方位词-width:设置边框的四个的任意一个
border-style:设置边框的样式,solid是实线 dotted是点状线 dashed虚线 当值为ridge时,是一个3D的边框样式
border-方位词-style:设置边框任意一边的样式
border-radius:设置边框半径,一般设置角的样式用到,设置圆角,当框的半径值为边框的一边长时,视觉效果就会是一个圆,所以可以用这个来画圆,注意,当值为一个时,他是直接设置四个角,当为两个值时,设置的是对角,当为四个值时,设置的是四个角,依此顺序是左上,右上,右下,左下
背景 background
background-color:设置背景的颜色可以是十六进制或者单词
background-size:100%;设置背景显示是100%;
background-repeat:设置背景是否平铺,当值为no-repeat设置背景不平铺.
默认是平铺, (repeat-x背景图像将在水平方向重复)
(repeat-y背景图像将在垂直方向重复)
background-image:设置背景图片,值为url("一个路径");默认是平铺的.
background-attachment:设置背景是否随着滑轮滚动,scroll为滚动,fixed为不滚动.
大招,设置背景属性的
background:颜色color 图片url(路径) 平铺repeat 滚动attachmeat 定位position
多层背景的实现:本质上是
内补白padding 和 外补白margin
padding是设置内边距的,(值为数字+px),加了padding的div会改变原大小,变大,可以运用这个原理给div加padding撑大,达到想要的效果.
padding-方位词:可以设置单独以个边的内边距;方位词上下左右.
padding:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
padding值为四个的时候,依此设置的是上右下左.
margin是外边距,值为(数字+px),加了margin的div不会改变原大小,会把外面撑开.达到想要的效果.
margin-方位词:可以设置单独以个边的内边距;方位词上下左右.
margin:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
margin值为四个的时候,依此设置的是上右下左.
*{
margin:0px;
padding:0px;
}这个代码是去除浏览器默认留白的
设置div左右居中margin:0px auto;如果让第一个值为auto,第二个值为0px,则表示左右占满,上下居中,在开发中没有什么意义,没有这样设计的.
padding若是想撑开宽度的时候可以设置连个值,第一个为0,第二个为要加的高度的一半.(撑开高则相反)
div与span,
div就是一个块装元素，就是一个盒子，一个容器，盒子有宽高来控制大小，里面可以存放你想存放的内容，但是他是一个占据一整行，控制宽高
div盒子
box-shadow:设置盒子的阴影,共四个数值1沿X轴的偏移量 2沿Y轴的偏移量 3虚化程度 4颜色,当值为none时,表示无阴影效果
鼠标移入的单词是hover
浮动float 和定位position
Layout布局
position定位
绝对定位:绝对定位就是让你相对于整个浏览器的左上角为初始点,然后设置与初始点的距离,画一个有宽有高的div,设置绝对定位的步骤,1.position:absolute;这句就是设置当前的div盒子为绝对定位.2.设置绝对定位盒子的位置left:100px;top:200px;3.设置盒子div的宽和高.
相对定位:相对定位是根据父窗体来做的一个定位,父窗体可能也是一个div,相对定位的初始点是父窗体的左上角,设置的步骤1./*设置小盒子的定位为相对定位*/position:relative; 2./*设置小盒子相对移动的位置*/left:20px;top:20px;(注意这里是用的left和top配合定的位,也可以right和bottom配合定位) 3.设置盒子div的宽和高.
固定定位:一般是设置一个图片固定在网页的某个位置,不随滚轮而滚动,设置的步骤是position:fixed;
right:0px;
bottom:300px;
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
注意：
绝对定位会让div盒子脱离当前文档流，自己进入一个维度，此时，我们可以使用left、top或right、bottom
来对脱离文档流的div盒子进行位置的设置，它会相对与当前的整个窗体来进行移动；
相对定位会让div盒子相对于它的父级元素进行移动，它原来的位置还保留，同时，它只能通过left或top
进行位置的设置，而不能使用right和bottom进行位置的定义
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
float浮动
浮动的原理:首先网页上的标签都是排列在网页上的,自上而下,占用了水平的空间,而浮动是占用的垂直空间,设置了float的div会浮到其他容器标签的上面,挡住下面的东西.浮动一般都是为了横向排列,所以一般会有一个float:left和float:right,
一旦div浮起来,他后面的不浮起来的话就会跑到浮起来的下面.这个时候就需要清除浮动,可以只清除左浮动,clear:left;也可以清除右浮动clear:right;也可以同时清理两种浮动,clean:both;
layout 布局
Layout布局
*display： 是否及如何显示：none隐藏，block块状显示...*作用三：让行内元素变为块级元素*/
/*display:block;*/
*float: 指出了对象是否及如何浮动:值none | left | right
*clear： 清除浮动：none | left | right | both两侧
visibility：设置或检索是否显示对象。visible|hidden|collapse。
与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隐藏：hidden，visible：不剪切内容
overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y：内容超过其指定高度时如何管理内容
鼠标 样式
杂项
程序可以分为C/S(Client客户端和Server服务器)程序和B/S(Browser浏览器和Server服务器).B/S不用下载不用升级,用浏览器直接执行,成千上万人访问服务器,服务器压力比较大.C/S程序 功能强大,效果更好,内容丰富,但是必须下载,升级,所有的资源都在客户端.
动态网站与非动态网站的区别:动态网站采用数据库技术做开发,非动态不采用
重点 一个URL有几部分组成(例如http://www.souhu.com[:80]/images/index.php?name=zhangsan&sex=boy):1,http部分就是协议名称http并非唯一的协议还有其他的协议.2,www.sohu.com部分就是主机名.3,浏览器的端口号是80端口,mysql的端口号是3306吧.4.images是目录名.5,index是文件名.6问号后的name=zhangsan是参数,多个参数之间要用&符号链接.
传参的方式有两种:1.get方式又叫显式传参,特点是能在url处看到传递的参数,传参的长度有限制,相对不安全.2.post方式又叫隐式传参.传递的参数在url处看不见,传递的参数没有长度的限制.相对安全
重点 动态网站开发的7个构件,1超文本标记语言HTML 2,层叠样式表CSS 3客户端脚本语言javascript 4,服务器端的脚本语言 php 5.web服务器 6.数据库 7.浏览器
三种流行的网站开发应用平台 1,lamp linux + apache +mysql +php,入手简单,开发速度快,开发的成本低,容易维护,稳定性高.2asp.net windowserver +iis +sqlserver +asp 入手简单,开发快,成本低,不稳定,不易维护. 3.javaee unix +Tomcet +oricle +jsp入手难,开发慢,成本高,稳定相当好,维护一般
重点 理解web工作的原理：客户端通过浏览器以URL地址的形式向服务器发送访问web页面的请求，服务器做出相应，并以超文本的格式回传给客户端所请求的web页面
重点理解 服务器三种不通的响应方式，1.不带应用程序和数据库的，这个最简单，直接相应一个HTML页面 2.带应用程序同时还带有数据库中的数据的页面，这种情况，服务器端的脚本先处理请求，然后再链接数据库，通过SQL操作数据库抓取需要的内容，交个服务器，最后响应给客户端。 3带应用程序的页面，PHP服务器会逐条解释并翻译成HTML静态代码，再交个客户端
SEO搜索引擎优化: 像百度,必应,搜狗这些搜索类型的网站,他们都有自己的爬虫工具,来抓取网站的meta标签当中的信息,然后将其存储到本地的服务器当中,然后这些网站的销售人员会与网站的的管理员进行联系,询问是否需要搜索引擎优化,需要优化加排名的就需要交钱了,否则采用默认的排名.
网站的后台一般是搜索不到的,如果搜到了一些网站的后台,否则网站的信息就面临着风险的,一些大型的网站专门有一批人赚这种钱,发现漏洞,告诉网站的管理者,网站的管理者会给这人一些钱
框架
分帧框架
行内框架
iframe行内框架：
属性： 值：
src： 引入文件的路径
frameborder： 框架的边框
width： 框架的宽度
height： 框架的高度
<iframe src="./1.html" frameborder="0" width="500" height="500"></iframe>
杂项
程序可以分为C/S(Client客户端和Server服务器)程序和B/S(Browser浏览器和Server服务器).B/S不用下载不用升级,用浏览器直接执行,成千上万人访问服务器,服务器压力比较大.C/S程序 功能强大,效果更好,内容丰富,但是必须下载,升级,所有的资源都在客户端.
动态网站与非动态网站的区别:动态网站采用数据库技术做开发,非动态不采用
重点 一个URL有几部分组成(例如http://www.souhu.com[:80]/images/index.php?name=zhangsan&sex=boy):1,http部分就是协议名称http并非唯一的协议还有其他的协议.2,www.sohu.com部分就是主机名.3,浏览器的端口号是80端口,mysql的端口号是3306吧.4.images是目录名.5,index是文件名.6问号后的name=zhangsan是参数,多个参数之间要用&符号链接.
传参的方式有两种:1.get方式又叫显式传参,特点是能在url处看到传递的参数,传参的长度有限制,相对不安全.2.post方式又叫隐式传参.传递的参数在url处看不见,传递的参数没有长度的限制.相对安全
重点 动态网站开发的7个构件,1超文本标记语言HTML 2,层叠样式表CSS 3客户端脚本语言javascript 4,服务器端的脚本语言 php 5.web服务器 6.数据库 7.浏览器
三种流行的网站开发应用平台 1,lamp linux + apache +mysql +php,入手简单,开发速度快,开发的成本低,容易维护,稳定性高.2asp.net windowserver +iis +sqlserver +asp 入手简单,开发快,成本低,不稳定,不易维护. 3.javaee unix +Tomcet +oricle +jsp入手难,开发慢,成本高,稳定相当好,维护一般
重点 理解web工作的原理：客户端通过浏览器以URL地址的形式向服务器发送访问web页面的请求，服务器做出相应，并以超文本的格式回传给客户端所请求的web页面
重点理解 服务器三种不通的响应方式，1.不带应用程序和数据库的，这个最简单，直接相应一个HTML页面 2.带应用程序同时还带有数据库中的数据的页面，这种情况，服务器端的脚本先处理请求，然后再链接数据库，通过SQL操作数据库抓取需要的内容，交个服务器，最后响应给客户端。 3带应用程序的页面，PHP服务器会逐条解释并翻译成HTML静态代码，再交个客户端
SEO搜索引擎优化: 像百度,必应,搜狗这些搜索类型的网站,他们都有自己的爬虫工具,来抓取网站的meta标签当中的信息,然后将其存储到本地的服务器当中,然后这些网站的销售人员会与网站的的管理员进行联系,询问是否需要搜索引擎优化,需要优化加排名的就需要交钱了,否则采用默认的排名.
网站的后台一般是搜索不到的,如果搜到了一些网站的后台,否则网站的信息就面临着风险的,一些大型的网站专门有一批人赚这种钱,发现漏洞,告诉网站的管理者,网站的管理者会给这人一些钱
HTML
基础 HTML的格式 <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
1. <!doctype html>意思是告诉浏览器当前文档的类型是一个html文档,让浏览器解析. 2. 所有的标签都必须包含在两个<html>标签中. 3. <head>标签的内容应该是不显示在网页中的,(不是不鞥显示,而是逻辑上不应该显示)他是对当前文档的一些修饰,定义搜索引擎用的. 4. <body>标签是显示网页的主题内容.
双标签:需要使用自己的标签加上斜杠来结束,例如<html></html> 单标签:必须子午结束,例如<meta />
标签可以嵌套在一起,属于包含关系,标签有属性,属性有不同的值.属性和值可以写在标签内,一个标签可以有多个属性,属性也可以有多个值,html中的标签是不区分大小写的,语法格式是 <标签名 属性名1="属性值1" 属性名2="属性值2" ....>被标签包裹的内容</标签名>
实体内容 1. 表示空格 2. <表示尖括号的左边<,可以当做lift的缩写. 3. >表示尖括号的右边>,可以当做是right的缩写
<head>标签内的内容<title></title>这是一个双标签,是网页中的标题,它的值就是在浏览器打开一个网页的时候的标题.2. <meta />是一个单标签,一般设置当前页面的编码格式,例如<meta charset="utf-8" /> 3. <link />标签是一个单标签,一般是为了链接一些外部的文件,例如<link rel="定义链入文件与当前文件的关系" href="定义链入文档的路径,一般用相对路径表示" />
重点 路径一个点表示当前路径,例如 ./test.html 表示当前目录下的test.html文件,两个点表示上一级路径,例如 ../hello.java 表示上一级目录下的hello.java文件.上上一级用 . ./. ./qing.php 每多一级就加两个点,一个斜杠
<meta http-equiv="refresh" content="3,www.baidu.com" />表示每三秒刷新一次,刷新之后跳转到百度
弹框 alert('弹得内容');
html标签中的颜色可以用16进制的格式表示,例如<b color="#fffffff">这个标签的颜色是用#号加六个数字来表示的</b> 颜色也可以用英文表示,例如<u color="red">U标签内的内容被设置为了红色</u>
在html代码中,空格和回车是不起作用的,
重点 html中的常见标签,<head>中包含的常见标签有,<link><meta><script><style><title>
<meta charset="utf-8"/>设置的是编码格式
<meta name="keyboard" content="当name等于keyboard时,是设置给搜索引擎关键字用的"/>
<meta name="description" content="当name属性的值为description时,content的内容就是关于网页的介绍"/>
<meta name="revised" content="小王,
2017年3月2日09:55:00" 当name值为revised时,content中的内容是为了版权,会显示一些作者名称和更新时间/>
<meta http-equiv="refresh" content="3,
http://www.bing.com" 当http-equiv属性的值是refresh时,会定时更新网页,content中的逗号前的数字是每多久更新一次,单位是秒.逗号后的内容是一个网站链接,更新之后会跳转到另外的一个网站/>
<link> 标签最常见的用途是链接样式表。
<link rel="stylesheet" href="./css.css" type="text/css"/ 引入一个外部的层叠样式表, rel定义当前文档与被链接文档之间的关系。href的值是一个url,定义被链接文档的位置。type这个属性和它的值可以不写>
<link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/ 这个是设置标签上的小图标的代码,rel的值是shortcut icon. href是小图标所在的路径,type是 类型/后缀类型,type属性可以不写>
标签<script> 标签用于定义客户端脚本，比如 JavaScript,例如<script src="1.js">这是一个从外部引入的javascript文件,利用js里的内容来达到想要的效果</script>
<script>alert('欢迎来到lamp183班期');</script>也可以直接在两个标签中间加上内容达到自己想要的效果,不过这样代码看起来会很多,不简洁,所以一般都用来引用js的效果
<style>标签是双标签,主要是引用css样式来给网页做修饰达的,例如<style>font{color:red;}</style>这种是不常用的,一般为了代码的简洁,会把样式信息写到css文件中,然后再引用.
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>这个是直接在<head标签内写入css,只针对h1标签和p标签来修改样式>
<link rel="stylesheet" type="text/css" href="theme.css" 是直接从外部链接一个css文件./>
<title>title是定义网页的标签</title>
网页的主体部分<body>常见的标签,这些是文本标签<font><h><p><b><stong><i><cite><em><u><sup><sub><q><abbr><bdo><del><details><summary><dialog><ol><ul><li><pre>
<font> 规定文本的字体、字体尺寸、字体颜色。
<font face="verdana" size="6" color="red">这是一行红色,大小为6的,字体为最一般的那种的字</font>
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<p>两个p标签之间的内容是一个段落</p>
<b>标签和<stong>标签都是加粗标签,但是<stong>标签加粗强调的作用，SEO可以着重抓取到的内容.
<i>和<cite>是普通的斜体,<em>是具有强调作用的斜体
<sub>和<sup>是下标签和上标签,都是双标签,一般用在化学方程式和2的平方的表示.记忆方法,b的口在下是下标签,p的口在上是上标签
<u> 标签定义下划线文本。
<q> 标签定义一个短的引用。q标签是一般引用别人的话,效果是双引号
<bdo>标签是定义文档的输出方向<bdo dir="ltr">正大光明</bdo>效果是倒序输出,
<abbr>标签是表示缩写,在浏览器中,鼠标放上去显示全称,<abbr title="鼠标放上显示的全称部分">网页内的缩写</abbr>
<del>标签包裹的文字的中间会出现一条横线,<del>海波老师？</del>一般表示去世的人和错误的地方
<details>是双标签显示出来的效果是一个下拉框,需要与<summary>标签配合使用,summary标签是下拉框中的选项.
代码如下:<details>
<summary>下拉框标题</summary>
下拉框的选项1<br/>
下拉框的选项2<br/>
下拉框的选项3<br/>
</details>
<dialog>标签表示的是对话框标签,可以显示对话的格式,还要配合<dd>和<dt>标签,<dt>dt包裹住对话人</dt> ,<dd>dd包裹住对话人的说话内容</dd>,<dialog>包裹着所有的dt和dd标签。
<!--对话标签-->
<dialog>
<dt>男：</dt><dd>我们分手吧~~</dd>
<dt>女：</dt><dd>为什么？</dd>
<dt>男：</dt><dd>我怀孕了~~</dd>
<dt>女：</dt><dd>不，不可能，我不相信……</dd>
<dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>
<dt>女：</dt><dd>…………</dd>
</dialog>
有序列表和无序列表<ol>表示有序列表.有序类表有一个type属性,属性值不同可以显示出的123,abc等排列顺序的字.<ul>表示无序列表也有一个type属性,但是多个值显示出来的效果是一样的. 注意,列表要借助<li>标签来进行分,谁是第一个,谁是第二个例如
<!--有序列表-->
<ol type="A">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ul>
<pre>标签表示格式化输出,首先,html中的空格和回车是不显示出来的,但是用这个标签包裹的内容可以将空格和回车的效果输出显示
html的注释<!--填写的注释内容-->
<hr/>是水平线,<br/>是换行
链接标签 <a> 锚点
定义和用法
<a> 标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
<a href="#one">第一章：三打白骨将</a><br/>
<a href="#two">第二章：倒拔垂杨柳</a><br/>
<a href="#three">第三章：火烧赤壁</a><br/>
<a href="#four">第四章：刘姥姥进大观园</a><br/>
<h2><a id="one"></a>第一章：三打白骨将</h2>
<h2><a id="two"></a>第二章：倒拔垂杨柳</h2>
<h2><a id="three"></a>第三章：火烧赤壁</h2>
<h2><a id="four"></a>第四章：刘姥姥进大观园</h2>
锚点的原理很简单,定义几个a标签,把要跳转的id号码给他,然后通过这个id就能找到要链接到的位置
定义和用法
<a> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
<!--链接到了一个外部的网站-->
<a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>
注意:href属性是值可以是一个网址,可以是一个绝对路径,可以是一个相对路径,这个属性值就是一个url地址.
target属性的值1._blank在新窗口中打开被链接文档。
2._self默认。在相同的框架中打开被链接文档。
3._parent在父框架集中打开被链接文档
4._top,在整个窗口中打开被链接文档
5.framename在指定的框架中打开被链接文档
多媒体相关标签,<img><map><area><audio><video><source><canvas>
<embed>
热区绘制的步骤：
1.img标签引入一张图片，注意，图像需要时原大小
2.给img标签一个usemap属性，使用一个地图区域
3.然后使用map定义一块地图区域，注意，map需要给定id
4.使用area定义一个图形的图区
<img src="这个位置是一个图片文件的路径" usemap="usemap是img标签的一个属性,表示将图像定义为客户器端图像映射。这里是一个id地址,#id名称,手册上显示的是这个位置是一个url地址"/>
<map id="map标签要与img标签配合在一起才能制作热区,这个是为了给指定的区域设置一个id,名字随便写">
<!-- <area shape="图形的名称" coords="图形的坐标点"
οnclick="这里是在监听,鼠标点了之后给一个触发事件"/> -->
<area shape="circ" coords="332,278,130"
οnclick="alert('别看了，再看嫁给你！')"/>
</map>
<img />：图像标签
属性： 值：
src： 引入图像的路径
width： 设置图像的宽度(单位：像素px)
height： 设置图像的高度(单位：像素px)
alt： 图像加载失败时显示的信息
title： 鼠标移入图像时的提示信息
<area />标签
属性 值
shape 形状,值有矩形rectangle,圆形circle,多边形polygon
coords 坐标,圆有三个坐标,原点占两个点,半径占一个长度,
矩形是对角两个点的坐标,
多边形是有几个角,就写几个点的坐标
屏幕坐标是从左上角开始的.
<audio>标签
音频标签：audio
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放音频
border： 数字 边框线粗细
<audio controls src="给一个音频标签的文件地址就行" autoplay ></audio>
<video>视频标签
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放视频
height 高度
width 宽度
<video width="视频款显示出来给一个宽度" controls src="给一个视频文件所在的路径" poster="这个是封面,需要给一个图片的地址路径" ></video>
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
属性 值
media media query 定义媒介资源的类型，供浏览器决定是否下载
src url 这里写的是一个视频或者音频的地址
<!--引入一个外部插件-->
<!-- <embed src="haowan.swf" /> -->
表格相关标签,<table><caption><th><tr><td><thead><tbody><tfoot>
<table>标签
table表格：
属性： 值： 含义：
border: 像素值(px) 设置表格边框粗细的
width: 宽度(px) 设置表格的宽度
height: 像素 设置表格的高度
cellspacing： 像素 设置单元格和单元格之间的间距
cellpadding： 相许 设置单元格中的值和单元格边框之间的间距
table中的标签：
caption标签：标题标签
th标签：表头标签(字体加粗，默认居中)
tr标签：表格中的一行
属性： 值：
align： 对齐方式(left、center、right)
td标签：表格中的一个单元格
属性： 值：
rowspan： 合并行
colspan： 合并列
align： 对齐方式(left、center、right)
表单相关标签<form><input><select><option><textarea><button>
<form>标签
<form></form> --表单标签
form标签常用属性：
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.HTML5不支持。用 id 代替。
<input>标签
<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
<input/> 表单项中的属性，可以提供
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性:表单项名,用于存储内容值的
*value属性:输入的值(默认指定值)
size属性:输入框的宽度值
maxlength属性:输入框的输入内容的最大长度
readonly属性:对输入框只读属性
*disabled属性:禁用属性
*checked属性:对选择框指定默认选项
accesskey属性:指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性:通过数字指定tab键的切换顺序(不常用)
<select>下拉列表标签
<select> 标签创建下拉列表。
*name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
<textarea>标签文本域
<textarea> 多行的文本输入区域
*name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。
*rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读
...
默认值是在两个标签之间
<button>标签
按钮 您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
框架
分帧框架
行内框架
iframe行内框架：
属性： 值：
src： 引入文件的路径
frameborder： 框架的边框
width： 框架的宽度
height： 框架的高度
<iframe src="./1.html" frameborder="0" width="500" height="500"></iframe>
css是为了修饰html的
CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
命名规则：使用字母、数字或下划线和减号构成，不要以数字开头
格式： 选择器{属性:值;属性:值;属性:值;....}
CSS中注释：/* ... */
html中嵌入css的方式三种,1行内,2内嵌3外部链入
行内样式,简单的说就是写在html标签中的样式,一般项目不用,看起来太乱
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签。
内嵌样式,简单的说就是用一对<style>写在<head>标签内的那种样式
格式：<style type="text/css">
选择器{属性:值;
属性:值;
属性:值;}
</style>
特点：作用于当前整个页面
外部链入,简单的说就是是在html文件外写一个专门的css文件,再用<link>标签链接到html内.
（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置
格式：<link href="文件名.css" rel="stylesheet"/>
还可以使用import在style标签中导入css文件。
如：<style>
@import "style.css";
</style>
选择器(又叫选择符)
基本，关系，属性，伪类，结构型伪类选择器,属性选择器
总结选择器有很多很多,但是要记住学习的目的是为了做出效果更简单,所以不用记太多,用的时候找到相同点或者创造相同点最好
基本选择器包含
标签选择器,类选择器,id选择器
标签选择符
把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
类选择符
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用
id选择器
定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次.与类选择器的区别就在这,另外,类选择器 前面要加 点. id选择器要加#号
* 通配符
*{}
注意星号表示所有的标签,其中*{
padding:0px;
margin:0px;
}表示去除浏览器自己加的留白部分
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
关系选择器
关联选择器,组合选择器
关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{属性名 : 值;}
例如： table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
5. 组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{属性名 : 值 ;}
h3,h4,h5,#one,.one{color:green;}
关联选择器和组合选择器的区别
关联的是选择符至少两个,且两个有关系,因为标签是可以层层嵌套的,所以一般用来表示这种关系,例如,一个段落<p>标签里有一个斜体标签,为了更加突出斜体部分的重要性,要加一个要加红颜色,这个时候就可以写成
p clit{color:red;}
组合选择器可以是几个没有关系的标签或者其他都要实现同一种效果,才用到,组合选择器的选择符用逗号隔开,不分先后的顺序.
关联选择器标签的前后顺序不能乱,且中间不能有逗号,只用空格分隔
伪类
伪类选择器
格式： 标签名:伪类名{属性名:值;}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
伪类选择器很好辨认,标签名:伪类名{样式;}
结构性伪类选择器：
::first-letter设置对象内的第一个字符的样式。
::first-line设置对象内的第一行的样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。
:lang(language)匹配使用特殊语言的E元素。
:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素
:only-of-type匹配同类型中的唯一的一个同级兄弟元素
:only-child匹配父元素仅有的一个子元素
:nth-child(n)匹配父元素的第n个子元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
:last-child()匹配父元素的最后一个子元素
:root匹配元素在文档的根元素。在HTML中，根元素永远是HTML
:empty匹配没有任何子元素（包括text节点）的元素
状态伪类选择器
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
属性选择器
很好辨认,标签名称[属性名]
注意,如果属性可以给一个值,也可以不给值,也可以对属性值进行条件限制
/*所有拥有type属性的input标签有此样式*/
input[type]{
color:blue;
}
/*拥有type属性且值为password的input标签有此样式*/
input[type="password"]{
color:red;
}
/*拥有name属性且值以ua开头的input标签有此样式*/
input[name^="ua"]{
color:pink;
}
CSS中常用的属性
color颜色属性 ,字体属性font 文本属性text 边框border 背景属性background 内补白（内补丁)padding 外补白（外补丁）margin
颜色color,这个颜色以后用取色器十六进制就行,下面的基本上是废话
color颜色属性：
a. HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.
background-color: hsl(240,100%,50%);color:white；
b. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
background-color: rgba(200,100,0);
d. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图片透明度的设置 img.opacity{ opacity:0.25;}
字体font
font-size:字体的大小,单位有px和em,一个em表示一个字符
font-family:设置字体风格,他的值可以用汉字.,多个字体用逗号隔开,(font-family:儿童卡通字体,楷体,黑体;)原因是一些特殊的字体有的电脑加载不出来,写多个可以有备用的选项,优先顺序是从左到右.
font-weight:设置字体的粗细.
font-style:设置字体的样式,normal正常,italic斜体.
font-variant:samll-caps;设置小型的大写字母.
大招,所有的属性写到一个里面顺序是
font:style(样式) variant(字母大小写) weight(粗细) size(大小) family(样式).
文本属性 text
text-indent:设置首行缩进,值是(数字+em),一个em表示一个字符(关于文字的有两个,em是一个px也是一个).
letter-spacing:设置字符之间的距离,值是(数字+px).
word-spacing单词间距
line-height:设置行与行之间的间距(行高),值是(数字+px).这一行代码与text-align:center;配合可以得到文字居中.
text-decoration:当值为none设置a链接下划线不显示.当值为underline则下划线显示 line-through贯穿线
text-align:设置文本的对齐方式,值有left,center,right
text-shadow:设置文本的阴影.值有四个,都是数字加px,依此是1,相对于X轴的偏移量 2相对于Y轴的偏移量 3阴影虚化程度 4阴影颜色
text-overflaw:文本溢出显示省略标记(....)clip或ellipsis
vertical-align设置文本垂直对齐的方式
color:字体的颜色
边框 border 边框的样式有三个,依此是宽度width 样式style 颜色color
border-color:设置颜色的值,十六进制或者单词都可以
border-方位词-color:设置某个边框的颜色,方位词是left,right,top,bottom
border-width:设置边框的宽度,值是数字加px.
border-方位词-width:设置边框的四个的任意一个
border-style:设置边框的样式,solid是实线 dotted是点状线 dashed虚线 当值为ridge时,是一个3D的边框样式
border-方位词-style:设置边框任意一边的样式
border-radius:设置边框半径,一般设置角的样式用到,设置圆角,当框的半径值为边框的一边长时,视觉效果就会是一个圆,所以可以用这个来画圆,注意,当值为一个时,他是直接设置四个角,当为两个值时,设置的是对角,当为四个值时,设置的是四个角,依此顺序是左上,右上,右下,左下
背景 background
background-color:设置背景的颜色可以是十六进制或者单词
background-size:100%;设置背景显示是100%;
background-repeat:设置背景是否平铺,当值为no-repeat设置背景不平铺.
默认是平铺, (repeat-x背景图像将在水平方向重复)
(repeat-y背景图像将在垂直方向重复)
background-image:设置背景图片,值为url("一个路径");默认是平铺的.
background-attachment:设置背景是否随着滑轮滚动,scroll为滚动,fixed为不滚动.
大招,设置背景属性的
background:颜色color 图片url(路径) 平铺repeat 滚动attachmeat 定位position
多层背景的实现:本质上是
内补白padding 和 外补白margin
padding是设置内边距的,(值为数字+px),加了padding的div会改变原大小,变大,可以运用这个原理给div加padding撑大,达到想要的效果.
padding-方位词:可以设置单独以个边的内边距;方位词上下左右.
padding:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
padding值为四个的时候,依此设置的是上右下左.
margin是外边距,值为(数字+px),加了margin的div不会改变原大小,会把外面撑开.达到想要的效果.
margin-方位词:可以设置单独以个边的内边距;方位词上下左右.
margin:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
margin值为四个的时候,依此设置的是上右下左.
*{
margin:0px;
padding:0px;
}这个代码是去除浏览器默认留白的
设置div左右居中margin:0px auto;如果让第一个值为auto,第二个值为0px,则表示左右占满,上下居中,在开发中没有什么意义,没有这样设计的.
padding若是想撑开宽度的时候可以设置连个值,第一个为0,第二个为要加的高度的一半.(撑开高则相反)
div与span,
div就是一个块装元素，就是一个盒子，一个容器，盒子有宽高来控制大小，里面可以存放你想存放的内容，但是他是一个占据一整行，控制宽高
div盒子
box-shadow:设置盒子的阴影,共四个数值1沿X轴的偏移量 2沿Y轴的偏移量 3虚化程度 4颜色,当值为none时,表示无阴影效果
鼠标移入的单词是hover
浮动float 和定位position
Layout布局
position定位
绝对定位:绝对定位就是让你相对于整个浏览器的左上角为初始点,然后设置与初始点的距离,画一个有宽有高的div,设置绝对定位的步骤,1.position:absolute;这句就是设置当前的div盒子为绝对定位.2.设置绝对定位盒子的位置left:100px;top:200px;3.设置盒子div的宽和高.
相对定位:相对定位是根据父窗体来做的一个定位,父窗体可能也是一个div,相对定位的初始点是父窗体的左上角,设置的步骤1./*设置小盒子的定位为相对定位*/position:relative; 2./*设置小盒子相对移动的位置*/left:20px;top:20px;(注意这里是用的left和top配合定的位,也可以right和bottom配合定位) 3.设置盒子div的宽和高.
固定定位:一般是设置一个图片固定在网页的某个位置,不随滚轮而滚动,设置的步骤是position:fixed;
right:0px;
bottom:300px;
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
注意：
绝对定位会让div盒子脱离当前文档流，自己进入一个维度，此时，我们可以使用left、top或right、bottom
来对脱离文档流的div盒子进行位置的设置，它会相对与当前的整个窗体来进行移动；
相对定位会让div盒子相对于它的父级元素进行移动，它原来的位置还保留，同时，它只能通过left或top
进行位置的设置，而不能使用right和bottom进行位置的定义
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
float浮动
浮动的原理:首先网页上的标签都是排列在网页上的,自上而下,占用了水平的空间,而浮动是占用的垂直空间,设置了float的div会浮到其他容器标签的上面,挡住下面的东西.浮动一般都是为了横向排列,所以一般会有一个float:left和float:right,
一旦div浮起来,他后面的不浮起来的话就会跑到浮起来的下面.这个时候就需要清除浮动,可以只清除左浮动,clear:left;也可以清除右浮动clear:right;也可以同时清理两种浮动,clean:both;
layout 布局
Layout布局
*display： 是否及如何显示：none隐藏，block块状显示...*作用三：让行内元素变为块级元素*/
/*display:block;*/
*float: 指出了对象是否及如何浮动:值none | left | right
*clear： 清除浮动：none | left | right | both两侧
visibility：设置或检索是否显示对象。visible|hidden|collapse。
与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隐藏：hidden，visible：不剪切内容
overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y：内容超过其指定高度时如何管理内容
鼠标 样式
css---html
HTML
基础 HTML的格式 <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
1. <!doctype html>意思是告诉浏览器当前文档的类型是一个html文档,让浏览器解析. 2. 所有的标签都必须包含在两个<html>标签中. 3. <head>标签的内容应该是不显示在网页中的,(不是不鞥显示,而是逻辑上不应该显示)他是对当前文档的一些修饰,定义搜索引擎用的. 4. <body>标签是显示网页的主题内容.
双标签:需要使用自己的标签加上斜杠来结束,例如<html></html> 单标签:必须子午结束,例如<meta />
标签可以嵌套在一起,属于包含关系,标签有属性,属性有不同的值.属性和值可以写在标签内,一个标签可以有多个属性,属性也可以有多个值,html中的标签是不区分大小写的,语法格式是 <标签名 属性名1="属性值1" 属性名2="属性值2" ....>被标签包裹的内容</标签名>
实体内容 1. 表示空格 2. <表示尖括号的左边<,可以当做lift的缩写. 3. >表示尖括号的右边>,可以当做是right的缩写
<head>标签内的内容<title></title>这是一个双标签,是网页中的标题,它的值就是在浏览器打开一个网页的时候的标题.2. <meta />是一个单标签,一般设置当前页面的编码格式,例如<meta charset="utf-8" /> 3. <link />标签是一个单标签,一般是为了链接一些外部的文件,例如<link rel="定义链入文件与当前文件的关系" href="定义链入文档的路径,一般用相对路径表示" />
重点 路径一个点表示当前路径,例如 ./test.html 表示当前目录下的test.html文件,两个点表示上一级路径,例如 ../hello.java 表示上一级目录下的hello.java文件.上上一级用 . ./. ./qing.php 每多一级就加两个点,一个斜杠
<meta http-equiv="refresh" content="3,www.baidu.com" />表示每三秒刷新一次,刷新之后跳转到百度
弹框 alert('弹得内容');
html标签中的颜色可以用16进制的格式表示,例如<b color="#fffffff">这个标签的颜色是用#号加六个数字来表示的</b> 颜色也可以用英文表示,例如<u color="red">U标签内的内容被设置为了红色</u>
在html代码中,空格和回车是不起作用的,
重点 html中的常见标签,<head>中包含的常见标签有,<link><meta><script><style><title>
<meta charset="utf-8"/>设置的是编码格式
<meta name="keyboard" content="当name等于keyboard时,是设置给搜索引擎关键字用的"/>
<meta name="description" content="当name属性的值为description时,content的内容就是关于网页的介绍"/>
<meta name="revised" content="小王,
2017年3月2日09:55:00" 当name值为revised时,content中的内容是为了版权,会显示一些作者名称和更新时间/>
<meta http-equiv="refresh" content="3,
http://www.bing.com" 当http-equiv属性的值是refresh时,会定时更新网页,content中的逗号前的数字是每多久更新一次,单位是秒.逗号后的内容是一个网站链接,更新之后会跳转到另外的一个网站/>
<link> 标签最常见的用途是链接样式表。
<link rel="stylesheet" href="./css.css" type="text/css"/ 引入一个外部的层叠样式表, rel定义当前文档与被链接文档之间的关系。href的值是一个url,定义被链接文档的位置。type这个属性和它的值可以不写>
<link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/ 这个是设置标签上的小图标的代码,rel的值是shortcut icon. href是小图标所在的路径,type是 类型/后缀类型,type属性可以不写>
标签<script> 标签用于定义客户端脚本，比如 JavaScript,例如<script src="1.js">这是一个从外部引入的javascript文件,利用js里的内容来达到想要的效果</script>
<script>alert('欢迎来到lamp183班期');</script>也可以直接在两个标签中间加上内容达到自己想要的效果,不过这样代码看起来会很多,不简洁,所以一般都用来引用js的效果
<style>标签是双标签,主要是引用css样式来给网页做修饰达的,例如<style>font{color:red;}</style>这种是不常用的,一般为了代码的简洁,会把样式信息写到css文件中,然后再引用.
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>这个是直接在<head标签内写入css,只针对h1标签和p标签来修改样式>
<link rel="stylesheet" type="text/css" href="theme.css" 是直接从外部链接一个css文件./>
<title>title是定义网页的标签</title>
网页的主体部分<body>常见的标签,这些是文本标签<font><h><p><b><stong><i><cite><em><u><sup><sub><q><abbr><bdo><del><details><summary><dialog><ol><ul><li><pre>
<font> 规定文本的字体、字体尺寸、字体颜色。
<font face="verdana" size="6" color="red">这是一行红色,大小为6的,字体为最一般的那种的字</font>
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<p>两个p标签之间的内容是一个段落</p>
<b>标签和<stong>标签都是加粗标签,但是<stong>标签加粗强调的作用，SEO可以着重抓取到的内容.
<i>和<cite>是普通的斜体,<em>是具有强调作用的斜体
<sub>和<sup>是下标签和上标签,都是双标签,一般用在化学方程式和2的平方的表示.记忆方法,b的口在下是下标签,p的口在上是上标签
<u> 标签定义下划线文本。
<q> 标签定义一个短的引用。q标签是一般引用别人的话,效果是双引号
<bdo>标签是定义文档的输出方向<bdo dir="ltr">正大光明</bdo>效果是倒序输出,
<abbr>标签是表示缩写,在浏览器中,鼠标放上去显示全称,<abbr title="鼠标放上显示的全称部分">网页内的缩写</abbr>
<del>标签包裹的文字的中间会出现一条横线,<del>海波老师？</del>一般表示去世的人和错误的地方
<details>是双标签显示出来的效果是一个下拉框,需要与<summary>标签配合使用,summary标签是下拉框中的选项.
代码如下:<details>
<summary>下拉框标题</summary>
下拉框的选项1<br/>
下拉框的选项2<br/>
下拉框的选项3<br/>
</details>
<dialog>标签表示的是对话框标签,可以显示对话的格式,还要配合<dd>和<dt>标签,<dt>dt包裹住对话人</dt> ,<dd>dd包裹住对话人的说话内容</dd>,<dialog>包裹着所有的dt和dd标签。
<!--对话标签-->
<dialog>
<dt>男：</dt><dd>我们分手吧~~</dd>
<dt>女：</dt><dd>为什么？</dd>
<dt>男：</dt><dd>我怀孕了~~</dd>
<dt>女：</dt><dd>不，不可能，我不相信……</dd>
<dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>
<dt>女：</dt><dd>…………</dd>
</dialog>
有序列表和无序列表<ol>表示有序列表.有序类表有一个type属性,属性值不同可以显示出的123,abc等排列顺序的字.<ul>表示无序列表也有一个type属性,但是多个值显示出来的效果是一样的. 注意,列表要借助<li>标签来进行分,谁是第一个,谁是第二个例如
<!--有序列表-->
<ol type="A">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ul>
<pre>标签表示格式化输出,首先,html中的空格和回车是不显示出来的,但是用这个标签包裹的内容可以将空格和回车的效果输出显示
html的注释<!--填写的注释内容-->
<hr/>是水平线,<br/>是换行
链接标签 <a> 锚点
定义和用法
<a> 标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
<a href="#one">第一章：三打白骨将</a><br/>
<a href="#two">第二章：倒拔垂杨柳</a><br/>
<a href="#three">第三章：火烧赤壁</a><br/>
<a href="#four">第四章：刘姥姥进大观园</a><br/>
<h2><a id="one"></a>第一章：三打白骨将</h2>
<h2><a id="two"></a>第二章：倒拔垂杨柳</h2>
<h2><a id="three"></a>第三章：火烧赤壁</h2>
<h2><a id="four"></a>第四章：刘姥姥进大观园</h2>
锚点的原理很简单,定义几个a标签,把要跳转的id号码给他,然后通过这个id就能找到要链接到的位置
定义和用法
<a> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
<!--链接到了一个外部的网站-->
<a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>
注意:href属性是值可以是一个网址,可以是一个绝对路径,可以是一个相对路径,这个属性值就是一个url地址.
target属性的值1._blank在新窗口中打开被链接文档。
2._self默认。在相同的框架中打开被链接文档。
3._parent在父框架集中打开被链接文档
4._top,在整个窗口中打开被链接文档
5.framename在指定的框架中打开被链接文档
多媒体相关标签,<img><map><area><audio><video><source><canvas>
<embed>
热区绘制的步骤：
1.img标签引入一张图片，注意，图像需要时原大小
2.给img标签一个usemap属性，使用一个地图区域
3.然后使用map定义一块地图区域，注意，map需要给定id
4.使用area定义一个图形的图区
<img src="这个位置是一个图片文件的路径" usemap="usemap是img标签的一个属性,表示将图像定义为客户器端图像映射。这里是一个id地址,#id名称,手册上显示的是这个位置是一个url地址"/>
<map id="map标签要与img标签配合在一起才能制作热区,这个是为了给指定的区域设置一个id,名字随便写">
<!-- <area shape="图形的名称" coords="图形的坐标点"
οnclick="这里是在监听,鼠标点了之后给一个触发事件"/> -->
<area shape="circ" coords="332,278,130"
οnclick="alert('别看了，再看嫁给你！')"/>
</map>
<img />：图像标签
属性： 值：
src： 引入图像的路径
width： 设置图像的宽度(单位：像素px)
height： 设置图像的高度(单位：像素px)
alt： 图像加载失败时显示的信息
title： 鼠标移入图像时的提示信息
<area />标签
属性 值
shape 形状,值有矩形rectangle,圆形circle,多边形polygon
coords 坐标,圆有三个坐标,原点占两个点,半径占一个长度,
矩形是对角两个点的坐标,
多边形是有几个角,就写几个点的坐标
屏幕坐标是从左上角开始的.
<audio>标签
音频标签：audio
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放音频
border： 数字 边框线粗细
<audio controls src="给一个音频标签的文件地址就行" autoplay ></audio>
<video>视频标签
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放视频
height 高度
width 宽度
<video width="视频款显示出来给一个宽度" controls src="给一个视频文件所在的路径" poster="这个是封面,需要给一个图片的地址路径" ></video>
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
属性 值
media media query 定义媒介资源的类型，供浏览器决定是否下载
src url 这里写的是一个视频或者音频的地址
<!--引入一个外部插件-->
<!-- <embed src="haowan.swf" /> -->
表格相关标签,<table><caption><th><tr><td><thead><tbody><tfoot>
<table>标签
table表格：
属性： 值： 含义：
border: 像素值(px) 设置表格边框粗细的
width: 宽度(px) 设置表格的宽度
height: 像素 设置表格的高度
cellspacing： 像素 设置单元格和单元格之间的间距
cellpadding： 相许 设置单元格中的值和单元格边框之间的间距
table中的标签：
caption标签：标题标签
th标签：表头标签(字体加粗，默认居中)
tr标签：表格中的一行
属性： 值：
align： 对齐方式(left、center、right)
td标签：表格中的一个单元格
属性： 值：
rowspan： 合并行
colspan： 合并列
align： 对齐方式(left、center、right)
表单相关标签<form><input><select><option><textarea><button>
<form>标签
<form></form> --表单标签
form标签常用属性：
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.HTML5不支持。用 id 代替。
<input>标签
<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
<input/> 表单项中的属性，可以提供
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性:表单项名,用于存储内容值的
*value属性:输入的值(默认指定值)
size属性:输入框的宽度值
maxlength属性:输入框的输入内容的最大长度
readonly属性:对输入框只读属性
*disabled属性:禁用属性
*checked属性:对选择框指定默认选项
accesskey属性:指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性:通过数字指定tab键的切换顺序(不常用)
<select>下拉列表标签
<select> 标签创建下拉列表。
*name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
<textarea>标签文本域
<textarea> 多行的文本输入区域
*name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。
*rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读
...
默认值是在两个标签之间
<button>标签
按钮 您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
CSS
css是为了修饰html的
CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
命名规则：使用字母、数字或下划线和减号构成，不要以数字开头
格式： 选择器{属性:值;属性:值;属性:值;....}
CSS中注释：/* ... */
html中嵌入css的方式三种,1行内,2内嵌3外部链入
行内样式,简单的说就是写在html标签中的样式,一般项目不用,看起来太乱
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签。
内嵌样式,简单的说就是用一对<style>写在<head>标签内的那种样式
格式：<style type="text/css">
选择器{属性:值;
属性:值;
属性:值;}
</style>
特点：作用于当前整个页面
外部链入,简单的说就是是在html文件外写一个专门的css文件,再用<link>标签链接到html内.
（推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置
格式：<link href="文件名.css" rel="stylesheet"/>
还可以使用import在style标签中导入css文件。
如：<style>
@import "style.css";
</style>
选择器(又叫选择符)
基本，关系，属性，伪类，结构型伪类选择器,属性选择器
总结选择器有很多很多,但是要记住学习的目的是为了做出效果更简单,所以不用记太多,用的时候找到相同点或者创造相同点最好
基本选择器包含
标签选择器,类选择器,id选择器
标签选择符
把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式
h2{....} 网页中所有h2标签采用此样式
类选择符
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用
id选择器
定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次.与类选择器的区别就在这,另外,类选择器 前面要加 点. id选择器要加#号
* 通配符
*{}
注意星号表示所有的标签,其中*{
padding:0px;
margin:0px;
}表示去除浏览器自己加的留白部分
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
关系选择器
关联选择器,组合选择器
关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{属性名 : 值;}
例如： table a{....} /*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
5. 组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{属性名 : 值 ;}
h3,h4,h5,#one,.one{color:green;}
关联选择器和组合选择器的区别
关联的是选择符至少两个,且两个有关系,因为标签是可以层层嵌套的,所以一般用来表示这种关系,例如,一个段落<p>标签里有一个斜体标签,为了更加突出斜体部分的重要性,要加一个要加红颜色,这个时候就可以写成
p clit{color:red;}
组合选择器可以是几个没有关系的标签或者其他都要实现同一种效果,才用到,组合选择器的选择符用逗号隔开,不分先后的顺序.
关联选择器标签的前后顺序不能乱,且中间不能有逗号,只用空格分隔
伪类
伪类选择器
格式： 标签名:伪类名{属性名:值;}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
伪类选择器很好辨认,标签名:伪类名{样式;}
结构性伪类选择器：
::first-letter设置对象内的第一个字符的样式。
::first-line设置对象内的第一行的样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。
:lang(language)匹配使用特殊语言的E元素。
:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素
:only-of-type匹配同类型中的唯一的一个同级兄弟元素
:only-child匹配父元素仅有的一个子元素
:nth-child(n)匹配父元素的第n个子元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
:last-child()匹配父元素的最后一个子元素
:root匹配元素在文档的根元素。在HTML中，根元素永远是HTML
:empty匹配没有任何子元素（包括text节点）的元素
状态伪类选择器
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
属性选择器
很好辨认,标签名称[属性名]
注意,如果属性可以给一个值,也可以不给值,也可以对属性值进行条件限制
/*所有拥有type属性的input标签有此样式*/
input[type]{
color:blue;
}
/*拥有type属性且值为password的input标签有此样式*/
input[type="password"]{
color:red;
}
/*拥有name属性且值以ua开头的input标签有此样式*/
input[name^="ua"]{
color:pink;
}
CSS中常用的属性
color颜色属性 ,字体属性font 文本属性text 边框border 背景属性background 内补白（内补丁)padding 外补白（外补丁）margin
颜色color,这个颜色以后用取色器十六进制就行,下面的基本上是废话
color颜色属性：
a. HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.
background-color: hsl(240,100%,50%);color:white；
b. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
background-color: rgba(200,100,0);
d. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图片透明度的设置 img.opacity{ opacity:0.25;}
字体font
font-size:字体的大小,单位有px和em,一个em表示一个字符
font-family:设置字体风格,他的值可以用汉字.,多个字体用逗号隔开,(font-family:儿童卡通字体,楷体,黑体;)原因是一些特殊的字体有的电脑加载不出来,写多个可以有备用的选项,优先顺序是从左到右.
font-weight:设置字体的粗细.
font-style:设置字体的样式,normal正常,italic斜体.
font-variant:samll-caps;设置小型的大写字母.
大招,所有的属性写到一个里面顺序是
font:style(样式) variant(字母大小写) weight(粗细) size(大小) family(样式).
文本属性 text
text-indent:设置首行缩进,值是(数字+em),一个em表示一个字符(关于文字的有两个,em是一个px也是一个).
letter-spacing:设置字符之间的距离,值是(数字+px).
word-spacing单词间距
line-height:设置行与行之间的间距(行高),值是(数字+px).这一行代码与text-align:center;配合可以得到文字居中.
text-decoration:当值为none设置a链接下划线不显示.当值为underline则下划线显示 line-through贯穿线
text-align:设置文本的对齐方式,值有left,center,right
text-shadow:设置文本的阴影.值有四个,都是数字加px,依此是1,相对于X轴的偏移量 2相对于Y轴的偏移量 3阴影虚化程度 4阴影颜色
text-overflaw:文本溢出显示省略标记(....)clip或ellipsis
vertical-align设置文本垂直对齐的方式
color:字体的颜色
边框 border 边框的样式有三个,依此是宽度width 样式style 颜色color
border-color:设置颜色的值,十六进制或者单词都可以
border-方位词-color:设置某个边框的颜色,方位词是left,right,top,bottom
border-width:设置边框的宽度,值是数字加px.
border-方位词-width:设置边框的四个的任意一个
border-style:设置边框的样式,solid是实线 dotted是点状线 dashed虚线 当值为ridge时,是一个3D的边框样式
border-方位词-style:设置边框任意一边的样式
border-radius:设置边框半径,一般设置角的样式用到,设置圆角,当框的半径值为边框的一边长时,视觉效果就会是一个圆,所以可以用这个来画圆,注意,当值为一个时,他是直接设置四个角,当为两个值时,设置的是对角,当为四个值时,设置的是四个角,依此顺序是左上,右上,右下,左下
背景 background
background-color:设置背景的颜色可以是十六进制或者单词
background-size:100%;设置背景显示是100%;
background-repeat:设置背景是否平铺,当值为no-repeat设置背景不平铺.
默认是平铺, (repeat-x背景图像将在水平方向重复)
(repeat-y背景图像将在垂直方向重复)
background-image:设置背景图片,值为url("一个路径");默认是平铺的.
background-attachment:设置背景是否随着滑轮滚动,scroll为滚动,fixed为不滚动.
大招,设置背景属性的
background:颜色color 图片url(路径) 平铺repeat 滚动attachmeat 定位position
多层背景的实现:本质上是
内补白padding 和 外补白margin
padding是设置内边距的,(值为数字+px),加了padding的div会改变原大小,变大,可以运用这个原理给div加padding撑大,达到想要的效果.
padding-方位词:可以设置单独以个边的内边距;方位词上下左右.
padding:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
padding值为四个的时候,依此设置的是上右下左.
margin是外边距,值为(数字+px),加了margin的div不会改变原大小,会把外面撑开.达到想要的效果.
margin-方位词:可以设置单独以个边的内边距;方位词上下左右.
margin:值为两个的时候,第一个数字设置的是上下内边距,第二个是设置的左右的内边距.
margin值为四个的时候,依此设置的是上右下左.
*{
margin:0px;
padding:0px;
}这个代码是去除浏览器默认留白的
设置div左右居中margin:0px auto;如果让第一个值为auto,第二个值为0px,则表示左右占满,上下居中,在开发中没有什么意义,没有这样设计的.
padding若是想撑开宽度的时候可以设置连个值,第一个为0,第二个为要加的高度的一半.(撑开高则相反)
div与span,
div就是一个块装元素，就是一个盒子，一个容器，盒子有宽高来控制大小，里面可以存放你想存放的内容，但是他是一个占据一整行，控制宽高
div盒子
box-shadow:设置盒子的阴影,共四个数值1沿X轴的偏移量 2沿Y轴的偏移量 3虚化程度 4颜色,当值为none时,表示无阴影效果
鼠标移入的单词是hover
浮动float 和定位position
Layout布局
position定位
绝对定位:绝对定位就是让你相对于整个浏览器的左上角为初始点,然后设置与初始点的距离,画一个有宽有高的div,设置绝对定位的步骤,1.position:absolute;这句就是设置当前的div盒子为绝对定位.2.设置绝对定位盒子的位置left:100px;top:200px;3.设置盒子div的宽和高.
相对定位:相对定位是根据父窗体来做的一个定位,父窗体可能也是一个div,相对定位的初始点是父窗体的左上角,设置的步骤1./*设置小盒子的定位为相对定位*/position:relative; 2./*设置小盒子相对移动的位置*/left:20px;top:20px;(注意这里是用的left和top配合定的位,也可以right和bottom配合定位) 3.设置盒子div的宽和高.
固定定位:一般是设置一个图片固定在网页的某个位置,不随滚轮而滚动,设置的步骤是position:fixed;
right:0px;
bottom:300px;
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
注意：
绝对定位会让div盒子脱离当前文档流，自己进入一个维度，此时，我们可以使用left、top或right、bottom
来对脱离文档流的div盒子进行位置的设置，它会相对与当前的整个窗体来进行移动；
相对定位会让div盒子相对于它的父级元素进行移动，它原来的位置还保留，同时，它只能通过left或top
进行位置的设置，而不能使用right和bottom进行位置的定义
Position定位
*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
float浮动
浮动的原理:首先网页上的标签都是排列在网页上的,自上而下,占用了水平的空间,而浮动是占用的垂直空间,设置了float的div会浮到其他容器标签的上面,挡住下面的东西.浮动一般都是为了横向排列,所以一般会有一个float:left和float:right,
一旦div浮起来,他后面的不浮起来的话就会跑到浮起来的下面.这个时候就需要清除浮动,可以只清除左浮动,clear:left;也可以清除右浮动clear:right;也可以同时清理两种浮动,clean:both;
layout 布局
Layout布局
*display： 是否及如何显示：none隐藏，block块状显示...*作用三：让行内元素变为块级元素*/
/*display:block;*/
*float: 指出了对象是否及如何浮动:值none | left | right
*clear： 清除浮动：none | left | right | both两侧
visibility：设置或检索是否显示对象。visible|hidden|collapse。
与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隐藏：hidden，visible：不剪切内容
overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y：内容超过其指定高度时如何管理内容
鼠标 样式
杂项
程序可以分为C/S(Client客户端和Server服务器)程序和B/S(Browser浏览器和Server服务器).B/S不用下载不用升级,用浏览器直接执行,成千上万人访问服务器,服务器压力比较大.C/S程序 功能强大,效果更好,内容丰富,但是必须下载,升级,所有的资源都在客户端.
动态网站与非动态网站的区别:动态网站采用数据库技术做开发,非动态不采用
重点 一个URL有几部分组成(例如http://www.souhu.com[:80]/images/index.php?name=zhangsan&sex=boy):1,http部分就是协议名称http并非唯一的协议还有其他的协议.2,www.sohu.com部分就是主机名.3,浏览器的端口号是80端口,mysql的端口号是3306吧.4.images是目录名.5,index是文件名.6问号后的name=zhangsan是参数,多个参数之间要用&符号链接.
传参的方式有两种:1.get方式又叫显式传参,特点是能在url处看到传递的参数,传参的长度有限制,相对不安全.2.post方式又叫隐式传参.传递的参数在url处看不见,传递的参数没有长度的限制.相对安全
重点 动态网站开发的7个构件,1超文本标记语言HTML 2,层叠样式表CSS 3客户端脚本语言javascript 4,服务器端的脚本语言 php 5.web服务器 6.数据库 7.浏览器
三种流行的网站开发应用平台 1,lamp linux + apache +mysql +php,入手简单,开发速度快,开发的成本低,容易维护,稳定性高.2asp.net windowserver +iis +sqlserver +asp 入手简单,开发快,成本低,不稳定,不易维护. 3.javaee unix +Tomcet +oricle +jsp入手难,开发慢,成本高,稳定相当好,维护一般
重点 理解web工作的原理：客户端通过浏览器以URL地址的形式向服务器发送访问web页面的请求，服务器做出相应，并以超文本的格式回传给客户端所请求的web页面
重点理解 服务器三种不通的响应方式，1.不带应用程序和数据库的，这个最简单，直接相应一个HTML页面 2.带应用程序同时还带有数据库中的数据的页面，这种情况，服务器端的脚本先处理请求，然后再链接数据库，通过SQL操作数据库抓取需要的内容，交个服务器，最后响应给客户端。 3带应用程序的页面，PHP服务器会逐条解释并翻译成HTML静态代码，再交个客户端
SEO搜索引擎优化: 像百度,必应,搜狗这些搜索类型的网站,他们都有自己的爬虫工具,来抓取网站的meta标签当中的信息,然后将其存储到本地的服务器当中,然后这些网站的销售人员会与网站的的管理员进行联系,询问是否需要搜索引擎优化,需要优化加排名的就需要交钱了,否则采用默认的排名.
网站的后台一般是搜索不到的,如果搜到了一些网站的后台,否则网站的信息就面临着风险的,一些大型的网站专门有一批人赚这种钱,发现漏洞,告诉网站的管理者,网站的管理者会给这人一些钱
框架
分帧框架
行内框架
iframe行内框架：
属性： 值：
src： 引入文件的路径
frameborder： 框架的边框
width： 框架的宽度
height： 框架的高度
<iframe src="./1.html" frameborder="0" width="500" height="500"></iframe>
杂项
程序可以分为C/S(Client客户端和Server服务器)程序和B/S(Browser浏览器和Server服务器).B/S不用下载不用升级,用浏览器直接执行,成千上万人访问服务器,服务器压力比较大.C/S程序 功能强大,效果更好,内容丰富,但是必须下载,升级,所有的资源都在客户端.
动态网站与非动态网站的区别:动态网站采用数据库技术做开发,非动态不采用
重点 一个URL有几部分组成(例如http://www.souhu.com[:80]/images/index.php?name=zhangsan&sex=boy):1,http部分就是协议名称http并非唯一的协议还有其他的协议.2,www.sohu.com部分就是主机名.3,浏览器的端口号是80端口,mysql的端口号是3306吧.4.images是目录名.5,index是文件名.6问号后的name=zhangsan是参数,多个参数之间要用&符号链接.
传参的方式有两种:1.get方式又叫显式传参,特点是能在url处看到传递的参数,传参的长度有限制,相对不安全.2.post方式又叫隐式传参.传递的参数在url处看不见,传递的参数没有长度的限制.相对安全
重点 动态网站开发的7个构件,1超文本标记语言HTML 2,层叠样式表CSS 3客户端脚本语言javascript 4,服务器端的脚本语言 php 5.web服务器 6.数据库 7.浏览器
三种流行的网站开发应用平台 1,lamp linux + apache +mysql +php,入手简单,开发速度快,开发的成本低,容易维护,稳定性高.2asp.net windowserver +iis +sqlserver +asp 入手简单,开发快,成本低,不稳定,不易维护. 3.javaee unix +Tomcet +oricle +jsp入手难,开发慢,成本高,稳定相当好,维护一般
重点 理解web工作的原理：客户端通过浏览器以URL地址的形式向服务器发送访问web页面的请求，服务器做出相应，并以超文本的格式回传给客户端所请求的web页面
重点理解 服务器三种不通的响应方式，1.不带应用程序和数据库的，这个最简单，直接相应一个HTML页面 2.带应用程序同时还带有数据库中的数据的页面，这种情况，服务器端的脚本先处理请求，然后再链接数据库，通过SQL操作数据库抓取需要的内容，交个服务器，最后响应给客户端。 3带应用程序的页面，PHP服务器会逐条解释并翻译成HTML静态代码，再交个客户端
SEO搜索引擎优化: 像百度,必应,搜狗这些搜索类型的网站,他们都有自己的爬虫工具,来抓取网站的meta标签当中的信息,然后将其存储到本地的服务器当中,然后这些网站的销售人员会与网站的的管理员进行联系,询问是否需要搜索引擎优化,需要优化加排名的就需要交钱了,否则采用默认的排名.
网站的后台一般是搜索不到的,如果搜到了一些网站的后台,否则网站的信息就面临着风险的,一些大型的网站专门有一批人赚这种钱,发现漏洞,告诉网站的管理者,网站的管理者会给这人一些钱
HTML
基础 HTML的格式 <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
1. <!doctype html>意思是告诉浏览器当前文档的类型是一个html文档,让浏览器解析. 2. 所有的标签都必须包含在两个<html>标签中. 3. <head>标签的内容应该是不显示在网页中的,(不是不鞥显示,而是逻辑上不应该显示)他是对当前文档的一些修饰,定义搜索引擎用的. 4. <body>标签是显示网页的主题内容.
双标签:需要使用自己的标签加上斜杠来结束,例如<html></html> 单标签:必须子午结束,例如<meta />
标签可以嵌套在一起,属于包含关系,标签有属性,属性有不同的值.属性和值可以写在标签内,一个标签可以有多个属性,属性也可以有多个值,html中的标签是不区分大小写的,语法格式是 <标签名 属性名1="属性值1" 属性名2="属性值2" ....>被标签包裹的内容</标签名>
实体内容 1. 表示空格 2. <表示尖括号的左边<,可以当做lift的缩写. 3. >表示尖括号的右边>,可以当做是right的缩写
<head>标签内的内容<title></title>这是一个双标签,是网页中的标题,它的值就是在浏览器打开一个网页的时候的标题.2. <meta />是一个单标签,一般设置当前页面的编码格式,例如<meta charset="utf-8" /> 3. <link />标签是一个单标签,一般是为了链接一些外部的文件,例如<link rel="定义链入文件与当前文件的关系" href="定义链入文档的路径,一般用相对路径表示" />
重点 路径一个点表示当前路径,例如 ./test.html 表示当前目录下的test.html文件,两个点表示上一级路径,例如 ../hello.java 表示上一级目录下的hello.java文件.上上一级用 . ./. ./qing.php 每多一级就加两个点,一个斜杠
<meta http-equiv="refresh" content="3,www.baidu.com" />表示每三秒刷新一次,刷新之后跳转到百度
弹框 alert('弹得内容');
html标签中的颜色可以用16进制的格式表示,例如<b color="#fffffff">这个标签的颜色是用#号加六个数字来表示的</b> 颜色也可以用英文表示,例如<u color="red">U标签内的内容被设置为了红色</u>
在html代码中,空格和回车是不起作用的,
重点 html中的常见标签,<head>中包含的常见标签有,<link><meta><script><style><title>
<meta charset="utf-8"/>设置的是编码格式
<meta name="keyboard" content="当name等于keyboard时,是设置给搜索引擎关键字用的"/>
<meta name="description" content="当name属性的值为description时,content的内容就是关于网页的介绍"/>
<meta name="revised" content="小王,
2017年3月2日09:55:00" 当name值为revised时,content中的内容是为了版权,会显示一些作者名称和更新时间/>
<meta http-equiv="refresh" content="3,
http://www.bing.com" 当http-equiv属性的值是refresh时,会定时更新网页,content中的逗号前的数字是每多久更新一次,单位是秒.逗号后的内容是一个网站链接,更新之后会跳转到另外的一个网站/>
<link> 标签最常见的用途是链接样式表。
<link rel="stylesheet" href="./css.css" type="text/css"/ 引入一个外部的层叠样式表, rel定义当前文档与被链接文档之间的关系。href的值是一个url,定义被链接文档的位置。type这个属性和它的值可以不写>
<link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/ 这个是设置标签上的小图标的代码,rel的值是shortcut icon. href是小图标所在的路径,type是 类型/后缀类型,type属性可以不写>
标签<script> 标签用于定义客户端脚本，比如 JavaScript,例如<script src="1.js">这是一个从外部引入的javascript文件,利用js里的内容来达到想要的效果</script>
<script>alert('欢迎来到lamp183班期');</script>也可以直接在两个标签中间加上内容达到自己想要的效果,不过这样代码看起来会很多,不简洁,所以一般都用来引用js的效果
<style>标签是双标签,主要是引用css样式来给网页做修饰达的,例如<style>font{color:red;}</style>这种是不常用的,一般为了代码的简洁,会把样式信息写到css文件中,然后再引用.
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>这个是直接在<head标签内写入css,只针对h1标签和p标签来修改样式>
<link rel="stylesheet" type="text/css" href="theme.css" 是直接从外部链接一个css文件./>
<title>title是定义网页的标签</title>
网页的主体部分<body>常见的标签,这些是文本标签<font><h><p><b><stong><i><cite><em><u><sup><sub><q><abbr><bdo><del><details><summary><dialog><ol><ul><li><pre>
<font> 规定文本的字体、字体尺寸、字体颜色。
<font face="verdana" size="6" color="red">这是一行红色,大小为6的,字体为最一般的那种的字</font>
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<p>两个p标签之间的内容是一个段落</p>
<b>标签和<stong>标签都是加粗标签,但是<stong>标签加粗强调的作用，SEO可以着重抓取到的内容.
<i>和<cite>是普通的斜体,<em>是具有强调作用的斜体
<sub>和<sup>是下标签和上标签,都是双标签,一般用在化学方程式和2的平方的表示.记忆方法,b的口在下是下标签,p的口在上是上标签
<u> 标签定义下划线文本。
<q> 标签定义一个短的引用。q标签是一般引用别人的话,效果是双引号
<bdo>标签是定义文档的输出方向<bdo dir="ltr">正大光明</bdo>效果是倒序输出,
<abbr>标签是表示缩写,在浏览器中,鼠标放上去显示全称,<abbr title="鼠标放上显示的全称部分">网页内的缩写</abbr>
<del>标签包裹的文字的中间会出现一条横线,<del>海波老师？</del>一般表示去世的人和错误的地方
<details>是双标签显示出来的效果是一个下拉框,需要与<summary>标签配合使用,summary标签是下拉框中的选项.
代码如下:<details>
<summary>下拉框标题</summary>
下拉框的选项1<br/>
下拉框的选项2<br/>
下拉框的选项3<br/>
</details>
<dialog>标签表示的是对话框标签,可以显示对话的格式,还要配合<dd>和<dt>标签,<dt>dt包裹住对话人</dt> ,<dd>dd包裹住对话人的说话内容</dd>,<dialog>包裹着所有的dt和dd标签。
<!--对话标签-->
<dialog>
<dt>男：</dt><dd>我们分手吧~~</dd>
<dt>女：</dt><dd>为什么？</dd>
<dt>男：</dt><dd>我怀孕了~~</dd>
<dt>女：</dt><dd>不，不可能，我不相信……</dd>
<dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>
<dt>女：</dt><dd>…………</dd>
</dialog>
有序列表和无序列表<ol>表示有序列表.有序类表有一个type属性,属性值不同可以显示出的123,abc等排列顺序的字.<ul>表示无序列表也有一个type属性,但是多个值显示出来的效果是一样的. 注意,列表要借助<li>标签来进行分,谁是第一个,谁是第二个例如
<!--有序列表-->
<ol type="A">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>陈思成回应网友没有和佟丽娅离婚</li>
<li>王宝强回应网友孩子是我的</li>
<li>乡村爱情要出完第九部</li>
</ul>
<pre>标签表示格式化输出,首先,html中的空格和回车是不显示出来的,但是用这个标签包裹的内容可以将空格和回车的效果输出显示
html的注释<!--填写的注释内容-->
<hr/>是水平线,<br/>是换行
链接标签 <a> 锚点
定义和用法
<a> 标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
<a href="#one">第一章：三打白骨将</a><br/>
<a href="#two">第二章：倒拔垂杨柳</a><br/>
<a href="#three">第三章：火烧赤壁</a><br/>
<a href="#four">第四章：刘姥姥进大观园</a><br/>
<h2><a id="one"></a>第一章：三打白骨将</h2>
<h2><a id="two"></a>第二章：倒拔垂杨柳</h2>
<h2><a id="three"></a>第三章：火烧赤壁</h2>
<h2><a id="four"></a>第四章：刘姥姥进大观园</h2>
锚点的原理很简单,定义几个a标签,把要跳转的id号码给他,然后通过这个id就能找到要链接到的位置
定义和用法
<a> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
<!--链接到了一个外部的网站-->
<a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>
注意:href属性是值可以是一个网址,可以是一个绝对路径,可以是一个相对路径,这个属性值就是一个url地址.
target属性的值1._blank在新窗口中打开被链接文档。
2._self默认。在相同的框架中打开被链接文档。
3._parent在父框架集中打开被链接文档
4._top,在整个窗口中打开被链接文档
5.framename在指定的框架中打开被链接文档
多媒体相关标签,<img><map><area><audio><video><source><canvas>
<embed>
热区绘制的步骤：
1.img标签引入一张图片，注意，图像需要时原大小
2.给img标签一个usemap属性，使用一个地图区域
3.然后使用map定义一块地图区域，注意，map需要给定id
4.使用area定义一个图形的图区
<img src="这个位置是一个图片文件的路径" usemap="usemap是img标签的一个属性,表示将图像定义为客户器端图像映射。这里是一个id地址,#id名称,手册上显示的是这个位置是一个url地址"/>
<map id="map标签要与img标签配合在一起才能制作热区,这个是为了给指定的区域设置一个id,名字随便写">
<!-- <area shape="图形的名称" coords="图形的坐标点"
οnclick="这里是在监听,鼠标点了之后给一个触发事件"/> -->
<area shape="circ" coords="332,278,130"
οnclick="alert('别看了，再看嫁给你！')"/>
</map>
<img />：图像标签
属性： 值：
src： 引入图像的路径
width： 设置图像的宽度(单位：像素px)
height： 设置图像的高度(单位：像素px)
alt： 图像加载失败时显示的信息
title： 鼠标移入图像时的提示信息
<area />标签
属性 值
shape 形状,值有矩形rectangle,圆形circle,多边形polygon
coords 坐标,圆有三个坐标,原点占两个点,半径占一个长度,
矩形是对角两个点的坐标,
多边形是有几个角,就写几个点的坐标
屏幕坐标是从左上角开始的.
<audio>标签
音频标签：audio
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放音频
border： 数字 边框线粗细
<audio controls src="给一个音频标签的文件地址就行" autoplay ></audio>
<video>视频标签
属性： 值：
src： 路径 引入音频的路径
controls： controls 没有控制条音频是没有办法播放的
autoplay： autoplay 当打开网页时自动播放视频
height 高度
width 宽度
<video width="视频款显示出来给一个宽度" controls src="给一个视频文件所在的路径" poster="这个是封面,需要给一个图片的地址路径" ></video>
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
属性 值
media media query 定义媒介资源的类型，供浏览器决定是否下载
src url 这里写的是一个视频或者音频的地址
<!--引入一个外部插件-->
<!-- <embed src="haowan.swf" /> -->
表格相关标签,<table><caption><th><tr><td><thead><tbody><tfoot>
<table>标签
table表格：
属性： 值： 含义：
border: 像素值(px) 设置表格边框粗细的
width: 宽度(px) 设置表格的宽度
height: 像素 设置表格的高度
cellspacing： 像素 设置单元格和单元格之间的间距
cellpadding： 相许 设置单元格中的值和单元格边框之间的间距
table中的标签：
caption标签：标题标签
th标签：表头标签(字体加粗，默认居中)
tr标签：表格中的一行
属性： 值：
align： 对齐方式(left、center、right)
td标签：表格中的一个单元格
属性： 值：
rowspan： 合并行
colspan： 合并列
align： 对齐方式(left、center、right)
表单相关标签<form><input><select><option><textarea><button>
<form>标签
<form></form> --表单标签
form标签常用属性：
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.HTML5不支持。用 id 代替。
<input>标签
<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
<input/> 表单项中的属性，可以提供
*type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性:表单项名,用于存储内容值的
*value属性:输入的值(默认指定值)
size属性:输入框的宽度值
maxlength属性:输入框的输入内容的最大长度
readonly属性:对输入框只读属性
*disabled属性:禁用属性
*checked属性:对选择框指定默认选项
accesskey属性:指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性:通过数字指定tab键的切换顺序(不常用)
<select>下拉列表标签
<select> 标签创建下拉列表。
*name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
<textarea>标签文本域
<textarea> 多行的文本输入区域
*name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。
*rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读
...
默认值是在两个标签之间
<button>标签
按钮 您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
框架
分帧框架
行内框架
iframe行内框架：
属性： 值：
src： 引入文件的路径
frameborder： 框架的边框
width： 框架的宽度
height： 框架的高度
<iframe src="./1.html" frameborder="0" width="500" height="500"></iframe>
扫一扫
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
