HTML之經常使用標籤
HTML之經常使用標籤
介紹了前端中經常使用的標籤，講解了行內元素和塊元素的區別，同時重點解釋了語義化的意義！
html標籤
html控制頁面結構，良好的頁面結構有利於seo優化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html經常使用標籤</title>
<meta name="keywords" content="html 經常使用標籤"/>
<meta name="description" content="html經常使用標籤"/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="../source/css/style.css"/>
<!--設置css樣式-->
<style>
.g-doc section{
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px #aaa;
}
.g-doc table{
border: 1px solid #ddd;
border-collapse: collapse;
}
.g-doc table caption{
font-size: 1.2em;
font-weight: bold;
}
.g-doc table td,
.g-doc table th{
padding: 0.3em 0.6em;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="g-doc" id="top">
<!--文字標籤-->
<section>
<h2>文字標籤</h2>
<!--h爲標題，p爲文字段落，hr爲水平線標籤！-->
<h3>靜夜思</h3>
<p>牀前明月光，疑是地上霜</p>
<p>舉頭望明月，低頭思故鄉</p>
<hr>
<!--br爲換行標籤-->
<!--補充：html5新增wbr標籤，弱換行標籤-->
<h3>靜夜思</h3>
<p>牀前明月光，疑是地上霜<br>舉頭望明月，低頭思故鄉</p>
</section>
<section>
<!--strong加粗，em斜體。兩者都有利於seo（增長搜索引擎爬取權重！）-->
<!--sub和sup分別爲上下標籤，在表示化學公式或者數學運算有用！-->
<!--s爲刪除線，u爲下劃線。補充：推薦經過css的text-decoration屬性設置！-->
<!--span和css，配合使用，修飾行內元素！-->
<!--瀏覽器預留了部分字符，如"<"，爲了正確顯示預留字符則必須使用實體字符集！-->
<!--補充：html5新增ruby標籤，註釋音標！-->
<h2>文字標籤</h2>
<p>
<strong>我是粗體</strong><br>
<em>我是斜體</em><br>
H<sub>2</sub>SO<sub>4</sub>是硫酸的化學式！<br>
<s>原價：￥6.5/kg</s><br>
<u>hello world!</u><br>
<span>我是span標籤</span><br>
<ruby>我<rt>wo</rt>是<rt>shi</rt>誰<rt>shui</rt></ruby>
</p>
</section>
<section>
<h2>實體字符集</h2>
<p>
我是實體字符集：< hello word! ><br>
</p>
</section>
<section>
<h2>超連接標籤</h2>
<!--超連接標籤常見做用：1.外部連接（如百度）；2.相對連接（以下一章）；3.錨點做用（如回到頂部）-->
<p>
<a href="https://baidu.com">百度一下</a>
<a href="#top">回到頂部</a>
<a href="03.html">下一章</a>
</p>
</section>
<section>
<h2>表格標籤</h2>
<!--常見的表格，th爲標題，td爲數據！-->
<table>
<caption>表格標題</caption>
<thead>
<tr>
<th>書名</th>
<th>得分</th>
</tr>
</thead>
<tbody>
<tr>
<td>html指南</td>
<td>90</td>
</tr>
<tr>
<td>javascript手冊</td>
<td>80</td>
</tr>
<tr>
<td>css祕密</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>85</td>
</tr>
</tfoot>
</table>
</section>
<section>
<h2>列表</h2>
<!--ul爲無序列表，ol爲有序列表，dl爲自定義列表-->
<ul>
<li>項目一</li>
<li>項目二</li>
</ul>
<hr>
<ol>
<li>項目一</li>
<li>項目二</li>
</ol>
<hr>
<dl>
<dt>html手冊</dt>
<dd>用來學習html的百科全書！</dd>
<dt>javascript指南</dt>
<dd>用來學習javascript的百科全書！</dd>
</dl>
</section>
<section>
<h2>表單標籤</h2>
<form action="javascript:void(0)">
<p><label for="">Text</label><input type="text"></p>
<p><label for="">Password</label><input type="password"></p>
<p><label for="">Search</label><input type="search"></p>
<p><label for="">Number</label><input type="number"></p>
<p><label for="">Url</label><input type="url"></p>
<p><label for="">Tel</label><input type="tel"></p>
<p><label for="">Email</label><input type="email"></p>
<p><label for="">File</label><input type="file"></p>
<p><label for="">Range</label><input type="range"></p>
<p><label for="">Color</label><input type="color"></p>
<p><label for="">Time</label><input type="time"></p>
<p><label for="">Date</label><input type="date"></p>
<p><label for="">Radio</label><input type="radio"></p>
<p><label for="">CheckBox</label><input type="checkbox"></p>
<p><label for="">Button</label><input type="button" value="按鈕"></p>
<p><label for="">Reset</label><input type="reset"></p>
<p><label for="">Sumbit</label><input type="submit"></p>
<p><label for="">Hidden</label><input type="hidden"></p>
</form>
<hr>
<form action="#">
<p><textarea name="" id="infoMe" cols="30" rows="4"></textarea></p>
<p>
<select name="" id="infoSe">
<option value="0" selected disabled>請選擇一項</option>
<option value="1">選項1</option>
<option value="2">選項2</option>
</select>
</p>
<p><label for="">請輸入查詢內容：</label><input type="search" list="car"></p>
<datalist id="car">
<option value="c1">小車</option>
<option value="c2">大車</option>
</datalist>
<p><button>Button</button></p>
</form>
<hr>
<form action="javascript:void(0)">
<fieldset>
<legend>登陸框</legend>
<p><label for="">用戶名</label><input type="text"></p>
<p><label for="">密碼</label><input type="password"></p>
<input type="button" value="登陸">
</fieldset>
</form>
</section>
<section>
<h2>多媒體標籤</h2>
<!--多媒體標籤，支持導入圖片視頻音頻等！-->
<img src="./source/webkitflow.png" alt="webkitflow" style="display: block;">
<embed src='http://player.youku.com/player.php/sid/XMTM2Mzg3MjA3Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<!--html5新增的標籤-->
<video src=""></video>
<audio src=""></audio>
</section>
<section>
<h2>框架標籤iframe</h2>
<iframe src="https://baidu.com" frameborder="0"></iframe>
</section>
<section>
<h2>佈局標籤</h2>
<!--支持語義化，提供更友好的seo！-->
<ul>
<li>div</li>
<li>span</li>
<li>header</li>
<li>main</li>
<li>footer</li>
<li>menu</li>
<li>nav</li>
<li>aside</li>
<li>article</li>
<li>section</li>
<li>time</li>
<li>address</li>
</ul>
</section>
<section>
<h2>塊元素、行內元素、行內塊元素</h2>
<div class="parent">
<!--塊級元素獨佔一行，內部能夠容納其餘元素！-->
<p>我是塊元素：block</p>
<p>我是塊元素：block</p>
</div>
<div class="parent">
<!--行內元素水平方向依次排列，若父容器寬度不夠則自動換行；內部只能容納文字或行內元素！-->
<!--行內元素設置的上下margin和padding不會影響行內元素的排列（便可以認爲不能設置）；行內元素不能設置width和height！-->
<span>我是行內元素：inline</span>
<span>我是行內元素：inline</span>
<span>我是行內元素：inline</span>
<span>我是行內元素：inline</span>
</div>
<div class="parent">
<!--行內塊元素綜合塊元素和行內元素的特色：擁有塊級元素的全部特色，同時在行內依次排列！-->
<input type="text" value="我是行內塊元素：inline-block">
<input type="text" value="我是行內塊元素：inline-block">
</div>
<style>
.parent{
height: 120px;
width:100%;
border: 1px solid #000;
}
.parent p,
.parent span,
.parent input{
width:45%;
height: 25%;
padding: 5px;
margin: 5px;
color: #fff;
background-color: crimson;
}
</style>
</section>
</div>
</body>
</html>
補充延伸
html語義化
語義化的定義？
語義化是指根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），便於開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。javascript
爲何要重視語義化？
- 有利於SEO，有助於爬蟲抓取更多的有效信息，爬蟲是依賴於標籤來肯定上下文和各個關鍵字的權重。
- 在沒有CSS的狀況下也能呈現較好的內容結構與代碼結構。
- 方便其餘設備的解析(如屏幕閱讀器、盲人閱讀器、移動設備)。
- 便於團隊開發和維護，語義化更具可讀性！
寫html代碼時的建議？
- 去掉css樣式後，依然能很好的呈現內容！
- 不要使用純樣式標籤（如b和u標籤），而使用css設置！
- 熟悉html5新增的語義化標籤，如header、footer、hgroup、nav、aside、article、section等！
seo優化
待完成php
優雅降級
noscript
當瀏覽器不支持腳本或者禁用腳本時顯示，使用以下css
<noscript>
<p>本頁面須要瀏覽器支持（啓用）JavaScript</p>
</noscript>
canvas
當瀏覽器不知canvas標籤時顯示，使用以下html
<canvas>Your browser does not support the HTML5 canvas tag.</canvas>
video
當瀏覽器不支持video標籤時顯示， 使用以下前端
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 video 標籤。
</video>
ie提示
判斷ie版本決定是否顯示，使用以下html5
<!--[if lt IE 9]>
<script>請升級瀏覽器~</script>
<![endif]>
參考連接
- 標籤代碼參考自綠葉學習網，網址：http://www.lvyestudy.com
- 部分代碼參考自菜鳥教程，網址：http://www.runoob.com
- 若有侵權，請聯繫刪除
相關文章
- 1. HTML之⑤HTML經常使用標籤
- 2. HTML經常使用標籤
- 3. html經常使用標籤
- 4. Html-經常使用標籤
- 5. 經常使用html標籤
- 6. HTML 經常使用標籤
- 7. Html經常使用標籤
- 8. [HTML] HTML經常使用基礎標籤
- 9. HTML經常使用標籤的使用
- 10. HTML學習3：經常使用標籤之文本標籤
- 更多相關文章...
- • MyBatis if標籤 - MyBatis教程
- • MyBatis foreach標籤 - MyBatis教程
- • Composer 安裝與使用
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML之⑤HTML經常使用標籤
- 2. HTML經常使用標籤
- 3. html經常使用標籤
- 4. Html-經常使用標籤
- 5. 經常使用html標籤
- 6. HTML 經常使用標籤
- 7. Html經常使用標籤
- 8. [HTML] HTML經常使用基礎標籤
- 9. HTML經常使用標籤的使用
- 10. HTML學習3：經常使用標籤之文本標籤