HTML：2, HTML常用标签

1.1、HTML结构

<html>
<head>
//head部分常用来写css样式
</head>

<body>
//body部分一般写主体部分
</body>
</html>

1.2、文本标签
文本修饰
font：修饰文字内容，属性：color、size、face；
b：字体加粗；
s：删除线；
i：斜体；
sub：下标；
sup：上标；
strong：强调；
段落
h(1-6)：标题标签；
p：段落；
hr：分割线，属性：size（高度）、width（宽度）、color、align；
center：内容居中

1.3、图片标签
img：图片，属性：src(路径)、width、height、border(边框)、title(鼠标悬停提示)、alt(图片描述)；

1.4、超链接
a：超链接标签，属性：href(网址)、target(打开方式)、title(鼠标悬停提示)、name(定位锚点)，功能：链接网络资源、本地定位；

1.5、列表
ul-li：无序列表，属性：type（符号的样式）；
ol-li：有序列表，属性：type、start、value；
dl-dt-dd：自定义列表

1.6、表格
table：表格根标签，属性：border(边框)、width、height、align；
tr：一行；
td：一列，属性：rowspan(合并行)、colspan(合并列)；
th：标题；

1.7、刷新/跳转

<meta http-equiv="refresh"content="5;url=http://www.baidu.com" />

1.8、滚动

<marquee behavior=SLIDE  >
This is a slide effect
</marquee>

1.9、表单
文本框：

<input type="text" name="userName" />

密码框：

<input type="password" />

单选按钮：

 <input type="radio" name="sex" value="男" checked="checked"/>男

<input type="radio" name="sex" value="女" />女

复选框：

<input type="checkbox" name="hobby" value="敲代码"/> 敲代码
<input type="checkbox" name="hobby" checked="checked"/>编程
<input type="checkbox" name="hobby" checked="checked"/>Java

文本域：

<textarea rows="6" cols="30"></textarea>

下拉框：

<select>
		<option>高中</option>
		<option>大专</option>
		<option>本科</option>
		<option selected="selected">研究生</option>
</select>

文件选择器：

<input type="file" />

日期选择器：

<input type="date" />
<input type="datetime-local" />

颜色选择器：

<input type="color" />

数字输入框：

<input type="number" />

带数据的输入框：

<input list="school" />
<datalist id="school">
		<option value="清华大学"></option>
		<option value="北京大学"></option>
		<option value="复旦大学"></option>
		<option value="南京大学"></option>
</datalist>

提交按钮：

<input type="submit" value="注册" />

重置按钮：

<input type="reset" value="重置" />

1.10、头标签
title：标题；
meta：配置信息，属性：name；
link：引入外部文件；
在title里添加图标：

<link rel="icon" type="image/x-icon" href="img/logo.ico" />

script：JavaScript脚本程序；
style：css代码；
base：对超链接的全局设置；

1.11、框架
iframe：内联框架

<iframe src=" " width="100%" height="50px" frameborder="0">
</iframe>
frameset-frame：使用该框架结构时，要删除body标签；
<frameset rows="100,*">
			<frame name="top" src="index.html" />
			<frameset cols="50,*">
				<frame name="left" src="lianjie.html" />
				<frame name="right" src="gsjj.html" />
			</frameset>
		</frameset>

1.12、其他标签
pre：原文输出；
code：在页面中添加代码；
video：添加视频；
embed：添加音频；

2.13、自动跳转

<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />

HTML：2, HTML常用标签

猜你喜欢