font-size: 文字大小
color： ?????顏色
solid： ?????边框线
text-align: ?間距
center： ????文字放在中間
<head> ??????网页头部
<title> ?????网页标题
<link> ??????引用
<style> ?????样式
<em> ????????强调斜体
<strong> ????自己加粗
<span> ??????是一个区块标签，它类似div，class标签，定义一个小块元素，只不过这个标签签是没有语义的
<br/> ???????相当于回车
<hr/> ???????加分割线
<blockquote> 长引用
??????空格
<addreass> ??斜体
<code> ??????代码为一行代码时
<pre> ???????代码为多行代码时
<q> ?????????双引号
<ul><li> ????没有前后顺序
<ol><li> ????有序列表
<div> ???????逻辑部分
<div ?id="版块名称">…</div> ??每一板块具有唯一性
<table> ?????表格的开始
<tbody>当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
<tr> ????????表格的一行
<td> ????????表格一单元格
<th> ????????表格表头
<caption> ???标题内容
text-shadow： ??阴影 ?可以同时上多个颜色
-webkit-gradient(linear,10% 10%,100% 100%,color-stop(0.14,#35b550),color-stop(0.5,#8aca8c),color-stop(1,#2d85ca)) ???颜色渐变功能
<table summary> 标题摘要
<body bgcolor="blue">(设置背景颜色）
<body background="……jpg">（设置背景图片）
div.class 寻找用于class德尔div
div .class 寻找div里面的class
<body background="……jpg" background-repeat:repeat-x：background-position：x轴 y轴(图片的位置)>
repeat-x:水平铺展
repeat-y：垂直平铺
repeat：水平垂直平铺
no-repeat：不平铺
<style type="text/css">
table tr td,th{border:1px solid #000;} ????添加单元表格
</style>
table{
???margin:0 auto; ?????????????????让表格居中
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
<a href="" target_blank>文本</a>打开新窗口
<a href="" target_self>文本</a> 在本窗口打开
<a href="" target_parent>文本</a>父窗口
<a href="" target_top>文本</a> 整个浏览器窗口
邮箱地址： ?malito ??例：<a href="mailto:yy@imooc.com">发送</a>
抄送地址：cc= ???????例：<a href="mailto:yy@imooc.com？cc=dsdsa@imooc.com">发送</a>
密件抄送 ?bcc= ???????例：<a href="mailto:yy@imooc.com？bcc=dsdsa@imooc.com">发送</a>
多个收件人、抄送、密件抄送人 ; ?例<a href="mailto:yy@imooc.comp;ppdsdsa@imooc.com">发送</a>
邮件主题 snnject= ???例：<a href="mailto:yy@imooc.com？subject=发送邮件">发送</a>
邮件内容 body= ?????例：<a href="mailto:yy@imooc.com？body=欢迎来到慕课网">发送</a>
<form>
<form method="post/get两种穿线方式" action="网址">
<label for="控件id名称">
??<input type="text（显示）/password（密码）/submit（提交按钮）/radio(单选）/checked（多选）/reset（重置）/ button(默认按钮没有任何效果)/file（上传文件）
/email（邮箱）/url（网址）/number（数字）/number（滑块）/image（图片）"
?
name="名称"
maxlength="20":锁定text和password的最大字符，默认无限大
size="5"：默认宽度
value="显示当前文本"
disabled="disabled" 锁定
readonly="readonly" 只读 />
<input type="image（图片）" src=""/>
<input type="number（数字）" min="0"(允许的最小值) max="0"(允许的最大值) step="10"（规定合法数字间隔）/>
<input type="number（滑块）" min="0"(允许的最小值) max="0"(允许的最大值) step="10"（规定合法数字间隔）/>
<input ??type="radio（单选）/checkbox（hidden多选）" ??value="值" ???name="名称" ???onclick="contxt()"（点击事件）
checked="checked（默认选择）"/>
</label>
</form>
<textarea ?rows="行数" cols="列数">文本</textarea>
</form>
<select> ??选项： ?<select size="5"(行数) multiple="multiple（按住ctrl可以多选）"。>
<option value="提交值"selected="selected（默认选择）"。>运动</option>
</select>
内联式的css
<style type="text/css"> ??
p{
??
??display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
???visibility:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
??word-spacing:50px： ????????单词间距；
??letter-spacing:20px: ???????字母间距；
??border-radius: 50px; ???????边界半径
??overflow:hidden; ???????????溢出隐藏；
??display：inline-block： ????内联块；
??clear：both; ???????????????清除浮动
??line-height:2em; ???????????设置行间距（行高）
??border:1px solid red; ??????添加边框样式
??color:red; ?????????????????设置文字颜色 ?
??background:pink; ???????????上背景色
??a{display:block;} ??????????内联元素a转换为块状元素
??border-radius:8px; ?????????使边框变圆
??line-height:40px; ??????????行高
??max-height:20px ????????????设置元素的最大高度。
??opacity ????????????????????（css3）透明度 ????????
??vertical-align:middle： ????垂直居中；
??vertical-align： ???????????垂直对齐；
??white-space:pre ????????????空白会被浏览器保留"
??z-index:100 ????????????????优先级（只在相对和绝对布局有用
nth-of -type() ???????????????同级数列选中 ????
??frameborder:1 ??????????????1有边框 ??0无边框
??background-repeat:repeat-x; 重复方式：x轴重复；no-repeat 不重复
??background-position:3px center; 背景位置水平位置 垂直位置
??font-size:20px; ????????????设置文字字号
??font-family:"微软雅黑"; ????设置字体样式
??font-weight:bold; ??????????设置字体加粗
??font-weight:normal; ????????设置字体变细
??font-style:italic; ?????????设置为斜体样式；
??
??text-decoration:underline： 文字设置下划线；
??text-decoration:none ???????删除下划线
??text-decoration:line-through： 删除线；
??text-indent:2em： ??????????缩进；（注意：2em的意思就是文字的2倍大小。）
??????????align——表示左右居中——left，center，right ?控制位置
??????????????????????????????valign——控制上下居中——left，center，right ?
boeder:1px ?solid #000 ???下划线
在ul里面white-space: nowrap; ?不遇到《br/>不会换行
no-repeat ??不重复
transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate
ul ?li{list-style:none;
padding:0;
margin:0; }
a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}
filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同
none不使用项目符号
disc实心圆，默认值
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母
鼠标经过它时候的效果：
a:link {color: #FF0000} /* 未访问时的状态 */；
a:visited {color: #00FF00} /* 已访问过的状态 */；
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */；
a:active {color: #0000FF} /* 鼠标按下去时的状态 */；
}
display属性值:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column ?此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
</style>
内联式的css ?????span style="color:red" ????????????这里文字是红色。</p>
外部式的css ????<link href="aaa" rel="stylesheet" type="text/css" /> ??新建一个文件 文件名需和href一样
标签选择器： ??p{color:red;}
类选择器： ????.a{color:red;} ??????????<span class="a"> ?????????????????stress为变量，前面要加英文句号（.） ?可多次使用
ID选择器： ????#a{color:red;} ??????????<span id="a"> ????????????????????ID唯一性， ?前面加# 具有唯一性
子选择器； ????p>span{color:red;} ??????<p><span>aaa</span>saaa</p> ??????用于选择指定标签元素的第一代子元素。(即右边的值会变化)
后代选择器： ??p span{color:red;} ??????<p><span>aaa</span>saaa</p> ??????用于选择指定标签元素下的后辈元素 ??（选取从左边到右边所有的值）
通用选择器： ??* {color:red;} ????????????????????????????????????????????它的作用是匹配html中所有标签元素
伪类选择器： ??a:hover{color:red;} ?????<a href="http://www.imooc.com"> ??鼠标滑过的状态来设置字体颜色 ????????????
分组选择器： ??p,h1{color:red;} ??????????????????????????????????????????同时运用多个元素
权值规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red!important;}!important具有最高值
<img src="http://…….jpg"
style="width:100px;height:100px;"margin-top:10px; margin-left:10px 或（position:absolute(绝对定位); left:100（左右）px; top（高）:100px;）/（控制图片大小和位置）>
三种定位方式position
absolute绝对定位:让它去哪就去哪
relative相对定位:人走了,但是心还在那里.
fixed固定定位: 不管水怎么流,船还是被栓在那里.在浏览器中的位置是固定的，不会因浏览器中的滚动条滚动而变化。
clip: rect(0px, 78px, 156px, 0px); 剪切定义用于其它定位上面 （左上右上右下左下）
??多次动画
a{ ??width:20px（%）; 宽
????height：20px（%）：高
????float:left; ??fudong
????margin:（0px 0px 0px 0px ） ??上右下左距离 在为顶块元素用auto即可居中
????background：red ??背景颜色
????box-shadow:1px 1px 15px red; ??盒子的阴影（宽 ?高 ?盒子本身阴影 ??颜色）
????text-shadow; ?????????????文字的阴影（宽 高 文字本身阴影 颜色）
????animation:a 5s; ????????????动画多少秒完成
????animation-iteration-count:infinite; ???????多次运行 ?????}
???@keyframes a ??可以设置帧数
{0% ??{background:#fff; height:20px;} ??初始
25% ?{background:#4285f4; height:60px;} 变长
50% ?{background:#079246; height:300px;} ?变长
100% {background:#fff;height:20px;} ???回到原来 ?????帧数的变化}
一次动画
a{
???display:inline-block;
???????width:20px;
height:20px;
text-align:center;
???????border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）|solid（实线）。
???margin:2px;
?box-shadow:1px 1px 8px;
?border:4px solid #586;
???border-radius:8px; ??圆角
???
a:hover{
???????background-color:#990；
???????border:4px solid #586;
???????border-radius:8px;
???????transition: box-shadow 1s, background 1s；
}
???
盒模型
（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
??padding ?????内编剧、
??margin ??????外边距
??width ???????内容宽度
??border ??????边框
border-bottom:1px solid red;下
border-top:1px solid red; ??上
border-right:1px solid red; 右
border-left:1px solid red; ?左 ????边框
*{ margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font-size:12px; font-family:"微软雅黑"; }
CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。
W3C标准：
1、结构化标准语言（HTML和XML）
2、表现标准语言（CSS）
3、行为标准化语言（DOM和ECMAScript）
倡导结构、样式、行为分离
CSS的三种定位机制：
1、标准文档流（Normal flow）
-- 从上到下，从左到右，输出文档内容；
-- 由块级元素和行级元素组成
块级元素：（1）从左到右撑满页面，独占一行；（2）触碰到页面边缘时，会自动换行；（3）常见的块级元素：div、ul、li、dl、dt、p...
行级元素：（1）能在同一行内显示；（2）不会改变HTML文档结构；（3）常见的行级元素：span、strong、img、input...
块级元素和行级元素都是盒子模型。
2、浮动（Floats）
3、绝对定位（Absolute positioning）
盒子3D模型分为五层
第一层border 第二层 content+padding 第三层 background-image 第四层 background-color 第五层 margin
盒子模型分为 边框 border 内边距 padding 外边距 margin 内容content。
margin的auto属性原理:(浏览器的宽度-外包含层的宽度)/2=外边距 ?时不能在使用浮动及定位
float属性三个值:left-左浮动<br>
right-右浮动<br>
none-不浮动
特点:元素会左移,右移,知道触碰到容器为止.但却仍会出于标准文档流中.只对下一个有用
清除浮动的常用方法：
1、clear属性——常用clear：both；clear：left；或者clear：right。
2、同时设置width：100%（或固定宽度）+overflow（移出属性）:hidden；（一般情况下对受到浮动影响的元素设置这些属性）；
空标签无意义(如<br />)，不建议使用此方法清除浮动。
自适应的布局
<meta name="viewport" content="width=device-width, initial-scale=1" /> ?
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
菜单
<html>
<ul>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
</ul>
初学html的单词笔记
原文地址：https://www.cnblogs.com/liehuonanjue/p/8166092.html