HTML文档结构
完整的HTML文件包括头部和主体两大部分。代码示例如下:
HTML文档结构
其中:
文档类型说明:<!DOCTYPE html>
文档的开始和结束标签:
<html>
......
</html>
文档头部的开始和结束标签:
<head>
......
</head>
文档主体的开始和结束标签:
<body>
......
</body>
网页标题的开始和结束标签:
<title>
......
</title>
一级子标题的开始和结束标签:
<h1>
......
</h1>
对齐属性:align属性用于设定标题的对齐方式,其取值可以为left、center、right、justify。
HTML5基础
-
HTML5-文档头部
1.页面标题及字符集的设置
1)title标签
title标签用于定义HTML页面的标题。它是双标签,开始和结束标签之间的内容就是要设置的页面标题。
它的作用是:
在浏览器的标题栏中显示标题
标题可以用作默认快捷方式或收藏夹的名称
标题还可以作为搜索引擎结果中的页面标题
应用时注意:
一个网页只能有一个标题
标题名称的长度不超过64个字符数
标题标记对之间不允许有其它的标签存在
用法示例:
<title>个人网页</title>
2)charset属性
在html5中,可直接通过meta标签的charset属性设置页面的字符编码格式。在理论上,可以使用任何字符编码,但并不是所有浏览器都能够解释它们。常用的编码有:
ISO-8859-1:国际标准化组织针对不同的字母表/语言定义的标准字符集( 拉丁字母表的字符编码),是浏览器默认的字符集
utf-8:Unicode 联盟开发的标准,utf-8 是网页和电子邮件的首选编码。
gb2312:信息交换用汉字编码字符集,中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。
用法示例:
<meta charset="gb2312"/>
2.元信息的设置
1)meta标签的作用
meta标签用于定义页面的元信息,可重复出现再头部标签中。它是单标签,通过“名称/值”的形式成对使用其属性。
meta标签主要分为两大类,一类对页面进行设置,另一类对搜索引擎进行设置。
对页面进行设置的格式:<meta http-equiv="名称" content="值"/>
对搜索引擎进行设置的格式:<meta name="名称" content="值"/>
2)http-equiv/content
http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。
用法示例:
1.页面停留20秒后跳转到www.educoder.net
<meta http-equiv="refresh" content="20;url=www.educoder.net"/>
2.网页于2020年7月26号8点过期
<meta http-equiv ="expires" content="Thur,26 Jul 2020 08:00:00 GMT"/>
3.设置cookie并进行页面缓存
<meta http-equiv ="set-cookie" content="cookievalue = xxx; expires= Thur,26 Jul 2020 08:00:00 GMT; path=/">
3)name/content
http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、 版权、编辑器等。
用法示例:
1.用于标注网页的作者和Email
<meta name = "author" content = "刘明,Liuming@sina.com" />
2.为搜索引擎提供网站简介
<meta name ="description" content ="网站简介"/>
3.为搜索引擎提供关键字
<meta name="keywords" content="漫步时尚广场,时尚,购物,影视,餐饮"/>
4.为搜索引擎提供编辑器类型
<meta name="generator" content="Dreamweaver CS6"/>
5.为搜索引擎提供提供最新版本信息
<meta name="revised" content="David,2020/8/8"/>
3.link标签
link标签可引用外部文件。它是单标签,一个页面允许使用多个link标签引用多个外部文件。
它的作用是:
指定引用外部文档的地址
指定当前文档与引用的外部文档的关系
说明引用外部文档的类型
<link/>标签的语法格式:
<link href="" rel="" type=""/>
格式说明:
href设置外部文档的地址
rel设置当前文档与引用的外部文档的关系
type设置外部文档的类型。
用法示例:链接一个外部样式表
<link rel="stylesheet" type="text/css" href="theme.css" />
-
HTML5-文本控制类标签
1.HTML5-网页背景及标题段落标签
1)设置网页背景图
如需用图像作网页背景图,可在<body>中添加background属性,其属性取值即为图像的路径。
用法示例:
<body background="背景图.jpg">
2)设置网页背景色
如需为网页添加背景色,可在<body>中添加bgcolor属性,其属性取值颜色单词或颜色代码。
用法示例:
<body bgcolor="#FFF0F5">
3)文本标题标签
文本标题标签<hi>是双标签,块级元素,用于规定文本内容标题的层次。在HTML中提供了6级标题标签,从一级<h1>开始到六级<h6>,字号大小依次减小。
默认情况下,在大多数浏览器中显示<h1><h2><h3>的内容大于文本在网页中的默认尺寸,<h4>的内容与默认文本的大小基本相同,而<h5>和<h6>的内容较默认文本小一些。可设置文本标题的对齐属性。
4)段落标签
段落标签<p>是双标签,块级元素,用于将文本内容定义为一个段落,段落内容从新的一行开始,并于上一段之间有一个空行。可设置段落文本的对齐属性。
相关属性align的取值
left:左对齐
center:居中对齐
right:右对齐
justify:两端对齐
2.HTML5-水平线和换行的设置
1)水平线标签
水平线标签hr/是单标签,用于产生一条水平线。可设置水平线的粗细、长度、对齐方式、有无阴影和线的颜色属性。
水平线标签相关的属性
size:水平线的粗细,长度单位,默认为px
width:水平线长,长度单位,默认为px
align:水平线对齐,可取left、center、right
color:水平线颜色,其取值可为颜色单词,或颜色码。
noshade:无阴影设置,添加时无阴影,不添加时有阴影。
2)换行标签<br/>
换行标签<br/>是单标签,可以在文本内容不结束的情况下对文本进行换行。它不产生一个空行,但连续多个的<br>标签可以产生多个空行的效果。
3.HTML5-文本修饰
font标签及其属性
font标签可对文本的字号大小、字体和颜色进行修饰。对应的属性为:
size:设置文本字号,其取值为1~7
face:设置文本字体
color:设置文本颜色,值为颜色单词或颜色代码
align:设置文本对齐,取值可以是left、center、right、justify
文本修饰类的其他标签
-
HTML5-图像的运用
1.新媒体新闻网页的设计
- 网页背景的设置,2.标题标签,3.水平线标签,4.段落标签,5.font标签。
2.带插图的新媒体新闻网页的设计
1)图像标签的常用属性
img标签是单表签,行内元素。在应用中,img标签常设置的属性有:src、alt、align、width、height和title。为了方便训练,这里重述一下这几个属性的功能。
src :给定图像来源的位置
align :设置图文对齐方式,可取left、right、top、bottom、middle
Width和 height :设定图像的宽度和高度
title:鼠标停留在图片上时显示的说明文字
alt :设置在图像未载入前图片位置显示的文字
hspace:设置图像左右两侧的间隙
vspace:设置图像顶部和底部的间隙
-
表格标签-表格基本结构
1.网页表格的基本概念
1)表格的结构
在基本表格结构中,表格标题、项目表头和数据资料构成了表格基本结构三个要素。
例如下图所示的表格中,表格标题为“通讯录”,表格第一行单元格中的内容基本不变,称作项目表头,表格第二行后单元格的内容通常会动态改变,称作数据资料。
2)表格的基本标签
HTML表格由table标签以及一个或多个tr、th或td标签组成:
table标签:定义一个表格
caption标签:定义表格标题,嵌套在<table></table>中
tr标签:定义表格中的一行,嵌套在<table></table>中
th标签:定义表格中的表头单元格,嵌套在<tr></tr>中
td标签:定义表格中的数据单元格,嵌套在<tr></tr>中
3)表格标签的基本属性
table标签的基本属性
tr标签的基本属性
th和td标签的基本属性
创建简单的表格
1)表格的结构及对应的标签
一个基本的表格是由行和每行中的单元格组成的,一般要包含表格标题、项目标题和数据资料三个要素。例如下图所示的表格
对应的代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="5px">
<caption>通讯录</caption>
<tr>
<th>姓名</th>
<th>QQ</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>123456</td>
<td>13511112222</td>
</tr>
<tr>
<td>李四</td>
<td>654321</td>
<td>13611112222</td>
</tr>
</table>
</body>
</html>
2)表格标签的属性
显然上面的表格很不美观,我们可以尝试为表格添加背景色,并调整表格的宽度和单元格的宽度。
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="5px" bgcolor="00ffff" width="300">
<caption>通讯录</caption>
<tr>
<td width=100>姓名</td>
<td width=100>QQ</td>
<td width=100>电话</td>
</tr>
<tr>
<td>张三</td>
<td>123456</td>
<td>13511112222</td>
</tr>
<tr>
<td>李四</td>
<td>654321</td>
<td>13611112222</td>
</tr>
</table>
</body>
</html>
表格行样式的设置
tr标签及其属性的设置。
tr标签
tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式:
height
tr标签中的height属性设置行高,属性取值为具体行高的数值。
align
tr标签中的align属性设置行内单元格中文本的水平对齐方式,属性取值可以为left、center、right。
valign
tr标签中的valign属性设置行内单元格中文本的垂直对齐方式,属性取值可以为top、middle、bottom。
bgcolor
tr标签中的bgcolor属性设置行内单元格的背景颜色,属性取值可以为颜色单词或颜色代码。
background
tr标签中的background属性设置行背景图像,属性取值为背景图像的路径。
表格中单元格样式的设置
表格中单元格的样式分为单元格的整体样式设置和某个单元格样式的设置。
1)单元格整体样式
单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。
cellspacing
cellspacing属性用于设置单元格之间的间隙,取值为某一数值。
cellpadding
cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。
2)某个单元格的样式
可在对应的th或td标签中设置单元格的属性。
width
th或td标签中的width属性设置单元格的宽度,属性取值为具体宽度值。
height
th或td标签中的height属性设置单元格的高,属性取值为具体行高度值。
align
th或td标签中的align属性设置单元格中文本的水平对齐方式,属性取值可以为left、center、right。
valign
th或td标签中的valign属性设置单元格中文本的垂直对齐方式,属性取值可以为top、middle、bottom。
bgcolor
th或td标签中的bgcolor属性设置单元格的背景颜色,属性取值可以为颜色单词或颜色代码。
background
th或td标签中的background属性设置单元格的背景图像,属性取值为背景图像的路径。
-
HTML5-超链接的应用
创建热字超链接
1)超链接的概念
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件编辑器,一个音频或视频文件,甚至是一个应用程序。
设置一个超链接,至少需要两个基本要素:
链源:引起跳转的原因
链宿:要跳转的目标
2)热字超链接及其设置
热字超链接,链源由对应的文本构成,外部超链接的链宿为目标文件的路径,例如链宿的绝对路径为https://https://www.baidu.com的话,可用下面的代码实现:
<a href="https://www.baidu.com">点一下试试</a>
其中,属性href用于设置链宿的路径,超链接开始标签<a>和结束标签</a>之间的内容是链宿。
运行效果如下:
点一下试试
创建热图超链接
1)超链接的属性
超链接标签的属性除了href外,常用的还有:
title:设置鼠标悬停在链源上时的提示文字
target:指定打开目标窗口的方式
target属性的取值及含义如下图所示:
2)图像超链接及其设置
图像超链接采用图像作为超链接的链源,该链源可使用img标签来嵌入图像,该标签常用的属性有:src、alt、border、title、width、height等。
用法示例;
<a href="http://www.baidu.com" target="_blank" title="单击图像实现超链接">
<img src="https://www.educoder.net/api/attachments/1184937" />
</a>
下载歌曲超链接
超链接的设置。
1)外部超链接的其他类型
外部超链接不仅可以打开网页,还可以打开图像、音乐和视频等文件,浏览器可以自动识别文件的后缀,从而确定打开的目标文件类型。不管何种类型设置超链接链源和链宿的方法都相同,这里不再赘述。
创建页内超链接
1)页内链接
从当前HTML文档的某一位置跳到另一位置的链接称为页内链接。
2)页内链接的设置
页内链接的设置有两个步骤:
1.在目标位置处设置锚点,若锚点名称为“name1",代码如下:
<a name="name1"></a>
2.设置指向锚点位置的超链接,若链源热字为”跳转至name1",代码如下:
<a href="#name1">跳转至name1</a>
表格标签—表格高级样式的设置
1.表格高级样式设置相关概念
1)外边框线样式属性frame
表格的外边框线的样式可用属性frame的取值来确定,frame取值与相应的样式如下:
above:显示上边框
below:显示下边框
hsides:显示上下边框
vsides:显示左右边框
lhs:显示左边框
rhs:显示右边框
border:显示上下左右边框
void:不显示边框
2)内部边框样式属性rules
表格的内部边框的样式可用属性rules的取值来确定,rules取值与相应的样式如下:
all:显示所有内部边框
none:不显示内部边框
rows:仅显示行边框
cols:仅显示列边框
groups:显示介于行组和列组间边框
3)单元格合并
在制作稍复杂的表格时,需要对表格中的行或列进行合并。
水平方向单元格的合并
需要将水平方向的单元格合并时,可在<th>或<td>标记中添加colspan属性,属性的取值即为合并的单元格数目。
垂直方向单元格的合并
需要将垂直方向的单元格合并时,可在<th>或<td>标记中添加rowspan属性,属性的取值即为合并的单元格数目。
- 设置表格的外边框样式
1)table标签的一般属性
table标签的属性通常有border、width、height、align、bgcolor、background等,前面已经介绍过,这里不在赘述。
2)外边框样式的设置
frame属性可用来设置表格的外边框样式,属性取值可以是:above、below、hsides、vsides、lhs、rhs、border、void。
例如,如果表格的外边框只需显示上边框,属性设置如下:
<table frame=above>
设置表格的内边框样式
1)表格内部边框属性的设置
表格内部边框可以使用rules属性来设置,其取值可以为all、none
rows、cols、groups。
例如,如果表格的外边框只需显示上边框,内部边框显示列边框线,属性设置如下:
<table frame=above rules=cols>
4.表格中单元格的合并
1)水平方向单元格的合并
将两个或多个水平方向的单元格合并,可以在th或td标签中使用colspan属性来设置,属性的取值为合并的单元格的数目。
用法示例:
示例如下:
<tr>
<th>姓名</th>
<th colspan="4">签到</th>
<th>备注</th>
</tr>
2)垂直方向单元格的合并
将两个或多个垂直方向的单元格合并,可以在th或td标签中使用rowspan属性来设置,属性的取值为合并的单元格的数目。
用法示例:
<tr>
<td rowspan="2">领导讲话 </td>
<td>大会主题报告</td>
<td>分会专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr>
<td>专家报告</td>
<td>分组讨论</td>
结构元素
1.文档结构元素相关概念
1)header元素
header元素是一种表示头部的结构元素,通常用来放置整个网页或页面内一个内容区块的标题,但也可以包含其他的元素,例如标题(<h1>~<h6>)、导航部分(<nav>)或普通内容(<p>和<span>)等部分。
2)article元素
article元素是一种表示大段内容的结构元素。使用article元素可以在网页中定义独立的、完整的内容,例如:文章、博客、帖子、评论等。
3)aside元素
aside元素用于定义当前页面或当前文章的附属信息,包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分。
4)footer元素
footer元素用于定义脚注部分,例如在父级内容块中添加注释、在文章区中添加作者信息、在网页底部添加版权信息等。
5)figure/figcaption元素
figure元素用于表示独立的流内容,例如图像、图表、照片、代码等等。figcaption元素用于定义figure元素的标题,要嵌套在<figure>中,通常被置于 <figure> 中的第一个或最后一个子元素的位置。
2.header元素和article元素的应用
文章区的结构
设计要求中的文章区由文章标题和文章内容组成。HTML5中的语义化元素article可表示一个文章区,在其中可以嵌套header元素来表示文章的标题,文章的内容可用段落标签来设定。
代码结构如下:
<article?
<header>文章标题</header>
<p>文章的段落内容</p>
</article>
3.figure元素和figcaption元素的应用
文章区中引入图类对象的语义元素
设计要求的文章区中要插入能被搜索引擎识别的图类对象,可用HTML5中的语义化元素figure来设置,在其中可以嵌套figcaption元素来表示图的名称,该元素通常被置于figure 元素的第一个或最后一个子元素的位置。
代码结构如下:
<figure>
<img src=图的路径>
<figcaption>图的名称</figcaption>
</figure>
页面结点元素
1.页面结点元素相关概念
section元素
section 元素用于定义文章的节(区段),比如章节、页眉、页脚或文档中的其他部分。通常由内容及其标题组成。
nav元素
nav元素用于代表页面的一个部分,是一个可以作为页面导航的链接组,主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。
address元素
address元素用于一般被作者用来提供该文档的联系人信息,一般放在一个网页的开头或者结尾,最常用的是和其他内容包含在footer元素内。如果address元素位于article元素内部,则它表示article元素所包含文章内容的作者的联系信息,如果直接位于body元素内,那么表示该网页的作者的联系信息。
2.section元素的使用
文章节的设置
HTML5中的语义化元素section可表示一个文章的节,在其中可以嵌套节标题,文章节的内容可用段落标签或其他标签来设定。
代码结构如下:
<section>
<header>文章的节标题</header>
<p>文章的段落内容</p>
</section>
nav元素的使用
文章区的结构
设计要求文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区,在其中可以嵌套超链接标签(a)来实现跳转,外部超链接的常用属性有href和title,href的取值为链宿的路径,title的取值为鼠标悬停在链源上显示的文本。
代码结构如下:
<nav>
<a href="链宿的路径" title="显示文本">链源</a>
......
</nav>
4.footer元素和address元素的使用
页脚区的设置
footer元素用于定义文档或节的页脚。作为文档的页脚,通常可以包含页面的版权信息和联系人信息。
交互元素
1.交互元素相关概念
1)progress元素
progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性:
max:表示任务的总量,默认值为1.
value:表示已完成任务的数量。
应用中,可以有以下三种情况。
用法示例1:
<progress max=100 value=20></progress>
用法示例2:
<progress value=0.5></progress>
用法示例3:
<progress></progress>
2)meter元素
meter元素属于状态交互元素。可用于投票系统中候选人各占比例情况、考试分数统计等。
meter元素具有如下属性:
form:规定meter元素所属的一个或多个表单,其取值为表单标签form所定义的id名。
value:设置或获取meter元素的当前值,其数值必须介于min和max值之间。
max:设置meter元素的最大值,默认为1.
min:设置meter元素的最小值,默认为0.
high:设置过高的阈值,当value值大于high并小于max时,显示过高的颜色。
low:设置过低的阈值,当value值小于low并大于min时,显示过低的颜色。
optimum:设置最优值
3)details/summary元素
etails元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下(如Chrome、 Safari )能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分,嵌套在details元素中。应用时,details元素中标题内容是可见的,当单击标题时将会显示/隐藏details元素中的详细信息。
meter元素的属性主要就是open:
open:用于控制details元素是否显示,取值为true时,元素内部的子元素被展开显示,当open属性值为false时,其内部的子元素被收缩起来不显示。默认不显示。 用法示例:
<details>
<summary>单击可显示/隐藏详细内容</summary>
<p>这里详细介绍details元素所涉及的知识</p>
</details>
4)menu元素
menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项
menu元素主要有以下两个属性:
label:用于设置菜单的可见标签。
menu:用于设置菜单的类型,取值为context表示上下文菜单,取值为toolbar表示工具条,取值为popup表示弹出式菜单。 用法示例:
<span contextmenu="myMenu">右击一下</span>
<menu type="context" id="myMenu">
<menuitem label="单击一下" οnclick="alert('您单击了我一下')" >
</menuitem>
</menu>
5)command元素
command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片,并且实现图片按钮效果;另外,改变标记中的“type”属性值,还可以定义按钮类型。 command元素主要有以下属性:
icon:规定用于代表 command 元素的图像。
label:设置规定 command 元素的可见标签。
type:设置command 元素的类型,可以取checkbox(复选)、radio(单选)、command(操作按钮)。默认取 "command"。
radiogroup:设置radio 类型按钮的组名。
用法示例:
<command οnclick="alert('您单击了我一下')">
请单击
</command>
2.progress元素
进度条的设置
HTML5中的交互元素progress可在网页中显示一个进度条,该元素有两个属性,属性max表示任务总量,属性value表示当前的任务量。
3.meter元素
HTML5中的交互元素meter可在网页中显示度量条,该元素的属性主要有:
value:当前值
max:最大值
min:最小值
high::高阈值
low:低阈值
optimum:最优值
4.details/summary元素
details/summary元素的设置
HTML5中的交互元素details可在网页中描述文档或文档某个部分的细节,summary元素可设置details折叠时看到的标题内容。
文本层次语义元素
1.文本层次语义元素相关概念
1)em和strong
em和strong都是HTML5中定义的带有加强语义的元素,页面呈现加粗显示效果。
em:把文本定义为强调的内容。显示时为斜体加粗。
strong:把文本定义为语气更强的强调的内容。
2)cite
cite元素创建一个引用标记,用来指明某内容的引用或参考源,如书籍或杂志或新闻报道等的标题,规范、报纸、法律文件,网络文章的URL等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a> 标签中,从而把一个超链接指向该联机版本。
3)mark
mark元素定义带有记号的文本,可以高亮显示文档中的文字以达到醒目的效果。
4)time
time元素定义日期或时间,该元素能够以机器可读的方式对日期和时间进行编码,比如用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
5)dfn
dfn元素用来定义术语,可以通过可选的 title属性来提供对术语的准确定义。例如:
<dfn title=文档对象模型>DOM</dfn>
9)var
var元素定义变量。这个标签经常与 <code> 和<pre>标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。用 <var> 标签标记的文本通常显示为斜体。
2.文本层次语义元素
em元素、strong元素、mark元素、def元素均为HTML5中定义的语义化元素,分别强调、更加强调、醒目显示、和定义术语的语义。这些元素均为行内元素,排版时如需换行,应使用标签。
1.分组元素相关的概念
1)div
div元素是没有语义的通用分组元素,早期设计中常用div标签进行网页布局。
2)blockquote
blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙,在左右两边缩进(增加外边距)。
3)pre
pre元素用来定义预格式化文本,在<pre>标签内容中的文本通常会保留空格和换行符,显示为等宽字体。
4)figure/figcaption
figure元素代表一个和文档相关的图,figcaption是这个图的标题。
5)ul/li
ul可创建无序列表,在这个标签中可以用li标签设置多个列表项。基本格式如下:
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
无序列表<ul>有一个可选属性type,用来规定列表里项目符号的类型,其取值可以是disk(实心圆)、circle(圆)或square(实心正方形)。
6)ol/li
ol可创建有序列表,在这个标签中可以用li标签设置多个列表项,显示时每个列表项独占一行。基本格式如下:
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
在HTML5中,有序列表<ol>有三个可选属性,type用来规定列表里项目编号的类型,start属性用于指定列表的开始编号,reversed属性用于将列表反向进行编号。
7)dl/dt,dd
dl可创建定义列表,在这个标签中可以用dt标签设置需要定义的术语,每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下:
<dl>
<dt>术语</dt>
<dd>术语解释1</dd>
<dd>术语解释2</dd>
</cl>
应用时注意,一个列表中不允许含有相同名字的术语,也不允许有重复的术语解释。
2.无序列表
无序列表示例
HTML中的ul元素表示不排序的项目列表,属性type 可设置列表符号样式,取值为disk表示实心圆,取值为circle表示圆,取值为square表示实心正方形,默认项目符号类型为disk。例如以下代码:
<ul>
<li type=disk>第一项 实心圆</li>
<li type=circle>第二项 圆</li>
<li type=square>第三项 实心正方形</li>
</ul
3.有序列表
有序列表示例
HTML中的ol元素表示排序的项目列表,属性type 可设置列表符号样式,取值为1表示按数字排序,取值为A表示按大写英文字母排序,取值为a表示按小写英文字母排序,取值为I表示按大写罗马数字排序,取值为i表示按小写罗马数字排序,默认按数字排序。属性start 设置列表符号初值,取值可以是1、2、3 ...,例如以下代码:
<ol start=2>
<li type=A>男装</li>
<li type=i>上衣</li>
<li type=I>T恤</li>
</ol
1.表单的基本概念
1)表单的结构
表单是收集用户数据的容器。一个表单通常由表单控件和相关的提示信息组成。
表单控件:实现用户输入的组件。如文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文件域等控件。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件及提示信息
</form>
2)form的属性
表单在向服务器传输数据时需要一些进行一些设置,可通过form标签的属性来实现。
name
每个表单及其表单控件都有一个 name 属性,用于在提交表单时对表单及数据进行识别。
action
在提交表单时,action属性用于指定接收并处理表单数据的服务器程序的url地址。
method
在提交表单时,method属性用于设置表单数据的提交方式。有两种方法:get方法和post方法。
get方法
采用GET方法时,浏览器会与服务器建立连接,然后将表单数据直接附在action属性设置的URL之后,通过URL在一个传输步骤中发送所有的表单数据,URL和表单数据之间用问号进行分隔。 显然这种方法用户数据要显示在地址栏中,保密性很差,而且对用户发送的数据量也有限制。
post方法
采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接,一旦建立连接之后,浏览器按分段传输的方法将数据发送给服务器。 显然这种方法用户数据嵌入在http请求中而不是地址栏的,保密性较好,对用户发送的数据量也无限制。但post方法发送的信息是未经加密的,容易被黑客获取。
3)表单控件的类型
常用的表单控件有以下几种:
input控件:是单行输入型控件,用来接受用户输入的信息。
textarea控件:用来创建一个支持多行的文本输入区域。
select控件:用于创建下拉列表框。
button控件:用于定义一个按钮。
1.input控件相关概念
1)input控件的属性
input标签是单标签,用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。
type:控件类型,取值为text 、password、radio 、 checkbox 、 button、 submit、 reset、 file image、 hidden等
name:控件名称,取值由用户定义
value:控件中默认文本,取值由用户定义。对于不同的input控件类型,value的含义不同,例如button、reset和submit,value定义按钮上显示的文本;text、password和hidden,value定义域的初始值;checkbox、radio、image,value定义与输入相关联的值。
size:控件在页面中显示宽度,取值正整数
readonly:控件内容为只读,取值为readonly
disabled:首次加载页面时禁用该控件(显示为灰色),取值为disabled
checked:定义选择控件默认值被选中,取值checked
maxlength:控件允许输入的最多字符数,取值正整数
min:控件允许输入的最少字符数,取值正整数
2)input控件的类型
input控件通过type属性的取值设置不同类型,主要有:
text:定义单行文本框,文本框的默认宽度是20个字符。
password:定义密码框,密码域中的字符会被掩码(显示为星号或原点)。
radio:定义单选按钮,单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。
checkbox:定义复选框,复选框允许用户在一定数目的选择项中不选、选取一个或多个。
button:定义按钮,单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序,响应用户。
submit:定义提交按钮,提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。
reset:定义重置按钮,重置按钮会清除表单中的所有数据。
file:定义文件域,包括输入字段和“浏览”按钮,供文件上传。
image:定义图像形式的提交按钮,需配合src属性和alt属性使用。
hidden:定义隐藏域,隐藏域对于用户是不可见的,隐藏域通常会存储一个默认值。
date:定义日期选择域,鼠标点击输入框,可以看到浏览器原生的日历框。
month:定义月份选择域,效果类似date。
week:定义周选择域,效果类似date。
time:定义时间选择域。
datetime-local:定义本地日期时间选择域。
datetime:定义日期时间选择域。
2.创建文本框
在input标签中,将type属性设置为text,可显示单行文本框。使用name属性来规定input元素的名称,它可以对提交到服务器后的表单数据进行标识。使用size属性可规定文本框的宽度,使用maxlength属性可规定控件允许输入的最多字符数。
示例如下: 姓名:<input type="text" name="userName" size="20" maxlength="16"/>
4.创建单选按钮
在input标签中,将type属性设置为radio,可设置单选框;使用name属性来规定input元素的名称,要求单项选择中的每个选项都具有相同的name;使用value属性可规定与输入相关联选项值。
示例如下: 性别:<input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman"/>女
创建文本区域
1.textarea控件相关概念
1)textarea标签的属性
textarea标签用于定义多行文本区域,文本区域中可容纳无限数量的文本,其中文本的默认字体是等宽字体(Courier)。
2)textarea的基本属性
textarea的基本属性主要有:
cols:规定每行中的字符数
rows:规定可见的行数
name:规定文本区域的名称
readonly:规定文本区域为只读
disabled:规定文本区域为不可用
1)fieldset标签
fieldset标签用于定义表单的一个子容器,将所包含的内容以边框环绕方式显示。
fieldset标签没有必需的或唯一的属性,可添加的属性有:
name:规定fieldset的名称
form:规定fieldset所属的一个或多个表单
2)legend标签
legend标签用于定义分组的标题,fieldset标签中的第一个元素一般是legend标签。
CSS3语法
CSS3样式规则
1.CSS基础知识
1)什么是CSS
CSS是Cascading Style Sheets(层叠样式表)的缩写,它是一种对Web文档添加样式的简单机制,是一种表现HTML或XML等文件外观样式的计算机语言,是一种网页排版和布局设计的技术。
2)CSS的特点
网页载入更快
降低流量费用
修改设计时效率高
更容易被搜索引擎收录
5)引入CSS样式的方法
在网页中应用CSS样式有内联式、内嵌式、外链式和外导式4种方法。
内联式:通过标记的style属性直接把CSS样式添加到HTML的标签中。 例如:<span style="color:red; font-weight:bold;">内联样式</span>
内嵌式:将CSS代码集中写在HTML文档的头部标签中。并用<style>标记定义。例如:
<style type="text/css">
span{color:red;
font-weight:bold;}
</style>
外链式:将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中。例如: <link type="text/css" rel="stylesheet" href="style.css" />
外导式:将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过@import url(“外部样式表相对路径”)语句将外部样式表文件链接到HTML文档中。例如:
<style type="text/css">
@import url("style.css");
</style>
常用的文本样式属性有:
color:设置文本的颜色
font-family:设置文本的字体
font-size:设置文本的字号大小
text-align:文本水平对齐方式
line-height:设置文本的行间距
3.用内嵌式引入CSS样式
在HTML头部添加CSS样式
在HTML标签中,使用style标签来添加CSS样式,其方法是将CSS代码集中写在HTML文档的头部的style标签中。 示例如下:
<style type="text/css">
body{background-image:url(背景图的路径);
background-size:cover;}
div{position:fixed;
left:500px;
top:200px;
color:red
}
</style>
常用的背景样式属性有:
background-color:设置元素的背景颜色
background-image:设置元素的背景图像,取值格式为url(背景图像的路径)
background-size:设置元素的背景图像大小。
4.用外链式引入CSS样式
在HTML中链接外部样式表文件
在HTML标签中,使用link标签来链接CSS样式文件。
示例如下:
<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>
link标签属性有:
href:取值为外部样式文件的
type:设置外部文档的类型。取值为text/css时,表示外部文档的类型为CSS样式表;取值为text/javascript时,表示外部文档的类型为javascript脚本
样式格式
标签名,标签名{属性1:属性值1; 属性2:属性值2;}
用法示例
h1,h2,h3{color:green;}
2)后代选择器
当标签发生嵌套时,内层标签就成为外层标签的后代。后代选择器用来选择元素或元素组的后代,选择器的写法是外层元素写在前面,内层元素写在后面,中间用空格分隔。
样式格式
外层元素,内层元素{属性1:属性值1; 属性2:属性值2;}
法示例
div p {background-color:#CCC; }
3)子元素选择器
子元素选择器选取某个元素的直接子元素(间接子元素不适用);子元素选择器元素之间使用大于号(>)隔开。
样式格式
父元素>子元素{属性1:属性值1; 属性2:属性值2;
结构设置
em
标签<em>...</em>是CSS3中引入的文本格式化标签,可使作用的文本呈现斜体效果,并具有强调的语义。
strong
标签<strong>...</strong>是CSS3中引入的文本格式化标签,可使作用的文本呈现粗体效果,并具有强调的语义。
样式设置
color
color属性用于设置文本的颜色。
font-size
font-size属性用于设置字号。
font-family
font-family属性用于设置字体。
CSS3文本外观样式
color属性用于定义文本的颜色
letter-spacing
letter-spacing属性用于定义字符(字母或汉字)间距。其属性值可为不同单位的数值,允许使用负值,默认为normal。
line-height
line-height属性用于设置行间距,即字符的垂直间距,一般称为行高。
text-align
text-align属性用于设置文本内容水平对齐,相当于html中的align对齐属性。 text-align可用属性值如下:
left:左对齐(默认值)
right:右对齐。
center:居中对齐。
text-transform
text-transform属性用于控制英文字符的大小写。 text-transform可用属性值如下:
capitalize:首字母大写。
uppercase:全部字符转换为大写。
lowercase:全部字符转换为小写。
text-decoration
text-decoration属性用于设置文本的下划线,上划线,删除线等修饰效果。 text-decoration可用属性值如下:
none:没有装饰(正常文本默认值)。
underline:下划线。
overline:上划线。
line-through:删除线。
text-indent
text-indent属性用于设置首行文本的缩进。 text-indent属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置
text-shadow
text-shadow属性可以为页面中的文本添加阴影效果。
h-shadow用于设置水平阴影的距离
v-shadow用于设置垂直阴影的距离
blur用于设置模糊半径
color用于设置阴影颜色。
text-indent
text-indent属性用于设置文本的缩进。
line-height
line-height属性用于设置文本行高。
text-decoration
text-decoration属性用于设置文本的修饰。