HTML与CSS网页开发基础

1.HTML文档结构

    （1）html标记

<html> </html>这两个标签说明了html网页文件的范围，html内部的标记都在<html>和</html>之间。

（2）head标记

<head></head>是html文件的投标及，作用是放置HTML文件的信息。如定义CSS样式代码可以放在<head>
</head>标记之中

（3）<title>标记

<title>标记为标题标记。

（4）<body>标记

<body>是HTML页面的主题标记。页面中的所有内容都定义在<body> </body>标记之中。<body>标记也能具有控制页面到的一些特性。例如控制页面的背景图片和颜色等。

2.HTML的常用标记

（1）<br>换行标记

换行标记是一个单独出现的标记，其作用是换行，相当于回车。

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<title>这是一个标题</title>
    5. 

  5. 	</head>
    6. 

  6. 	<body>
    7. 

  7. 			古人西辞黄鹤楼，烟花三月下扬州。
    8. 

  8. 		</br>
    9. 

  9. 			孤帆远影碧空尽，唯见长江天际流。
    10. 

  10. 	</body>
    11. 

  11. </html>
    12.

（2）段落标记

<p></p>标明一个段落的起始和结尾。

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<title>这是一个标题</title>
    5. 

  5. 	</head>
    6. 

  6. 	<body>
    7. 

  7. 			<p>古人西辞黄鹤楼，烟花三月下扬州。</p>
    8. 

  8. 			<p>孤帆远影碧空尽，唯见长江天际流。</p>
    9. 

  9. 	</body>
    10. 

  10. </html>
    11.

（3）标题标记

<title> </title>设置标题标记，显示在标题栏。

还有6个标题标记，是在文本中展示的。分别为<h1>到<h6>，其中<h1>代表的是1级标题，<h2>代表的是2级标题，依次类推。数字越小，标题的级别越高，文字的字体也越大。

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<title>这是一个标题</title>
    5. 

  5. 	</head>
    6. 

  6. 	<body>
    7. 

  7. 			<h1>这是个1级标题</h1>
    8. 

  8. 			<h2>这是个2级标题</h2>
    9. 

  9. 			<h3>这是个3级标题</h3>
    10. 

  10. 			<h4>这是个4级标题</h4>
    11. 

  11. 			<h5>这是个5级标题</h5>
    12. 

  12. 			<h6>这是个6级标题</h6>
    13. 

  13. 	</body>
    14. 

  14. </html>
    15.

（4）居中标记

HTML中默认的布局方式是从左到右依次排序。如果想要让页面中的内容在页面的居中位置显示，可以使用HTML的<center>标记。

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<title>这是一个标题</title>
    5. 

  5. 	</head>
    6. 

  6. 	<body>
    7. 

  7. 			<center>
    8. 

  8. 				<h1>这是个1级标题</h1>
    9. 

  9. 				<h2>这是个2级标题</h2>
    10. 

  10. 				<h3>这是个3级标题</h3>
    11. 

  11. 				<h4>这是个4级标题</h4>
    12. 

  12. 				<h5>这是个5级标题</h5>
    13. 

  13. 				<h6>这是个6级标题</h6>
    14. 

  14. 			</center>
    15. 

  15. 	</body>
    16. 

  16. </html>
    17.

（5）文件列表标记

5.1 无序列表

无序列表是在每个列表栏的前面添加一个原点符号。通过<ul></ul>可以常见一组无序的列表，每一个列表项以<li>表示。

例子:

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<ul>
    5. 

  5. 			<li>爸爸
    6. 

  6. 			<li>妈妈
    7. 

  7. 			<li>儿女
    8. 

  8. 		</ul>
    9. 

  9. 	</body>
    10. 

  10. </html>
    11.

5.2 有序列表

有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol></ol>，每一个列表项前面使用<li>

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<ol>
    5. 

  5. 			<li>爸爸
    6. 

  6. 			<li>妈妈
    7. 

  7. 			<li>儿女
    8. 

  8. 		</ol>
    9. 

  9. 	</body>
    10. 

  10. </html>
    11.

3.HTML表单标记

1.<form></form>表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义表单数据程序的URL地址等信息。基本语法如下：

<form action="url" method="get"|"post" name="name" onSubmit="" target="">

</form>

其中action属性用来指定处理表单数据程序的URL地址；

method属性用来指定数据传送到服务器的方式。其属性值可以为get和post。get属性表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post方式传送到服务器。

name属性用来指定表单的名称，其值程序员可以自定义。

onSubmit属性用于指定当用户单机提交按钮时触发的事件。

target属性指定输入数据显示在那个窗口上，其属性值可以为_blank,_self,_parent和_top，其中_blank表示在新窗口中打开目标文件，_self表示在同一个窗口中打开，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用；_top表示在浏览器的整个窗口中打开，不使用任何框架。

例子：

    

  1. <form id ="form1" name ="form" method="post" action="action.html" target="_blank">
    2. 

  2. </form>
    3.

这个例子是创建表单，设置表单的名称为form，当用户提交表单的时候，提交至action.html页面进行处理。

2.<input>表单输入标记

<input>标记的语法格式如下：

<input type ="image" disabled="disabled" checked="checked" width="digit" heighr="digit" maxlength="digit" readonly="" size="digit" src="url" usemap="url" name="checkbox" value="checkbox">

<input>标记的属性 表（1）

属性 描述
type 用于指定添加的是哪种类型的输入字段，共有10个可选值，如表（2）所示
disabled 用于指定输入字段不可用，即字段变成灰色。其属性值可以为控制，也可以指定为disabled
checked 用于指定输入字段是否处于被选中的状态，用于type属性值为ratio和checkbox的情况下。其属性值可以为空值，也可以指定为checked
width 用于指定输入字段的宽度，用于type属性值为image的情况下
height 用于指定输入字段的高度，用于type属性值为image的情况下
maxlength 用于指定输入字段可以输入的文字的个数，用于type属性值为text和passwd的情况下，默认没有字数的限制
readonly 用于指定输入字段是否为只读。其属性值可以为空值，也可以指定为readonly
size 用于指定输入的字段的宽度，当type属性为text和passwd时，以文字的个数为单位，当type属性为其他值时，以像素为单位
src 用于指定图片的来源，只有当type属性为image时有效
usemap 为图片设置热点地图，只有当type为image时有效。属性值为URI，URI的格式为"#+<map>标记的name属性值"。例如<map>的标记的name属性值为Map,该URI为#Map
alt 用于指定当图片无法显示时显示的文字，只有当type属性为image时有效
name 用于指定输入字段的名称
value 用于指定输入字段默认的数据值，当type为checkbox和ratio时，不可以省略此属性；为其他值时，可以省略。当type属性为button、reset、和submit时，指定的是按钮上的显示文字；当type属性为checkbox和ratio时，指定的是数据项选定时的值

type属性的属性值 表(2)

可选项 描述 可选值 描述
text 文本框 submit 提交按钮
passwd 密码域 reset 重置按钮
file 文件域 button 普通按钮
ratio 单选按钮 hidden 隐藏域
checkbox 复选框 image 图像域

例子

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<form action="" method="post" name="myform">
    5. 

  5. 			用户名  ：  <input name="username" type="text" id ="UserName$" maxlength="20"> <br>
    6. 

  6. 			密码    ：    <input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"> <br>
    7. 

  7. 			确认密码： <input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"> <br>
    8. 

  8. 			性别：      
    9. 

  9. 					<input name="sex" type="radio" class ="noborder" value="男" checked>
    10. 

  10. 						男&nbsp
    11. 

  11. 					<input name="sex" type="radio" class="noborder" value="女">
    12. 

  12. 						女
    13. 

  13. 			<br>
    14. 

  14. 			爱好：
    15. 

  15. 				<input name="like" type="checkbox" id="like" value="体育">
    16. 

  16. 				体育
    17. 

  17. 				<input name="like" type="checkbox" id="like" value="旅游">
    18. 

  18. 				旅游
    19. 

  19. 				<input name="like" type="checkbox" id="like" value="听音乐">
    20. 

  20. 				听音乐
    21. 

  21. 				<input name="like" type="checkbox" id="like" value="看书">
    22. 

  22. 				看书
    23. 

  23. 			<br>
    24. 

  24. 			Email：
    25. 

  25. 				<input name="email" type="text" id="PWD224" size="50">
    26. 

  26. 			<br>
    27. 

  27. 			<input name="Submit" type="submit" class ="btn_grey" value="确定保存">
    28. 

  28. 			<input name="Reset" type="reset" class ="btn_grey" id="Reset" value="重新填写">
    29. 

  29. 			<br>
    30. 

  30. 			<input type="image" name="imageField" src="a.jpg">
    31. 

  31. 		</form>
    32. 

  32. 	</body>
    33. 

  33. </html>
    34.

3.<select></select>下拉列表框标记

<select>标记可以在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，需要使用<option>标记向列表中添加内容。<select>标记的语法格式如下：

<select name="name" size="digit" multiple="multiple" disabled="disabled">

<select>

<select>标记的属性如表所示：

<select>标记的属性

属性 描述
name 用于指定列表框的名称
size 用于指定列表框中显示的选项数量，超出该数量的选项可以通过拖动滚动条来查看
disabled 用于指定当前列表框不可使用
multiple 用于让多行列表框支持多选

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<select name="select">
    5. 

  5. 			<option>数码相机区</option>
    6. 

  6. 			<option>摄影器材</option>
    7. 

  7. 			<option>MP3/MP4/MP5</option>
    8. 

  8. 			<option>U盘/移动硬盘</option>
    9. 

  9. 		</select>
    10. 

  10. 		&nbsp;多行列表框（不可多选）
    11. 

  11. 		<select name="select2" size="2">
    12. 

  12. 			<option>数码相机区</option>
    13. 

  13. 			<option>摄影器材</option>
    14. 

  14. 			<option>MP3/MP4/MP5</option>
    15. 

  15. 			<option>U盘/移动硬盘</option>
    16. 

  16. 		</select>
    17. 

  17. 		&nbsp;多行列表框(可多选)：
    18. 

  18. 		<select name="select3" size="3" multiple>
    19. 

  19. 			<option>数码相机区</option>
    20. 

  20. 			<option>摄影器材</option>
    21. 

  21. 			<option>MP3/MP4/MP5</option>
    22. 

  22. 			<option>U盘/移动硬盘</option>
    23. 

  23. 		</select>
    24. 

  24. 	</body>
    25. 

  25. </html>
    26.

4.<textarea>多行文本标记

<textarea>为多行文本标记，与单行文本相比，多行文本可以输入更多的内容。通常情况下，<textarea>标记出现在<form>标记的标记内容之中。<textarea>标记的语法格式如下：

<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value" >默认值

</textarea>

其属性如下所示：

<textarea>标记的属性 表(4)

属性 描述
name 用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用
cols 用于指定多行文本框显示的列数 宽度
rows 用于指定多行文本框显示的行数 高度
disabled 用于指定当前多行文本框不可使用（变成灰色）
readonly 用于指定当前多行文本框为只读
wrap 用于设置多行文本中的文字是否自动换行，可选值见表(5)

wrap属性的可选值 表（5）

可选值 描述
hard 默认值，表示自动换行，如果文字超过cols属性指的列数就自动换行，并且提交到服务器时换行符同时被提交
soft 表示自动换行，如果文字超过cols属性所致的列数就自动换行，但提交到服务器时换行符不被提交
off 表示不自动换行，如果想让文字换行，只能按下Enter键强制换行

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<form name="form1" method="post" action="">
    5. 

  5. 			<textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
    6. 

  6. 		</form>
    7. 

  7. 	</body>
    8. 

  8. </html>
    9.

、

5.超链接与图片标记

（1）超链接标记

超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这和功能就是通过超链接标记来完成的。超链接标记语法格式如下：

<a href =""></a>

属性href用来设定连接到哪个页面中。

（2）图片标记

大家在浏览网站时通常会看到各式各样的漂亮图片，在页面中添加的图片是通过<img>标记来实现的。<img>标记的语法格式如下：

<img src="uri" width="value" height="value" border="value" alt="提示文字">

<img>标记的属性 表(6)

属性 描述
src 用于指定图片的来源
width 用于指定图片的宽度
height 用于指定图片的高度
border 用于指定图片外边框的宽度，默认值为0
alt 用于指定当图片无法显示时显示的文字

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<table width="409" height="523" border="1" align="center">
    5. 

  5. 			<tr>
    6. 

  6. 				<td width="199" height="208">
    7. 

  7. 					<img src="b.jpg" width="199" height="208">
    8. 

  8. 				</td>
    9. 

  9. 				<td width="199" height="208">
    10. 

  10. 					<img src="b.jpg" width="199" height="208">
    11. 

  11. 				</td>
    12. 

  12. 			</tr>
    13. 

  13. 			<tr>
    14. 

  14. 				<td height="35" align="center" valign="middle"><a href="text.html">查看详情</a></td>
    15. 

  15. 				<td height="35" align="center" valign="middle"><a href="text.html">查看详情</a></td>
    16. 

  16. 			</tr>
    17. 

  17. 			<tr>
    18. 

  18. 				<td width="199" height="208">
    19. 

  19. 					<img src="b.jpg" width="199" height="208">
    20. 

  20. 				</td>
    21. 

  21. 				<td width="199" height="208">
    22. 

  22. 					<img src="b.jpg" width="199" height="208">
    23. 

  23. 				</td>
    24. 

  24. 			</tr>
    25. 

  25. 			<tr>
    26. 

  26. 				<td height="35" align="center" valign="middle"><a href="text.html">查看详情</a></td>
    27. 

  27. 				<td height="35" align="center" valign="middle"><a href="text.html">查看详情</a></td>
    28. 

  28. 			</tr>
    29. 

  29. 		</table>
    30. 

  30. 	</body>
    31. 

  31. </html>
    32.

6.HTML5新增内容

（1）<session>元素

<session>元素表示页面中的一个区域，例如章节、页眉、页脚或页面中的其他部分。可以与h1,h2.h3,h4等元素结合起来使用，标识文档的结构。

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<session>
    5. 

  5. 			<h2>session标识的使用</h2>
    6. 

  6. 			<p>完成百分比 100%</p>
    7. 

  7. 			<input type="button" value="请单击"/>
    8. 

  8. 		</session>
    9. 

  9. 	</body>
    10. 

  10. </html>
    11.

（2）<acticle>元素

<acticle>元素表示页面中的一块与上下文不相关的独立内容，例如博客之中的一篇文章、一段用户评论等等。除了内容部分，一个<acticle>元素通常有自己的标题、脚注等内容。

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<acticle>
    5. 

  5. 			<header>
    6. 

  6. 				<h1>苹果美容</h1>
    7. 

  7. 			</header>
    8. 

  8. 			<p>
    9. 

  9. 				排毒通便：苹果中的有机酸和纤维素可促进肠蠕动，能使大便松软，便于排泄，因此食用苹果能促进通便，治疗大便干燥。宜将苹果烤熟了吃。减肥塑体：苹果中含有的大量维生素、苹果酸，能促使积存于人体内的脂肪分解，经常食用苹果可以防止肥胖。脂肪过多者，需要吃一些酸苹果。补血养颜：常吃苹果还能增加血色素，使皮肤变得细白红嫩，因此，对于贫血患者来说，食用苹果可以起到一定的辅助治疗作用。用苹果治疗贫血可生吃也可烤熟吃。抗衰老：苹果中含的钙质和维生素E，具有利尿美容的功效，可以有助于防止老化。
    10. 

  10. 			</p>
    11. 

  11. 			<footer>
    12. 

  12. 				<p>2011-09-27</p>
    13. 

  13. 			</footer>
    14. 

  14. 		</acticle>
    15. 

  15. 	</body>
    16. 

  16. </html>
    17.

上面代码中<footer>元素表示整个页面或者页面之中一个内容区域块的脚注。例如日期、作者信息等。

（3）<aside>元素

<aside>元素用来表示当前页面或者文章的附属信息部分。可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条等信息。

例子：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<aside>
    5. 

  5. 			<nav>
    6. 

  6. 				<h2>侧栏</h2>
    7. 

  7. 				<ul>
    8. 

  8. 					<li>
    9. 

  9. 						<a href="#">明日图书</a>2011-9-27
    10. 

  10. 					</li>
    11. 

  11. 					<li>
    12. 

  12. 						<a href="#">明日软件</a>2011-9-27
    13. 

  13. 					</li>
    14. 

  14. 					<li>
    15. 

  15. 						<a href="#">编程词典</a>2011-9-27
    16. 

  16. 					</li>
    17. 

  17. 				</ul>
    18. 

  18. 			</nav>
    19. 

  19. 		</aside>
    20. 

  20. 	</body>
    21. 

  21. </html>
    22.

（4）

新增的input类型：

email 将input元素的类型设置为email，表示文本框必须输入email地址。

url 表示必须输入url地址。

number 表示必须输入数值的文本框。

range 表示必须输入一定范围内数字值的文本框。

7.css选择器

（1）标记选择器

HTML页面是由许多标记组成的，例如图像标记<img>、超链接标记<a>、表格标记<table>等。而CSS标记选择器就是声明页面中哪些标记采用那些CSS样式。例如a选择器，就是声明页面中所有<a>标记的样式风格。

    

  1. <style>
    2. 

  2. 	a{
    3. 

  3. 		font-size:9px;
    4. 

  4. 		color:#F93;
    5. 

  5. 	}
    6. 

  6. </style>
    7.

（2）类别选择器

使用标记选择器非常快捷，但是会有一定的局限性。如果使用标记选择器，那么页面中的所有该标记内容都会发生变化。不能精确控制每一个标记。这时就需要引入类别选择器。

类别选择器的名称由用户自己定义，并以“.”开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需要使用class属性来声明即可。

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<style>
    5. 

  5. 		.one{
    6. 

  6. 			font-family:宋体;
    7. 

  7. 			font-size:24px;
    8. 

  8. 			color:red;
    9. 

  9. 		}
    10. 

  10. 		.two{
    11. 

  11. 			font-family:宋体;
    12. 

  12. 			font-size:16px;
    13. 

  13. 			color:red;
    14. 

  14. 		}
    15. 

  15. 		.three{
    16. 

  16. 			font-family:宋体;
    17. 

  17. 			font-size:12px;
    18. 

  18. 			color:red;
    19. 

  19. 		}
    20. 

  20. 		</style>
    21. 

  21. 	</head>
    22. 

  22. 	<body>
    23. 

  23. 		<h2 class="one">应用了选择器one</h2>
    24. 

  24. 		<p>正文内容1</p>
    25. 

  25. 		<h2 class="two">应用了选择器two</h2>
    26. 

  26. 		<p>正文内容2</p>
    27. 

  27. 		<h3 class="three">应用了选择器three</h3>
    28. 

  28. 		<p>正文内容3</p>
    29. 

  29. 	</body>
    30. 

  30. </html>
    31.

（3）id选择器

id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但需要注意的是，由于HTML页面之中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。命名id选择器要以‘#‘开始，后加HTML标记中的id属性值。

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<style>
    5. 

  5. 		#one{
    6. 

  6. 			font-family:宋体;
    7. 

  7. 			font-size:24px;
    8. 

  8. 			color:red;
    9. 

  9. 		}
    10. 

  10. 		#two{
    11. 

  11. 			font-family:宋体;
    12. 

  12. 			font-size:16px;
    13. 

  13. 			color:red;
    14. 

  14. 		}
    15. 

  15. 		#three{
    16. 

  16. 			font-family:宋体;
    17. 

  17. 			font-size:12px;
    18. 

  18. 			color:red;
    19. 

  19. 		}
    20. 

  20. 		</style>
    21. 

  21. 	</head>
    22. 

  22. 	<body>
    23. 

  23. 		<p id="one">应用了ID选择器1</p>
    24. 

  24. 		<p id="two">应用了ID选择器2</p>
    25. 

  25. 		<p id="three">应用了ID选择器3</p>
    26. 

  26. 	</body>
    27. 

  27. </html>
    28.

8.在页面之中包含CSS

（1）行内样式

行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式比较容易令初学者接收，但是灵活性不强。

例子:

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<body>
    4. 

  4. 		<table width="200" border=1 align="center">
    5. 

  5. 			<tr>
    6. 

  6. 				<td><p style="color:#F00;font-size:36px;">行内样式1</p></td>
    7. 

  7. 			</tr>
    8. 

  8. 			<tr>
    9. 

  9. 				<td><p style="color:#F00;font-size:24px;">行内样式2</p></td>
    10. 

  10. 			</tr>
    11. 

  11. 			<tr>
    12. 

  12. 				<td><p style="color:#F00;font-size:18px;">行内样式3</p></td>
    13. 

  13. 			</tr>
    14. 

  14. 			<tr>
    15. 

  15. 				<td><p style="color:#F00;font-size:14px;">行内样式4</p></td>
    16. 

  16. 			</tr>
    17. 

  17. 	</body>
    18. 

  18. </html>
    19.

（2）内嵌式

内嵌式就是在页面中使用<style><style>标记将CSS样式包含在页面之中。内嵌样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。

与行内样式相比，内嵌式样式表更加便于维护。但是每个网站都不能由一个网页构成，而每个页面中相同的HTML标记又都要具有相同的样式，此时使用内嵌式样式表就显得比较笨重，而使用链接式样式表就可以解决这个问题。

（3）链接式

链接式外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件，然后在HTML页面之中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。

语法：

<link rel="stylesheet" href=‘path‘ type=‘text/css‘>

解释：

rel：定义外部文档和调用文档间的关系；

href:CSS文档的绝对或者相对路劲；

type:指的是外部文件的MIME类型。

例子：

text.css

    

  1. h1,h2,h3{
    2. 

  2. 	color:#6CFw;
    3. 

  3. 	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    4. 

  4. }
    5. 

  5. p{
    6. 

  6. 	color:#F0Cs;
    7. 

  7. 	font-weight:200;
    8. 

  8. 	font-size:24px;
    9. 

  9. }
    10.

index.html

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<title>通过链接形式引入CSS样式</title>
    5. 

  5. 		<link href="text.css"/>
    6. 

  6. 	</head>
    7. 

  7. 	<body>
    8. 

  8. 		<h2>页面文字1</h2>
    9. 

  9. 		<p>页面文字2</p>
    10. 

  10. 	</body>
    11. 

  11. </html>
    12.

9.CSS 3的新特性

CSS3是CSS技术的一个升级版本，是由CSS Working Group的组织共同协商策划的。

CSS3中，并没有采用总体结构，而是采用了分工协作的模块化结构。采用这种模块化结构，是为了避免产生浏览器对于某个模块支持不完全的情况。如果把整体分成几个模块，各浏览器可以选择支持哪个模块，不支持哪个模块。

以下是CSS3中的模块

CSS3中的模块

模块名称 功能描述
basic box model 定义各种与盒子相关样式
Line 定义各种与直线相关的样式
Lists 定义各种与列表相关的样式
Text 定义各种与文字相关的样式
Color 定义各种与颜色相关的样式
Font 定义各种与字体相关的样式
Background and border 定义各种与背景和边框相关的样式
Page Media 定义各种页眉、页脚、页数等页面元素数据的样式
Writing Modes 定义页面中文本数据的布局方式

在CSS2中使用DIV层对页面中的文字添加彩色边框。

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<style>
    5. 

  5. 			#border{
    6. 

  6. 				margin:3px;
    7. 

  7. 				width:180px;
    8. 

  8. 				padding-left:14px;
    9. 

  9. 				border-width:5px;
    10. 

  10. 				border-color:blue;
    11. 

  11. 				border-style:solid;
    12. 

  12. 				height:104px;
    13. 

  13. 			}
    14. 

  14. 		</style>
    15. 

  15. 	</head>
    16. 

  16. 	<body>
    17. 

  17. 		<div id="border">
    18. 

  18. 			文字1</br>
    19. 

  19. 			文字2</br>
    20. 

  20. 			文字3</br>
    21. 

  21. 			文字4</br>
    22. 

  22. 			文字5</br>
    23. 

  23. 		</div>
    24. 

  24. 	</body>
    25. 

  25. </html>
    26.

如果多添加几行文字，会出现如下情况：

在CSS3中添加了一种新的样式来定义边框：

    

  1. <html>
    2. 

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    3. 

  3. 	<head>
    4. 

  4. 		<style>
    5. 

  5. 			#boarder{
    6. 

  6. 				border:solid 5px blue;
    7. 

  7. 				border-radius:20px;
    8. 

  8. 				-webkit-border-radius:20px;
    9. 

  9. 				padding:20px;
    10. 

  10. 				width:180px;
    11. 

  11. 			}
    12. 

  12. 		</style>
    13. 

  13. 	</head>
    14. 

  14. 	<body>
    15. 

  15. 		<div id="boarder">
    16. 

  16. 			文字1</br>
    17. 

  17. 			文字2</br>
    18. 

  18. 			文字3</br>
    19. 

  19. 			文字4</br>
    20. 

  20. 			文字5</br>
    21. 

  21. 		</div>
    22. 

  22. 	</body>
    23. 

  23. </html>
    24.

这个边框可以根据文字行数自动设置边框高度，例如增加几行文字，就变成下面这个样子：

来自为知笔记(Wiz)

时间： 2024-08-04 18:23:50

HTML与CSS网页开发基础的相关文章

HTML和CSS网页开发基础

一 HTML文档结构 HTML文档结构:<html>.<head>.<title>.<body>构成HTML页面中最基本的元素. HTML常用标记:1.换行标记  <br>    2.段落标记   <p> </p>   3.标题标记   <h1>~<h6>  数字越小,级别越高.  4.居中标记  <center>需居中内容</center> 5.文字列表标记   有序<

第一章---动态网页开发基础

动态网页开发基础 什么是动态网页? 误区: 初学者一般认为动态网页,就是会动的网页,实际上不是这样的. 动态网页: 是指在服务器端进行的,使用程序语言设计的交互式网页,它们会 根据某种条件的变化,返回不同的网页内容. 动态网页的优势: 1.交互性:即网页会根据用户的要求和选择而动态改变和显示内容 2.自动更新:即无须改变页面代码,便会自动生成新的页面内容,可以节省工作量 3.随机性:即当不同的时间,不同的人访问同一网址时会产生不同的页面效果 为什么学习B/S架构技术? 在学习B/S架构前,先了解

第一章动态网页开发基础

第一章:动态网页开发基础  动态网页:是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容 动态网页需要使用服务器端的脚本语言,例如:JSP技术就是使用Java+HTML 动态网页的优势: 1:交互性:       网页会根据用户的要求和选择而动态改变和显示内容 2:自动更新:       无须改变页面代码,便会自动生成新的页面内容,可以大大节省工作量 3:随机性:     当不同的时间.不同的人访问同一网址时会产生不同的页面效果      例如:普通

使用JSP/Servalet技术开发新闻发布系统------动态网页开发基础

什么是动态网页? 动态网页是指在服务器端运行的程序或者网页,它们会随不同客户.不同时间,返回不同的网页. 动态网页的特点? (1).交互性:即网页会根据用户的要求和选择而动态改变和响应.采用动态网页技术的网站可以实现与用户的交互功能. (2).自动更新:无需手动操作,便会自动生成新的页面,可以节省工作量. (3).随机性:即当不同的时间.不同的人访问同一网址时会产生不同的页面效果. 为什么需要动态网页? 静态网页不能真正与用户实现互动.静态网页的内容是固定的,当修改了网页中的元素的时候,都需要重

动态网页开发基础【笔记】

一.C/S结构和B/S结构   1.C/S(Client/Server):客户端服务程序,控制台程序,window应用   2.B/S(Browser/Server):浏览器服务程序[java:jsp应用:C#:asp.net],web应用程序   区别:C/S:客户端和服务器端都需要开发,一一对应.             客户端和服务器端都需要维护             维护麻烦             安全性更高         B/S:只开发服务器端             只维护部署

使用JSP/Server技术开发新闻发布系统第一章动态网页开发基础

      一:为什么需要动态网页    由于静态网页的内容是固定的,不能提供个性化和定制化得服务,使用动态网页可真正地与用户实现互动. 二:什么是动态网页  ①:动态网页是指在服务器端运行的,使用程序语言设计的交互网页,她们会根据某种条件的变化返回不同的网页内容.  ②动态网页需要使用服务器脚本语言. 三:动态网页的优势: ①        交互性:即网页会根据用户的要求和选择而动态改变和显示内容. ②        自动更新:即无時须改变页面代码,便会自动生成新的页面内容,可以大大节省工作量

CSS网页布局基础-圣杯布局和双飞翼布局

行布局 多列布局 圣杯布局 双飞翼布局 一.行布局 行布局垂直水平居中 注:这里没有用margin: 0 auto;先让它水平居中,而是使用了绝对定位布局,然后设置top:50%; left:50%;但是光设置这个还不够,因为这并不是水平垂直居中,因为它并没有考虑自身的宽度和高度,所以这里根据盒子本身的高宽又再此基础上设置了margin-left和margin-top.如果只设置了top:50%; left:50%;而没有设置margin-left和margin-top,效果如下: 代码如下:

动态网页开发基础

什么是动态网页? 误区: 初学者一般认为动态网页,就是会动的网页,实际上不是这样的. 动态网页: 是指在服务器端进行的,使用程序语言设计的交互式网页,它们会 根据某种条件的变化,返回不同的网页内容. 动态网页的优势: 1.交互性:即网页会根据用户的要求和选择而动态改变和显示内容 2.自动更新:即无须改变页面代码,便会自动生成新的页面内容,可以节省工作量 3.随机性:即当不同的时间,不同的人访问同一网址时会产生不同的页面效果 为什么学习B/S架构技术? 在学习B/S架构前,先了解C/S(Clien

静态网页开发基础

基本标签(行级标签) <p></p>文本标签 <h1></h1>...<h6></h6>指的是标题标签数字越大文字显示越小 <br/>换行 <hr/>横线 <image>图片标签支持以下图片形式 <img alt="花花" src="images/招募图.jpg" width="80" height="80">