一、 HTML–页面展示什么内容
1.1 HTML概述 1.1.1 HTML:Hyper Text Markup Language超文本标记语言 超文本：相比普通文本可以设置字体颜色位置等样式 标记语言：通过一组标签描述内容 （HTML不是一种编程语言而是一种标记语言） 1.1.2 html标签：由尖括号包裹关键词通常成对出现 闭合标签：成对出现，由开始标签和结束标签包裹内容，如<html></html>、<body></body>、<div></div> 空标签：没有包括内容的单独标签，如<img/>、<br/>、<hr/> 1.1.3 html文档 由文档声明、标签和纯文本构成 1.1.4 html语法规范
<!DOCTYPE HTML> <html> <head></head> <body></body> </html>文档声明：告知浏览器文档类型，如：html5描述：<!DOCTYPE HTML> 根标签：限定了文档的开始点和结束点用来包裹头部标签和主体标签 头标签：所有头部元素的容器，描述文档的各种属性和信息，所有内容在浏览器内容展示区不显示，以下两个标签会显示在浏览器标题栏，分别是标题和图标
<title>浏览器标题栏显示的文字</title> <link rel="icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>体标签：包裹呈现在浏览器内容展示区的所有内容
1.2 常用标签 1.2.1 头标签元素 base标签：
href="" 规定页面中所有相对链接的基准URL <base href="https://www.baidu.com/"/> target="" 在何处打开页面中所有的链接 <base target="_blank"/> <!-- [_blank|_self|_parent|_top|framename] -->link标签：
设置标题栏小图标 <link rel="icon" href="pic.ico" type="image/x-icon"/> 引入外部样式表 <link rel="stylesheet" type="text/css" href="themes.css"/>mate标签：
文档类型字符集设置 <mate http-equiv="content-type" content="text/html;charset=UTF-8"/> 网页内容描述设置 <meta name="description" content="这里是这个网页内容的描述"/> 网页关键词描述设置 <meta name="keywords" content="这里是这个网页的陈列关键字"/> 视口设置（手机等其他设备浏览器的虚拟窗口） <meta name="viewport" content="width=device-width, initial-scale=1.0"/>script标签：
插入一段js脚本 <script> alert("hello gladiola"); </script> 引入外部js文件 <script type="text/javascript" src="common.js"></script>style标签：
插入一段css样式 <style type="text/css"> body {background-color:red;} </style>title标签：
设置标题栏文字 <title>这是标题栏内容</title>1.2.2 体标签元素 1.2.2.1 行、块元素
块级元素 display:block 默认的样式会独占一行，对宽度、高度等样式属性生效，默认宽度是100%，默认高度是由内容或者子容器的高度决定的，如div、form、ul、ol、li、dl、dt、dd、p、h1~h6
行级元素 display:inline 默认样式元素与元素之间会像文档一样从左到右依次排列，显示不下会折行显示，对宽度、高度等样式属性不生效，宽度高度是内容的宽高，如span、a、i、b、u（下划线）、em、strong、label
行内块元素 display: inline-block 默认元素与元素之间显示在一行，并且宽高样式生效，如img、input、textarea
1.2.2.2 表格元素
table tr td(colspan, rowspan)1.2.2.3 表单元素
form(action, method) input(name, value, type[text|password|hidden|radio|checkbox|file|submit|reset|date|time]) select option textarea(cols rows)二、 CSS如何展示页面内容
2.1 CSS概述 2.1.1 CSS: Cascading Style Sheets层叠样式表
----------css---------------- <style type="text/css"> div{color:red;background-color:green;} .red-box{background-color:red;} </style> ----------html---------------- <div class="red-box"></div>层：层级 相同属性按优先级覆盖 叠：叠加 不同属性叠加一起 优先级：
通常 id选择器 > class选择器 > 标签选择器内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省选择越精确，优先级越高2.2 三种引入方式 2.2.1 内联样式(标签style属性的样式)
<div style="border:1px solid #fff; width:100px; "></div>2.2.2 内部样式(标签
<!DOCTYPE HTML> <html> <head> <style type="text/css"> .red-box{ background-color:red; width:100px; heigth:100px; } </style> </head> <body> <div class="red-box"></div> </body> </html>2.2.3 外部样式(引入的样式)
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="my.css" /> </head> <body> <div></div> </body> </html>2.3 选择器 2.3.1 基础选择器
# id选择器：用#表示id选择器，通常id的值唯一不重复，选择范围最精确，优先级相对较高. class选择器：用.表示class选择器，通常把具有相同样式的元素定义为一类，优先级次于id选择器元素选择器 用元素的标签名作为选择器，选择范围大优先级别低2.3.2 属性选择器
E[attr] 对具有attr属性的E标签起作用，如 -------------css-------------- div[id]{ color:red } -------------html-------------- <div class="">1</div><!--选不中--> <div id="id-1">2</div><!--选中--> <div id="id-2">3</div><!--选中--> E[attr1][attr2] 对同时具有attr1和attr2属性的E标签被选中，如 -------------css-------------- div[id][class]{ color:red } -------------html-------------- <div id>1</div><!--选不中--> <div class="c-1">2</div><!--选不中--> <div id="id-1" class="c2">3</div><!--选中--> E[attr=value] 对所有attr属性等于value的E标签起作用，如 -------------css-------------- input[type='password']{ color:red } -------------html-------------- <input type="password"/><!--选中--> <input type="text"/><!--选不中--> E[attr*=value] 对所有attr属性包含value的E标签起作用E[attr^=value] 对所有attr属性以value开头的E标签起作用E[attr$=value] 对所有attr属性以value结尾的E标签起作用2.3.3 派生选择器
空格 后代选择器（目标选择器必须在某个元素内，可以不用限制直接子元素） -------------css-------------- ul a{ color:red } -------------html-------------- <ul> <li> <a>1</a> <!--选中--> </li> </ul> <a>2</a> <!--选不中--> > 子元素选择器（目标选择器必须是某个元素的直接子元素） -------------css-------------- li>a{ color:red } -------------html-------------- <ul> <li> <a>1</a> <!--选中--> <a>2</a> <!--选中--> </li> </ul> <a>2</a><!--选不中--> ~ 兄弟选择器（具有相同父亲的所有后续元素被选中（选中弟弟不选哥哥）） -------------css-------------- #id-2~li{ color:red } -------------html-------------- <ul> <li>1</li> <!--选不中--> <li id="id-2">2</li> <!--选不中--> <li>3</li> <!--选中--> <li>4</li> <!--选中--> <li>5</li> <!--选中--> </ul> + 相邻兄弟选择器（具有相同父亲的紧挨着的下一个元素被选中（选中紧挨着的弟弟不选哥哥）） -------------css-------------- #id-2+li{ color:red } -------------html-------------- <ul> <li>1</li> <!--选不中--> <li id="id-2">2</li> <!--选不中--> <li>3</li> <!--选中--> <li>4</li> <!--选不中--> <li>5</li> <!--选不中--> </ul>2.3.4 其它选择器
， 分组选择器（用,将具有相同样式的写在一起） -------------css-------------- div,ul,li{ margin:0; padding:0; } : 伪类和伪元素选择器 -----------------------伪类------------------------ a:link {color: blue} /* 未访问的链接 */ a:visited {color: red} /* 已访问的链接 */ a:hover {color: green} /* 鼠标移动到链接上 */ a:active {color: yellow} /* 选定的链接 */ /* a:hover 必须被置于 a:link 和 a:visited 之后 a:active 必须被置于 a:hover 之后，才是有效的 */ input:focus{background-color:yellow;} /* 获得焦点 */ li:first-child {color:red;} /* 第一个元素 */ li:last-child {color:red;} /* 最后一个元素 */ li:nth-child(3) {color:red;} /* 第3个元素 */ li:nth-child(odd) {color:red;} /* 奇数位元素 */ li:nth-child(event) {color:red;} /* 偶数位元素 */ li:nth-child(2n+1) {color:red;} /* 函数表达式 */ -----------------------伪元素------------------------ h1:before{content:url(logo.gif);} /* 之前插入内容 */ h2:after{content:'后面插入的文字';} /* 之后插入内容 */ p:first-letter{color:red;} /* 第一个字母 */ p:first-line{color:red;} /* 第一行文字 */ /* first-letter和first-line通常可以设置如下和文本相关的属性 font color background text-decoration vertical-align text-transform line-height */2.4 常用样式 2.4.1 盒模型相关
width/height 注意box-sizing的影响 min-width/max-width min-height/max-height padding border margin 注意外边距合并 backgroud 注意背景颜色和背景图片填充的区域范围 box-shadow(水平偏移，竖直偏移，模糊度，阴影范围，颜色)如图： 注意
浏览器默认 width和height属性是指内容区的大小(不包括内边距 边框 外边距)，而元素在浏览器中占据的实际宽度是左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距通过box-sizing属性修改width和height控制区域2.4.2 布局定位相关
display:block; /*块级元素*/ display:inline; /*行级元素*/ display：inline-block; /*行内块元素*/相对定位 position:relative (设置相对于自身原本位置的偏移量，元素原先的位置会保留灵魂出窍 ) 绝对定位 position:absolute (设置相对于已定位最近祖先元素的偏移量，该元素原先的位置不会保留) 固定定位 position:fixed 设置相对于屏幕的偏移量，该元素原先的位置不会保留
浮动布局float (浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样) 浮动清理clean 2.4.3 文本相关
color font-size font-weight font-family text-overflow text-decoration[underline|overline|none] text-align[center|left|right] text-shadow(颜色，水平偏移，垂直偏移，模糊半径) vertical-align[top|middle|bottom] line-height2.4.4 其它样式
opacity透明度 list-style列表样式 border-collapse表格合并 cursor[pointer|text|wait|help]光标样式🐖. 如有错误，欢迎补充、指正
