为笔试做准备——HTML复习二

一、HTML注释

<!-- This is a comment -->

同其他语言一样,HTML的注释也能用来调试程序。

条件注释:

用来定义一些仅由IE中执行的HTML标签。

<!-- [if IE 9]>
    ....
<! [endif]-->

常用来设置浏览器兼容。

二、HTML颜色

可通过颜色名称、RGB值、十六进制值来指定颜色。

1、颜色名称用法

HTML支持140种标准颜色名称,可参考W3Schools:

https://www.w3schools.com/colors/colors_names.asp

<h1 style="background-color : red">标题一</h1>

2、RGB用法

rgb(red, green, blue)

<h1 style="background-color : rgb(255, 0, 0)">标题一</h1>

灰度梯度常用三个值相等的颜色定义

黑色rgb(0,0,0)——rgb(90,90,90)——rgb(128,128,128)——rgb(200,200,200)——白色rgb(255,255,255)

3、十六进制用法

#RRGGBB,RR红色,GG绿色,BB蓝色

<h1 style="background-color : #FF0000">标题一</h>

同上灰度梯度:

黑色#000000——#404040——#808080——#CCCCCC——白色#FFFFFF

三、HTML样式-CSS

即Cascading Style Sheets。

包括三种添加方法:内联样式、内部样式表、外部样式表,最好使用外部样式表。

1、内联CSS

<h1 style="color:red;">红色标题</h1>

2、内部样式

<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-color:powerblue;
}
</style>
<body>
    ....
</body>
</html>

3、外链样式

<link rel="stylesheet" href="style.css">

4、CSS边框

定义包围元素的边框

p{
    border: 1px solid powerblue;
}

5、CSS边距

padding内边距,margin外边距。

6、id属性

<p id="p01">I am different</p>
#p01{
    color:blue
}

每个元素的id在页面内应当是唯一的,所以ID选择器用来选择一个独一无二的元素。

7、class属性

<p class="error">an error</p>
p.error{
    color:red;
}

class属性代码重用率高。

四、HTML链接

<a href="http://www.icoder.top/">访问本站</a>

如果不在子文件夹地址末尾添加斜杠,可能会产生两个请求,许多服务器会自动在url后添加斜杠创建一个新的请求。

1、链接颜色

默认情况下,未访问过为蓝色下划线,访问过的链接是紫色下划线,鼠标按下为红色下划线。

<style>
/*未访问时*/
a:link{
    color:green;
    background-color:transparent;
    text-decoration:none;
}
/*访问过的*/
a:visited{
    color:pink;
    background-color:transparent;
    text-decoration:none;
}
/*鼠标滑过*/
a:hover{
    color:red;
    background-color:transparent;
    text-decoration:none;
}
/*鼠标按下*/
a:active{
    color:yellow;
    background-color:transparent;
    text-decoration:none;
}

2、target属性

target属性可以取以下值:

  • _blank,在新标签页中打开链接;
  • _self,默认值,在当前窗口打开链接;
  • _parent,在当前frame的父窗口打开链接;
  • _top,在窗口的整个body中打开;
  • framename,在指定名称的frame中打开;

如果页面被锁定在一个frame中,可以使用target=”_top”跳出frame。

3、图片链接

<a href="#">
    <img src="xxx.jpg" alt="示例图片" style="width:42px; height:42px; border:0;">
</a>

添加border:0是为了防止IE 9(及以下版本)在显示链接图像时添加外边框。

4、创建书签

示例:

使用id属性创建书签

<h2 id="C4">Chapter 4</h2>

为书签添加链接

<a href="#C4">Jump to Chapter 4</a>

或从另一个页面访问

<a href="demo.html#C4">Jump to Chapter 4</a>

五、HTML图像

语法:

<img src="#" alt="#" style="width:100px; height:100px">

也可以这样指定图像大小:

<img src="#" alt="#" width="100" height="100">

使用图像时最好是指定图像大小,否则加载图像是页面会闪烁。且最好使用第一种语法指定图像大小,以防外部样式表意外更改图像大小。

可以使用CSS的float属性来使图像在文本中浮于左/右,默认置左:

<p><img src="#" alt="#" style="width:100px; height:100px; float:right">图像置右</p>

创建一个可供点击的图像地图,鼠标滑过会显示坐标:

<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

图像映射:

使用<map>标签定义图像映射,图像映射是一个拥有可点击区域的图像。<map>的name属性与<img>的usemap属性相关联,连接两者。<map>标签包括一系列<area>标签用来定义可点击区域。

<img src="#" alt="#" usemap="#planetmap" style="width:145px; height:126px;">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.html">
    <area shape="circle" coords="90,58,3" alt="earth" href="earth.html">
    <area shape="circle" coords="124,58,8" alt="moon" href="moon.html">
</map>
发帖时间: web