
本文主要对 HTML 进行介绍和归纳。
首先,我们要知道HTML是一种超文本标记语言,不需要编译,直接由浏览器执行。HTML由W3C维护,是通向WEB技术世界的钥匙。
一、HTML文件主体结构标签
1、文档声明 <!doctype html>
2、html标签
3、head标签
4、body标签页面的主体内容包含在里面。属性有background、bgcolor、text、link、vlink、alink
二、head头部标签
1、<title></title>
定义标题
2、<meta/>
向服务器和客户端传达关于文档的隐藏信息。
3、<link href=""></link>
允许当前文档和外部文档建立连接
相关的代码:
- 定义字符集编码
<meta charset="utf-8">
- 刷新或者跳转
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" >
过3秒跳到百度 - 设置关键字
<meta name="keywords" content="">
- 设置页面描述
<meta name="description" content="">
- 定义网站标题图标
<link rel="shortcut icon" href="图片地址.ico">
(各种图标可以到icon网上找)
三、格式排版标签
<br/>
换行<hr/>
分隔线<p>
段落<pre>
原样输出(按照原格式输出)<h1></h1>
标题标签<center></center>
居中
HTML实体:
*  
; 空格* <
;<
* >
;>
* "
; “ 引号* ©
;©
版权* ¥
;¥
* ×
;×
* ÷
;÷
* ®
;®
四、列表标签
<ol>
定义有序列表<ul>
定义无序列表
excemple:<h4>无序列表:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<li>
定义列表项
excemple:<h4>大写字母列表:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<dl>
定义定义列表<dt>
自定义列表项目<dd>
定义自定列表项的描述–>
五、文本标签
em
强调 表现为斜体strong
强调 表现为加粗blockquote
引用
六、链接和锚点
- URL同一资源定位符,万维网的每一个文件都有一个URL
- a标签属性:
href
的值是URL
、target
新网页从哪个窗口打开(_self/_blank)
、title
提示、download
下载(H5新增) - 锚点
<a name="锚点的名字"></a>
、使用超链接#跳到指定位置
七、图像
img标签的属性:
src
alt图片无法显示时显示文字
title
width/heightusemap
usemap用于图片的映射。一个图像被分成几个区域,当用户点击某一个区域时,将被链接到不同的文档中。
<a name="page1"><a/>
<img src="" usemap="mymap">
<map name="mymap" id="mymap">
<area shape="rect" coords="0,10,20,20" href="#page1">
八、表格
- table标签 属性:
border、width/height、cellspacing
(单元格之间的间隙,默认2)、cellpadding
(单元格与单元格内容之间的间隙,默认0)、align、bgcolor、background
- tr标签 属性:
align
(行内文字的水平对齐方式left/center/right
)valign
(行内文字的垂直对齐方式top/middle/bottom
)height
行高度bgcolor
背景颜色 - td标签属性:align、valign、width、height
- th标签 表头
九、表单
form属性有
action、method、target、enctype
1
<form action="http://www.baidu.com/s" method="get">
input
name
type(text
默认文本框、password
密码框、radio
单选框、checkbox
复选框、file
文件上传、submit
提交按钮、reset
重置按钮、button
普通按钮)
valuetype
值不同value
的意义不同
size 控制输入框宽度 适用于text/password
maxlength 最大输入字符个数 适用于text/password
checked 默认选中 适用于radio/checkbox
readonly 只读
disabled 表示不可用
示例:1
<input type="text" name="wd" placeholder="请输入您的用户" size="50" maxlength="5" disabled>
button
type属性submit(默认)
、reset
、button
- select属性
name
、size
option属性
value
、diabled
、selected(默认选项)
1
2
3
4
5
6<select name="xueli">
<option value="boshi">博士</option>
<option value="shuoshi">硕士</option>
<option value="ben">本科</option>
<option value="zhuan">专科</option>
</select>textarea属性
rows
(高度)、cols
(宽度)1
2
3
4
5
6<tr>
<td>自我介绍</td>
<td>
<textarea name="text" cols="30" rows="10"></textarea>
</td>
</tr>label
1
2
3
4
5<tr>
<td><label for="pwd" >密码</label></td>
<!-- 点击密码光标移动到后面的文本框 -->
<td><input type="password" id="pwd" name="pwd"></td>
</tr>