First, what is HTML

hyper text markup language that is HTML

Hypertext: refers to the inside pages can contain images, links, and even music, programs and other non-text elements.

Markup Language: mark (label) constitute language.

== HTML page document, parsed by the browser to display

Static pages: static resources such as xxx.html

Dynamic pages: html code language developed by some dynamically generated according to a user request

html document tree structure diagram:

Second, the label

1. What is the label

Is composed of a word wrap angle brackets, for example: <html> * all tags can not start with a number of words.
Tags are not case-sensitive. <Html> and <HTML>. Lowercase recommended.
Label is divided into two parts: the start tag and end tag <a> </a> section between the two labels we called the tag body.
Some tags use a relatively simple function of this label to label and the label is called self-closing example:... <br/> <hr /> <input /> <img />
Tags can be nested, but not cross nested. <a> <b> </a> </ b>

2. Label the property

Usually in the form of key-value pairs. For example name = "alex"
Property can only appear at the beginning or self-closing tags and labels.
All lowercase attribute name. * Attribute values must be wrapped in double or single quotes e.g. name = "alex"
If the property value and attribute names exactly the same. Write directly attribute name. For example readonly

3. <! DOCTYPE html> tag

Due to historical reasons, each browser there are differences in the rendering of the page, or even different versions of the same browser, the rendering of the page is different. In the
previous W3C standards promulgated, there is no unified standard browser on page rendering, resulting in a difference (Quirks mode or called Compatibility
Mode); due to the introduction of W3C standards, the browser rendering the page with a unified standard (CSScompat or called Strict mode is also called the Standars
the MODE), which is both the simplest difference.
After the introduction of W3C standards, browsers are beginning to adopt the new standards, but there is a problem is how to ensure that the old can continue to browse the web, before the standard came out,
many pages are written according to the old rendering method, if the criteria used to rendering, will cause the page to be displayed correctly. In order to maintain compatibility browser rendering, in order to make
the front page can be viewed properly browser retains the old rendering methods (such as: Microsoft IE). In this way the browser rendering arises Quircks mode
and Standars mode, two kinds of rendering methods co-exist on a browser.

window.top.document.compatMode: 
// BackCompat: quirks mode, the browser uses its own quirks mode rendering parsing the page. 
// CSS1Compat: standard mode, the browser uses the W3C standard analytical rendering the page.

If your page is not declared DOCTYPE, then compatMode default is BackCompat, which is the beginning of the devil - the browser in its own way to resolve rendering the page, then, it will show different styles in different browsers.

If you add a page <! DOCTYPE html> So, it is equivalent to the standard mode is turned on, the browser you have to honestly resolve to render the page according to the W3C standard, so that your pages in all browsers Lane is a way to display the.

This is the <! DOCTYPE html> role.

4. <head>标签

<meta>

　　meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　1: name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="这是一个网站"/>

　　2: http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

其他标签

<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>

5. <body>标签

块级标签和内联标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>

　　块级标签：<p><h1><table><ol><ul><form><div>

　　内联标签：<a><input><img><sub><sup><textarea><span>

　　block（块）元素的特点

- 总是在新行上开始；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它可以容纳内联元素和其他块元素

　　inline元素的特点

- 和其他元素都在一行上；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素

　　特殊字符

　　　　< &gt；&quot；©®

图形标签<img>

src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="img/abc.jpg " alt="123" title="rua" width="300" height="300"/>

超链接标签<a>

href:要连接的资源路径 格式如下: href="http://www.baidu.com" 
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #id.（锚）
<a href="http://www.xiaohuar.com/" target="_blank">

列表标签

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>
<dl>
	<dt>第一章</dt>
	<dd>第一节</dd>
	<dd>第二节</dd>
	<dt>第二章</dt>
	<dd>第一节</dd>
	<dd>第二节</dd>
</dl>

表格标签<table>

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
         <th>: table head cell
         <td>: table data cell
rowspan:  单元格竖跨多少行
colspan:  单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.

<table bgcolor="beige" border="1px" cellpadding="5px" cellspacing="1px">
	<tr>
		<th rowspan="2">111</th>
		<th>222</th>
		<th>333</th>
	</tr>
	<tr>
		<td>222</td>
		<td>333</td>
	</tr>
	<tr>
		<td>111</td>
		<td colspan="2" align="center">222</td>
	</tr>
</table>

表单标签<form>

<input> 标签的属性和对应值

 type:     text 文本输入框
             password 密码输入框
             radio 单选框
             checkbox 多选框  
             submit 提交按钮            
             button 按钮(需要配合js使用.) button和submit的区别？
             file 提交文件：form表单需要加上属性enctype="multipart/form-data"   

 name:    表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的

 value:   表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

?12345type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值　　

 checked:  radio 和 checkbox 默认被选中

 readonly: 只读. text 和 password

 disabled: 对所用input都好使.

<select> 下拉选标签属性

name:表单提交项的键.
size：选项个数
multiple：multiple 
    <option> 下拉选中的每一项 属性：
        value:表单提交项的值.   selected: selected下拉选默认被选中
    <optgroup>为每一项加上分组

<textarea> 文本域

name:    表单提交项的键.
cols:    文本域默认有多少列
rows:    文本域默认有多少行

<label>

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

<form action="192.168.50.85:8080">
	<div>姓名<input type="text" name="user" /></div>
	<div>密码<input type="password" name="passwd" /></div>
	<div>性别   男<input type="radio" name="gender" value="man"/>  女<input type="radio" name="gender" value="woman"/></div>
	<div>爱好   电影<input type="checkbox" name="hobby" value="movie"/>  音乐<input type="checkbox" name="hobby" value="music"/></div>
	<div><input type="submit" value="提交"/></div>
	<div><input type="button" value="提交"/></div>
	<div>简介<textarea name="text" id="1" cols="30" rows="3">请输入简介</textarea></div>
	<div>省<select name="province" id="2" >
		<option value="henan">河南</option>
		<option value="hubei">湖北</option>
		<option value="hebei">河北</option>
	</select>
	</div>
</form>

Front-end basis -HTML