Day2 HTML基本標籤元素

時間 2019-12-04

標籤 day2 day html 基本標籤元素欄目 HTML 简体版

原文原文鏈接

　　　　　　　　　　　　　　　　Day2 HTML基本標籤元素html

HTML: 超文本標記語言(HyperText Mark-up Language ) 前端

　　1.做用：寫網頁結構
　　 2.HTML不區分大小寫，建議小寫
　　 3.文件後綴 .html 或者 .htm
　　 4.html由瀏覽器解析執行. 由上往下，由左往右web

1) HTML標籤標記 : 用於描述功能的符號稱爲"標籤"瀏覽器

<..> 組成HTML
雙標記封閉類型標記如:<hn>,
單標記非封閉類型標記空標記 <img>, 框架

2) HTML元素 : 從標籤開始到標籤結束的全部內容
 這是一個段落 
元素的開始元素的內容元素的結束學習

某些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)強制換行 標籤:

單標記,沒有任何屬性 eg: *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

2.點擊a跳轉到塊級元素
 <a href="#me">點擊</a>
 到我
 包含英文數字下劃線
 不能以數字開頭

補充: <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)



 : 強調傾斜顯示
:強調加粗顯示
: 定義下標
: 定義上標
<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）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。