Day2 HTML基本标签元素
Day2?? HTML基本標簽元素
HTML: ?超文本標記語言(HyperText ? Mark-up? Language )
? 1.作用：寫網頁結構
? 2.HTML不區分大小寫，建議小寫
? 3.文件后綴 .html? 或者? .htm
? 4.html由瀏覽器解析執行.? 由上往下，由左往右
1) HTML標簽? 標記? :? 用于描述功能的符號稱為"標簽"
<..>? 組成HTML
雙標記? 封閉類型標記?? 如:<hn>,<p>
單標記? 非封閉類型標記? 空標記?? <img>,<br/>
2) HTML元素? : 從標簽開始到標簽結束的所有內容
<p>???????????? 這是一個段落???????? </p>
元素的開始??? 元素的內容?????? 元素的結束
某些HTML具有空內容,大多數HTML可擁有屬性.
3)HTML的屬性
語法：寫在開始標簽里面
屬性="屬性值"
一個標簽可以有多個屬性，用空格隔開，不區分前后順序
屬性和屬性的值之間用等號鏈接
屬性的值包含在引號當中
屬性總是以名稱/值對的形式出現
4)HTML注釋
語法：
<!-- 注釋的文本內容 -->????? 快捷鍵: Ctrl /
注釋不可以套在其他注釋中.
5) 標題標簽
h1-h6 (雙標記)
屬性：align="left|right|center"
6)段落標簽
p?? (雙標記)
屬性：align="left|right|center"
7)圖片標簽
img? (單標記)
屬性：<img src="" alt="" title=""/>
src? : 路徑
alt? ? :當圖片不能正常顯示，給予提示
title? : 鼠標懸停，給予提示給予提示
width;height: 圖片寬高設置一個值就行,另外一個值會跟著等比例縮放.
?????? width="160"?? heigh="160"?? (不用加px)
1.相對路徑 (網頁地址)
??? ( 同級,直接寫; ?
????? 下一級,先找復級"/" ;
????? 上一級,"../"? ;
????? 上兩級,"../../";
????? 多級如上)
? 2.絕對路徑
8)強制換行<br/>標簽:
單標記,沒有任何屬性????? eg:<br/>*50:換行50
9)水平線<hr/>標簽: (單標記)
默認整個網頁一樣寬的屬性;
???? <hr width="500" />?? 線的寬度?? 可取像素px和百分比 %
???? <hr sixe="200"/>???? 線的高度
???? <hr color="red"/>???? 線的顏色
???? <hr? align="left"/>?? 水平對齊方式,默認居中
10)超鏈接<a>標簽:
?? 屬性:
- ?herf : 鏈接URL路徑 ? ? ? ? ?? 相對路徑? eg:<a href="xxx.html">相對路徑</a>??? (本地路徑)
- ?target:打開窗口?? 目標(默認值_self;? 新窗口打開_blank,_parent,等)
- ?title?? :定義鼠標經過是提示信息
- ?name:錨點?? 同一個頁面做跳轉
? 1.點擊a? 跳轉到 a
? <a herf="#me">點我<a/>
?? <a herf=" " name="me">到我<a/>
2.點擊a跳轉到塊級元素
????? <a href="#me">點擊</a>
????? <p id="me">到我</p>
?? 包含英文? 數字 下劃線
?? 不能以數字開頭
? 補充:? <a herf="#">: 空鏈接? 回到網頁頂部
?
一.DOCTYPE 文檔類型聲明 (DTD文檔模型)
? 作用:告訴瀏覽器按照當前標準解析代碼
? 注意:不是HTML標簽?
3)<head lang="en">
?? en:英文,只是個聲明，聲明了它，對搜索引擎和瀏覽器更友好，并不會更改顯示內容??? ?
?? zh-CN:中文
4)title:定義文檔的標題???
一個網頁只能有一個標題,head里面一定要加title,寫與網頁相關的關鍵詞有利于SEO優化.
5)<meta charset="UTF-8"> ?
?? ?META標簽用來描述一個HTML網頁文檔的屬性，此處的charset=”utf-8”是說當前使用的是utf-8編碼格式，在開發中我們經常會看到utf-8，或是gbk，這些都是編碼格式。國外一般會用gbk、gb2312，國內通常使用utf-8。
6)<meta>:
? 元素可提供有關頁面的元信息（meta-information），用來向瀏覽器或搜索引擎描述頁面。比如文檔的描述和關鍵詞。它只可以放在head中。屬于元信息標簽。
?? ?常見的meta有
?? ? 1.Keywords(關鍵字) keywords用來告訴搜索引擎你網頁的關鍵字是什么。
?? ?<meta name="keywords" content="web前端,SulierZ的博客">
??? 2.description(網站內容描述)? description用來告訴搜索引擎你的網站主要內容。
??? ?<meta name="description" content="SulierZ的博客,web前端學習">
??? 3.author作者?? 標注網頁的作者
?? ?<meta name="author" content="root,root@xxxx.com">
? 二. 文本格式化標簽? (一般瀏覽器默認字體為16px)
<b></b>
<i></i>
<u></u>
<em><em/>? : 強調傾斜顯示
<strong></strong>:強調加粗顯示
<sub></sub>:?? 定義下標
<sup></sup>:?? 定義上標
<del></del>:?? 定義刪除字 同<s></s>
<ins></ins>:?? 定義插入內容
<pre></pre>:?? 被包圍在 pre 元素中的文本通常會保留空格和換行符
三.語義化標簽?? a?? address ? h1-h6??
? 也就是說我們看到a標簽，并不能從直觀意義上知道它是一個超鏈接，但是address，通過翻譯，也能明白這是定義聯系信息，這就是語義化的好處。它以斜體顯示。
四:列表標簽??? 網頁中排版作用
列表分為三類：一是無序列表<ul>，一是有序列表<ol>? ,還有自定義列表<dl> ,.(列表項目標記<li>)
- 無序列表<ul>:??? ul>li*5 包含嵌套
? <ul><li>的屬性type 定義項目符號?? UnorderList??? List? 塊級元素?? ?
????? disc???????? 實心圓(默認)
????? circle?????? 空心圓
????? square?????? 小方塊
????? none???????? 不顯示
- 有序列表<ol>: ?
? <ol><li>的屬性type 擁有的選項???? OrderList
?? ?1??? 表示列表項目用數字標號（1,2,3...）
?? ?a??? 表示列表項目用小寫字母標號（a,b,c...）
?? ?A?? 表示列表項目用大寫字母標號（A,B,C...）
?? ?i??? 表示列表項目用小寫羅馬數字標號（i,ii,iii...）
?? ?I??? 表示列表項目用大寫羅馬數字標號（I,II,III...）
start: 從第幾個開始 取值number 倒序:reversed
- 自定義列表<dl> :定義列表默認為兩個層次，
?? ??? ?第一層為列表項標簽<DT>(主題)，第二層為注釋項標簽<DD>(內容描述)
五:表格table ? (存儲數據,展示數據)
?? ?<tr>: 行
?? ?<td>: 列
?? ?<th>: 定義表格頁眉單元格(默認水平居中且加粗)
?? ?<caption>:定義表格標題
表格 table 屬性:
?? ?border:邊框? 默認沒有邊框 eg:border="1"
?? ?width:寬度
?? ?align:表格水平對齊方式?? 默認left??? align="center"
?? ?cellspacing: 單元格之間間距??? cellspacing="0"
?? ?cellpadding:內容距單元格距離??? cellpadding="20"
表格行 tr 屬性:
?? ?height
?? ?width:寬度
?? ?align:表格水平對齊方式?? 默認left??? align="center"
?? ?valign: 垂直對齊方式??? 默認middle,top,bottom
表格列 td 屬性:同tr
?? ?colspan: 設置單元格跨列 ?
?? ??? ? 水平合并,取值number? colspan="2" 水平合并3個單元格, ?
?? ?rowspan: 設置單元格跨行 ??? ?
?? ??? ? 垂直合并? rowspan="2"
六:HTML實體字符?? 當網頁中一些字符不能正常顯示時使用實體字符
?? ?空格:
?? ?<?? :<
?? ?>?? :>
?? ?&?? :&
?? ???? :©? (拼音打出"版權"即可)?? ?
七:內聯框架Iframe（Inner Frame:在body里面嵌套一個網頁)
?? ?屬性:
?? ?①width 可設置內聯框架的寬
?? ?②height 可設置內聯框架的高
?? ?③name 設置框架名稱?? ?
?? ?④src 設置頁面的路徑
?? ?⑤scrolling規定是否在 iframe 中顯示滾動條
（yes，no，默認auto[自動]）
?? ?⑥frameborder規定是否顯示框架周圍的邊框（1默認有邊框,0）
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的Day2 HTML基本标签元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQ实现情人节表白程序
- 下一篇： AngularJS（三）：重复HTML元