Web前端三剑客之HTML基础
文章目錄
- 常識簡介
- HTML元素
- 語法
- HTML文檔規范
- 頁面頭部元素
- 元信息元素
- 設定網頁關鍵字：
- 設定網頁描述信息：
- 設置網頁字符集:
- 設定網頁自動刷新：
- 切記：
- 頁面主體元素
- 設置網頁文字和背景顏色
- 添加網頁背景圖片
- 文字與段落
- 更改字體
- 文字與段落元素
- 段落元素
- 預格式化元素
- 列表與表格元素
- 表格
- 未跨多列的表格：
- 劃線后：
- 跨多列的表格：
- 字體屬性好像對于下列標簽沒用:
- 跨多行的表格：
- 圖片與滾動元素
- 圖片
- 滾動元素
- 超鏈接元素
- 超鏈接元素
- 錨（書簽）鏈接
- 表單對象
- 表單標簽
- 表單元素
- 文本框基本語法
- 密碼框基本語法
- 單選按鈕基本語法
- 復選框基本語法
- 下拉列表
- 下拉列表1
- 下拉列表2
- 按鈕基本語法
- 多行文本框基本語法
- 隱藏域
- 文件域file
- 分組
常識簡介
HTML是Hypertext Markup Language的縮寫，中文編譯為超文本標記語言。
超文本是指信息節點（即Web頁面）通過超鏈接構成的具有一定邏輯結構和語義的網絡
HTML定義了一套標記標簽，并使用標記便簽來描述網頁，由標簽及文本內容組成的文檔叫HTML文檔，也叫Web頁面
HTML元素
HTML標簽又稱為HTML元素
HTML元素是由尖括號包圍的關鍵詞，通常成對出現，例如<body>和</body>
以下順序是從圖左往圖右：
藍顏色的也就是head元素(head title meta base link style noscript script)
黃顏色的也就是行內元素
棕色的也就是Web頁面的快捷元素
綠顏色的也就是表單元素
淺藍顏色也就是主體元素body，標題元素
白顏色的是html5新增加的
最右邊的棕色是和表單相關的元素
語法
HTML屬性元素可以給元素添加附加信息，屬性包括屬性名和屬性值兩部分
<p id="desc" class="red"></p> <img src="bg.jpg"></img>屬性值可以用雙引號，單引號包含起來，也可以不加引號
顏色值由十六進制來表示紅( R) 綠(G) 藍(B)，每個顏色的最低值為0（十六進制為00），最高值為255（十六進制為FF）
HTML文檔規范
頁面頭部元素
頁面頭部元素由<head></head>所包含的部分，可設置網頁的標題，字符集，關鍵字，描述信息等
常用頭部元素：
| title | 設定顯示瀏覽器標題欄中的內容 |
| meta | 設定網頁的字符集，關鍵字，描述信息等內容 |
| style | 設置CSS層疊樣式表 的內容 |
| link | 設置對外部CSS文件的鏈接 |
| script | 設置頁面腳本或鏈接外部腳本文件 |
元信息元素
元信息元素<meta>:用于定義網頁的字符集，關鍵字以及網頁內容的描述
| http-equiv | 以鍵/值對的形式設置一個HTTP標題信息 |
| name | 以鍵/值對的形式設置頁面描述信息 |
| content | 設置http-equiv或name屬性所設置項目對應的值 |
設定網頁關鍵字：
<meta name="keywords" content="Web前端技術，網頁設計與制作，HTML">
設定網頁描述信息：
<meta name="description" content="Web前端技術教程——書主要介紹前端開發相關技術">
設置網頁字符集:
<meta http-equiv="content-type" content="text/html;charset=gb18030">
設定網頁自動刷新：
<meta http-equiv="refresh" content="5">
設定網頁自動跳轉：<meta http-equiv="refresh" content="3;url=http://www.baidu.com“>
切記：
千萬別寫成:content="3”;url=“http://www.baidu.com“（這樣的話并不會跳轉）
頁面主體元素
使用body元素，可以設置頁面背景，文字顏色等頁面屬性
設置網頁文字和背景顏色
<body bgcolor="#336699" text="white">
添加網頁背景圖片
<body background="images/bg.jpg" bgproperties="fixed"><!DOCTYPE html> <html><head><meta http-equiv="refresh" content="3;url=https://www.baidu.com" charset="utf-8"><title></title></head><body background="05.jpg" bgproperties="fixed" ><p>該網頁三秒后自動跳轉到百度</p></body> </html>
文字與段落
網頁中的文字可分為普通文字，空格，特殊文字和注釋語句
如何在網頁中輸入空格，大于，小于等特殊符號
常用特殊符號及其字符實體:
| " | " |
| & | & |
| < | < |
| > | > |
| . | · |
| ? | © |
| ? | ® |
更改字體
默認情況下，中文網頁中的文字是以黑色，宋體，3號字的效果來顯示，如果希望改變默認的文字顯示效果，可使用<font face="隸書,宋體,黑體" size="4" color="#ffcc00">字體元素</font>
使用文字修飾元素，可以設置字體格式，如粗體，斜體，顯示下劃線等。
| <b>……</b>，<strong>……</strong> | 設置粗體格式 |
| <i>……</i>，<em>……</em> | 設置斜體格式 |
| <sup>……</sup> | 設置上標 |
| <sub>……</sub> | 設置下標 |
| <big>……</big> | 設置大號字體 |
| <small>……</small> | 設置小號字體 |
| <u>……</u> | 設置下劃線 |
| <s>……</s>，<strike>……</strike> | 設置刪除線 |
文字與段落元素
標題元素根據字號大小分為6級，分別用<h1>-<h6>標簽定義
<body> <h1>這是1號標題</h1> <h2>這是2號標題</h2> <h3>這是3號標題</h3> <h4>這是4號標題</h4> <h5>這是5號標題</h5> <h6>這是6號標題</h6> </body>
段落元素
使用<p>標簽，換行元素使用<br>標簽，水平線元素通過<hr>標簽
預格式化元素
<pre>
保留HTML文檔中的Enter鍵和空格鍵，使瀏覽器不解析<pre>中定義的文本
列表與表格元素
使用列表元素可以使相關的內容以一種整齊的方式排列顯示，HTML支持有序列表和無序列表
有序列表用<ol>表示，無序列表用<ul>表示，列表項用<li>表示
默認情況下，有序列表是以阿拉伯數字作為列表項的前導符，使用type屬性可以改變有序列表的前導符，可分別取1,A,a,I,i.還可以設置start屬性，定義有序列表前導符的起始項
ul的type屬性值有：disc|square|circle
表格
表格由<table>元素定義，每個表格均有若干行（<tr>標簽定義），每行被分割成若干單元格(<td>標簽定義),表格表頭使用<th>定義
未跨多列的表格：
<table> <tr><th>電腦型號</th><th>價格</th></tr><tr><th>聯想</th><th>5000</th></tr><tr><th>戴爾</th><th>5100</th></tr><tr><th>華碩</th><th>5200</th></tr></table>劃線后：
<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"> <caption>電腦價格表</caption> <tr><th>電腦型號</th><th>價格</th></tr><tr><th>聯想</th><th>5000</th></tr><tr><th>戴爾</th><th>5100</th></tr><tr><th>華碩</th><th>5200</th></tr></table></body>
劃線代碼是這個屬性border=“1”
width="70%"大小占當前瀏覽器窗口70%
border="1"有邊框，邊框寬度為1
align="center"居中對齊
<caption>表格標題
跨多列的表格：
<td></td> 和<th></th>
<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><th colspan="2">電腦價格表哦</th></tr><tr><th>聯想</th><th>5000</th></tr><tr><th>戴爾</th><th>5100</th></tr><tr><th>華碩</th><th>5200</th></tr></table></body>字體屬性好像對于下列標簽沒用:
<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><td colspan="2">電腦價格表哦</td></tr><tr><td>聯想</td><td>5000</td></tr><tr><td>戴爾</td><td>5100</td></tr><tr><td>華碩</td><td>5200</td></tr></table></body>跨多行的表格：
<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><td rowspan="2">電腦價格表哦</td><td>聯想</td><td>戴爾</td></tr><tr><td>5200</td><td>5100</td></tr></table></body>圖片與滾動元素
圖片
圖片元素通過<img>標簽定義
<img src="" width="" height="" alt="" border="" vspace="" hspace="" align="">src圖片相應的文件以及相應的路徑
width和height是圖片屬性，默認是像素，不需要加px
border用來指定圖片邊框的粗細
vcpace表示圖片相對于上面和下面垂直間距，默認是像素
hspace表示圖片相對于左面和右面的水平間距，默認是像素
align 表示位置
滾動元素
<marquee>
<marquee scrolldelay="100" direction="" behavior=""> </marquee>說明：
scrolldelay：表示滾動的延遲時間，默認值為90
direction：表示滾動的方向，默認為從右往左
behavior：設定滾動的方式，alternate：表示在兩端之間來回滾動。scroll：表示由一端滾動到另一端，會重復。slide：表示由一端滾動到另一端，不會重復
默認就是從右往左
<marquee ><p>我是水平滾動條</p></marquee> <body><marquee ><p>我是水平滾動條</p></marquee><marquee direction="up" scrolldelay="100">垂直滾動</marquee></body> <body><marquee ><p>我是水平滾動條</p></marquee><marquee direction="up" scrolldelay="100">垂直滾動</marquee><marquee height="500" width="600" scrolldelay="300" onmouseover="this.stop()" onmouseout="this.start()"><img src="05.jpg" width="50" height="50" border="0">二次元</marquee></body>超鏈接元素
超鏈接元素
<a>
屬性href用來設置需要連接到的目標文件；屬性target用來鏈接目標窗口
<a href="welcome.html" target="_blank">這是一個鏈接</a> <body> <a href="http://www.baidu.com" target="_blank">歡迎訪問百度哦</a></body>
target="_blank"表示我們點擊超鏈接后，會新開一個窗口，用于跳轉目標文件
還可以取值_self（也就是直接當前窗口跳轉，不新開）
如何從一個文件超鏈接到另一個文件呢？
兩種方式：相對路徑和絕對路徑
絕對路徑：文件的完整路徑，如http://www.baidu.com/index.html
相對路徑：相對于當前文件的路徑
仔細看，文件名是不是變了
錨（書簽）鏈接
錨（書簽）鏈接：指的是連接目標位置是網頁中的指定錨點位置（書簽）的鏈接。
即可在文中點擊鏈接進行相應位置的跳轉
表單對象
表單標簽
表單對象元素由表單標簽<form>和表單元素兩部分組成
<form action="" method=""> </form>action 指定提交后，由服務器上那個處理程序處理(所以一般來說是個URL)
method 指定向服務器提交的方法：一般為post或get方法，post方法比較安全（GET上傳數據長度也有一定的限制）
表單元素
文本框基本語法
<input type="text" value="" size="">type表示是什么輸出框（例如text就是文本輸入框）
value表示輸入元素的默認值
size輸出框的文本區的寬度
密碼框基本語法
<input type="password" value="" size="">type表示是什么輸出框（例如password就是密碼框）
value表示初始密碼
size輸出框的密碼區的寬度
單選按鈕基本語法
<input type="radio" value="男" checked="checked">type表示按鈕屬性（radio表示單選按鈕）
value表示初始值
checked 表示默認選中，后面checked可以省略，即縮寫
記住，單選框同一個組里面的name必須相同（名稱相同，單選按鈕也就會在同一個組中）
<body><input name="gen" type="radio" class="input" value="男" checked><input name="gen" type="radio" class="input" value="女"></body>復選框基本語法
<input type="checkbox" name="cb2" value="talk"> <body><input type="checkbox" name="cb2" value="talk0"><input type="checkbox" name="cb1" value="talk1"><input type="checkbox" name="cb3" value="talk2"><input type="checkbox" name="cb4" value="talk3"></body>下拉列表
<select > <option>標簽定義下拉列表
下拉列表1
<select name="fruits" size="5" multiple="multiple"> <option vaule="apple" selected="selected">蘋果</option> <option vaule="banana">香蕉</option> <option vaule="grape">葡萄</option> <option vaule="pear">梨子</option> <option vaule="peach">桃</option> <option vaule="watermelon">西瓜</option> </select>
multiple=“multiple”
表示我們這個下拉列表可以進行多選
selected="selected"默認選中
下拉列表2
<select><option>標簽定義下拉列表 <select name="degree" > <option vaule="1" >幼兒園</option> <option vaule="2">小學生</option> <option vaule="3">初中生</option> <option vaule="4">高中生</option> </select>按鈕基本語法
<input type="reset" name="Reset" value="重填">type按鈕類型（reset表示重置按鈕，submit表示提交按鈕，button普通按鈕）
name 按鈕名稱
value 按鈕上的標簽
多行文本框基本語法
<textarea name="textarea" cols="40" rows="6"></textarea>name文本框的名字
cols文本框的列數
rows文本框的行數
隱藏域
隱藏域hidden,主要用于在不同頁面中傳遞隱藏域中設定的值
<input type="hidden" name="username" value="admin">文件域file
文件域file,用于將本地文件上傳到服務器端
<input type="file" name="photo">使用文件域上傳文件到服務器，需要在中修改表單的編碼，即設置
<form enctype="multipart/form-data">分組
<fieldset>元素用于分組，<legend>元素為每個分組定義標題
<fieldset> <legend>必填信息</legend> <label for="username">用戶名：</label><input type="text" id="username" value=""/> <label for="pass">密碼：</label><input type="password" id="pass"/> </fieldset> <fieldset> <legend>選填信息</legend> <label for="boy">男</label><input type="radio" id="sex" value="1"/> <label for="girl">女</label><input type="radio" id="sex" value="2" /> </fieldset>總結
以上是生活随笔為你收集整理的Web前端三剑客之HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python正则表达式之零宽断言（4）
- 下一篇： Web前端三剑客之CSS基础