html+css复习总结

1、插入视频

<head>

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

</head>

<body>

Your browser does not support the video tag.

</video>

</div>

</body>

2.播放音频

Your browser does not support the audio tag.

</audio>

3.HTML拖放

思路：1）设置元素可拖放 2）设置存放拖动的值的变量 3）获取拖之后的数据并插入

<head>

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function allowDrop(ev)

{

ev.preventDefault();

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

</body>

4.绘制图形

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

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

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

--------------------------------

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

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

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

Your browser does not support the canvas element.

</canvas>

5.矢量图

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

6.使用地理位置

function getLocation() {

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.longitude;

}

7.换行

<br />

8.样式

<h1 style="text-align:center">This is a heading</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

9.引用外部样式

<head>

</head>

10.引用内部样式

body {background-color: red}

p {margin-left: 20px}

.city {

float: left;

margin: 5px;

padding: 15px;

width: 300px;

height: 300px;

border: 1px solid black;

}

</style>

10.加入链接

<a href='http://www.3cschool.com.cn/' target='_blank'>hahaha</a>

11.加入图像，如果图像显示不出来，就显示数字

12.水平表格和表头，表单元格内边距，单元格外边距

<caption>这里是有表头的表格标题</caption>

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

13.垂直表格

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

14.空单元格

15.横跨两行的单元格

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

16.横跨两列的单元格

<tr>

<td>Bill Gates</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

17.无序列表或者有序列表

</ul>

---------------------------

<ol>

<li>Coffee</li>

</ol>

18.块

div或者span

19.下划线

<hr />

20.表单

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

First name:<br>

<option value="volvo">Volvo</option>

</select>

<br>

The cat was playing in the garden.

</textarea>

<br>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<br>

<br>

<br>

<input type="checkbox" name="vehicle" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

<br>

<input type="radio" name="sex" value="male" checked>Male

<br>

<br>

21.input属性值

input属性值如value，readonly，disabled，size，maxlength

22.派生选择器

h2 strong{ color: blue; }

23.属性选择器

1）第一种

[title]{color:red;}

------

<body>

<h2 title="Hello world">Hello world</h2>

<a title="W3School" href="http://w3school.com.cn">W3School</a>

</body>

2）第二种

[title~=hello]

{

color:red;

}

------------

<h2 title="hello world">Hello world</h2>

<p title="student hello">Hello W3School students!</h1>

实战

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

font-family: Verdana, Arial;

}

24.css背景

background-color, background-image

25.css文本

1）首行缩进

p {text-indent: 5em;}

p {text-indent: 20%;}

2）text-align:center 与 <CENTER>区别

<CENTER> 不仅影响文本，还会把整个元素居中。

3）word-spacing

word-spacing 属性可以改变字（单词）之间的标准间隔。

4）letter-spacing

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔

5)字符转换

text-transform 属性处理文本的大小写，属性有：

none，uppercase，lowercase，capitalize

6）文本划线

text-decoration 有 5 个值：

none

underline

overline

line-through

blink(文本闪烁)

7）处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

如果 white-space 属性的值为 pre，空白符不会被忽略，否则=normal它会把所有空白符合并为一个空格，否则=nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。

<p>This paragraph has many

spaces in it.</p>

---------

p {white-space: normal;}

26.字体样式font-family

Serif 字体

Sans-serif 字体

Monospace 字体

Cursive 字体

Fantasy 字体

27.字体斜体格式

font-style 属性最常用于规定斜体文本。

该属性有三个值：

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

28.点击样式

链接的四种状态：

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

29.ul列表

ul {list-style-type : square}

30.css表格

由于 table/th/td 元素都有独立的边框，如果需要把表格显示为单线条边框，请使用border-collapse属性

table

{

border-collapse:collapse;

}

table, td, th

{

border:1px solid black;

vertical-align:bottom;

}

31.css轮廓

outline:#00ff00 dotted thin;

outline:#00ff00 solid 5px;

32.css框模型

* {

margin: 0;

padding: 0;

}

33.css边框

p.aside {border-style: solid dotted dashed double;border-width: 15px 5px 15px 5px;}

34.css外边距合并

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

35.css定位

position属性有：relative, absolute, fixed.

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

#box_relative {

position: relative;

left: 30px;

top: 20px;

}

36.浮动

为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，

img

{

float:right;

border:1px dotted black;

margin:0px 0px 15px 20px;

}

37.选择器

h2, p {color:gray;}

38.属性选择器

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

a[href][title]

{

color:red;

}

将某个指定文档的超链接变成红色

a[href="http://www.w3school.com.cn/about_us.asp"]{

color: red;

}

选择 class 属性中包含 important 的元素

p[class~="important"] {color: red;}

p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

选择 abc 属性值以 "def" 开头的所有元素：[abc^="def"]

选择 abc 属性值以 "def" 结尾的所有元素：[abc$="def"]

选择 abc 属性值中包含子串 "def" 的所有元素：[abc*="def"]

选择 lang 属性等于 en 或以 en- 开头的所有元素：*[lang|="en"] {color: red;}

39.后代选择器

h1 em {color:red;}

为包含边栏的 div 指定值为 sidebar 的 class 属性设置：div.sidebar {background:blue;}

把第一个 h1 下面的两个 strong 元素变为红色：h1>strong {color:red;}

40.相邻兄弟选择器

选择紧接在 h1 元素后出现的段落：h1 + p {margin-top:50px;}

41.伪类选择器

a:visited{color: #00FF00}/* 已访问的链接 */

将作为某元素第一个子元素的所有 p 元素设置为粗体： p:first-child {font-weight: bold;}

p 元素的第一行文本进行格式化：

p:first-line

{

color:#ff0000;

font-variant:small-caps;

}

42.css对齐

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距

.center{margin-left:auto;

margin-right:auto;width:70%;background-color:#b0e0e6;}

使用 position 属性进行左和右对齐

.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}

43.css高度

line-height，max-height，max-width，min-height

44.CSS clear 属性

图像的左侧和右侧均不允许出现浮动元素

img

{

float:left;

clear:both;

}

45.css导航栏

把段落元素设置为内联元素： p {display: inline}

而div 元素不会显示出来：div {display: none}

此元素将显示为块级元素，此元素前后会带有换行符：block

行内块元素：inline-block

此元素会作为列表显示：list-item

使 h2 元素不可见：h1.invisible {visibility:hidden}

46.css图片

img{opacity:0.4;filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */}