HTML+CSS网页设计与布局从入门到精通摘要_html网站制作的摘要-优快云博客

本文链接：https://blog.youkuaiyun.com/world_java/article/details/8593696

HTML网页文档结构：

1.首先应该明确一个概念，HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。

2.<html>标记：<html>标记放在HTML文件的开头，并没有什么实质性的功能，只是一个形式上的标记，但还是希望读者形成一个良好的编写习惯，在HTML文件开头使用<html>标记来做一个形式上的开始。

3.<head>标记：<head>也称为头标记，一般放在<html>标记里，其作用是放置关于此HTML文件的信息，如提供索引、定义CSS样式等。

4.<title>标记：<title>称为标题标记，包含在<head>标记内，它的作用是设定网页标题，可以看见在浏览器左上方的标题栏中显示这个标题，此外，在Windows任务栏中显示的也是这个标题。

5.<body>标记：<body>又称为主体标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在。它并不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像。

6.<hn></hn>(n表示从1到6的数字):这个标记用来设置标题文字以及加粗方式显示在网页中。它共有6个层次，也就是可以设置6种大小样式。

7.<b></b>：这个标记的作用是使其中的文字以加粗的形式显示。

8.<i></i>：这个标记的作用是使其中的文字以倾斜的形式显示。

9.<center></center>：这个标记可以将其中的内容显示在窗口正中间。

10.<blockquote></blockquote>：这个标记可以使其中的内容缩进。

11.<font></font>：color属性是颜色，size属性控制文字大小，face属性用于设置文字的字体(宋体，楷体等)。如果显示这个页面的浏览器所在的计算机中没有安装相应的字体，浏览器仍然按照默认的字体显示。

12.<sup></sup>：为上标标记，用于将数字缩小后显示于上方。

13.<sub></sub>：为下标标记，用于将数字缩小后显示于下方。

14.字符“÷” “±” “&permil;” “↔” 双向箭头 “⇔”

15.GIF图片和JPG图片的区别：

16.<img>标记的作用就是网页中插入图片，其中属性src是该标记的必要属性。width属性控制图片的宽度，height属性控制图片的高度。alt属性为图像设置替换文本，当图像显示不出来的时候就显示这段文本。

注意：如果高度和宽度属性不设置的话，图片会以默认高度和宽度显示，但是如果指明了默认高度和宽度，这样会使网页显示速度更快。

17.锚：<a href="#目标名称">链接文字</a>意思是指明王网页所要跳到哪个目标名称的位置上。

<a name="目标名称"></a>意思是设置相应的跳转目标位置。例：

<a href="#one">第一段</a>
<a href="#two">第一段</a>
<a href="#three">第一段</a>
<h3><a name="one">11111111</a></h3>
<h3><a name="two"></a>22222222</h3>
<h3><a name="three"></a>33333333</h3>

18.当点击某个超链接后出现电子邮件的客户端软件：<a href="mailto:12345@qq.com"></a>

19.在默认情况下，当点击链接的时候，目标页面还是在同一个窗口中显示。如果要在新窗口显示，就需要在<a>标签中设置"target属性"。

将"target"属性设置为"_blank"，就会自动打开一个新窗口，显示目标页面。

将"target"属性设置为"_self"，相当于不设置target属性，即在原窗口中显示链接的目标页面。

将"target"属性设置为"_top"，表示在顶级框架，也就是在浏览器窗口中显示链接的目标页面。

将"target"属性设置为"_partent"，表示在"上一级"框架中显示链接的目标页面。

20.热点区域：

21.<frameset></frameset>和<frame></frame>：

<frameset>标签是将整个网页分割成几块，然后每块都可以独立地显示一个网页。需要注意的是，<frameset></frameset>标记是与<body> </body>同级的。因此，不要将<frameset>标签包含在<body>标记中，否则<frameset>标记将无法使用。窗口框架的分割方式有两种，一种是上下分割，另一种是左右分割。cols属性是左右分割，rows属性是上下分割。

例如：这个是嵌套分割

<frameset cols="30%,*">
	<frame></frame>
  		<frameset rows="40%,*">
  		<frame></frame>
		<frame></frame>
	</frameset>
</frameset>

<frame>标签可以用于创建“嵌入式框架”，也称为“浮动框架”，可以自由控制窗口的大小，可以配合表格随意地在网页中的任何位置插入窗口。实际上就是在窗口中再创建一个窗口。使用<iframe>不需要先创建框架集，直接插入<iframe>标记即可。

例：

<iframe width="800" height="200" src="http://www.baidu.com"></iframe>

CSS:

基本选择器有标记选择器、类别选择器和ID选择器3种。

1.标记选择器：

h1{
color:#33FF00;
font-size:14px;
}

h1:表示所有<h1>标签，花括号里的是属性：值

2.类级别选择器：类级别选择器的出现，是为了解决例如不想所有某个标签的样式都一样的情况。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
	.red{
		color:#FF0000;
		font-size:36px;
	}
</style>
</head>

<body>
	<p class="red">class选择器1</p>
</body>

类选择器的格式： .类名{属性:值;}

在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。

<style>
	.red{
		color:#FF0000;
		font-size:50px;
	}
	.green{
		font-size:36px;
	}
</style>
</head>

<body>
	<p class="red">class选择器1</p>
	<p class="green">class选择器2</p>
	<p class="green red">33333333333333</p>
	<p class="green red">34444444</p>
</body>

3.ID选择器：ID选择器只能在HTML页面中使用一次。

<style>
	#red{
		color:#FFFF00;
	}
</style>
</head>

<body>
	<p id="red">class选择器1</p>
	<p id="red">class选择器2</p>
</body>
</html>

上面那个例子两个P标签都显示了CSS的方案，换句话话说在很多浏览器下，ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记是错误的，因为标记定义的ID不只是CSS可以调用，JavaScript等其他脚本语言同样可以调用。如果一个HTML中有两个相同ID的标记，那么将会导致JavaScript在查找id时出错，例如函数getElementById()。所以我们在编写CSS代码时，应该养成良好的编写习惯，一个ID最多只能赋予一个HTML标记。另外，id="red green "这种是完全错误的语法。

注意：对于样式的定义行内式>嵌入式>外部样式 <p color="red">行内式嵌入式是指在HTML页面里写的CSS语句，即在<style>里的语句外部样式分为导入式(import)和链接式(<link>) 这两种样式在一起的话，谁在后面谁起效。

CSS代码的注释：在CSS中，注释的语句都位于"/*"与"*/"之间，其内容可以是单行也可以是多行。另外，在<style>与</style>之间有时会见到""将所有的CSS代码包含于其中，这是为了避免老式浏览器不支持CSS、将CSS代码直接显示在浏览器上而设置的HTML注释。

4.复合选择器：两个或多个基本选择器，通过不同方式连接而成的选择器。

（1）.交集选择器：“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或ID选择器。这两个选择器之间不能有空格，必须连续书写。

例如：

h3.class{属性:值} 表示为h3标签的类名为class的标签

<style>
	p{
		color:red;
	}
	p.xxc{
		color:green;
	}
	.xxc{
		color:yellow;
	}
</style>
</head>

<body>
	<p>第一段</p>     <!-- 红色 -->
	<h3>第二段</h3>	  <!-- 无样色 -->
	<p class="xxc">第三段</p>   <!-- 绿色 -->
	<h3 class="xxc">第四段</h3>   <!-- 黄色 -->
</body>

从上面这个例子可以看出第三个css样式的定义并不会影响到第二个css样式的定义。

（2）.并集选择器：同时选中各个基本选择器所选择的范围。任何形式的选择器（包括标记选择器、class类别选择器、ID选择器等）都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成的。

例如：

<style>
	h1,h2,h3,p{
		color:#FF00CC;
	}
	p.xxc,.xxc,#zzz{
		font-size:36px;
		color:#FFFF33;
	}
</style>
</head>

<body>
	<h1>11111111111111111</h1>
	<h2 class="xxc">22222222222222222</h2>
	<h3>33333333333333333</h3>
	<p>4444444444444444</p>
	<p class="xxc">5555555555555</p>
	<p id="zzz">6666666666666666</p>
</body>

（3）.后代选择器：后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就为外层标记的后代。

例如：

<p>这是最外层的文字，<span>这是中间层的文字，<b>这是最内层的文字，</b></span></p>

最外层是<p>标记，里面嵌套了<span>标记，<span>标记中又嵌套了<b>标记，则称<span>是<p>的子元素，<b>是<span>的子元素。

<style>
	p span{
		color:red;
	}
	span{
		color:blue;
	}
</style>
</head>

<body>
	<p>嵌套使<span>用CSS(红色)</span>标记的方法</p>
	嵌套之外的<span>标记（蓝色）</span>不生效
</body>

效果如下

从上面可以看出在使用嵌套标记声明CSS的时候，即使后面声明了嵌套内的标记的CSS样式也不会覆盖嵌套标记声明的CSS样式

后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。如：

<style>
	td.out .inside strong{
		color:blue;
	}
</style>
</head>

<body>
	<td class="out">
		<p class="inside">
			其他内容<strong>CSS控制的部分</strong>其他内容
		</p>
</body>

效果如下

经验：选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记（父标记）定义class或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或专用id。只有当子标记无法利用此规则时，才单独进行声明。例如一个<ul>标记中包含多个<li>标记，而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别，而其他<li>同样采用"ul li{...}"的嵌套方式来设置。

注意：后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”。

（4）子元素选择器：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如：

<style>		
 	h1 strong{
        color:blue;
    }
</style>
</head>

<body>
	<h1>This is <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

<style>		
 	h1>strong{
        color:blue;
    }
</style>
</head>

<body>
	<h1>This is <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

CSS的继承特性：

CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

例如：

<style type="text/css">
  	h1{
  		color: blue;
  		text-decoration: underline;
  	}
  	em{
  		color:red;
  	}
</style>
</head>
  
<body>
	<h1>哈哈<em>呵呵</em>嘎嘎</h1>
</body>

可以看到其子标记em也显示出下划线，说明对父标记的设置也对子标记产生效果；而em标记内的文字显示为红色，h1标题中其他文字仍为蓝色，说明子标记的设置不会对其父标记产生影响。

<style type="text/css">
  	p{
  		color:green;
  	}
  	.red{
  		color:red;
  	}
  	.purple{
  		color:purple;
  	}
  	#line3{
  		color:blue;
  	}
</style>
</head>
  
<body>
	<p>这是第1行文本</p>  <!-- 绿色 -->
	<p class="red">这是第2行文本</p> <!-- 红色 -->
	<p id="line3" class="red">这是第3行文本</p>  <!-- 蓝色 -->
	<p style="color: orange;" id="line3">这是第4行文本</p> <!-- 橙色 -->
	<p class="purple red">这是第5行文本</p> <!-- 粉色  原因是两个选择器级别相同 ，以前者为准-->
</body>

从上面这个例子可以看出优先级为： 行内样式 > ID样式 > 类别样式 > 标记样式

CSS颜色定义：