一.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文件类型（前端静态资源文件）：
连接：http://www.w3school.com.cn/media/media_mimeref.asp
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) 宽 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：只读 ]