1.1. HTML
1、为什么要有HTML？
"Hello"
"<h1>Hello</h1>"
- 浏览器渲染时使用一套HTML规则，
- 学习规则
2、服务器端写HTML时，
在任何语言的WEB框架中：html就做模版
- .html
- .tpl template
- .chmtl
3、发送请求和相应请求时
请求：请求头 + 请求内容
响应：
4、HTML规则
- html/head/body/title/meta
- div/p/a/h/span/b/br/hr/em/ul/ol/li/img/table
- input/form/textarea/select
- style/script/link
HTML, htyper text markup language 即超文本标记语言
超 文 本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
标签的构成和其属性
标签分类：闭合标签和非闭合标签
闭合标签 ：<h1></h2>
自闭和标签：<hr/>
标签属性：
通常是以键值对的形式出现<h1 style='color:red'>China</h1>
只能出现在开始标签和自闭和标签
属性值只能小写，且带着引号
属性名和属性值一致的时候，直接写属性名即可，例如,readonly
标签分类：所有的标签统分为：
块级标签：<p><h1><table><ol><ul><form><div>
总是在新行上开始，每次占用一整行的内容；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
内联标签：<a><input><img><sub><sup><textarea><span>
和其他元素都在一行上；根据文本的大小占用大小
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
特殊字符："； < >；"；©®
实例包含：HTML基本组成，基本标签[快标签，内联标签的使用]，图形标签，超链接标签，列表标签
1 <!-- 这里是告诉浏览器， 引用W3的最新标准.历史上有2种浏览器渲染方式 --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <!--设定字符编码--> 6 <meta charset="UTF-8"> 7 <!--设定名称--> 8 <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> 9 <!--http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容--> 10 <!-- 设定2秒后自动跳转百度--> 11 <meta http-equiv="Refresh" content="20000;URL=https://www.baidu.com"> 12 <!-- meta http-equiv="Refresh" content="2"--> 13 <!-- 这里是作浏览器的兼容性处理--> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 15 <!--网站内容的描述信息，便于搜索引擎查找信息--> 16 <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> 17 <!--网站的关键词，便于搜索引擎抓取关键字--> 18 <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,DV,相机,数码,配件,手表,存储卡,京东" /> 19 <!--非Mate标签,包括script和link--> 20 <!--这里是引用网站的logo--> 21 <link rel="icon" href="//www.jd.com/favicon.ico" type="image/x-icon" /> 22 <!--暂时不会--> 23 <link rel="search" title="京东JD.com" href="//misc.360buyimg.com/mtd/pc/common/conf/search.xml" type="application/opensearchdescription+xml" /> 24 <script> 25 alert(window.top.document.compatMode) <!--显示浏览器渲染效果--> 26 </script> 27 <style> 28 #h0 { 29 color: orangered; 30 height: 300px; 31 width: 800px; 32 font-family: Arial; 33 background: lightpink; 34 } 35 #h1{ 36 color: blue; 37 height: 300px; 38 width: 800px; 39 font-family: Arial; 40 background: palegreen; 41 } 42 #h2 { 43 color: rebeccapurple; 44 height: 300px; 45 width: 800px; 46 font-family: Arial; 47 background: greenyellow; 48 } 49 </style> 50 </head> 51 <body> 52 <h1>这个是好标签，共计6个，h1~h6</h1> 53 <p>这里是P标签，有换行和加空白行的作用</p> 54 <br/> <!--添加换行--> 55 <hr/> <!--添加一个横线--> 56 <p><del>文字添加中线【推荐使用】</del></p> 57 <p><strike>文字添加中线【不推荐使用】</strike></p> 58 <p><b>这里个加粗标签</b></p> 59 <p><em>斜字体</em></p> 60 <p><I>斜字体2</I></p> 61 <p>上角标2<sup>3</sup>=8</p> 62 <p>特殊字符-空格: 大于符号 < 小于符号：> 版权符号: © 著作人：® </p> 63 <p>下角标H<sub>2</sub>0</p> 64 <!--div主要是用来引用CSS文件的，本身除了换行外[块级标签]不具有任何的格式--> 65 <div style="color: rebeccapurple">hello div</div> 66 <!--span是一个内联标签，写多少 用多少，内联标签是跟着文本走的，默认不具有换行操作--> 67 <span style="color:royalblue">hello span</span><br> 68 <!--图片标签，注意属性应用--> 69 <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=825738955,2683699723&fm=27&gp=0.jpg" 70 height="200px" width="400px" alt="黄沙百战穿金甲,不破楼兰终不还" title="愿你心无所畏，勇往直前"><br> 71 <!-- a标签有2个作用： 超链接 + 锚[通过#id实现] 72 这里用作超链接使用, __blank表示单独开一个页签--> 73 <a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道">百度</a> <hr> 74 <!--这里用作锚使用，注意元素都是用#来标示的--> 75 <a href="#h0" target="_self">神话</a> 76 <a href="#h1" target="_self">我是谁</a> 77 <a href="#h2" target="_self">警察故事</a> 78 <div id="h0"><a href="http://www.1905.com/vod/play/85426.shtml?__hz=55a7cf9c71f1c9c4&ref=baidu1905com" target="_blank">神话</a> 79 <p>无序列表的学习</p> 80 <ul> 81 <li>苹果</li> 82 <li>香蕉</li> 83 <li>句子</li> 84 </ul> 85 </div> 86 <div id="h1"><a href="http://www.iqiyi.com/v_19rrkgxf34.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01" target="_blank">我是谁</a> 87 <p>有序列表的学习</p> 88 <ol> 89 <li>一年级</li> 90 <li>二年级</li> 91 <li>三年级</li> 92 </ol> 93 </div> 94 <div id="h2"><a href="http://www.le.com/ptv/vplay/1561263.html" target="_blank">警察故事</a> 95 <p>自定义列表的学习</p> 96 <dl> 97 <dt>第一章</dt> 98 <dd>神话</dd> 99 <dt>第二章</dt> 100 <dd>我是谁</dd> 101 <dt>第三章</dt> 102 <dd>警察故事</dd> 103 </dl> 104 </div> 105 <!--table表格的使用 106 table属性： cellpadding: 内边距 cellspacing: 外边距. 107 <tr>: table row 108 <th>: table head cell，有属性[rowspan: 单元格竖跨多少行, colspan: 单元格横跨多少列（即合并单元格）] 109 <td>: table data cell 110 --> 111 <table border="1" cellpadding="2" cellspacing="2"> 112 <tr> 113 <th colspan="3">水果</th> 114 <th>学生</th> 115 </tr> 116 <tr> 117 <td>苹果</td> 118 <td>小学生</td> 119 </tr> 120 <tr> 121 <td>香蕉</td> 122 <td>初中生</td> 123 </tr> 124 </body>