1.标题标签
从h1~h6逐渐变小。
特点:加粗且加黑显示,独占一行,每行与其他行之间有间距。
属性:align表示取值left(默认)/right/center。
2.水平线标签
属性:color表示颜色。
size表示粗细。
width表示长度。
3.段落标签
特点:有段前、段后间距,独占一行。
4.换行
换行操作的格式为
document.write(1 + "<br / >
document.write(2);
5.字体标签
必须结合属性使用。
格式:<font属性=值>字体内容
属性:color表示字体的颜色,可以使用英文单词或者十六进制。
size表示字体大小。
face表示设置字体。
6.注释
格式:<!–注释–>。一般的IDE快捷键为Ctrl+/。
7.加粗
加粗操作的格式为
var strTime= " "+ strHour+ “:”+ strMinutes+ “:”+ strSeconds+ "
";
8.倾斜
倾斜操作的格式为
- webkit- transform: rotate( - 20deg);
- moz- transform: rotate( - 20deg);
transform: rotate(- 20deg);
3.1.4 图片标签
HTML页面可以引入一张图片,当有此需求时,需要使用img标
签。
标签的属性有以下几种。
(1)src(访问的图片的路径)。
路径分为相对路径和绝对路径。
相对路径:指定相对于当前文件的资源文件位置。
当前目录:直接写文件名称(文件名称包括后缀名)。
上一级目录:…/文件名称(若返回多级,则加多个“…/”)。
下一级目标:目录名称/文件名称。
绝对路径:指定从盘符到资源文件的完整路径。绝对路径和相对路
径的区别就是绝对路径的最左边有一个反斜杠“/”。
(2)width:设置图片的宽度。
(3)height:设置图片的高度。
一般情况下需要设置图片的width和height,防止布局杂乱。
(4)alt:当图片无法正常显示时给出提示信息,它的显示效果与
浏览器有关。
(5)title:鼠标指针移动到图片上时显示的提示信息。
3.1.5 超链接标签
在HTML网页中,经常会有这样的需求:用户单击某一段文字,就
产生了页面跳转。这样的功能一般都是用超链接实现的,
这是一个关于a标签
首先介绍a标签的href属性,可以给a标签的href属性设置一个具体的
网页地址或者某个资源的地址(包括zip压缩文件、图片、音乐MP3、电
影MP4)。如果设置href=“www.baidu.com”,那么当用户单击这个超链
接时,页面就会跳转到百度网站。如果链接的地址是一个压缩包,那么
当用户单击这个超链接时,浏览器就会默认下载对应的资源。如果链接
的地址是一个音乐文件或者电影文件,浏览器则开始播放音乐或者电
影。因此,a标签的用处是非常大的。还需要注意的是,当a标签的作用
是为了让用户在单击后跳转页面,那么究竟是从当前页面开始跳转,还
是重新命令浏览器打开一个新的页面,然后在新的页面上跳转呢?可以
给a标签设置一个target属性。如果target="_blank",则表示命令浏览器打
开一个新的页面,在新的页面上跳转。如果不写target属性,则默认是
从当前页面进行跳转。
3.1.6 table标签
HTML的table标签可以实现类似于Excel绘制单元格的功能。例如:
1.表格标签的格式
表格标签的格式如下所示
2.表格的属性
(1)table标签的属性如下。
border表示表格边框。
width表示表格宽度。
height表示表格高度。
align表示水平方向的对齐方式。
bgcolor表示背景色。
cellspacing表示单元格与单元格之间的间距。
cellpadding表示单元格与内容的填充
(2)tr标签的属性如下。
bgcolor表示背景色。
align表示本行文本对齐方式。
height表示行高。
(3)td标签上的属性与tr类似。
3.单元格合并技术
在td标签上使用下列属性即可实现单元格合并。
跨列:colspan=“值”。
跨行:rowspan=“值”。
利用这些table标签,以及行合并、列合并的技巧,可以实现各种各
样的网页布局,其实,在早期的网页开发中,table标签除了用来显示一
些列表数据外,还可以用来布局。
3.1.7 表单元素
相信你在浏览网页的时候,经常会看到一些表单。比如,当你注册
某一个网站的会员时,就需要填写一个表单,该表单里面有很多输入
框,需要你在对应的输入框内填写自己的用户名、密码、邮箱等信息,
还有一些表单元素是单选按钮、下拉框、复选框。正是由于表单的存
在,使得网页和用户之间产生了一些交互元素。
关于form表单标签的介绍如下。
描述:表单标签用来在HTML页面中创建一个表单,表单标
签在浏览器上没有任何显示。如果数据需要提交到服务器,则负责搜集
数据的标签必须存放在表单标签中。
属性:
(1)action属性:请求路径,确定表单提交到服务器的地址(路
径)。
(2)method属性:请求方式,常用取值为GET、POST。
① GET:默认值。
特点:提交的数据追加在请求路径上。例如:/1.html?
username=jack&password=1234,数据格式为key/value对,追加是使
用“?”连接的,之后每一对数据之间都使用“&”连接。
因为请求路径的长度有限,所以GET方式提交的请求数据有限定。
因为要在地址栏中显示数据,所以数据的安全性不高。
② POST。
特点:提交的数据不在请求路径上追加(即不显示在地址栏中),
数据的安全性更好,提交的数据无大小限定。
下面介绍可以在form表单中出现的HTML元素(标签)
1.输入域标签input
标签一般用于获取用户输入信息,如果type属性值不同,则
标签的展现形式和搜集的信息也不同,它是在页面中常用的标签。
(1)type属性。
text:单行文本框,用户可以在其中输入文本,默认宽度为20个字
符。
password:密码框,在该控件中输入的内容不会明文显示,以黑圆
点显示。
radio:单选按钮,表示一组互斥选项按钮中的一个。当一个按钮被
选中时,该组中之前选中的按钮会变为非选中状态。
submit:“提交”按钮,该按钮会把表单数据发送到服务器。一般不
写name属性,否则会将“提交”两个字提交到服务器。
因为不同项目注册所需要的字段不同,需要完成的案例中没有覆盖
所有表单元素,所以以下标签的使用也需要掌握。
checkbox:复选框,用法与radio基本一致,在一组复选框中可以选
择任意多个选项。
file:文件上传组件,提供“浏览”按钮,可以选择需要上传的文
件。
hidden:隐藏域,数据会发送给服务器,页面不进行显示。
reset:“重置”按钮,将表单恢复到初始状态。
image:图形“提交”按钮,通过src给按钮设置图片。
button:普通按钮,通常结合JavaScript实现动作效果。
(2)name属性:元素名。如果需要将表单数据提交到服务器,则
必须提供name属性值,服务器将通过该属性值获取提交的数据。
(3)value属性:设置input标签的默认值。submit按钮和reset按钮
的value用来为设置按钮显示文字。
(4)size:元素的大小。
(5)checked:设置单选按钮或者复选框被选中。
(6)readonly:设置元素只读,不能输入。
(7)disabled:是否可用;添加该属性后,元素不可用。
(8)maxlength:允许输入的最大长度。
2.下拉框标签
作用:展现下拉列表,可以进行单选或者多选;需要结合子标签
指定每一个列表项。其中,标签的属性如下。 (1)name:用于确定将数据发送给服务器时的参数名称。 (2)multiple:若不写该属性,则默认是单选;若取值为multiple, 则表示多选。 (3)size:多选时,可见选项的数目。 (4)子标签:下拉列表中的每一个选项,属性如下。 ① selected:勾选当前列表项。 ② value:发送给服务器端的选项值。 ### 3.文本域标签 多行文本框,可以输入任意多的文本信息,属性如下。 (1)cols:文本域的列数。 (2)rows:文本域的行数。 接下来用form表单和table标签结合的方式完成一个简单的登录页面。