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文档

代码如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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文件各标签举例说明如下:


<!DOCTYPEhtml><!--定义通用规则标准--><htmllang="en"><head><metacharset="UTF-8"><!--定义字符编码--><metahttp-equiv="refresh"Content="5"><!--每5秒钟刷新一次请求你页面--><metahttp-equiv="refresh"Content="5"Url=http://www.baidu.com><!--5秒钟后刷新后跳转到百度--><title>Python之路</title><linkrel="shortcuticon"href="favicon.ico"></head><body><h2>addafagag</h2><!--不管内容多少一直占用整行的标签为块级标签--><a>"汽车之家"</a><!--根据内容自己有多少内容占多少空间的标签叫做内嵌标签--><p>段落标签①</p><!--段落标签!--><br/><!--换行标签--><p>段落标签②</p><!--换行标签--><br/><!--换行标签--><a>Python之路</a><!--超链接标签--><br/><ahref="www.python.org">python之路</a><!--超链接实现跳转，在原来的页面打开--><br/><!--换行标签--><atarget="_blank"href="www.python.org">python之路</a><!--超链接实现跳转，在新页面打开,target的属性为_blank表示在新的页面打开--><br/><ahref="#要跳转的位置参数">python之路</a><!--锚的定位,注意要有#开头--><br/><ahref="#a1">python之路</a><!--锚的定位--><br/><divid="a1">id为a1的内容所在位置</div><divid="a2">id为a2的内容所在位置</div><h2>h2标签作用是将标签加大加粗</h2><!--H标签的作用仅仅是将标签字体进行大小粗细设置--><h3>h3标签作用是将标签加大加粗</h3><h4>h4标签作用是将标签加大加粗</h4><h5>h5标签作用是将标签加大加粗</h5><select><optionvalue="1">上海</option><optionvalue="2">北京</option><optionvalue="3"selected="selected">广州</option></select><!--单选标签-select--><selectsize=2><optionvalue="1">上海</option><optionvalue="2">北京</option><optionvalue="2"selected="selected">广州</option></select><!--多显标签，最多显示2个--><selectmultiple="multiple"size="4"><optionvalue="1">北京</option><optionvalue="2">上海</option><optionvalue="3">广州</option><optionvalue="4">深圳</option><optionvalue="5"selected="selected">武汉</option></select><!--多选标签，在显示4个的基础上可以进行多选--><select><optgrouplabel="湖北省"><option>武汉市</option><option>襄阳市</option><option>宜昌市</option></optgroup><optgrouplabel="广东省"><option>广州市</option><option>深圳市</option><option>珠海市</option></optgroup></select><!--分组标签，该标签不能进行选择，只是对元素进行了分组--><!--复选标签--><inputtype="checkbox"/><inputtype="checkbox"/><inputtype="checkbox"/><!--input标签系的复选框，类型为checkbox默认是没有选择，如果默认要选择则需要添加如下属性字段checked="checked"--><inputtype="checkbox"checked="checked"/><!--radio标签，单选标签，默认请三个选项都可以选择--><inputtype="radio"/><inputtype="radio"/><inputtype="radio"/><!--radio标签实现单选功能，可以在标签内添加字段name="gender"来实现--><hr/><inputtype="radio"name="gender"/><inputtype="radio"name="gender"/><inputtype="radio"name="gender"/><!--标准的单行文本输入框，类型为text--><inputtype="text"/><!--通过value属性对文本输入框设置默认值--><inputtype="text"value="请输入内容"><!--标准的密码输入框,类型为password--><inputtype="password"/><!--标准的email类型输入框,类型为email,输入类容必须满足邮件格式，一般用于高版本浏览器IE或者chromeFirefox--><inputtype="email"/><!--标准的按钮标签类型为button或者为submit,当类型为submit的value值默认为提交--><inputtype="button"/><inputtype="submit"/><!--值可以通过value属性来设置,这里设置提交--><inputtype="button"value="提交"/><inputtype="submit"/><!--标准的选择上传文件标签其类型为file--><inputtype="file"/><!--多行输入，可以通过css来对输入框的长宽进行自定义设置---><textarea>Python之路Python之路Python之路Python之路</textarea><!--通过css来设置输入框的长宽--><textarea>Python之路Python之路Python之路Python之路</textarea><!--form表单---><form><p>用户名:<inputtype="text"></p><p>密码:<inputtpye="password"></p></form><hr/><formaction="提交到后台的地址"><p>用户名:<inputtype="text"></p><p>密码:<inputtpye="password"></p><inputtype="submit"value="提交"><inputtype="button"value="按钮"></form><!--submit和button的区别是，如果submit在form标签内，就会提交整个form标签到后台--><!--Label标签作用，增加用户体验--><div><h2>Label标签</h2>姓名:<inputtype="text"/>婚否:<inputtype="checkbox"/></div><hr/><!--在使用label标签后，如果要在输入框中输入内容，只需要鼠标点击旁边的"姓名"或者"婚否"就可以自动将鼠标移至输入框内而不需要特意点击输入框进行输入--><div><labelfor="name_1">姓名:<inputid="name_1"type="text"/></label></div><div><labelfor="name_2">婚否:<inputid="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来设置--><tableborder="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"来设置--><tableborder="1"><tr><tdcolspan="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><tdrowspan="2">1</td><td>2</td><td>3</td><td>4</td></tr></table><!--table标签的另外一种表示结构--><tableborder="2"><thead><tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th></tr></thead><tbody><tr><tdcolspan="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><tdrowspan="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常用标签分组:



对于a标签属性小窍门:

1、知识点属性，a标签属性，在其调用样式中添加：

cursor:pointer

使其指导目标时鼠标变成小手

2、a标签中如果想实现鼠标放在目标位置时下划线消失，在对应的样式中添加:

text-decoration:none