最近要用vue.js 順便回顧了一下上學(xué)那會(huì)學(xué)的html.
HTML基礎(chǔ)
頁面基本結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面名稱</title>
</head>
<body>
<p>Body標(biāo)簽是頁面的主體標(biāo)簽，所有的頁面內(nèi)容放到body標(biāo)簽里面。。。。。。。</p>
</body>
</html>
文本標(biāo)簽
html 元素必須以開設(shè)標(biāo)簽開始,以結(jié)束標(biāo)簽結(jié)束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
標(biāo)題標(biāo)簽
<h1>1級(jí)標(biāo)題標(biāo)簽，最大的標(biāo)簽</h1>
<h2>2級(jí)標(biāo)題標(biāo)簽</h2>
<h3>3級(jí)標(biāo)題標(biāo)簽</h3>
<h4>4級(jí)標(biāo)題標(biāo)簽</h4>
<h5>5級(jí)標(biāo)題標(biāo)簽</h5>
<h6>最小的標(biāo)題</h6>
段落標(biāo)簽
<p>段落</p>
文本標(biāo)簽
<span></span>
a 超文本引用(超鏈接標(biāo)簽)
<a href="" name='' title="" target="_blank">鏈接文字或圖片</a>
- href為鏈接地址
- name頁面錨命名（也可以用id來代替）
- target新打開位置
"_blank" 在新頁面打開
"_self" 在當(dāng)前頁面(默認(rèn))
<a>超鏈接</a>
<a href="www.baidu.com"></a>
<a target="_blank"></a>
<a name="tips"></a> 命名錨鏈接
<a href="#tips"></a>指向錨鏈接
br 折行(換行)
<br />
hr 水平線 (一行橫線,相當(dāng)于分割線)
<hr />
列表結(jié)構(gòu)
ul 無序列表，默認(rèn)列表前面有小黑點(diǎn)標(biāo)記
<ul>
<li></li>
</ul>
ol 有序列表
<ol>
<li></li>
</ol>
dl 自定義列表
ul和dl均為塊級(jí)元素
無序列表和有序列表樣式顯示均可以通過設(shè)置list-style-type的值來更改顯示。
none(無樣式)
circle（圓圈）
disc(實(shí)心圓)
decimal(數(shù)字)
square(實(shí)心方塊)
<dl>
<dt>
<dd></dd>
</dt>
</dl>
例1
<div class="unordered-list">
<ul>
<li>文字文字文字</li>
<li>文字文字文字</li>
<li>文字文字文字</li>
</ul>
</div>
<style>
.unordered-list {
padding:20px;
}
</style>
例2
<div class="ordered-list">
<ol>
<li>000</li>
<li>000</li>
<li>000</li>
</ol>
</div>
<style>
.ordered-list {
padding:20px;
}
</style>
例3
<div class="custom-list">
<dl>
<dt>dt一般是引導(dǎo)文字或者是標(biāo)題</dt>
<dd>dd一般解釋性文字....</dd>
</dl>
</div>
<style>
.custom-list {
padding:20px;
}
</style>
插入圖像
img 標(biāo)簽
圖片引用地址可以是相對(duì)地址也可以是絕對(duì)地址,alt屬性一般為圖片加載異常時(shí)的顯示文字，title屬性是鼠標(biāo)移動(dòng)上時(shí)的顯示文字
<img src=”圖片引用地址” width=’定義圖片顯示寬度’ height=’定義圖片顯示高度’ alt=’’ title=’’/>
文本格式化標(biāo)簽
<b>加粗</b>
<big>大號(hào)字</big>
<em>著重</em>
<i>斜體</i>
<small>小號(hào)字</small>
<strong>加重</strong>
<sub>下標(biāo)</sub>
<sup>上標(biāo)</sup>
<del>刪除</del>
顯示效果：
input 表單元素
<input type="">
type類型有：text常規(guī)文本, radio單選按鈕,checkbox復(fù)選框，submit提交按鈕，password密碼,date日期選擇器，month年月選擇器，color顏色選擇器，range滑動(dòng)，email電子郵件,url包含url的輸入字段，除text，radio，checkbox,submit外，其他需要在較新版本下才能兼容，一般在手機(jī)端頁面兼容比較好，用戶體驗(yàn)也會(huì)比較高。
select 下拉列表
<select name="" id="">
<option value="11">11</option>
<option value="22">22</option>
</select>
按鈕
定義點(diǎn)擊按鈕
<button type=’button’>點(diǎn)擊按鈕</button>
html5 語義標(biāo)簽
在布局頁面的時(shí)候，可根據(jù)頁面整體布局直接使用語義標(biāo)簽進(jìn)行相關(guān)布局
- header 頁眉
- nav 導(dǎo)航菜單
- footer 頁腳
- section 元素塊,定義文檔中的節(jié)
- aside 定義內(nèi)容之外的內(nèi)容，如:側(cè)欄
- article 定義獨(dú)立的自包含文章
- details 定義額外的細(xì)節(jié)
- summary 定義details元素的標(biāo)題
可直接對(duì)語義標(biāo)簽進(jìn)行css 樣式定義，如：
<header>HEADER</header>
<style>
header {
width: 100%;
height: 200px;
background-color: red;
text-align: center;
font-size: 50px;
font-weight: 600;
line-height: 200px;
}
</style>
表格的使用
屬性：
- border邊框，
- cellpadding單元格間的距離，
- cellspacing單元格邊框與邊框之間的距離，最好不要通過屬性來設(shè)置表格的顯示樣式
<table width='' border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
表格的樣式定義可以通過屬性，但最好通過css來定義，如：
<style>
table {
border-spacing:0;
border-collapse: collapse;
border:1;
border-color: red;
}
</style>
css在頁面<head>標(biāo)簽中的被引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
css常用樣式定義
- margin 外邊距,
- padding 內(nèi)邊距,
- width 寬度,
- height 高度,
- border 邊框,
- background 背景,
- font 字體,
- color 顏色,
- text-align 對(duì)齊方式,
- text-shadow 文本陰影，
- box-shadow 塊陰影，
- float 浮動(dòng)，
- position 定位
- 。。。。。
