第七章 网页开发基础
1.<!DOCTYPE>标记
2.<html>标记
3.<head>标记
4<body>标记
<body>
Hello world!
</body>
单标记和双标记
HTML中的标记分为单标记和双标记,其中单标记也成为空标记,是指用一个标记符号即可完整描述某个功能的标记.其基本语法格式如下:
<标记名 />
例如标记<hr/>就是单标记,该标记用于定义一条水平线.需要注意的是,在标记名与/之间有一个空格,虽然在显示效果上有没有空格都一样,但是按照规范的要求,建议加上空格.
双标记也称体标记,是指由开始和结束两个标记符组成的标记.其基本语法格式如下:
<标记名> 内容 </标记名>
文本控制与文本样式标记
1.段落标记<p></p> 和换行标记<br />
2.文本样式标记<font 属性="属性值">文本内容</font> 属性有 face :"微软雅黑" size color
图像标记
<img/>标记也称为图像标记,主要用于显示HTML页面中的图像.语法为
<img src="图像 URL" />
src属性用于指定图像文件的路径,该属性是<img/>标记必需的属性
显示照片:<img src="logo.jpg" width="271" height="94" border="0" />
src属性的值可以是绝对路径,也可以是相对路径.
表格标记
在HTML文件中,表格标记用于在页面中创建表格,其基本语法格式如下
<table>
<tr>
<td>单元格内文字</td>
</tr>
</table>
这三对标记缺一不可.<table></table>用于定义一个表格. <tr></tr>用户定义表格中的行,必须嵌套在<table></table>标记中,
<td></td>用于定义表格中的单元格,也可称为表格中的列,必须嵌套在<tr></tr>标记中.
<body>
<table border="0">
<tr>
<td>姓名</td>
<td>联系电话</td>
</tr>
<tr>
<td>李四</td>
<td>8882888</td>
</tr>
</table>
</body>
最好不要添加边框,使用CSS添加边框样式和颜色
表单标记
简单说,表单就是网页上用于输入信息的区域,其主要功能是收集用户信息,并将这些信息传递给后台服务器.表单在互联网上随处可见,例如,网站注册页面中的用户名和密码输入框,性别选择框,提交按钮等都是用表单中的相关表及定义的.
表单主要由表单域,表单控件和提示信息三部分构成,其详细介绍如下.
-
表单域:相当于一个容器,用于容纳所有表单控件和提示信息
-
表单控件:包含了具体的表单功能项,如单行文本输入框,密码输入框,复选框提交按钮等
-
提示信息:一个表单中通常还需要包含一些说明性的文字,即表单控件前的文字说明,用于提示用户进行填写和操作
1.表单域<form>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
在上述的语法中,action,method,name是<form>标记种的常用属性,其中action属性用于指定表单提交的地址,method属性用于设置表单数据的提交方式,其取值为GET(默认值)或POST.name属性用于设置表单的名称.
需要注意,GET方式提交数据会显示在浏览器的地址栏中,保密性差且有数据量限制(2K左右),而使用POST提交方式不但保密性好,还可以提高大量的数据,所以通常使用POST方式提交表单
2.表单控件<input />
在一个表单中,大部分的表单控件(如单行文本输入行,单选按钮,复选框等)都是由<input/>元素定义的,该元素定义表单控件的基本语法如下:
<input type="控件类型" />
type属性是其基本的属性,type:text,button
还有其他属性:id,name,value,size等分别指定<input />控件的ID值,名称,控件中的默认值和控件在页面中显示的宽度
<body>
<fieldset>
<legend>注册新用户</legend>
<! --表单数据的提交方式为POST -->
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名:</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td align="right">兴趣:</td>
<td>
<input type="checkbox" name="habbit" value="film">看电影
<input type="checkbox" name="habbit" value="code">敲代码
<input type="checkbox" name="habbit" value="game">打游戏
</td>
</tr>
<tr>
<td align="right">头像:</td>
<td>
<input type="file" name ="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
分别使用<input />标记定义了文本输入框控件,密码输入框控件,单选按钮和复选按钮,文件上传控件以及提交和重置按钮控件.在上述控件中,name属性代表控件名称,value属性表示该控件的值.上述代码还用了<fieldset>和<legend>标记,<fieldset>标记的作用是将表单内的元素分组,而<legend>标记则为<fieldset>标记定义标题.
需要注意的是,单选按钮控件和复选框控件必须指定相同的name值,这是为了方便在处理页面数据时获取表单传递的值(表单所传递的就是该控件的value值).
<! --注释内容-->
列表标记和超链接标记
1.无序列表 <ul>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
<li type> disc默认
square
circle
2.超链接标记
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target取值可以是_self(原窗口打开) 和_blank(在新窗口打开)
href 跳转目标为指定链接指向页面的URL
<a href="http://baidu.com" target="_self">百度</a><br/> 在原页面打开
<a href="http://4399.com" target="_blank">游戏</a> 在新页面打开
<div>标记
<div>标记简单而言就是一个区块容器标记,可以将网页分割为独立且不同的部分,以实现网页的规划和布局.在HTML页面中,它以<div>开头,并以</div>结尾,在其中可以容纳段落,标题,图像等各种网页元素,也就是说,大事多数HTML标记都可以嵌套在<div>标记中,并且<div>还可以嵌套多层<div>
<div>
<h3> 这是一个标题</h3>
<p>这是一个段落</p>
</div>
在实际开发中<div>标记常常与CSS技术搭配使用
CSS技术
CSS层叠样式表单,是一种用于增强控制网页样式并允许将样式信息与网页内容分离的标记性语言.在实际开发中,主要用于设置HTML页面中的文本内容(字体,字号,对齐方式等),图片的外形(宽高,边框样式,边距等)以及版面的布局等外观显示样式.
CSS定义的规则具体如下:
选择器{属性1:属性值 1; 属性2:属性值2;属性3:属性值3;}
在上述样式规则中,选择器用于指定CSS样式作用的HTML对象,大括号内的属性是对该对象设置的具体样式.其中,属性和属性值以"键值对"的形式出现,它们之间用":"连接,多个键值对之间用";"分割.
CSS样式对<div>标记进行设置 div{border:2px solid blue; width: 300px ; height:200px}
div为选择器,表示CSS样式作用的HTML对象;border,width和height为CSS属性,分别表示边框,宽度,高度,其中border属性的三个值"2px solid blue;"分别表示该边框为2像素,实心边框线,蓝色.
CSS样式的引用方式
要使用CSS修饰网页,就需要在HTML文档中引入CSS.通常在实际项目开发中,引入CSS会采用两种方式:内嵌式和链入式.下面将对这两种引入方式进行详细讲解.
1.内嵌式
内嵌式是将CSS代码集中写在HTML文档中的<head>头部标记中,并用<style>标记定义,其基本语法格式如下:
<head>
<style type="text/css">
选择器{属性1:属性值 1; 属性2:属性值2;属性3:属性值3;}
</style>
</head>
上述语法中,<style>标记一般位于<head>标记中的<title>标记之后,因为浏览器是从上向下解析代码的,把CSS代码放在头部便于提前被加载和解析,以避免网页内容加载后由于没有样式修饰而带来的问题.同时,必须设置type的属性值为text/css,这样浏览器才知道<style>标记包含的是CSS到代码.
<head>
<meta charset="UTF- 8">
<title>使用CSS内嵌式</title>
<style type="text/css">
/*定义标题标记为居中对齐*/
h2{ text-align:center;}
/*定义div标记样式*/
div{border:1px solid blue; width :500px ; height:50px; color:red;}
</style>
</head>
<body>
<h2>CSS样式</h2>
<div>
style标记一般位于head标记中,使用它课定义内嵌式CSS样式表
</div>
</body>
HTML文档的头部使用style标记定义内嵌式CSS样式,第6行使用了标题标记<h2>设置标题,第八行定义了<div>标记的样式.使用浏览器打开效果如上图
内嵌式引入CSS只对其所在的HTML页面有效,因此仅设计一个页面时,使用内嵌式是一个很好的选择,但是如果是一个网站,不建议使用这种方式,因为它不能充分发挥CSS代码的重用优势
2.链入式
链入式是将所有的样式放在一个或多个css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件连接到HTML文件中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet">
</head>
上述语法中,<link />标记需要放到<head>头部标记中,并且必须指定<link />的3个属性:
(1) href:定义所连接外部样式表文件的地址,可以是相对路径可以是绝对路径
(2)type:定义所链接文档的类型,这里需要指定为text/css,表示链接的外部文件为CSS
(3)rel: 定义当前文档与被链接文档之间的关系,这里需哟指定为stylesheet,表示被链接的文档是一个样式表文件.
<head>
<meta charset="UTF- 8">
<title>使用CSS内嵌式</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>CSS样式</h2>
<div>
style标记一般位于head标记中,使用它课定义内嵌式CSS样式表
</div>
</body>
css文件:
/*定义标题标记为居中对齐*/
h2{ text-align:center;}
/*定义div标记样式*/
div{border:1px solid blue; width :500px ; height:50px; color:red;}
在实际开发中,链入式是使用频率最高且最实用的引入方式,它将HTML代码与CSS代码分离为两个或多个文件,实现了结构和表现的完全分离,同一个CSS文件可以被不同的HTML页面链接使用,同时,一个HTML页面也可以通过多个<link />标记链接多个css文件
CSS选择器和常用属性
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素.在CSS中,执行这一任务的部分成为选择器
1.标记选择器
是指用HTML标记名称作为选择器,按标记名称分类,为页面中的某一类标记指定统一的样式.其基本语法格式如下:
标记名{属性1:属性值 1; 属性2:属性值2;属性3:属性值3;}
上述语法中,所有的HTML标记都可以作为标记选择器的标记名,例如<body><h1><p>标记等.,通过标记选择器定义的样式对页面中该类型的所有标记都有效,这是它的优点,,但同时也是缺点因为这样就不能设计差异化样式.
2.类选择器
类选择器使用"."进行标识,后面紧跟类名,其基本语法格式如下:
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
上述语法中,类名即为HTML页面中元素的class属性值,大多数HTML元素都可以定义class属性.类选择器最大的优势是可以为元素对象定义单独或相同的样式.
3.id选择器
id选择器使用"#"进行标识,后面紧跟id名,其基本语法是如下:
#id名{属性1:属性值 1; 属性2:属性值2;属性3:属性值3;}
id名即为HTML页面中元素的id属性值,大多数HTML元素都可以定义Id属性,元素的id值是为一点,只能对应于文档中某一个具体的元素.
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*类选择器的定义*/
.red{
color :red;
}
.green {
color :green;
}
.font18{
font-size:18px;
}
/*2.id选择器的定义*/
#bold{
font-weight:bold;
}
#font24{
font-size:24px;
}
</style>
</head>
<body>
<!--类选择器的使用-->
<h1 class="red">标题一:class="red",设置文字为红色.</h1>
<p class="green font18">
段落一:class="green font18"
</p>
<p class="red font18">
段落二:class="red font18"
</p>
<!--id选择器的使用-->
<p id="bold">段落一:id="bold"</p>
<p id="font24">段落二:id="font24"</p>
<p id="bold font24">段落三:id="bold font24"</p>
</body>
</html>
<style>标记内分别定义了类选择器和id选择器.在类选择器中
同一个类选择器可以被多个标记引用.
不能同时引用同一个id选择器.且同一个标记对象不能同时引用多个id选择器
常用的CSS属性
| 属性名称 | 功能描述 |
| margin | 用于指定对象的外边距,也就是说对象与对象之间的距离.该属性可以指定1~4个属性值,各属性值之间以空格分隔 |
| padding | 用于指定对象的内边距,即对象的内容与对象边框之间的距离.该属性可以指定1~4个属性值,各属性值之间以空格分隔 |
| background | 用于设置背景颜色,背景图片,背景图片的排列方式,是否固定背景图片及其位置.该属性可指定多个属性值,各属性值之间以空格分隔,没有先后顺序 |
| border | 用于设置边框的宽度,样式和颜色.该属性可以指定多个属性值,各属性值之间以空格分隔,没有先后顺序 |
| font | 用于设置字体的样式,小型的大写字体,字体粗细,文字的大小,行高和文字的字体 |
| height | 用于指定对象的高度 |
| width | 用于指定对象的宽度 |
| color | 用于指定文本的颜色 |
| text-align | 用于指定文本的对齐方式 |
| text-decoration | 用于指定文本的显示样式,其属性值包括line-through(删除线),overline(上画线),underline(下划线),blink(闪烁效果)和none(无效果)等 |
| display | 用于指定对象的显示形式 |
6770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
