HTML語言

HTML語言

是標記語言巷帝,非編程語言昆婿,包含了HTML 標簽及文本內(nèi)容
html標簽通常是成對出現(xiàn)的菲饼,其中第一個標簽是開始標簽(開放標簽)吵护,第二個為結(jié)束標簽(閉合標簽)

html網(wǎng)頁結(jié)構(gòu)(body部分為網(wǎng)頁顯示)

----------------------------------

<html>
     <head>
         <title>頁面標題</title>
     </head>

     <body>
         <h1>標題</h1>
         <p>段落</p>
      </body>
</html>

----------------------------------

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁赡若。不區(qū)分大小寫
若輸出中文時亂碼 則應(yīng)在head部分加入<meta charset="UTF-8">

----------------------------------

<html>
     <head>
        <meta charset="UTF-8">
         <title>頁面標題</title>
     </head>

     <body>
         <h1>標題</h1>
         <p>段落</p>
      </body>
</html>

----------------------------------

段落 <p> </p>
連接 <a> <a href="URL"target="_blank">鏈接文本</a> href屬性指定鏈接地址target 可以定義被鏈接的文檔在何處顯示
圖像 <img> <img src="圖片" width="258" height="39" />

沒有內(nèi)容的 HTML元素被稱為空元素达布。空元素是在開始標簽中關(guān)閉的逾冬。
在開始標簽中添加斜杠黍聂,比如 <br />折行,是關(guān)閉空元素的正確方法.
當顯示頁面時身腻,瀏覽器會移除源代碼中多余的空格和空行产还。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是嘀趟,HTML 代碼中的所有連續(xù)的空行也被顯示為一個空格脐区。

屬性:

屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現(xiàn),比如:name="value"她按。
屬性值應(yīng)該始終被包括在引號內(nèi)坡椒。
在某些個別的情況下如屬性值本身就含有雙引號,那么必須使用單引號尤溜,例如:name='John "ShotGun" Nelson'

大多數(shù) HTML 元素的屬性:

class 為html元素定義一個或多個類名(classname)(類名從樣式文件引入)
id 定義元素的唯一id
style 規(guī)定元素的行內(nèi)樣式(inline style)
title 描述了元素的額外信息 (作為工具條使用)

HTML標題

HTML 標題是通過<h1> - <h6> </h1>-</h6>標簽來定義的.

<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>

HTML 標題 標簽只用于標題倔叼。不要僅僅是為了生成粗體或大號的文本而使用標題。

HTML水平線

<hr>標簽在 HTML 頁面中創(chuàng)建水平線宫莱。

HTML 注釋

<!-- 這是一個注釋 -->

折行

在不產(chǎn)生一個新段落的情況下進行換行丈攒,用<br />標簽

文本格式化

<b>定義粗體文本
<em>定義著重文字
<i>定義斜體字
<small>定義小號字
<strong>定義加重語氣
<sub>定義下標字
<sup>定義上標字
<ins>定義插入字
<del>定義刪除字

"計算機輸出" 標簽

這些標簽常用于顯示計算機/編程代碼。
<code>定義計算機代碼
<kbd>定義鍵盤碼
<samp>定義計算機代碼樣本
<var> 定義變量
<pre>定義預(yù)格式文本

HTML 引文, 引用, 及標簽定義

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>標題</title> 
</head>
<body>

<abbr title="etcetera">etc.</abbr>
<!-- abbr代表縮寫-->
<br />
<acronym title="World Wide Web">WWW</acronym>

<!-- acronym標記一個首字母縮寫-->

<p>在某些瀏覽器中授霸,當您把鼠標移至縮略詞語上時巡验,title 可用于展示表達的完整版本。僅對于 IE 5 中的 acronym 元素有效碘耳。</p>
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!--blockquote定義長的引用-->

<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效显设。</p>

</body>
</html>

HTML<head>

<head>元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS)辛辨,及各種meta信息
頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>

<title> 元素

<title>標簽定義了不同文檔的標題捕捂。

<title> 在 HTML/XHTML 文檔中是必須的瑟枫。

定義了瀏覽器工具欄的標題
當網(wǎng)頁添加到收藏夾時,顯示在收藏夾中的標題
顯示在搜索引擎結(jié)果頁面的標題
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title>
</head>
<base> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標指攒,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接

<link> 元素

<link>標簽定義了文檔與外部資源之間的關(guān)系慷妙。
<link> 標簽通常用于鏈接到樣式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<style> 元素

<style>標簽定義了HTML文檔的樣式文件引用地址也可以直接添加樣式來渲染 HTML 文檔

head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta> 元素

<meta> 標簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上,但會被瀏覽器解析允悦。
META 元素通常用于指定網(wǎng)頁的描述膝擂,關(guān)鍵詞,文件的最后修改時間隙弛,作者架馋,和其他元數(shù)據(jù)。

<script> 元素

<script>標簽用于加載腳本文件

HTML 樣式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="styles.css">
</style>
</head>

<body style="background-color:yellow">
<h1 style="background-color:red;">這是一個標題</h1>      <!--顯示為紅色背景并鏈接到一個外部樣式表-->
<p>這是一個段落全闷。</p>     <!--顯示為藍色并鏈接到一個外部樣式表-->
<a href="URL" style="text-decoration:none;">訪問鏈接</a>   <!--制作無下劃線的鏈接-->
</body>

</html>

font-family(字體)绩蜻,color(顏色),和font-size(字體大惺衣瘛)屬性來定義字體的樣式, text-align(文字對齊)屬性指定文本的水平與垂直對齊方式

<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>
<h1 style="text-align:center;">居中對齊的標題</h1>

HTML圖像

定義圖像的語法是:
<img src="url" alt="some_text"> src是指源屬性伊约,即圖像的URL地址姚淆。alt 屬性用來為圖像定義一串預(yù)備的可替換的文本(當無法加載圖片時,瀏覽器將顯示這個替代的文本而不是圖像)
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">高度和寬度默認單位為像素屡律,指定了高度和寬度腌逢,頁面加載時就會保留指定尺寸。
<area shape="circle" coords="90,58,3" alt="Sun" href="sun.htm">定義圖像地圖中的可點擊區(qū)域 coords為其橫縱坐標

HTML表格

表格由 <table>標簽來定義,每個表格均有若干行(由 <tr> 標簽定義,每行被分割為若干單元格(由 <td> 標簽定義),據(jù)單元格可以包含文本超埋、圖片搏讶、列表、段落霍殴、表單媒惕、水平線、表格等来庭。

如果不定義邊框?qū)傩远饰担砀駥⒉伙@示邊框

<table border="4">
    <caption>表表表</caption>
    <colgroup>
    <col span="1" style="background-color:red">
    <col style="background-color:yellow">
    </colgroup>
    <tr>
        <th>表頭1</th>
        <th>表頭2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

顯示為

<thead>定義表格頁眉 <tbody>定義表格主體 <tfoot>定義表格頁腳<caption>定義表格標題<colgroup>定義表格列的組 <col>定義列的屬性

HTML列表

HTML 支持有序、無序和定義列表
列表項內(nèi)部可以使用段落月弛、換行符肴盏、圖片、鏈接以及其他列表等等帽衙。

無序列表

此列項目使用粗體圓點(典型的小黑圓圈)進行標記菜皂,無序列表使用 <ul> 標簽,每個列表項始于<li>標簽

<ul>
<li>12315</li>
<li>321545</li>
</ul> 
有序列表

有序列表始于 <ol>標簽

自定義列表

自定義列表不僅僅是一列項目,而是項目及其注釋的組合厉萝。自定義列表以 <dl> 標簽開始恍飘。每個自定義列表項以 <dt> 開始榨崩。每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>RPC</dt>
<dd>- 學(xué)校</dd>
<dt>網(wǎng)安一班</dt>
<dd>- class</dd>
</dl> 

區(qū)塊

列表項內(nèi)部可以使用段落常侣、換行符蜡饵、圖片、鏈接以及其他列表等等胳施。塊級元素在瀏覽器顯示時溯祸,通常會以新行來開始和結(jié)束例: <h1>, <p>, <ul>, <table>。 內(nèi)聯(lián)元素在顯示時通常不會以新行開始例: <b>, <td>, <a>, <img>舞肆。

<div> 元素

無特定含義坐昙,是塊級元素,它可用于組合其他 HTML 元素的容器以及是文檔布局屡谐。由于它屬于塊級元素魂爪,瀏覽器會在其前后顯示折行。與 CSS 一同使用哩盲,可用于對大的內(nèi)容塊設(shè)置樣式屬性前方。

<span> 元素

無特定含義,是內(nèi)聯(lián)元素廉油,可用作文本的容器惠险,與 CSS 一同使用時,<span> 元素用于為部分文本設(shè)置樣式屬性抒线。

布局

大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來創(chuàng)建多列班巩。CSS 用于對元素進行定位,或者為頁面創(chuàng)建背景以及色彩豐富的外觀嘶炭。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>布局</title> 
</head>
<body>
 <div id="container" style="width:500px">
 <div id="header" style="background-color:blue;">
<h1 style="margin-bottom:0;">主標題</h1></div>
 <div id="menu" style="background-color:gray;height:200px;width:100px;float:left;">
<b>菜單</b><br>
123<br>
1234<br>
12345</div>
 
<div id="content" style="background-color:pink;height:200px;width:400px;float:right;">
31665131546</div>
 
<div id="footer" style="background-color:green;clear:both;text-align:center;">
qaqaqaq</div>
 
</div>
 
</body>
</html>
123154

HTML 表單和輸入

表單用于收集不同類型的用戶輸入
表單是一個包含表單元素的區(qū)域抱慌。
表單元素是允許用戶在表單中輸入內(nèi)容,比如:文本域(textarea)、下拉列表眨猎、單選框(radio-buttons)抑进、復(fù)選框(checkboxes)等。
表單使用表單標簽 <form> 來設(shè)置睡陪,多數(shù)情況用到表單標簽是輸入標簽<input>单匣,輸入類型是由類型屬性(type)定義

文本域

文本域通過<input type="text"> 標簽來設(shè)定,當用戶要在表單中鍵入字母宝穗、數(shù)字等內(nèi)容時户秤,就會用到文本域。表單本身并不可見逮矛。在大多數(shù)瀏覽器中鸡号,文本域的缺省寬度是20個字符。

First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form> 
密碼字段

密碼字段通過標簽<input type="password"> 來定義.密碼字段字符不會明文顯示须鼎,而是以*或·替代鲸伴。

<form>
Password: <input type="password" name="pwd">
</form> 
單選按鈕,復(fù)選框

<input type="radio">標簽定義了表單單選框選項,<input type="checkbox">定義了復(fù)選框,用戶需要從若干給定的選擇中選取一個或若干選項

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 
----------------
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form> 
提交按鈕

<input type="submit" value="提交">定義了提交按鈕.

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

HTML框架

通過使用框架府蔗,你可以在同一個瀏覽器窗口中顯示不止一個頁面。

iframe語法

<iframe src="URL"></iframe>該URL指向不同的網(wǎng)頁汞窗。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>定義iframe標簽的高度與寬度
<iframe src="demo_iframe.htm" frameborder="0"></iframe> frameborder 屬性用于定義iframe表示是否顯示邊框姓赤,將其屬性值設(shè)置為0,移除iframe的邊框

使用iframe顯示目標鏈接頁面
<iframe src="文件URL" name="11111"></iframe> 顯示框架
<p><a href="鏈接URL" target="11111">鏈接文本</a></p>

HTML顏色

HTML顏色是由一個十六進制符號來定義的仲吏,這個符號由紅色不铆,綠色和藍色的值組成(RGB)。
每種顏色的最小值是0(十六進制:#00)裹唆。最大值是255(十六進制:#FF)誓斥。
三種顏色混合而成的具體效果:


顏色值

通過十六進制設(shè)置背景顏色:
<p style="background-color:#FFFF00">
通過RBG值設(shè)置背景顏色:
<p style="background-color:rgb(255,255,0)">
通過顏色名設(shè)置背景顏色:
<p style="background-color:yellow">

顏色名:141個顏色名稱是在HTML和CSS顏色規(guī)范定義的(17標準顏色,再加124)许帐。17標準顏色:黑色劳坑,藍色,水成畦,紫紅色距芬,灰色,綠色循帐,石灰框仔,栗色,海軍惧浴,橄欖,橙奕剃,紫衷旅,紅,白纵朋,銀柿顶,藍綠色,黃色操软。

HTML 腳本

<script>標簽用于定義客戶端腳本嘁锯,比如 JavaScript。

<script> 元素既可包含腳本語句聂薪,也可通過src 屬性指向外部腳本文件家乘。

JavaScript`最常用于圖片操作、表單驗證以及內(nèi)容動態(tài)更新藏澳。

<noscript> 標簽提供無法使用腳本時的替代內(nèi)容仁锯,比方在瀏覽器禁用腳本時,或瀏覽器不支持客戶端腳本時翔悠。

<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素业崖。

只有在瀏覽器不支持腳本或者禁用腳本時野芒,才會顯示 <noscript> 元素中的內(nèi)容

<script>
document.write("Hello World!")
</script> 

<noscript>抱歉,你的瀏覽器不支持 JavaScript!</noscript>

HTML 字符實體

小于號(<):&lt; 或&#60; 或 &#060;
大于號(>): &gt
引號(“):&quot
乘號(×):&times
除號(÷): &divide

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末双炕,一起剝皮案震驚了整個濱河市狞悲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌妇斤,老刑警劉巖摇锋,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異趟济,居然都是意外死亡乱投,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門顷编,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戚炫,“玉大人,你說我怎么就攤上這事媳纬∷簦” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵钮惠,是天一觀的道長茅糜。 經(jīng)常有香客問我,道長素挽,這世上最難降的妖魔是什么蔑赘? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮预明,結(jié)果婚禮上缩赛,老公的妹妹穿的比我還像新娘。我一直安慰自己撰糠,他們只是感情好酥馍,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著阅酪,像睡著了一般旨袒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上术辐,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天砚尽,我揣著相機與錄音,去河邊找鬼辉词。 笑死尉辑,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的较屿。 我是一名探鬼主播隧魄,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼卓练,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了购啄?” 一聲冷哼從身側(cè)響起襟企,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎狮含,沒想到半個月后顽悼,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡几迄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年蔚龙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片映胁。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡木羹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出解孙,到底是詐尸還是另有隱情坑填,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布弛姜,位于F島的核電站脐瑰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏廷臼。R本人自食惡果不足惜苍在,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荠商。 院中可真熱鬧寂恬,春花似錦、人聲如沸结啼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽郊愧。三九已至,卻和暖如春井佑,著一層夾襖步出監(jiān)牢的瞬間属铁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工躬翁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留焦蘑,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓盒发,卻偏偏與公主長得像例嘱,于是被迫代替她去往敵國和親狡逢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案拼卵? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,743評論 1 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的奢浑,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,875評論 0 0
  • 前言 本系列文章主要是基于W3school這個學(xué)習(xí)網(wǎng)站來總結(jié)的腋腮,之所以會自己總結(jié)一番雀彼,一來是因為網(wǎng)站中的實例效果,...
    AR7_閱讀 4,044評論 4 70
  • HTML標簽解釋大全 一即寡、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評論 1 41
  • 我曾用心喜歡這一個人徊哑,整整六年,破罐子破摔聪富,表白后莺丑,像龍卷風(fēng)一樣吹過的愛情。他說善涨,他是一個糾結(jié)的個體窒盐,考慮事情需要...
    清風(fēng)陣陣閱讀 223評論 0 0