- 什么是html
html 是超文本標(biāo)記語言困介，(Hyper Text Markup Language)
.html文件中包含，純文本 和 標(biāo)簽
2.基本框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁顯示標(biāo)題</title>
</head>
<body>
<h1>我是標(biāo)題</h1>
<p>我是段落</p>
</body>
</html>
* 注意：meta設(shè)置的字符集就是保存.html文件是使用的字符集
例如
| 標(biāo)簽 | 描述 |
|---|---|
| <html> | 之間描述整個網(wǎng)頁 |
| <head> | 之間描述整個網(wǎng)頁的一些設(shè)置 |
| <body> | 之間是整個網(wǎng)頁的可見內(nèi)容 |
| <h1>~<h6> | 之間是標(biāo)題 |
| <p> | 之間是段落 |
-
HTML屬性
屬性就是可以給HTML標(biāo)簽提供更多的信息垛孔。
格式： name="value"
例如：a標(biāo)簽的 href屬性
<a >This is a link</a>
下面列出大多數(shù)HTML標(biāo)簽都有的屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| class | classname | 給元素取一個類名 |
| ID | id值 | 給元素一個唯一的id值 |
| title | 文本 | 給元素一個額外的信息 |
| style | 樣式設(shè)置 | 設(shè)置元素的行內(nèi)樣式 |
-
HTML元素
1. 什么是標(biāo)簽
開始標(biāo)簽 <>
結(jié)束標(biāo)簽 </>
- 標(biāo)題標(biāo)簽
<h1> - <h6>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
This is a heading
This is a heading
This is a heading
- 分割線標(biāo)簽
<hr>
或者
<hr />
- 換行
<br>
或者
<br />
- 注釋
<!-- 這是注釋 -->
- 段落
<p>這是一個段落</p>
- 文本的格式化
| 標(biāo)簽 | 描述 |
|---|---|
| b / strong | 加粗 / 強調(diào)(建議使用后者) |
| i / em | 斜體 / 強調(diào) |
| big/small | 大號字/小號字 |
| sub/sup | 文本下標(biāo)上標(biāo) |
| del | 定義刪除字 |
- 鏈接
<a> xxx
<a title="這是一個超鏈接">xxx</a>
----------------------------------------
href: url
xxx: 顯示給用戶的信息
title: 鼠標(biāo)放在xxx上的提示信息
target: 點擊后的顯示方式
_blank: 新的選項卡中打開
_self: 在當(dāng)前選項卡中打開
-
圖像
<img>
</img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" alt="沒有找到圖片"></img>
------------------------------------
src: 要顯示圖像的地址(網(wǎng)絡(luò)地址/本地地址)
alt: 當(dāng)圖像沒有找到時顯示給用戶的提示信息
- 列表(list)
- 無序列表(ul)
- 有序列表(ol)
- 定義列表(dl)
<!-- ol:order list-->
<!-- type 列表排序的類型共五種：默認(rèn)阿拉伯?dāng)?shù)字，“a”小寫字母位他，"A"大寫字母柬帕，"I"大寫羅馬數(shù)字排序，"i"小寫羅馬數(shù)字排序-->
<!-- start 排序的其實位置如果type="a" start="5" 那么從字母e開始-->
<!-- reversed="true" 倒序排列-->
--------------------------------------------------------------------
<ol type="I" start="5" reversed="true">
<li>第一步：清洗面部</li>
<li>第二部：涂爽膚水</li>
<li>第三部：涂乳液</li>
<li>第四部：涂防曬</li>
<ol >
<li>先涂粉底再涂防曬</li>
<li>先涂防曬再涂粉底</li>
</ol>
</ol>
<!-- 無序列表 unorder list 默認(rèn)列表項前是小圓點-->
<li>cpb粉底</li>
<li>雪花秀氣墊BB</li>
<li>iope氣墊BB</li>
<!-- 定義列表：表達(dá)對名詞或概念的解釋或者描述-->
<dl>
<dt>cpb</dt>
<dd>日本高端護膚品品牌</dd>
<dt>雪花秀</dt>
<dd>韓國中高端護膚品品牌</dd>
</dl>
效果
- 表格(table)
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
效果
注意:
相關(guān)標(biāo)簽含義
| 表格標(biāo)簽 | 含義 | 相關(guān)屬性 |
|---|---|---|
| table | 整個表格框架 | border,cellpadding,cellspacing |
| tr | 代表一代 | align,valign |
| td | 代表一個單元格 | align,valign,colspan,rowspan |
| th | 代表一個單元格中的數(shù)據(jù)為表頭（加粗加黑顯示） | align,valign,colspan,rowspan |
| caption | 代表表格的標(biāo)題 | align |
- 容器標(biāo)簽
- <div>
塊級容器 - <span>
行內(nèi)容器
- 聲音
<audio src="someaudio.wav">
您的瀏覽器不支持 audio 標(biāo)簽铅搓。
</audio>
- 屬性是html5中的新屬性
src: 音頻源文件
autoplay: 自動播放
controls: 顯示控制條
loop:循環(huán)播放
- 視頻
<video src="movie.ogg" controls="controls">
您的瀏覽器不支持 video 標(biāo)簽瑟押。
</video>
- 屬性是html5中的新屬性
src: 音頻源文件
autoplay: 自動播放
controls: 顯示控制條
loop:循環(huán)播放
height: 高度
width: 寬度
2. 什么是元素
元素 就是指從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。
分為：塊級元素星掰、行內(nèi)元素多望、行內(nèi)塊級元素
區(qū)別：
- 塊級元素 獨占一行，可以設(shè)置寬高
- 行內(nèi)元素 不獨占一行蹋偏，不能設(shè)置寬高
- 行內(nèi)塊級 不獨占一行，但可以設(shè)置寬高
-
塊級元素
代表：div p h table ul
-
行內(nèi)元素
代表：apan a
-
行內(nèi)塊級元素
代表：img
三類元素可以相互轉(zhuǎn)換至壤，CSS中使用
display:
block
inline
inline-block
