一.html文档格式及标签格式
HTML的全称是超文本标记语言(HyperText Markup Language),通过标记符描述页面显示的文本,图片,声音和影视动画
1.html文档格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html>声明为HTML5文档。
<html>、</html>
是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。<html lang="en">
指定网页的语言<head>、</head>
定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。<body>、</body>
之间的文本是可见的网页主体内容。
注意:对于中文网页需要使用 <meta charset="utf-8">
声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">
。
二.head中的标签
head标签都放在头部分之间。这里面包含了:
<title>
、<meta>
、<link>
,<style>
<title>
:指定整个网页的标题,在浏览器最上方显示。<meta>
:提供有关页面的基本信息<link>
:定义文档与外部资源的关系。<style>
:定义内部样式表与网页的关系
头标签位于文档的头部,不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1.title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。
<title>网页标题</title>
2.Meta标签
元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。
提供的信息是用户不可见的。
meta标签的组成:
meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
常用的meta标签:
1)http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
ps:关于mime文件类型(前端静态资源文件):
2)name属性
<meta name="keywords" content="内容关键字1,关键字2,..." />
<meta name="author" content="网页作者姓名" />
<meta name="description" content="页面描述文字" />
<meta name="others" content="其他搜索内容" />
应用:
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做*SEO*(search engine optimization,搜索引擎优化)。
<meta name="viewport" content="width=device-width, initial-scale=1">
上面这个标签,是让我们网页支持移动端,移动设备优先(了解即可)
3.link标签
link标签定义了文档与外部资源之间的关系,通常用于链接到样式表:
<link type="目标文件类型" rel/rev="stylesheet" href="相对路径/目标文档或资源URL" [media="适用介质列表" charset="目标文件编码"] />
href:该属性指定引用外部文件的URL
type:该属性规定目标文件类型,常用的数值有 text/css , text/javascript , image/gif.
rel/rev: 表示当前源文档与目标文档之间的关系和方向. rel属性指定从源文档到目标文档(前向链接)的关系,而rev属性则指定从目标文档到源文档(逆向链接)的关系.这两种属性可以在<link>或<a>标记中同时使用.属性的取值如下
• alternate:可选版本
• stylesheet:外部样式表
• start:第一个文档
• next:下一个文档
• prev:前一个文档
• contents:文档目录
• index:文档索引
• copyright:版权信息文档
• chapter:文档的章
• section:文档的节
• subsection:文档子段
• appendix:文档附录
• help:帮助文档
• bookmark:相关文档
• glossary:文档字词的术语表或解释
• external: 外部文档
例如,
<link rel="stylesheet" type="text/css" href="c1-2.css" />
4.style标签
style标签在 HTML 文档中添加样式:
<head>
<style type="text/css">
body { padding: 0px;">yellow}
p {color:blue}
</style>
</head>
三.body中的标签
b 标签: 加粗
i : 斜体
u: 下划线
s: 删除线
p: 段落
h1~h6: 标题标签
br: 换行
hr:横线
div: 块级标签
span: 行内标签
img:图片
a:超链接
ul:无序列表
ol:有序列表
li:列表内容
table:表格
thead:表格头部
tbody:表格身体
tfoot:表格底部
tr :行
td:单元格
form 表单
<h1></h1> 标题:标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题。
<p></p> 段落 : align='属性' 属性有left ,center,right
<select>多选 里面的每一项用<option>来表示
<label>通过for属性,将lable和input标签绑定,为 input 元素定义标注(标记)
<b></b>或<strong></strong> 粗体标签
<i></i> 或<em> 斜体字标签
<div></div> 盒子标签 align='属性' 设置块儿的位置,可以换行
<span></span> 行内标签 里面只能放文字,图片,表单
<a href='网页链接'></a>
<div id='top1'></div> <a href='#top1'></a> 锚链接
<img href='路径' /> 图片标签
<ol> <ol> 有序列表
<li></li> 列表项 <li> 必须在列表内使用
<ul></ul> 无序列表
<table>表格标签 border:边框(px) width:宽 height:高
<thead>表头
<tr> 每一行
<td> 单元格
</td>
</tr>
</thead>
</table>
cellpadding:单元格到边的距离. cellspacing:单元格和单元格之间的距离(外边距)
<th> 加粗的单元格 相当于<td> + <b>
<form method='提交方式' action='数据发送的url'></form>表单
<input type='属性'>输入标签
[
text:默认
password:密码框
radio:单选按钮:name相同的作为一组,组内互斥,只能选其中一个
checkbox 多选按钮,name相同的为一组,可多选
button 普通按钮
submit 提交按钮,点击会将表单数据按照method请求方式 提交在action的url中
reset 重置当前表单内的所有内容
image 图片按钮,
file 上传文件到服务器,要上传文件,form表单的method必须是post,并且在form标签中设置属性enctype="multipart/form-data"
value=”内容“:文本框里的默认内容(已经被填好的)
size=“50”:表示文本框可以显示50个字符。
readonly 输入框只读
disabled 不可用
checked 选择框默认选中
]
<textarea> 文本标签
[
value:提交给服务器的值。
rows="4":指定文本区域的行数。
cols="20":指定文本区域的列数。
readonly:只读
]
常用标签