HTML
1.1常用編輯器
dreamweaver、sublime、webstorm、Hbuilder、vscode
1.2 瀏覽器內核
分為渲染引擎和JS引擎
渲染引擎：它負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入CSS 等），以及計算網頁的顯示方式，然后會輸出至顯示幕或列印機
JS引擎：JS引擎則是決議Javascript語言，執行javascript語言來實作網頁的動態效果
- IE: Trident
- Firefox: Gecko
- Chrome: Webkit 到 Blink
- Safari: Webkit
- Opera: Presto 到 Webkit 到 Blink
1.3 標簽
<!-- 四類八種 -->
<b>粗體</b><strong></strong>
<i>斜體</i><em></em>
<s>洗掉線</s><del></del>
<u>下劃線</u><ins></ins>
<img src="https://www.cnblogs.com/recreyed/p/圖片路徑" alt="出錯顯示資訊">
<a href="https://www.cnblogs.com/recreyed/p/跳轉鏈接" target="目標視窗的彈出方式">文本或影像</a>
<!-- 錨點定位 -->
<a href="https://www.cnblogs.com/recreyed/p/#one"></a>
<p id="one">段落</p>
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
<!-- 自定義串列 -->
<dl>
<dt></dt>
<dt></dt>
</dl>
1.4 表格
<table align="center" border="1" cellspacing="0" cellpadding="10" width="900">
<caption>年中工資報表</caption>
<thead>
<tr>
<th colspan="2">區域辦事處</th>
<!-- <th>崗位</th> -->
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">abc</td>
<td>abc</td>
</tr>
<tr>
<!-- <td>abc</td> -->
<td>abc</td>
</tr>
</tbody>
</table>
- 合并單元格的步驟是？
1.先判斷是跨行(rowspan)還是跨列(colspan)
2.把屬性名和合并的行數寫在第一個要合并的單元格上
3.把多余的單元格注釋掉 - table布局的缺點是？
a.太深的嵌套,比如table> tr> td>h3,會導致搜索引擎讀取困難,而且,最直接的損失就是大大增加了冗余代碼量，
b.靈活性差,比如要將tr設定border等屬性, 是不行的，得通過td
c.代碼臃腫,當在table中套用table的時候， 閱讀代碼會顯得例外混亂
d.混亂的colspan與rowspan,用來布局時，頻繁使用他們會造成整個檔案順序混亂，
e.不夠語意化
1.5 表單
<!--
action 提交的地址
method 提交的方式
name 表單名字
-->
<form action="https://www.baidu.com" method="GET" name="form1">
<!--
label 標記標簽 (獲取焦點 label for與input id)
input 控制元件標簽 size 長度
-->
<div>
<label for="user">姓名</label>
<input type="text" id="user" value="https://www.cnblogs.com/recreyed/p/默認值">
</div>
<!-- 密碼框 -->
<div>
<label for="pwd">密碼</label>
<input type="password" id="pwd" size="30">
</div>
<!--
單選框，name一樣具有單選效果
默認單選框內容:
checked="checked"
checked=true
checked
-->
<div>
<input type="radio" name="sex" checked><span>男</span>
<input type="radio" name="sex"><span>女</span>
</div>
<!-- 多選框 -->
<div>
<input type="checkbox" checked><span>1</span>
<input type="checkbox"><span>2</span>
<input type="checkbox" checked><span>3</span>
</div>
<!--
組合標簽
默認選擇內容，selected，同checked
-->
<div>
<span>家庭住址</span>
<select name="" id="">
<option value="">石家莊</option>
<option value="" selected>遷安</option>
</select>
</div>
<br>
<!-- row 長 cols寬 -->
<div>
<span>多行文本框</span>
<textarea name="" id="" cols="30" rows="7"></textarea>
</div>
<br>
<input type="reset" value="https://www.cnblogs.com/recreyed/p/重新設定">
<input type="button" value="https://www.cnblogs.com/recreyed/p/普通按鈕">
<input type="submit" value="https://www.cnblogs.com/recreyed/p/提交按鈕">
</form>
1.6 HTML5
<header>頭部標簽</header>
<!-- 導航標簽 -->
<nav>
<ul>
<li><a href="https://www.cnblogs.com/recreyed/p/#">導航標簽鏈接1</a></li>
<li><a href="https://www.cnblogs.com/recreyed/p/#">導航標簽鏈接2</a></li>
</ul>
</nav>
<section>小節標簽</section>
<section>
<!-- 側邊欄標簽aside -->
<aside>
<ul>
<li> <a href="https://www.cnblogs.com/"></a> 側邊欄</li>
</ul>
</aside>
</section>
<section>
<!-- 文章標簽 -->
<article></article>
</section>
<footer>尾部標簽</footer>
<!-- 進度條標簽 -->
<progress max="600" value="https://www.cnblogs.com/recreyed/p/100"></progress>
1.7 HTML5-form
<form action="#" method="GET" name="form-1">
<!-- h5新增選擇框 -->
<span>選擇</span>
<input type="text" list="l1">
<datalist id="l1">
<option value="https://www.cnblogs.com/recreyed/p/op3"></option>
<option value="https://www.cnblogs.com/recreyed/p/op4"></option>
<option value="https://www.cnblogs.com/recreyed/p/op5"></option>
</datalist>
<button>h5普通按鈕</button>
<section>
<!--
placeholder：占位符
required：不能為空
autofocus：自動獲取焦點
autocomplete：自動完成
-->
<label for="user">姓名</label>
<input type="text" id="user" name="user" placeholder="占位符" required autofocus autocomplete="off">
</section>
<section>
<!-- maxlength -->
<label for="pwd">密碼</label>
<input type="password" id="pwd" name="pwd" placeholder="占位符" maxlength="6" minlength="3">
</section>
<!-- 新增的table屬性 -->
<section>
<label for="">郵箱</label>
<input type="email" autocomplete="off">
</section>
<section>
<label for="">地址</label>
<input type="url" name="" id="">
<input type="color">
</section>
<section>
<label for="">搜索框</label>
<input type="search" placeholder="輸入搜索內容">
</section>
<section>
<label for="">時間</label>
<input type="time" name="" id=""><br>
<label for="">日期</label>
<input type="date" name="" id=""><br>
<label for="">月份</label>
<input type="month" name="" id=""><br>
<label for="">周</label>
<input type="week" name="" id="">
</section>
</form>
1.8 HTML5-media
<!--
控制元件：controls
回圈：loop
靜音：muted
-->
<audio src="" controls loop="loop" muted="muted"></audio>
<audio controls>
<source src="">
</audio>
<video src="" controls loop="loop" muted="muted" width="200" height="300"></video>
<!-- video雙標簽，同audio -->
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285905.html
標籤：Html/Css