歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >
昨天了解計算機基礎知識后,小編今天帶大家學習前端三大腳手架之一的HTML,從常用程度上,HTML可以簡單的分為:基礎HTML、核心HTML。今天將學習基礎HTML(一),因為只有把地基打扎實了,才能建高樓。
前端教程之HTML(一)
前端教程之HTML(一)
首先,什么是HTML?書本上稱為HTML(Hyper Text Markup Language),超級文本標記語言,說白了就是編寫一個網頁的語言;可以想象因為要講話,所以我們學會了文字,同理,因為要編輯網頁,所以我們要學習HTML;HTML是有一系列標記組成,同時也具有自己獨特的語法。通過標記和語法組成后,最終會由瀏覽器負責解釋,瀏覽器中有兩大解析器,html渲染解析器,js解析器(這塊后續會提到)。
HTML的發展進程,從最開始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5;目前HTML已經更新到了HTML5了,HTML5給我們帶來了很多新玩意兒,后面會陸續把好東西分享給大家。
前端教程之HTML(一)
前端教程之HTML(一)
HTML5 質的發展
在今日學習之前,先分析一些開發工具,作為新手,不建議使用具有代碼提示補全的工具,建議使用EditPlus,記事本之類的工具,只有把代碼寫扎實了,再進階到高級工具。
下面進入HTML標簽的學習,也有叫標記的。
一、標簽語法
1、所有的標簽都必須使用尖括號擴起來,例如 <a>,<div> ... <A>,<a>
2、有封閉類型的標簽,也有非封閉類型的標簽
2.1、封閉類型,也稱作雙標記,則必須成對出現;語法規則: <標記>文本內容</標記>; 不同的標記,決定 了"文本內容"的不同表現形式;常見的封閉類型標記有:<a></a>,<p></p>,<div></div>
2.2、非封閉類型,也稱作單標記、空標記;語法規則: <標記>或者<標記/> 常見的非封閉類型標記有: <hr>,<br>,<img>
區別封閉類型和非封閉類型標簽,就看這標簽是一對出現的,還是單個出現的。
3、標簽嵌套
標簽之間可以相互嵌套,形成復雜的語法結構,簡單的例子如下:
<body>
<p>
<a></a>
</p>
</body>
4、標簽屬性,標簽屬性是指出現在開始標記中的內容,作用是修飾元素,如 <div 屬性名="屬性值"></div>
標準屬性:就是每個元素與生俱來就具備的通用屬性,常見的標準屬性有:
id :定義每個標簽的唯一標識
title:提示文本
class:樣式相關,類樣式
style:樣式相關,行內樣式
現在可以和小編一個編寫一個簡單的標簽,同時設置這個標簽的id屬性為myDIv。(屬性命名方式:駝峰命名,后續會分享給大家)
實戰:第一步:先定義一個標簽div,即<div></div>
第二步:添加id屬性,即<div id="myDIv"></div>
疑問:如果存在多個屬性值怎么辦?怎么添加屬性值是編碼規范的?
答:如果是多屬性的,那么直接在前一個屬性值后繼續編寫,不需要用“,”或者“;”分開,直接寫就對了!而且,多個屬性排名不分先后的,舉個栗子: <div id="myDiv" title="myTitle"></p>
二、文檔結構
1、文檔類型聲明:即聲明使用的HTML版本和風格,HTML5中使用聲明為: <!doctype html>
2、html頁面
2.1、文檔根元素,每個文檔有且僅有一對根元素 , html
2.2、在根元素的內部,包含兩對子元素;
2.2.1、head : 頁面的頭部內容,定義頁面全局信息 包含的內容有:
<title></title> ;網頁標題,就是網頁地址上面顯示的名稱;
<meta />:聲明元數據(編碼,關鍵字,描述),最重要的搜索引擎SEO主要是寫這部分;同時也可以定義一些網頁屬性,比如說,中文顯示 <meta charset="utf-8" />;
<style></style>:聲明內部樣式表,聲明當前網頁所用到的樣式,這種方式的樣式定義只能運用在當前頁面,其他頁面不能使用這里定義的樣式;
<link />:引入外部樣式表,引入外部定義好的樣式,只要是這個頁面想要用到某一個外部樣式表,就直接引入就可以用了,這種樣式表定義運用彌補上面<style></style>不能共享的缺陷,是的代碼達到了重用的優勢;
<script></script>:定義或引入腳本文件,主要是引入一些js腳本語言,完成這個頁面所需要的交互;
2.2.2、body : 頁面的主體內容,任何一個標簽,都可能會出現在body中;<body>也是標簽,它也可以定義自己的屬性,比如網頁背景有綠色,那么就是<body bgcolor="green"></body>;
前端教程之HTML(一)
前端教程之HTML(一)
3、文本標記
3.1、特殊的文本,除了正常文字外,在一些特定的情況下會需要有特別的標點符號等,小編舉例幾個常見的特殊符號的標記,如 空格對應的是“&nbsp;”、 <對應的是 “&lt;” 可以理解為less than 、> 對應的是 “&gt; ”理解為greater than、 版權標識對應的是 “&copy”,這里需要特別特別注意的一點是 每個特殊字符有需要“;”
3.2、文本標記
3.2.1、文本樣式
<b>...</b>: 加粗文本;
<i>...</i>:斜體文本;
<u>...</u>:下劃線;
<s>...</s>:刪除線;
<sup>...</sup>:上標;
<sub>...</sub>:下標;
3.2.2、標題元素, 1-6級6個標題 <hn></hn> n:1-6 其中一級是最大的, 六級是最小的;
3.2.3、段落元素,提供了結構化文本的表現方式, 語法:<p></p>, 注意:每對p標簽單獨成一個段落,常用屬性:
align:水平對齊方式 取值:left center right;
4、換行元素,在代碼的任何位置處,實現回車的效果 <br />,是非封閉類型標記;
5、水平線, 又叫分割線, <hr /> 也是非封閉類型標記,常用屬性;
5.1、size :水平線的粗細,通常以像素(px)為單位;
5.2、width:寬度;
5.3、align:水平線的水平對齊方式;
5.4、color:顏色;
6、分區元素目的:為元素進行分組,多數用在布局中;
塊分區元素:<div></div> ;
行內分區元素:<span></span>;
注意:
div :主要用在布局上;
span:修改其內部內容的樣式;
7、預格式化,保留源文檔中的空格和回車 <pre>文本內容 </pre>;
8、注釋
可以寫在html源碼中,但不被瀏覽器解釋的文本;
語法: <!-- 注釋內容 -->
!!!特別注意:行內元素與塊級元素
塊級元素:默認情況下,塊級元素獨占一行,元素的前后都會自動換行 div、hn、hr、p等 主要用于布局。
行內元素:默認情況,多個元素位于同一行,不會換行,span、文本標記... .主要行內元素作用:修改內部內容的樣式。
最后,小編建議多多打代碼!
預告:下一篇 前端教程之HTML(二)

如需轉載,請注明文章出處和來源網址:http://www.hjkjtws.com.cn/html/h58282.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.hjkjtws.com.cn DIVCSS5版權所有。

时时彩内部管理计划群 广西快三中奖规则 快速赛车预测 搜索广西新快3开奖结果 吉林11选5开奖视频 黑龙江6加1开奖结果查询 快乐8大小预测 山西快乐10分走势图下载 湖北11选5遗漏top10 免费精准资料期期精准 闲来麻将怎么下载 怎样打好麻将 宁夏体彩11选五开奖查询 3d开奖号码今晚的 深证成指 白姐一肖一特期期中 福建快3历史开奖号码