什么是HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
html结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
DOCTYPE
<!DOCTYPE html>
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码（告诉浏览器是什么编码）
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新和跳转
<meta http-equiv=“Refresh” Content=“30″> <meta http-equiv="Refresh" Content=5;Url="http://www.autohome.com.cn" />
- 关键词
<meta name=”keywords” content=”博客园，IT技术，老男孩” >
- 描述
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
Title
网页头部信息
<title>58同城一个神奇的网站!!!</title>
Link
1.css <link rel="stylesheet" type="text/css" href="css/common.css" > #放置style样式的文件 2.icon <link rel="shortcut icon" href="image/favicon.ico"> #放置favicon图片的地方
Style
在页面中写样式
例如
<head>
< style type=”text/css” >
.bb{
background-color: red;
}
< /style>
</head>
或者
<body>
<div style=”background-color:red”>123</div>
<div style=”background-color:red”>123</div>
</dody>
或者：
common.css #将样式保存在common.css文件中.然后用class引用即可.
.bb{
background-color: red;
}
.aa{
background-color: red;
}
<div class=”.bb”>123</div>
style样式可以写在单个css文件中，也可以写在<head> <head/>中或在common.css文件中单独配置！
Script
- 引进文件
< script type=”text/javascript” src=”http://www.googletagservices.com/tag/js/gpt.js”> </script >
- 写js代码
< script type=”text/javascript” > … </script >
上述这些一般都是在head中设置。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
标签一般分为两种：块级标签 和 行内标签
HTML 链接
HTML 链接是通过标签 <a> 来定义的.
<a href="http://www.autohome.com.cn">点击跳转</a> <a target="_blank" href="http://www.9888.cn">点击跳转</a> target属性，_black表示在新的页面打开
锚：点击标签菜单后页面显示对应的内容
<body>
<!--锚：点击标签菜单后页面显示对应的内容-->
<a href="#a2">书签</a> <!--表示跳转的位置为a2,#位特殊字符-->
<div id="a1" style="height: 700px;"> <!--id为标签唯一的值-->
1内容
</div>
<div id="a2" style="height: 500px;">
2内容
</div>
</body>
HTML 段落
HTML 段落是通过标签 <p> 来定义的.
p表示段落，默认段落之间是有间隔的！
br 是换行
<!DOCTYPE html> <html> <body> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一<br>个段落。</p>
</body> </html>
HTML 标题
HTML 标题（Heading）是通过<h1> – <h6> 标签来定义的.
<!DOCTYPE html> <html> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body> </html>
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
<html> <body> <img src="/images/w3cschool.png" width="300" height="120" /> </body> </html>
HTML <select> 标签
定义和用法
select 元素可创建单选或多选菜单。
<select&> 元素中的 提示：select 元素是一种表单控件，可用于在表单中接受用户输入。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| 标签的 disabled 属性” href=”http://www.w3school.com.cn/tags/att_select_disabled.asp”>disabled | disabled | 规定禁用该下拉列表。 |
| 标签的 multiple 属性” href=”http://www.w3school.com.cn/tags/att_select_multiple.asp”>multiple | multiple | 规定可选择多个选项。 |
| 标签的 size 属性” href=”http://www.w3school.com.cn/tags/att_select_size.asp”>size | number | 规定下拉列表中可见选项的数目。 |
亲自试一试 – 更多实例
标准实例
<select>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4" selected="selected">西安</option> <!--selected="selected"表示默认西安是被选中的-->
<!--value定义什么值提交到后台获取的就是什么值，需要结合form表单一块使用-->
</select>
在浏览器中显示的个数实例：
<select size="2"> <!--size是在浏览器中显示的个数 --> <option>北京</option> <option>上海</option> <option>天津</option> <option>西安</option> </select>
在浏览器中可以多选：
<select size="2" multiple="multiple"> <!--multiple="multiple"表示可以多选 --> <option>北京</option> <option>上海</option> <option>天津</option> <option>西安</option> </select>
在浏览器中显示成省-市的类型：
<select> <optgroup label="陕西省"> <option>西安</option> <option>咸阳</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遥</option> </optgroup> </select>
select <option> 标签
定义和用法
option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
提示和注释：
注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。
提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| 标签的 label 属性” href=”http://www.w3school.com.cn/tags/att_option_label.asp”>label | text | 定义当使用 <optgroup> 时所使用的标注。 |
| 标签的 value 属性” href=”http://www.w3school.com.cn/tags/att_option_value.asp”>value | text | 定义送往服务器的选项值。 |
HTML <input> 系列标签
通过对input标签设置不同的属性，显示不同的效果，input属于自闭合标签
实例
一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：
<html> <body> <form> 用户： <input type="text"> <br /> 密码： <input type="password"> <br /> <input type="submit"/> </form> </body> </html>
定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
