HTML學習(二)常用標簽，屬性
參考
HTML 教程| 菜鳥教程
HTML 教程 - w3school 在線教程
標簽
標簽之間可以嵌套
頭head
<head> 元素包含了所有的頭部標簽元素昌屉。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS）钙蒙，及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為: <title>, <link>,<style>, <meta> , <base>,<script>, <noscript>
頭部內(nèi)容不會被顯示到網(wǎng)頁上
網(wǎng)站標題title
網(wǎng)頁標題
在 HTML/XHTML 文檔中是必須的
link
鏈接外部樣式表间驮，參見20170809html學習(一)語法結構中css部分
style
定義內(nèi)部樣式表躬厌，參見20170809html學習(一)語法結構中css部分
meta
<meta> 標簽通常用于指定網(wǎng)頁的描述，關鍵詞竞帽，文件的最后修改時間扛施，作者，和其他元數(shù)據(jù)抢呆。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面）煮嫌，搜索引擎（關鍵詞），或其他Web服務抱虐。
例,指定作者昌阿，并3秒鐘刷新一次
<meta name="author" content="cndaqiang" >
<meta http-equiv="refresh" content="3">
<meta charset="utf-8"> 聲明UTF8編碼
<meta charset="gbk"> 聲明GBK 為默認編碼。
<base>,<script>, <noscript>未掌握
body
瀏覽器展示給用戶的部分
HTML標題<h1>...<h6>
標題隨數(shù)字增大恳邀，逐漸變小
<h1>第一個標題</h1>
<h2>第二個標題</h2>
水平線<hr>
例
段落<p>
html忽略html代碼中的回車懦冰，不會被“翻譯”為換行
多個空格只會輸出一個空格(畢竟是源代碼，對空格進行忽略再正常不過)
無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果谣沸。
當顯示頁面時刷钢，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格乳附。需要注意的是内地，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。
使用<p>...</p>確定一個段落
<p>一個段落</p>
段落 1
段落2
<p>二個段落</p>
效果
一個段落
段落 1 段落2
二個段落
換行br
例赋除，不換段落換行
<p>二個<br>段落</p>
文字格式化
字體格式
| 標簽 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標字 |
| <sup> | 定義上標字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
例
<b>粗體</b><em>著重</em><i>斜體</i><small>小號</small>
<strong>加重</strong><sub>下標</sub><sup>上標</sup>
<ins>插入</ins><del>刪除</del>
計算機輸出
| 標簽 | 描述 |
|---|---|
| <code> | 定義計算機代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計算機代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預格式文本 |
例
<code>code</code><br><kbd>kbd</kbd><br><samp>samp</samp><br>
<var>var</var><br><pre>pre</pre>
引用
| 標簽 | 描述 |
|---|---|
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockqu> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用阱缓、引證 |
| <dfn> | 定義一個定義項目 |
<abbr>abbr</abbr><br><address>address</address><br>
<bdo>bdo</bdo><br><blockqu>blockqu</blockqu><br><q>q</q><br>
<cite>cite</cite><br><dfn>dfn</dfn>
超鏈接<a>
<a href="url">鏈接文本</a>
請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.runoob.com/html"举农，就會向服務器產(chǎn)生兩次 HTTP 請求荆针。這是因為服務器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：href="http://www.runoob.com/html/"
圖像img
簡書編輯器發(fā)布時會自動把圖片代碼轉換成md語法航背，換圖
表格table
<table> 標簽定義 HTML 表格喉悴。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成玖媚。
| 標簽 | 功能 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
例
<table>
<tr>
<th>頭1</th><th>頭2</th>
</tr>
<tr>
<td>單元1</td><td>單元2</td>
</tr>
</table>
效果
注
- 可以沒有表頭th全是元素td箕肃，瀏覽器一般會把標頭th翻譯為加粗，如上圖
-
表格常用屬性 來自http://www.w3school.com.cn/index.html
- 根據(jù)屬性最盅，設置表格邊框
<table border="1"> - 表格內(nèi)嵌套圖片等當然沒問題
列表
列表定義
如 有序列表
- 一
- 二
- 三
無序列表
- 一
- 二
- 三
有序列表
<ol>
<li>一行</li>
<li>二行</li>
</ol>
無序列表ul
語法
<ul>
<li>一行</li>
<li>二行</li>
</ul>
自定義列表
就是沒有開頭的圓點和編號
dt比dd要縮進突雪，如
<dl>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
</dl>
效果如圖
列表項內(nèi)部可以嵌套段落、換行符涡贱、圖片咏删、鏈接以及其他列表等等。
區(qū)塊
大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）沽瞭。
實例: <h1>, <p>, <ul>, <table>,<div>
div
<div> 元素沒有特定的含義，它屬于塊級元素辰狡，瀏覽器會在其前后顯示折行。
與 CSS 一同使用垄分，<div> 元素可用于對大的內(nèi)容塊設置樣式屬性
<div> 元素的另一個常見的用途是文檔布局宛篇。它取代了使用表格定義布局的方法。
例
<div>
<div>
<h1>標題</h1>
</div>
<div style="float:left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div style="float:right">
<p>內(nèi)容</p>
<p>內(nèi)容</p>
</div>
</div>
效果
當然使用table也能實現(xiàn)相同效果薄湿，增加css定義叫倍，可以使網(wǎng)頁布局更順眼
學到這，就可以看好看網(wǎng)頁的css和布局了
框架
就是在網(wǎng)頁上顯示另一個html文檔豺瘤，注意僅是html文檔吆倦，如果url指向的是php或者其他類型不可以
語法
<iframe src="http://127.0.0.1/html/" ></iframe>
設置顯示大小
<iframe src="目錄" width="200" height="200"></iframe>
去除邊框
<iframe src="目錄" frameborder="0"></iframe>
標簽嵌套實例
圖片超鏈接
<a href="http://www.reibang.com/"><img src="http://upload-images.jianshu.io/upload_images/4575564-a6dd1dfc508d8f09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/></a>
屬性
屬性="屬性值"
href超鏈接
例
<a href="url">鏈接文本</a>
id標記
例
點擊超鏈接回到一個段落則跳轉到id為one的部分
<p id="one">一個段落</p>
省略
<a href="#one">回到一個段落</a>
跳轉到另一url內(nèi)的id
<a >
style
定義元素內(nèi)樣式表,用于css，
例20170809html學習(一)語法結構中css部分
更改字體的大小坐求，顏色蚕泽，等等各種標簽的不同屬性
以下未掌握
title
描述了元素的額外信息 (作為工具條使用)
target
class
為html元素定義一個或多個類名（classname）(類名從樣式文件引入)
