HTML CSS笔记列表与表格

加粗:
<b>b</b> <strong>strong</strong>
换行:
<br /> <wbr>安全换行</wbr>
倾斜:
<i>i</i> <em>em</em>
删除:
<s>s</s> <del>del</del>
下划线:
<u>u</u> <ins>ins</ins>
小号字体:
<small>小号</small>
上标:
¹
下标:
₂
添加双引号:
<q>双引号</q>
引用标题:
<cite>引用标题ppp</cite>
×××背景黑色字体
<mark>mark</mark>
时间 日期
<time>2018-04-26</time>
超链接
target="_self _blank _parent _search _top"
锚点
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
<a name="1" id="1">一章</a>用name或者id
<a name="2" id="2">二章</a>
<a name="3" id="3">3章</a>

分组元素：
p div(通用分组) blockquote(展示引用) pre(展示格式化内容) hr ul(无序列表) ol(有序列表) dldtdd(生成说明列表) figure figcaption(使用插图)

表格元素：
<table border="1" cellspacing="0" cellpadding="10">
<colgroup>
<col />
<col  span="1"/> //第二列背景为红色
</colgroup>
<thead>//表头
<tr><th>姓名</th><th>年龄</th></tr>
</thead>

<tr><td>Data</td><td>5</td></tr><tfoot>//表尾    <tr><td colspan="2">共计</td></tr></tfoot>

</table>

文档元素：
<header>
<hgroup>//组合标题
<h1>大标题</h1>
<h4>副标题</h4>
</hgroup>

LOGO <nav>    导航</nav>

</header>

<section>
文档主题部分  
</section>

<article>//小模块
<header></header>
<section></section>
<footer></footer>
</article>

<aside>注释</aside>

<footer>
<address>地址</address>
版权声明 友情链接
</footer>

嵌入元素：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/HBuilder.png" alt="图片" ismap/>
<embed />//视频
<progress value="30" max="100"></progress> //进度条
<meter min="10" max="100" value="20" low="40"></meter>//范围值

音频和视频：
<video controls loop//循环播放 muted//静音 poster=""//视频载入图片 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="video/006.mp4"  width="800px;" preload=""//预加载></video>

<video width="800" height="">
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="myvideo.mp4" type="video/mp4"></source>
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="myvideo.ogv" type="video/ogg"></source>
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>//兼容设置
<audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="audio/赵雷 - 成都.mp3" controls=""></audio>

表单元素：

<form action="index.php" method="post">
<input type="text" name="username" id="username" value="姓名" autocomplete="on"/>
<input type="submit" value="提交"/>
<button>提交</button>
</form>
//autocomplete 记录上次提交的信息

<fieldset id="">
<legend>分组</legend>
<label for="user">
用户名：<input type="text" id="user" maxlength="10" size="10" readonly="readonly" disabled=""/>
</label>

</fieldset>

<input type="text" name="" id="" value="" list="abc"/>
<datalist id="abc">
<option value="选项一"></option>  
<option value="选项二"></option>
</datalist>

<input type="password" name="passwd" id="passwd" value="" placeholder="请填写密码" />

<input type="search" name="" id="" value="" /> //搜索

<input type="number" min="10"/> //数字

<input type="date" name="" id="" value="" />

苹果：<input type="checkbox" name="" id="" value="" />
橘子：<input type="checkbox" name="" id="" value="" />
<form action="" method="post">
<input type="email" />
<input type="url" />
<input type="tel" name="" id="" value="" />
<select name="goods">
<optgroup label="水果">
<option value="1">苹果</option>
<option value="2" selected="selected">香蕉</option>
</optgroup>
<optgroup label="粮食">
<option value="3">小米</option>
<option value="4">大米</option>
</optgroup>
</select>
<textarea name="" rows="5" cols="20"></textarea>

<input type="submit" value="提交"/>

</form>

全局属性：
<meta http-equiv="refresh" content="3"/> //3秒刷新
<meta http-equiv="refresh" content="3;http://www.baidu.com"/>;    //3秒跳转

CSS样式：
1.元素内嵌样式
2.文档内嵌样式
3.外部引用样式

样式优先级 从低到高
1.浏览器样式
2.外部引入样式（link）
3.文档内嵌样式(style元素)
4.元素内嵌样式(style属性)
5.强制优先级 !important

强制继承 b{border:inherit}

css选择器：
1.基本选择器
1.通用选择器：*{font-size:12px;}
2.元素选择器：p{color:red;}
3.ID选择器
4.类选择器
5.属性选择器
2.复合选择器
1.分组选择器：p,b,i{color:red}
2.后代选择器：p b{color:red}
3.子选择器：ul>li{color:red}
4.相邻兄弟选择器：p+b{color:red}
5.普通兄弟选择器：p～b{color:red}
3.伪元素选择器
1.块级首行：::first-line{color:red}
2.块级首字母：::first-letter{color:red;}
3.文本前插入：a::before{content:"点击"}
4.文本后插入：a::after{content:"请进"}
4.伪类选择器：
1.根元素选择器：:root{color:red}
2.子元素选择器：ul>li:first-child{color:red}
3.系列：nth-child(n) nth-last-child(n)倒数
4.UI伪类选择器：:enabled :disabled

a:link a:visited(点击之后) a:hover(悬停) a:active(点击不放)

更换字体 定义字体名称及位置 引用字体
@font-face {
font-family: 'abc';
src: url('BrushScriptStd.otf');
}

p {
font-size: 50px;
font-family: abc;
}

度量单位:

CSS边框与背景：
border: solid(实线) dashed(虚线) dotted(圆点线) double(双线边框最小3px) groove(槽线边框) inset(元素内容具有内嵌效果) outset(元素内容具有凸效果) ridge(嵴线边框) solid(实线边框)
border-radius:10px 20px 30px 40px;
background:transparent;(透明色 继承父类背景颜色)
background-img:url(test.png);
background-position:left bottom top right;(两两组合)
background-size:cover(放大缩放有可能超出) contain(等比例缩放);
background-attachment:scoll(背景一块滚动) fix(固定)
background:#ccc url(img.png) no-repeat top left / 100% border-box content-box;
body里面的底部背景图需要html定义高度100%

div{
color:red;
opacity:0.5;(0-1)
border:10px solid #ccc;
border-shadow:
}