Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
例
被標記的縮寫詞如下:
The<abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.
瀏覽器支持
所有主流瀏覽器都支持 <abbr> 標簽。
注釋:IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標簽。
標簽定義及使用說明
<abbr> 標簽用來表示一個縮寫詞或者首字母縮略詞,如"WWW"或者"NATO"。
通過對縮寫詞語進行標記,您就能夠為瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。
提示和注釋
提示:在某些瀏覽器中,當您把鼠標移至帶有 <abbr> 標簽的縮寫詞/首字母縮略詞上時,<abbr> 標簽的 title 屬性可被用來展示縮寫詞/首字母縮略詞的完整版本。
HTML 4.01 與 HTML5之間的差異
無。
全局屬性
<abbr> 標簽支持 HTML 的全局屬性。
事件屬性
<abbr> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
/一、html
//a、HTML語法規范
//a.1基本語法概述
1、HTML標簽是由尖括號包圍的關鍵字,例如,
2、HTML標簽通常是成對出現的,例如和,我們成為雙標簽,標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽。
3、有些特殊的標簽是單個標簽(極少情況),例如
,我們稱為單標簽
//a.2標簽關系
雙標簽關系可以分為兩類:包含關系和并列關系。
//b、HTML基本結構標簽
//b.1第一個HTML網頁
每個網頁都會有一個基本的結構標簽(也稱為骨架標簽),頁面內容也是在這些基本標簽上寫的。
HTML頁面也稱為HTML文檔
標簽名 | 定義 | 說明 |
<html></html> | HTML標簽 | 頁面中最大的標簽,我們稱為根標簽 |
<head></head> | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
<title></title> | 文檔的標題 | 讓頁面擁有一個屬于自己的網頁標題 |
<body></body> | 文檔的主體 | 元素包含文檔的所有內容,頁面內容,基本都是放到body里面的 |
必須是.html或.htm,瀏覽器的作用是讀取HTML文檔,并以網頁的形式顯示出它們。
此時,用瀏覽器打開這個網頁,我們就可以預覽我們寫的第一個HTML文件了。
//c、開發工具vscode
1、<!DOCTYPE>標簽
文檔類型聲明,作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁
<!DOCTYPE html>這句代碼的意思是:當前頁面采用的是HTML5來顯示頁面。
2、lang語言
用來定義當前文檔顯示的語言:
a、en定義語言為英語
b、zh-CN定義語言為中文
簡單來說定義為en就是英文網頁,定義為zh-CN就是中文網頁
其實對于文檔顯示來說,定義成en的文檔也可以顯示中文,定義zh-CN的文檔也可以顯示英文
這個屬性對于瀏覽器和搜索引擎(百度、谷歌等)還是有作用的
3、charset字符集
字符集是多個字符的集合,以便計算機能夠識別和存儲各種文字
在標簽內,通過標簽的charset屬性來規定HTML文檔應該使用哪種字符編碼。
charset常用的值:GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼,基本包含了全世界所有國家需要用到的字符。
注意:上面語法是必須寫的代碼,否則可能引起亂碼的情況,一般情況下,統一使用"UTF-8"編碼,盡量統一寫成標準的"UTF-8",不要寫成"utf-8"或"UTF8"。
//d、HTML常用標簽
//d.1標簽語義
學習標簽是有技巧的,重點是記住每個標簽的語義,簡單理解就是指標簽的含義,即這個標簽是用來干嘛的
根據標簽的語義,在合適的地方給一個最為合理的標簽,可以讓頁面結構更清晰。
//d.2標題標簽
-
(重要)
為了使網頁更具有語義,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的網頁標題集
-
特點:
1、加了標題的文字會變得更加粗,字號也會依次變大。
2、一個標題獨占一行。
//d.3段落和換行標簽(重要)
在網頁中,要把文字有條理地顯示出來,就需要將這些文字分段顯示,在HTML標簽中,
標簽用于定義段落,它可以將整個網頁分為若干段落。
<p>我是一個段落標簽</p>標簽語義:可以把HTML文檔分割為若干段落。
特點:
1、文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2、段落和段落之間保有一個較大的空隙。
在HTML中,一個段落中的文字從左到右依次排列,直到瀏覽器的右端,然后自動換行,如果希望某段文本強制換行顯示,就需要使用換行標簽
<br />
單詞break的縮寫,意為打斷,換行。
特點:
1、單標簽
2、
標簽只是簡單地開始新的一行,跟段落不一樣,段落之間會插入一些垂直的間距。
//d.4文本格式標簽
在網頁中,有時需要為文字設置粗體,斜體或下劃線等效果,這時就需要用到HTML中的文本格式標簽,使文字以特殊的方式顯示
標簽語義:突出重要性,比普通文字更重要。
語義 | 標簽 | 說明 |
加粗 | <strong></strong>或者<b></b> | 更推薦使用<strong></strong>標簽加粗,語義更強烈 |
傾斜 | <em><em> 或者<i><i> | 更加推薦使用<em><em>標簽,語義更加強烈 |
刪除線 | <del><del>或者<s><s> | 更加推薦使用<del><del>標簽,語義更加強烈 |
下劃線 | <ins><ins>或者<u><u> | 更加推薦<ins><ins>標簽,語義更加強烈 |
//d.5<div>和<span>標簽
<div>和<span>是沒有語義的,它們就是一個盒子,用來裝內容。
<div>這是頭部</div>
<span>今日價格</span>
div是division的縮寫,表示分割,分區,span意為跨度,跨距。
特點:
1、<div>標簽用來布局,但是現在一行只能放一個<div>,大盒子。
2、<span>標簽用來布局,一行上可以有多個<span>,小盒子
//d.6圖像標簽和路徑(重點)
1、圖像標簽
在HTML標簽中,<img>標簽用于定義HTML頁面中的圖像。
<img src="圖像url"/>
單詞image的縮寫,意為圖像
src是<img>標簽的必須屬性,它用于指定圖像文件的路徑和文件名。
所謂屬性:簡單理解就是屬于這個圖像標簽的特性。
圖像標簽的其他屬性:
屬性 | 屬性值 | 說明 |
src | 圖片路徑 | 必須屬性 |
alt | 文本 | 替換文本,圖像不能顯示的文字 |
title | 文本 | 提示文本,鼠標放到圖像上,顯示文字 |
width | 像素 | 設置圖像的寬度 |
height | 像素 | 設置圖像的高度 |
border | 像素 | 設置圖像的邊框粗細 |
本文,有很多很棘手的問題,例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁,可以群(526929231)使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用!很好用!很好用! SublimeText、Webstorm推薦這兩個編輯器
剛開始設計HTML語言是為了將文字圖像關聯在一起,用另一臺發送或接收
HTML 不是一種編程語言,而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)
標簽是由尖括號 < > 把關鍵詞括起來,標簽通常是成對出現的
讀取 HTML 文檔,使用標簽來解析頁面的內容,以網頁的形式現實,瀏覽器不會現實HTML標簽
每種瀏覽器都有自己的內核(引擎)(解析網頁的一個程序,io以什么方式去渲染它都要通過引擎去執行)
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 (Webkit內核,V8 js引擎)
Firefox火狐瀏覽器 (Gecko內核)
Internet Explorer IE瀏覽器( Trident內核)
Opera 歐朋瀏覽器 (Presto內核) 主要市場:移動端
Safari 蘋果瀏覽器 (Webkit內核,但JS引擎為Nitro)
不需要去記,簡單了解下
標簽必須閉合
所有標簽名一律小寫
代碼縮進,使閱讀代碼更加易懂
特殊符號規范使用
命名規范,見名之意
PS: 所有的標記符號都是半角英文
眾說紛紜編輯器太多,最終只是一個工具,希望同學們能從萬千世界中找到適合自己的編輯器伙伴
編輯器 | 描述 |
---|---|
EditPlus | 手寫模式,適合初學手寫,無代碼提示(有IE調試視圖) |
Sublime | 插件特別多,占用內存小,啟動速度快,打開大項目較慢,管理文件方式有些缺陷 |
webstorm | 集成插件特別多,啟動較慢,占用內存大,開發和管理視圖都很方便 |
Dreamweaver | 適合初學,主要代碼提示和代碼插入功能強大,主要偏向于設計(有設計視圖) |
插件名 | 描述 | 詳情請戳 |
---|---|---|
emmet | 前端自動補全,提供快捷補全方式 | |
ColorPicker | 調色板,顏色選擇器 | |
SublimeTmpl | sublime模板,可以快速創建一個HTML模板 | |
view in browser | 用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁) | |
LiveReload | 實時刷新HTML(編輯器里按下保存ctrl+s的時候,已經打開的HTMl會自動刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
Color Highlighter | CSS顏色代碼高亮及顏色預覽提示 | |
CSS3 | CSS3的代碼高亮提示 | 還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ... 的高亮 |
JavaScript Completions | 原生js 代碼提示 | |
Sublime-Better-Completion | 可自選開啟代碼提示,支持jQ、js、bootstrap、php、sql ... | 倉庫地址此插件只能通過Github克隆下載安裝安裝方法 |
注:Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法,還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~
配置 | 描述 |
---|---|
!DOCTYPE html | 不是標簽,主要用于文檔類型的聲明 |
charset="utf-8" | 聲明字符編碼集 |
http-equiv="Content-Type" | 把Content屬性關聯到HTTP頭部(協議頭) |
HTML模板
簡單了解,并不需要熟練掌握
Dom節點樹
.html .htm這兩種是比較常見的
在早期系統中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm
現在通常使用.html作為擴展名
接下來所有的標簽元素學習都在body標簽里面去敲打實現、
為了突出標題,字體大小和加粗發生相應的改變
<h1>我是大主題</h1> <h2>我是大主題</h2> <h3>我是大主題</h3> <h4>我是大主題</h4> <h5>我是大主題</h5> <h6>我是大主題</h6>
<!doctype html><!-- 讓瀏覽器使用html5的標準解析 --> <html> <head> <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎,關鍵詞,多個請用逗號分開" /> <meta name="description" content="網頁描述,八十字內" /> <title>瀏覽器標簽頁上的網頁標題</title> </head> <body> <!-- 所有的標簽學習都在這body里面去敲,上面head元素里面的內容做個了解就可以了 --> <h1>我是大標題</h1> <h2>我是主題2</h2> <h3>我是主題3</h3> <h4>我是主題4</h4> <h5>我是主題5</h5> <h6>我是主題6</h6> </body> </html>
可以發現h標簽從h1到h6會隨著數值越小字越小,并且都是會加粗和各占一行的狀態(前后的元素都會被換行)
h1標簽一般一個頁面里面只會寫一次,為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優化)
<p> 冬著一身素衣,緩緩而來,季節沒有了往日的姹紫嫣紅,卻用簡單的線條,勾勒出一幅潔白的畫,純潔通透,輕盈自然。 </p>
剛我們了解到了瀏覽器是識別尖括號的,如果要在頁面中顯示html標記那要怎么做呢?這時候就需要特殊符號的表示來顯示
符號 | 描述 |
---|---|
空格 | |
小于 | < |
大于 | > |
引號 | " |
版權 | © |
×叉 | × |
& | & |
符號 | 描述 |
---|---|
B標簽 | 物理加粗,頁面呈現加粗狀態. |
Strong標簽 | 不僅能加粗,還利于搜索引擎優化 |
<b>物理加粗,頁面呈現加粗狀態.</b> <strong>不僅能加粗,還利于搜索引擎優化,就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優化顯示網頁的排名</strong>
可以根據word文檔上面發現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個頁面,點擊則會跳轉這個鏈接頁面
使用錨點滾動到設定的位置
<a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面 <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部) <a href="javascript: void(0);"></a> 死鏈接,不會跳轉,一般用于js特效 <a href="#name">錨點到一個標簽上所對應的ID名字,點擊則跳到那個標簽位置</a> <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協議不能少
點擊#flag的a標簽的時候會跳到到上面h2標簽
只有擁有name屬性的
a標簽
才能錨點,還有一種方式是通過ID標識唯一元素,也可以跳轉(不僅僅是a標簽)
描述 | 標簽 |
---|---|
滾動標簽 | marquee |
字體標簽 | font |
定義水平線 | hr |
marquee
屬性 | 描述 |
---|---|
direction | 滾動方向 |
behivior | 行為 |
behivior
值 | 描述 |
---|---|
alternate | 交替滾動 |
scroll | 滾動 |
slide | 滑落 |
屬性 | 描述 |
---|---|
color | 顏色 |
size | 0-7 |
face | 字體 |
與font相似,擁有color和size屬性
hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標簽,不加也能夠正確顯示,但是養成一個良好的習慣確實重要,比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、
結合今天所學,寫一個簡單的網頁
內容如下:
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫,網上一大把哈哈,可以自己寫下,鍛煉下思維
需要包括h、p、a、加粗
題材不限,至少200字
在習題一的文章底部,使用滾動標簽進行滾動方向為45°
*請認真填寫需求信息,我們會在24小時內與您取得聯系。