一、标记及属性

1.标记

单一标记：只要标记一个就能所需表示的内容。如：<hr>,<br>
成对标记：需要两个标记组合才能才能完成所需功能。如：<body>和</body>,<html>和</heml>

标记：为了使所要显示的内容达到一定的效果，在内容中加入的特定标识。

<标记>被标记的内容<标记/>

每个标记都用“<”(小于号)和“>”(大于号)围住。
注意：“<”，“>”与标记之间不能留有空格或其他非标记字符
在标记前加 ”/“ 是结束标记
标记字母不区分大小写
对同一段要标记的内容，可以使用多个标记来共同作用，各个标记间的顺序是任意的。

2.属性

属性：标记通过属性来精确控制信息，仪表制作出各种效果。

 <标记 属性1=属性值 属性2=属性值……>内容</标记>

并不是每个标记都有属性。
可以根据需要使标记的所有属性或几个属性，属性之间没有顺序。
属性和标记一样，也不区分大小写。

二、HTML文件结构

1.文件结构

<html><head><title>网页的标题</title></head><body>网页的内容</body>
</html>

以<HTML>开头，以</HTML>结尾。
包括头部（Head）和主题（Body）两部分。
<head>……</head>：网页的题头，说明文件命名与文件本身的相关信息。
<title>……</title>：网页标题，在浏览器的标题栏显示。
<body>……</body>:网页的正文。

三、页面属性标记

1.meta标记

<head><meta http-equiv="Content-Type" content="text/html charset=gb2312">
</head>

主要属性有：

HTTP-EQUIV：类似于HTTP的头部协议，回应给浏览器一些有用的信息，以帮助正确和准确的显示网页内容。常用类型有:

expires（期限）：设定网页的过期时间。

<meta http-equiv="expires" content="Wed，26 Feb 1977 08：09：33 GTM">

Pragma（cache模式）：禁止浏览器从本地机的缓存中调阅网页。

<meta http-equiv="Pragma" content="no-cache">

Refrash(刷新）：将网页定时自动链接到其他网页上

<meta http-equiv="refrash" content="5；url=http：//www.xxx.com">

Content-Type(字符集设定)：

<meta http-equiv="Content-Type" content="text/html;charset=gb2123">

NAME

<META NAME="keywords" content="life, universe, plants, relationships, science">

NAME：描述网页信息的，便于搜索引擎查找和分类。常用类型有：
Keywords(关键字）：设定页面的关键字
description（简介）：告诉搜索引擎页面的主要内容
robots（机器人向导）：告诉搜索引擎哪些页面需要索引，哪些页面不需要索引。
author（作者）：标注网页作者。

2.页面属性标记

<body 属性1=属性1 属性2=属性2…… >页面内容</body>

主要属性有：

bgcolor：设置页面背景色
backgruond：设置页面的背景图像
text：设置网页中文字的颜色
link：设置还没有被访问的超文本链接的颜色
vlink：设置已经被访问过的超文本链接的颜色
alink：这只超文本链接正在被访问时候的颜色

四、常用页面元素标记

1.段落标记

标题文字标记

<Hn align=水平对齐方式>标题</Hn>

Hn：表示标题文字的大小，n从1到6，H1最大，H6最小。

强行换行标记

本行文字<br>下一行文字

强制换段标记

上一段落文字<p>下一段落文字

<p align=水平对齐方式>段落文字</p>

显示预排格式标记

 <pre>已经拍好格式的段落文字</pre>

分区显示标记

<div align=水平对齐方式>多个段落文字或图像</div>

水平线标记

<hr align=水平对齐方式 size=粗细 width=长度 color=颜色 noshade>

align：标题文字的顺平对齐方式，取值有：
Left：左对齐
Center：居中对齐
Right：右对齐
size：设定水平线粗细，以像素为单位
width：设定水平线长度
绝对长度：像素数
相对长度：水平线占浏览窗口宽度的百分比
noshade：取消线条的阴影显示
color：设定线条颜色。可以用英文单词，也可以以 “#” 引导的一个十六进制代码。常用的代码颜色如下：

常用颜色代码表
颜色名	颜色英文名	16进制代码	颜色名	颜色英文名	16进制代码
黑色	Black	#000000	粉红色	Pink	#FFC0CB
蓝色	Blue	#0000FF	红色	Red	## FF0000
棕色	Brown	#A52A2A	白色	White	#FFFFFF
青色	Cyan	#00FFFF	黄色	Yellow	#FFFF00
灰色	Grey	#808080	深红色	Crimson	#CD061F
绿色	Green	#00800	黄绿色	Greenyellow	#00FFFF
乳白色	lvory	#FFFFF0	水蓝色	Dodgerblue	0B6EFF
桔黄色	orange	FFA500	淡紫色	lavender	#DBDBF8

2.文字标记

字体字号标记

<font size=文字大小 face=字体名 color=文字颜色>文字</font>

size：文字的大小，取值范围为1~7，1最小，7最大。
face：文字的大小
color：文字的颜色

字形标记
格式标记	字体效果
< B>受影响的字体< /B>	加粗
< I>受影响的字体< /I>	斜体
< U>受影响的字体< /U>	带下划线
< TT>受影响的字体< /TT>	标准打印机字体
< STRIKE>受影响的字体< /STRIKE>	带删除线
< SUB>受影响的字体< /SUB>	下标
< SUP>受影响的字体< /SUP>	上标
< BIG>受影响的字体< /BIG>	大字体文字
< SMALL>受影响的字体< /SMALL>	小字体文字

文字颜色标记

设定整个网页的文本的默认颜色

<body>属性的text特性：<body text=颜色值>文字</body>

将网页中不同的问字段设置为不同的颜色

<font>标记的color属性：<font color=颜色值>文字</font>

<font>标记的优先级比<body>标记要高

特殊字符标记
特殊字符标记	表示的字符
& lt;	<
& gt;	>
& nbsp;	空格
& amp;	&
& #37;	%
& quot;	“

注释标记

<!--需要注释的字段-->

注释的内容不会再浏览器打开网页时显示出来

3.超链接标记：

绝对路径

从根目录开始描述目录或文件
标识Internet上文件的全部信息，包括协议、主机名、文件夹名和文件名称。

相对路径

绝对路径清除明确的指出文件和文件夹的位置。
相对路径则根据当前目录不同，可能同样的文件名指向不同的文件。

锚点标记：

<A href=目标资源 name=书签名称 target=打开窗口方式 title=说明> 热点 </A>

href：目标资源的具体地址。可以是绝对路径，也可以是相对路径。
name：设定一个较长的HTML文档的跳转位置点，相当于书签。
target：控制超链接内容打开方式，即链接内容出现的位置。
title：超链接中的连接说明。

注意：name属性和href不能同时使用。

创建指向其他页面的链接

<a href="目标文件名.html">热点</a>

<a href="目录名/目录文件名.html">热点</a>

<a href="../目录文件名.html">热点</a>

<a href="../子目录名/目录文件名.html">热点</a>

创建指向本页的链接

建立超链接的标记：<A href="#锚点名">热点文本</A>
建立锚点的标记：<A name="链接名">跳转目录文本</A>

创建指向其他页面某处的链接

<A href="目标文件路径/目标文件名#锚点名">热点文本</A>

创建指向下载文件的链接

<A href="下载文件名">热点</A>

创建指向电子邮件的链接

<A href=""mailto：收件人email地址>热点</A>

4.列表标记

无序列表标记：

<UL type=符号类型><LI type="符号类型1"> 项目1<LI type="符号类型1"> 项目2
</UL>

LI：项目标记，单标记。
Type属性：项目符号的样式，取值有：
Disc：实心远点
Circle：空心圆点
Square：实心方块

<LI>的type属性比<UL>的type属性的优先级高

选单列表标记

<menu><lh>分类标题1<li>分类1值项目1<li>分类1值项目2……<br><lh>分类标题2<li>分类2值项目1<li>分类2值项目2……</menu>

lh：分类标题，标题前没有项目符号。

<lh>标记不会自动换行

有序列表标记

<OL type="序号类型"><LI type="符号类型1" start=n> 项目1<LI type="符号类型2" start=n> 项目2……
</oL>

Type的属性值	含义
1	序号为阿拉伯数字，1、2、3……。
a	序号为小写英文字母，a、b、c……。
A	序号为大写英文字母，A、B、C……。
i	序号为小写罗马字母，i、ii、iii……。
I	序号为大写罗马字母，I、II、III、IV……。

5.图像与多媒体标记

图像标记

<img scr="图像名称" alt="文字说明" width="宽度" height="高度" border="边框宽度" align="对齐方式" hspace="水平空白" vspace="垂直空白" align="对齐方式">

scr：插入的图像的url地址，及含图像的文件名
alt：表示图像的信息文字
当浏览器没有完全装载图象时，在图像的位置显示的信息。
当图片完全显示时，将鼠标移动到图像上看到的信息文字。
width：设定图像的宽度
height：设定图像的高度
border：设定的图像边框
hspace：图像左右边框空白，在图文很拍的时候使用
vspace：设定图像上下边缘空白大小
align：图像的对齐方式。取值有：
Top：上对齐
Middle：中间对齐
Bottom：下对齐
Left：左对齐
Right：右对齐

多媒体标记

<bgsound>标记：加入背景音乐
<bgsound src="声音文件" loop="播放次数" autostart="是否自动播放">

src：要播放的声音文件
loop：声音文件的播放次数。infinite表示循环播放
autostart：是否自动播放
True：是
False：否

注意：<bgsound>只支持IE浏览器

<embeb>标记：插入多媒体文件
<embeb src="多媒体文件" controls="控制面板类型" height="高度" weidth="宽度" hidden="是否隐藏"  loop="循环系数" autostart="是否自动播放">

src：要播放的媒体文件
controls：设定播放媒体文件的控制面板的类型
Console：一般正常的面板
Smallconsole：较小的面板
Playbutton：只显示播放按钮
Pausebutton：只显示暂停按钮
Stopbutton：只显示停止按钮
Volumelever：只显示音量调整按钮
height：设定播放区域的高度
width：设定播放区域的宽度
hidden：是否隐藏控制画面。取值有true和false
loop：设定播放次数。取值有true、false或播放次数
例如：插入背景音乐：

<enmbed crc="happy.mid autostart=true hidden=true loop=true">

插入多媒体链接：
<A href="声音或者媒体文件">链接入口</A>

五、常用页面布局标记

1.表格标记

<table><caption>表格标题</caption><tr><th>分类名称1<th>分类名称2……<th>分类名称n<tr><td>表项1<>表项2……<td>表项n……<tr><td>表项1<>表项2……<td>表项n
</table>

< table>(表格)标记的属性：

align：表格相对于页面的位置，取值有：
Left/Center/right：页面的左侧/中间/右侧
border：表格边框的宽度
width：表格的宽度，可以是像素的值，也可以是相对于页面大小的百分比
height：设定表格的高度
cellspacing：表项与表项之间的间隔
cellpadding：表项边框和表项内部文字之间的间隔
frame：表格边框的属性

frame属性值	含义
void	没有边框
above	没有上边框
below	没有下边框
hsides	只有水平边框，没有左右边框
vsides	只有垂直边框，没有上下边框
lhs	只有左边框
rhs	只有有边框

rules：设定表格内部的属性。取值如下：

rules	含义
none	没有内部线
rows	没有内部行线（水平线）
cols	只有内部列线（垂直线）
groups	只有不同分组之间有分界线
all	所有表项周边都有边线

dir：表示表项的排列方向，缺省的为从左到右排列
bgcolor：设定表格的背景颜色

< caption>(标题)标记的属性

align：标题和表格的对齐方式，取值为left、center或right
valign：标题在表格的上方或者下方，取值为：top或bottom

单元格标记的属性

<tr>：表格的一行
<th>：分类名称，只会用黑体显示
<td>：具体的表项值

bgcolor：单元格的背景颜色
rowspan：设定跨行的表项，表示从当前行开始合并的行数
colspan：设定跨列的表项，表示从当前列开始合并的列数
align：文字左、中、右对齐或者左右均匀调整，对应的值为：left、center、right或者justify。
valign：文字垂直上、中、下对齐或者按基准线对齐，对应的职为：top、bottom、middle或者baseline。

2.框架标记

1.框架标记是可以将一个浏览器窗口分割成个数不同的小窗口，每个小窗口能够显示不同的HTML文件；
2.不同的框架之间可以相互关联，可以通过一个框架中的操作影响到其他框架的内容
3.使用<frameset>和<frame>标记，建立了一个主调用HTML文件，用来声明框架的定义，以及如何进行框架的划分；
4.<frame>标记用来给各个框架指定页面内容，将框架与框架中显示的HTML文件联系起来。

< frameset>的属性

<frameset><frame src="url"><frame src="src">……
</frameset>

Row：横向分割的框架数目，用逗号分割，取值可以是像素、百分比或 “ * ” 。 “ * ” 表示剩余的窗口平均分配。
Col：纵向分割的框架数目
Border：整个框架组各个边框的宽度
Bordercolor：整个框架组各个边框的颜色
Frameborder：设定有/无边框
Framespacing：设定个窗口间的空白

frame>的属性

src：表示该框架对应的文件名（窗口中显示页面的路径
name：指定框架（窗口）的名称
marginwidth：设定框架内容与左右边框的空白
merginheight：设定框架内容与上下边框的空白
scrolling：设置是否加入滚动条，yes或no，默认auto
noresize：不允许改变各窗口大小

注意：
<frame>标记的个数应该等于<frameset>标记中定义的框架数
如果<frame>标记的个数小于<frameset>框架中定义的框架数量，则多于框架为空
按照先行后列的顺序对框架进行初始化
框架可以进行嵌套

框架间的链接

<a href="url" target="目标窗口">热点文字</a>

terget属性值	含义
框架名	链接的目标文件将被载入到指定的框架中
_blank	链接的目标文件将被载入到一个新的浏览器窗口
_self	连接的目标文件将被载入到当前的框架窗口，替换当前正在现实的文件。
_top	目标文件将被载入到当前的整个浏览器窗口
_parent	当框架嵌套式，目标文件将被载入到父框架中，否则被载入到整个浏览器窗口。

六、表单和滚动字幕标记

1.表单标记

表单是Web页面和用户进行信息交互的途径
<form> </form>：标记表单的开始和结束
<input>:设定表单以何种形式和用户交互

<form action="信息处理系统" mathod="处理方法"><input type="类型名" name="名称" size="大小" maxlength="最大长度" src="图像文件地址" checked><input ……>
……
</form>

< form>属性

action：表单处理方式

通过E-mall将信息发出
将信息输入到数据库
将信息发布到新闻组或者页面
分局输入内容搜索数据库并返回结果给访问者
表单数据的传输方式
Get：当按下提交按钮，form输入框内容附在action指明的URL的 “ ？” 之后立即传给服务器，get执行效率比较高，但传送的信息量有限，大约2k。
Post：当按下提交按钮后，需要等待服务器来读取参数信息，在传送信息量上没有限制。

< input>属性

type：指定项目的类型，取值为text，password，radio，checkbox，image，submit，reset，hidden和file等。
name：项目的控制名称。
size：如果type是password或者text，则size指初始字节长度，其他的指控制组件的初始大小（像素值）。
maxlength：用户可以输入的最大字符，对type为text或password有效。
src：当type 为image时，指明图像文件的具体位置。
checked：当type为radio或者checkbox时，表明初始选中该项目。

单行文本和名密码框

文本框的type属性为text，输入的文本正常显示。
密码框的type属性为password，输入的文本以 “ * ” 或其他字符表示。

多行文本框

<textarea name="控制名" cols="行数" rows="列数">
</textarea>

name：项目的控制名
cols：不用滚动条就可以看到的行数
rows：不用滚动条就可以看到的列数，即每行的字符数。

单选按钮

<input type="redio" name="名称" value="值1" checked>选项1
<input type="redio" name="名称" value="值2" checked>选项2
……
<input type="redio" name="名称" value="值n" checked>选项n

value：单选按钮控制值，高速处理程序用户的选择结果。
checked：表示默认选择中。

注意：
选项互斥，每次只能有一个被选中。
同一组单选按钮的控制名应一样，但控制值不同。

复选框

<input type="checkbox" name="名称" value="值" checked>

value：选中时的控制值。当没有选中时，控制值为空。
checked：表示默认选中

选择栏

<select size=x name="控制名" muliple><option value="值1" selected>选项1<option value="值2">选项2
</select>

< select>的属性

size：选择栏中一次可以显示的项目数
size=1：表示下拉式选择栏，项目部可多选。
size>1：表示列表框式选择栏，用multiple属性设置是否允许多选。
checked：表示默认选中
multiple：表示选择栏是否可以允许选择多选

< option>的属性

value：表示这个项目的值，传递给处理程序用
selected：表示这个羡慕默认被选中

项目分组

<select size=x name="控制名" multiple><optgroup label="组名1"><option value="值1">选项1<option value="值1">选项1……</optgroup><optgroup label="组名2"><option value="值2">选项2<option value="值2">选项2……</optgroup>……
</select>

隐藏控件

<input type=hidden name="控件名" value="传递的值">

2.滚动字幕标记

<marquee align="left/center/right/top/middle/buttom” behavior="slide/alternate/scroll”
height=”y或y%” width=”x或x%” direction=”left/right” bgcolor=”颜色值” hspace=”m”
vspace=”n”  scrollamount=”数值”  scrolldelay=”数值” onmouseout=this.start();
onmouseover=this.stop();
loop=”i/-1/infinite”>
滚动字幕
</marquee>

align：设定字幕的对齐方式
behavior：设定浏览器处理字幕的方法
Scroll：文本单项滚动
Slide：文本到达边界停止：
Alternate：滚动文本到达边界后反向滚动
height：字幕的高度，用像素或可视页面的百分比表示。
width：字幕的宽度，用像素或可视页面的百分比表示。
direction：字幕滚动的方向。
bgcolor：字幕的背景颜色。
hspace：字幕左右的空白空间, 用像素表示。
vspace：字幕上下的空白空间, 用像素表示。
scrollamount：每个连续滚动字幕的间隔, 用像素表示。
scrolldelay：两次滚动之间的间隔时间, 用毫秒表示。
loop：字幕的滚动次数。当值为“infinite” 或是“-1”时，字幕无限制地滚动。
ONMOUSEOUT=this.start()：鼠标移出该区域时继续滚动。
ONMOUSEOVER=this.stop()：鼠标移入该区域时停止滚动。

`注意：
标记只适用于IE3以上版本的浏览器表示
虽是一个滚动字幕标记，但允许在其中加入图象。

例如：

<marquee><img src="data:image/img1.gif" width="17" height="16"><img src="data:image/img2.gif" width="17" height="16">…
</marquee>

总结

1.块标签

1.< hn>我是标题标签< /hn>

特点：
1>上下有较大间距
2>独占一行空间
3>有字体属性变换（大小、加粗）

2.< hr>水平线标签

特点：
1>有换行
2>上下有大的间距
3>独占一行空间
3.< p>标签

4.< ul>< /ul> < ol>< /ol>

特点：
1>上下有大的间距
2>独占一行空间
3>列表项目向有缩进并左对齐

5.< table> < /table>
6.< form> < /form>
7.< div> < /div>

2.行标签

< a>< /a>
< img>
< input>
< textarea >< /textarea>
< select>< /select>

3.范围标签

< span>< /span>

4.换行标签

< br>

HTML网页设计文件的组成相关推荐

《Adobe Fireworks CS6中文版经典教程》——1.5使用多个文档
本节书摘来自异步社区<Adobe Fireworks CS6中文版经典教程>一书中的第1 章,第1.5节,作者:[美]Adobe公司更多章节内容可以访问云栖社区"异步社区&qu ...
没有云平台，又不会代码？MicrobiomeAnalyst：一款综合的可视化微生物组学数据分析网页工具
文章目录简介文章简介主要功能模块 16S多样性分析展示数据上传及格式要求数据完整性检查数据过滤数据标准化分析主界面可视化堆叠柱状图交互饼形图 Alpha多样性 Beta多样性核 ...
疯狂ios讲义之网页控件（UIWebView）
通过使用UIWebView控件,可以实现一个内置的浏览器(类似于Safari),而且可以直接将这个浏览器内嵌到应用的任意位置,因此非常方便. UIWebView直接继承了UIView基类,一般不可以与 ...
xd导出标注html,Adobe XD免费交付神器标记狮MarkLion 一键导出离线标注网页
开发是否能高质.高效的将设计稿变为最终产品,很大程度取决于设计师的标注工作是否做的细致.使用Adobe XD进行设计,它自带的功能就能一键生成标注链接,常用的蓝湖.PxCook.摹客.Zeplin也都 ...
设计师必备！超好用的MAC电脑网页设计师软件
网页设计软件有哪些?很多人首先想到的肯定是网页三剑客--Dreamweaver,Fireworks,Flash三个软件,但是我们用MAC OS系统上使用这些软件可能没有在WIN系统上好用,今天小编就介 ...
MicrobiomeAnalyst：一款综合的可视化微生物组学数据分析网页工具
陕西省微生物研究所常帆主要研究方向为土壤微生态,同时负责服务器维护和相关流程搭建. 简介文章简介 MicrobiomeAnalyst,综合微生物组学数据网页工具,2017年发表在Nucleic ...
ai智能时代设计师的出路_适用于网页设计师的人工智能工具
ai智能时代设计师的出路 The advent of artificial intelligence confronts us with a paradigm shift for our socie ...
bootstrap交互式网页设计工具_强烈推荐几种好用的网页设计工具
今天我就要给大家推荐几种好用的网页设计工具,有了这些工具可以帮助设计师更加轻松地完成工作. 网站伴随着网络的快速发展而快速兴起,成为了上网的主要依托,而网页设计也因此成为了众多设计师的宠儿.今天我就要 ...
adobe xd导出标注html,Adobe XD免费交付神器标记狮MarkLion 一键导出离线标注网页
开发是否能高质.高效的将设计稿变为最终产品,很大程度取决于设计师的标注工作是否做的细致.使用Adobe XD进行设计,它自带的功能就能一键生成标注链接,常用的蓝湖.PxCook.摹客.Zeplin也都 ...

HTML网页设计文件的组成