HTML含义:
HTML是的英文全称是Text Mark-up Language（超文本标记语言）的缩写，它也是一种制作万维网页面的标准语言，相当于定义统一的一套规则，这样可以让浏览器根据标记语言的规则进行解释。
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一个中标准，它通过标记符号来标记要显示网页中的各个部分。网页文件本身是一种文本文件，通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如:文件如何处理，画面如何安排，图片如何显示等).
网页的组成:
一个网页一般由两部分组成:
- HTML(Hypertext Markup Language)
- CSS(Cascade Style Sheets)
HTML负责描述网页的结构和内容（如标题、导航栏等）
<head>和</head>之间的内容，是元信息和网站的标题，元信息一般不显示出来，但是记录了了这个HTML文件的很多描述性质的信息
<body>和</body>之间的内容，是浏览器展示出来的，用户看到的页面效果。也就是说这里是网页的支柱或者说主体，即body的身体之意
<html>和</html>说明这个文件是一个网页。告诉浏览器这个网页的开始和结束。包含了之后的连个元素<head>和</head>|<body>和</body>
HTML文档
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
代码解释:
DOCTYPE:告诉浏览器使用什么样的html或者xhtml规范来解析html文档
DOCTYPE的模式:
BackCompat：标准兼容模式未开启（或叫怪异模式【Quirks mode】、混杂模式）
CSS1Comat:标准兼容模式已开启（或叫做严格模式[Standards mode/Strict mode]）
head部分
1、meta(metadata information)
提供有关页面的元信息，例如:页面编码、刷新、跳转、针对搜索引擎和更新频率的描述以及关键词
①、页面编码
<meta charset="UTF-8"> #指定编码类型为UTF-8
②、刷新和跳转
<meta http-equiv="refresh" content="5"/> #设置每隔5秒刷新页面一次
<meta http-equiv="refresh" content="1:Url=http://www.baidu.com"/> #指定1秒后跳转到百度页面
③、关键字
关键字作用其实就是用来让爬虫之类的收录程序，当他们在爬我们网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度，如果他们收录之后，然后我们在搜索关键字的时候就能找到咱们的网站。
<meta name="keywords" content="python 21天学会Python html语言精通">
④、描述
例如一个51cto里就有一个描述
<meta name="description" content="51cto技术博客 领先的IT技术博客">
⑤、X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息，如下所示:
HTML文件各标签举例说明如下:
<!DOCTYPE html><!--定义通用规则标准--> <html lang="en"> <head> <meta charset="UTF-8"> <!--定义字符编码--> <meta http-equiv="refresh" Content="5"><!--每5秒钟刷新一次请求你页面--> <meta http-equiv="refresh" Content="5" Url=http://www.baidu.com><!--5秒钟后刷新后跳转到百度--> <title>Python之路</title> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <h1 style="background-color:red;">addafagag</h1><!--不管内容多少一直占用整行的标签为块级标签 --> <a style="background-color:green;">"汽车之家"</a><!--根据内容自己有多少内容占多少空间的标签叫做内嵌标签 --> <p>段落标签①</p><!--段落标签!--> <br/><!--换行标签--> <p>段落标签②</p><!--换行标签--> <br/><!--换行标签--> <a>Python之路</a><!--超链接标签--> <br/> <a href="www.python.org">python之路</a><!--超链接实现跳转，在原来的页面打开--> <br/><!--换行标签--> <a target="_blank" href="www.python.org">python之路</a><!--超链接实现跳转，在新页面打开,target的属性为_blank表示在新的页面打开--> <br/> <a href="#要跳转的位置参数">python之路</a><!--锚的定位,注意要有#开头--> <br/> <a href="#a1">python之路</a><!--锚的定位--> <br/> <div id="a1" style="height:50px;"> id为a1的内容所在位置 </div> <div id="a2" style="height: 80px;"> id为a2的内容所在位置 </div> <h1>h1标签作用是将标签加大加粗</h1><!--H标签的作用仅仅是将标签字体进行大小粗细设置--> <h2>h2标签作用是将标签加大加粗</h2> <h3>h3标签作用是将标签加大加粗</h3> <h4>h4标签作用是将标签加大加粗</h4> <select> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">广州</option> </select> <!--单选标签-select--> <select size=2> <option value="1">上海</option> <option value="2">北京</option> <option value="2" selected="selected">广州</option> </select> <!--多显标签，最多显示2个--> <select multiple="multiple" size="4"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> <option value="5" selected="selected">武汉</option> </select> <!--多选标签，在显示4个的基础上可以进行多选--> <select> <optgroup label="湖北省"> <option>武汉市</option> <option>襄阳市</option> <option>宜昌市</option> </optgroup> <optgroup label="广东省"> <option>广州市</option> <option>深圳市</option> <option>珠海市</option> </optgroup> </select> <!--分组标签，该标签不能进行选择，只是对元素进行了分组--> <!--复选标签--> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <!--input标签系的复选框，类型为checkbox 默认是没有选择，如果默认要选择则需要添加如下属性字段checked="checked" --> <input type="checkbox" checked="checked" /> <!-- radio标签，单选标签，默认请三个选项都可以选择 --> <input type="radio"/> <input type="radio"/> <input type="radio"/> <!-- radio标签实现单选功能，可以在标签内添加字段name="gender"来实现 --> <hr/> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <!--标准的单行文本输入框，类型为text--> <input type="text"/> <!--通过value属性对文本输入框设置默认值 --> <input type="text" value="请输入内容"> <!--标准的密码输入框,类型为password --> <input type="password"/> <!--标准的email类型输入框,类型为email,输入类容必须满足邮件格式，一般用于高版本浏览器IE或者chrome Firefox--> <input type="email"/> <!-- 标准的按钮标签类型为button或者为submit,当类型为submit的value值默认为提交--> <input type="button"/> <input type="submit"/> <!--值可以通过value属性来设置,这里设置提交 --> <input type="button" value="提交"/> <input type="submit" /> <!--标准的选择上传文件标签其类型为file --> <input type="file"/> <!--多行输入，可以通过css来对输入框的长宽进行自定义设置 ---> <textarea>Python之路Python之路Python之路Python之路</textarea> <!--通过css来设置输入框的长宽 --> <textarea style="height: 40px;width: 10px">Python之路Python之路Python之路Python之路</textarea> <!--form表单 ---> <form> <p> 用户名:<input type="text"> </p> <p> 密 码:<input tpye="password"> </p> </form> <hr/> <form action="提交到后台的地址"> <p> 用户名:<input type="text"> </p> <p> 密 码:<input tpye="password"> </p> <input type="submit" value="提交"> <input type="button" value="按钮"> </form> <!--submit和button的区别是，如果submit在form标签内，就会提交整个form标签到后台--> <!--Label标签作用，增加用户体验 --> <div> <h1>Label标签</h1> 姓名:<input type="text"/> 婚否:<input type="checkbox"/> </div> <hr/> <!--在使用label标签后，如果要在输入框中输入内容，只需要鼠标点击旁边的"姓名"或者"婚否"就可以自动将鼠标移至输入框内而不需要特意点击输入框进行输入 --> <div> <label for="name_1"> 姓名: <input id="name_1" type="text"/> </label> </div> <div> <label for="name_2"> 婚否: <input id="name_2" type="checkbox"/> </label> </div> <!--列表序号，ul是黑点，ol是数字序号--> <ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ul> <ol> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li> </ol> <!--分组dl --> <dl> <dt>湖北省</dt><!--dt表示标题 --> <dd>武汉市</dd><!--dd表示内容 --> <dd>荆州市</dd> <dt>湖南省</dt> <dd>长沙市</dd> <dd>岳阳市</dd> </dl> <!--table 常见的表格标签 tr表示行，td表示列--> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <!--table表格添加边框可以通过属性border来设置--> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <!-- table 行和列合并用属性"colspan"和"rowspan"来设置 --> <table border="1"> <tr> <td colspan="2">1</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <!--table标签的另外一种表示结构 --> <table border="2"> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> <th>标题4</th> </tr> </thead> <tbody> <tr> <td colspan="2">1</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> <br> <hr/> <!-- fieldset标签 --> <fieldset> <legend>登录</legend> <p>用户名:</p> <p>密码:</p> </fieldset> </body> </html>
HTML常用标签分组:
