html && CSS

1.html:超文本标记语言，用来对网页文档信息进行格式化展示的语言，主要包括头部(head)和主体(body)。

http协议：用于服务器和浏览器之间的数据传送，规定html如何在客户端和服务器端传输

url:统一资源定位符，进行信息资源的唯一定位

网页中三种最基本的页面组成元素是文字、图像、超链接

单元格垂直合并所用的属性是__ rowspan 。单元格横向合并所用的属性是__ colspan ____。

在HTML中，引入CSS的方法主要有__行内式____、_内嵌样式___、__导入式____、__链接式__4种

CSS中插入注释格式是_/**/ _。

font-size：控制文本尺寸 font-family：修改字体样式

CSS显示这样一个边框：上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素的写法是border-width:10px1px5px20px

CSS中设置行高的属性是line-height

设置网页中某个标签的左边界为5px用的CSS样式为 margin:0 0 0 5px 或者 margin:0 5px。

**margin:5px 6px 7px 8px; 意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，

等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 一样效果简写；

参考链接：http://www.cnblogs.com/spring_wang/p/3938674.html

转法：margin:5px 6px 7px 8px

2.特点：a.独立于平台，即独立于计算机硬件和操作系统

b.超文本

c.精确的结构化文档

几个工具：HBuilder、DW、webStorm

本地文件路径：file:///C:/Users/Administrator/Desktop/hh.html

file://协议 /是根目录

字体样式：

name="decription" name="author" //类似keywords功能

//css外部引入

//js外部引入

<font color="red"> 修改字体颜色

style="background-color:red;font-size:20px;font-family:arial"

background-color:标准的css属性

bgcolor是IE扩展的html属性，两者效果相同推荐使用

shape=rect表示的形状是矩形； shape=poly表示的形状是多边形

HBuilder：http://127.0.0.1:8020/TestHtml/table.html

1.html常见标签

<h1>到<h6> 字体加粗加大效果，字体大小依次减小，默认换行效果，只能识别h1到h6

<h7> 则作为body效果

<h1 align="center">ss</h1> //align标签属性

<hr width="200" align="left" size="7" color="pink"/> //横线，单标签 200px width="80%" 按比例缩放

<font size="5" color="red" face="微软雅黑"/> //没有align属性 face代表字体

<br/> 换行   空格 "" " ' ' & &

<p> 段落符，相隔之间会换行，相对于<br/>有较大的间距

<b> 加粗 <i>斜体 <u>下划线 <del>删除

<pre>aa ss</pre>//中间空格不会被清掉

10<sub>3</sub> 下标 <sup> 上标

<qq> (代表左右括号)

bgcolor 将背景设置颜色

background 设置背景颜色 background和bgcolor不能同时使用 <body background="img/7.png">

2.<img>

常见属性： src:图像文件地址(可以使用网络图片) width:图像大小 height (width和height设置一个即可，会自动等比例缩放，默认px)

border:图像边框(跟style一起使用可以改变样式) alt:图片资源找不到时显示的文本内容(为图片添加简要说明文字的属性)

title:鼠标移动到图片上面的提示信息

border="10" style="border-color:red"

3.<embed src="a.mp3" autostart="true"(可能不支持) loop=“true” hidden="false" width="100px" height="100px"/> 音视频

autostart="true"(可能不支持) loop 循环 hidden 隐藏

支持格式 mp3 wma asf swf flv rm ra ram avi

<center></center> 可以将音视频控件位置放在中间有效

4.<table border="1" width="50%" cellpadding="10" cellspacing="20"> cellpadding 内边距 cellspacing 外边距

tr 行

列 td <th>修饰文本，默认居中加粗的效果 <th align="left" width="100"> width会影响一整列 <td align="center">

rowspan="2" 跨两行 colspan="2" 跨两列

<th rowspan="3">sqwwe</th>  td和th都能使用rowspan和colspan

table>tr*9>th*5 +tab 快捷生成9行5列的表格

style="border-top: none;" 去除上下两个表格重复的线

修改表格的样式，单线条

5.<a href="5.htm"><img border="0" src=""></a> a 超链接 href 链接地址

target="_blank" 在新窗口中打开链接，新的窗口（一般不推荐）

_parent 在父窗体中打开链接

_self 当前窗体中打开链接，默认值

_top 在当前窗体打开链接，并替换当前的整个窗体(框架页)

<a href="login.html" target="_top">退出登录</a> 退出顶层页，前提是已有上一级页面

ctrl+shift+r 快捷复制

6.锚点

<a name="first"> </a> <a href="#first"> </a>点first指向name

<a href="#"> </a> 从页面开头算起

7.框架 Iframe 内嵌框架

Iframe和frame区别：

1、frame不能脱离frameSet单独使用，iframe可以
2、frame不能放在body中,否则不能正常显示
　 frame不能和body同时使用,iframe可以和body同时使用

8.frameSet不能与body共存，否则可能导致效果显示不出来

<frameset rows="20%,60%,*" cols="" border="1"> rows将页面横向切分 cols 纵向切分

<frame src="url"/> border frameborder="yes" 显示框线

scrolling="NO" 不会有scrolling bar 默认yes

Noresize 使用者无法调整分割页面的大小。

常用框架：

</frameset>

</frameset>

9. form表单用于收集和提交用户输入的数据,提交到服务器,客户端和服务器交互数据的一个方式。

action:提交的目标是动态网页jsp等，提交的具体的服务器地址

method: get: 1.把提交的参数信息放在url地址栏 (查询用) 默认

2.参数和提交地址用?相连接

3.参数和参数之间用&相连接

4.每一个参数都是键值对方式提交

5.提交的数据量较少(2-4k)，把信息显示在地址栏，存在安全问题。有缓存，效率比较高

6.如果不写name值，不会提交

post:传送的数据作为http request的一部分，资料不会显示在地址栏，传送的数据量比较大。(增删改用)

2-4与get一样

5.相对安全，不会走缓存，提交的数据理论上没有限制。

post格式：
请求格式：POST /hello.jsp HTTP/1.1
响应格式：HTTP/1.1 200 OK
HTTP请求头与请求正文；HTTP响应头与响应正文要分别以空行分隔
请求正文：username=aaa&password=123&submit=submit
常见状态码：200 响应成功
400 错误的请求 404 文件不存在 405 服务器不支持客户的请求方式
500 服务器内部错误
put：
上传文档到服务器
delete:
用于删除服务器上某个文档

有name才会提交。action="#" 提交到本页

文本框：<input type="text"/> 输入一行文本 placeholder 默认文本 value 默认值

密码：<input type="password"/> 输入一行文本，不可见，以星号表示。

单选按钮:<input type="radio" name="msex"/> 在两个单选按钮上加name="sex"的一组值，可以达到单选效果

<input type="radio" name="msex"/> checked="checked" 默认选择 checked也是可以

复选框:<input type="checkbox"> checked="checked" 默认选择

隐藏域:<input type="hidden"> 值对用户不可见，但会提交给服务器，一般用于传用户id

下拉列表：<select> <option>aa</option> </select> selected="selected" 默认选择

文本域(多行文本): <TEXTAREA rows="5" cols="70">默认值</TEXTAREA>

提交按钮:<input type="submit"> 提交信息

普通按钮:<input type="button">

重置按钮:<input type="reset"> 重置表单信息

文件上传：<input type="file">

图片:<input type="image" src="url" style="height:100px;"/>

验证码:<input type="text" maxlength="3" size="5" name="rcode"/>

name用于提交数据 maxLength最大输入长度 size（1-7）文本框长度

Readonly只针对input(text / password)和textarea有效，disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
但使用了disabled后，当我们将表单以POST或GET的方式提交的话，该元素的值不会被传递出去，而readonly会将该值传递出去。

总结:

所有要提交的表单域必须加name属性，除了不提交，如button

单选按钮和复选按钮：

name相同即为一组

没定义values属性，选中按钮提交默认为:on,而不是空字符串。

option没指定value属性，被选中则提交的是<option>的文本，而不是on或空字符串

表单域名字问题：

服务器目录以"/"开头

CSS3.0:层叠样式表（带px）

1. 三种引用方式：就近原则，按顺序执行，一般先使用最后定义的样式(相同的样式，作用于同一个标签上)

1.内联方式：直接写在html里面 <th style="background-color:red;">1</th>

2.嵌入样式：<style type="text/css">

table{ //对所有table,加样式 table是选择器

border-collapse: collapse

} </style>

3.外部引入 .css文件

2.块级元素(切分成多个块)

<div style="width:500px;border:solid"></div> //列级元素 border:solid 实线边框

<span ></span> //行级元素，切分行

控制隐藏效果:

display:none|block; //不占空间

visibility: hidden|visible; //保留空间

3.id选择器（id选择器优先级 > 类选择器优先级 > 标签选择器优先级）

#div01{ 不可重复

background-color: aqua;

}

2. 元素选择器

div{ //对所有div作用

height: 100;

}

3.类选择器

.divClass{ //对所有class为divClass起作用

height: 100;

}

4.元素选择器

div[class]{ //作用所有带class的属性 div[class^=div] 包含div div[class$=ss] 以ss结尾

background-color:pink;

}

div h2{ height:200px;} 只要div内包含h2，就起作用

子包含选择器： div>h2{ height:200px; } 选择div下第一个元素起作用

#div01,.divclass{ height:200px; } 对div和类divclass起作用

鼠标移动到哪一个div就会改变。

a{ text-decoration: none; } //全网页超链接无下划线

3.行级元素(一般用于显示提示信息)

4.定位：

z-index：1 可以修改图片的位置，值越大，越靠上层。层次样式的体现

position: absolute; 绝对定位只相对于浏览器左上角而言

position: relative; 相对定位相对于上一个div的位置而言

#img02{

position: relative;

top: 120px;

left: 110px;

z-index: 2;

}

float:right 也可以达到放在右边的效果

5.padding：内边距

margin:外边距

border: 边框

盒子模型相关的属性(上右下左)：内容(content)、填充(padding)、边框(border)、边界(margin)

两个元素之间相邻左maigin 10 向右10 对于div相距10 对于其他是20

background-position:-5px 10px 向左偏移5px，向下偏移10px xy坐标系

列表的项目符号为实心矩形type: square

文本对齐属性的取值:justify、center、right、left

6..表单实际上包含两个重要组成部分：一是描述表单信息的__web页

二是用于处理表单数据的服务器端___表单处理程序 ___。

7.能够建立网页交互性的脚本语言有两种，一种是只在服务器_端运行的语言，另一种在网上经常使用的语言是客户端语言

8.脚本语言：Web服务器直接把用脚本语言编写的未经编译的程序源代码发送到浏览器端，由浏览器负责解析、编译和执行。

9.web服务器架构采用SOAP(简单对象访问协议)通讯，规定客户与服务器之间一律用xml进行传输数据。

10.Tomcat作为运行Servlet的容器，基本功能是接收与解析来自客户的请求，同时把客户的请求传送给相应的Servlet,

并把Servlet的相应结果返回给客户。

11.jsp提示http://blog.csdn.net/cpp_lzth/article/details/6830463

12.隐藏：

style="display:none;" 隐藏并让出位置

style="visibility:hidden;" 隐藏，但仍占着位置

13.引入bootstrap:

打开w3cschool+bootstrap直接引用别人做好的框架(http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-tables.html)

2.缩写和首字母缩写：

<acronym title="ccc">d</acronym> //鼠标移动到d时会有ccc显示

<dfn><abbr title="aaa">ss</abbr></dfn> //斜体

3.地址:

预格式化：

<pre>aa ss</pre>//中间空格不会被清掉

4.删除字<del> 下划线<ins> 上标<sup>(字体往上显示) 下标<sub>

引用一段话<blockquote> 短引用<q>

5.计算机代码：

键盘文本 kbd, 计算机代码示例samp, 计算机代码文本code

6.样式2

h1 {color:red}

p {color:blue}

</style>

7.<meta http-equiv="Content-type" content="text/html;charset= gb2312"/> //http-equiv 模拟一个HTTP响应头

8.<a href="/example/html/lastpage.html" style="text-decoration:none"> 创建一个无下划线的链接

<link rel="stylesheet" type="text/css" href="mystyle.css">   引用外部样式表

9.table中border="a" a的值越大，表格的边框线越粗

cellpadding 单元格距离边的距离 cellspacing 单元格之间的距离

background 单元格背景图 bgcolor="red" 单元格背景色

align 字体存放位置 frame有五种可选值，box代表包围整个圈，above表格上放

below hsides(水平，即上下横线) vsides （垂直，即左右竖线）

<table border="5" cellpadding="10"> //边框线粗为5，单元格边距为10

<td align="left">aaa</td> //字体靠左边框显示 align属性选择：

left right center	justify对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 char 内容对准指定的字符

left right center

justify对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 char 内容对准指定的字符

10. //圆形的无序号列表 type表示序号表的类型：type='cirlce" //空心圆形 disc实心圆形

square 方形有序号的 type="A" a I(大写罗马数字) i（小写罗马数字）

<ul type="disc"> //嵌套使用无序号表

<li>茶

<li>凉茶

</ul>

</li>

</ul>

</li>

</ul>

11.定义列表

<dl>

</dl>

12.块级元素：

div （division/section）定于文档中的分区或节，把文档分割成独立的、不同的部分

常搭配css使用

span 行内的元素，搭配css 可用于部分文本设置样式属性

<div class="A"> //class 元素有一个或多个的类名

样式：其他地方引用的时候，<div class="mycss">就可以

<body>

<style>

.mycss{

background-color:black;

color:blue;

margin:20;

padding:20;

}

</style>

<p style="font-size:30px">heoooooosjsjsjsj</p>

</div>

</body>

<style>

span.myspan{

color:red;

margin:20;

}

</style>

如果css 以 .xxx 命名则调用的时候，用class="xxx"

如果css以 #xxx命名，则调用的时候，用id="xxx"

css中float：left代表靠左边展示

clear:both 左右两边都不出现浮动元素

line-height:30px; 行与行之间的高度

border-style 1.none:表示没边框线   2.solid：表示单线   3.double：表示双线   4.groove：表示凹槽   5.redge:表示皱纹   6.dotted:点线(貌似IE6下效果等同于dashed)   7.dashed:虚线

13.引用图片:若为网络图片则指向对应的链接即可；若为本地的图片，则指向图片文件所在的文件目录

如：file:///C:/Users/Administrator/Desktop/html_study/ip.gif

14.border: 1px solid black; 边框1像素，实线

15.响应式设计网页：使用bootstrap实现

 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

16.frameset框架集：可以包含多个子框架

<frameset rows="50%,50%"> //cols 垂直框架可以为数值 1,3 ,1,也表示占比 rows 水平框架 noresize="noresize"(参数值可以任意)。使框架不能改变或者移动

<frameset rows="20%,30%"> //嵌套使用frameset

</frameset>

</frameset>

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

<body>不处理框架</body>

</noframes>

内联框架：<iframe src="URL" frameborder="0"></iframe> 可以实现把一个网站的内容嵌入到另一个网站里 frameborder="0" 无边框

跳转至指定元素的位置：<frame src="/example/html/link.html#C10">

<a href="www.baidu.com" target="myframe" >sss</a> 通过target指向myframe框架实现跳转

16.链接：

<base target="_blank" /> base为页面上的所有链接规定默认地址或默认目标（target）

<a href="www.w3cSchool.com.cn" target="_blank" > 由于base的存在，没有target属性也会在新的窗口中打开链接。

若base 和target都不存在的时候，链接就只会在原窗口中打开网页。

17.常见实体：

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

18：URL

URL规则：scheme://host.domain:port/path/filename     port  如果省略，则文档必须位于网站的根目录中

19.表单：

get ：from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。

post ：from表单里所填的值，附加在HTML Headers上。

<form action="http://www.example.com/test.asp" method="post/get"> //aciton要提交的

<input type="text" name="lastname"

value="Nixon" size="30" maxlength="50">

<option>Apples

<option selected>Bananas

<option>Cherries

</select>

<textarea name="Comment" rows="60"

cols="20"></textarea>

</form>

20 html5:

<video width="200" height="100" controls="controls"> 加载视频文件，control 属性供添加播放、暂停和音量控件。

</video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。来源： http://www.w3school.com.cn/html5/html_5_video.asp

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

来源： http://www.w3school.com.cn/html5/html_5_video_dom.asp

21.拖拽图片资源并放置新位置：

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev){

ev.preventDefault(); //避免浏览器对数据的默认处理，drop 默认以链接形式打开

}

function drag(ev){

ev.dataTransfer.setData("Text",ev.target.id); //将要拖拽的图片id存入Text标记

}

function drop(ev){

ev.preventDefault();

var data=ev.dataTransfer.getData("Text"); //取出之前存的id值

ev.target.appendChild(document.getElementById(data)); //将上面的id值追加到新的元素中

}

</script>

</head>

<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> //id="div1" 引用css样式

<br />

<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" /> //开始拖动的时候调用drag(event)

22.移动坐标和划线的方法用驼峰法，moveTo(a,b) lineTo(a,b)

var c=document.getElementById("mcanvas");

var ctx=c.getContext("2d");

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.lineTo(10,60);

ctx.stroke();

</script>

23.画圆：

arc(x, y, radius,beginAngle, endAngle, anticlockwise); x，y：圆心坐标； radius：半径； beginAngle,
endAngle：开始的弧度和结束的弧度； anticlockwise：参数为true时为逆时针，参数为false时为顺时针；

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

24.颜色渐变：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,175,50); //创建线性

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

ctx.fillStyle=grd;

ctx.fillRect(0,0,175,50);

</script>

25加载图片：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=new Image()

img.src="/i/eg_flower.png"

ctx.drawImage(img,0,0);

26.操作div块时，脚本应在前面，div块在后面。

27.常见dom属性和方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

nodeName属性：

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

nodeVlaue属性:

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

(x.firstChild.nodeValue); 获取子元素第一个节点值

null

posted on 2018-03-06 17:57 xiaojiayu0011 阅读(611) 评论(0) 收藏举报

刷新页面返回顶部

xiaojiayu0011

html && CSS

导航

公告