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>
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 字符實體
小于號(<):<
; 或<
; 或 <
;
大于號(>): >
引號(“):"
乘號(×):×
除號(÷): ÷