HTML CSS筆記列表與表格

阿新 • • 發佈：2018-05-01

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>
上標:
<sup>1</sup>
下標:

<sub>2</sub>
添加雙引號:
<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 style="background: red;" 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>

<footer>
<address>地址</address>
版權聲明友情鏈接
</footer>

嵌入元素：
<img src="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=""//視頻載入圖片 src="video/006.mp4" width="800px;" preload=""//預加載></video>

<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="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 src="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>

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

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

蘋果：<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:
}

box-shadow
技術分享圖片
outline(外邊框)

光標樣式

CSS3 前綴

長度單位 rem

CSS 表格與列表
表格有五種獨有樣式，樣式表如下：

列表樣式:

其他功能: