HTML使用简介
HTML使用簡介
文章目錄
- HTML使用簡介
- 一、html概述和基本結(jié)構(gòu)
- 1.html概述
- 2.html基本結(jié)構(gòu)
- 3.HTML文檔類型
- 3.1xhtml 1.0
- 3.2html5
- 3.3兩種文檔的區(qū)別
- 4.html注釋：
- 5.html標(biāo)題標(biāo)簽
- 二、html段落標(biāo)簽、換行標(biāo)簽與字符實體
- 1.html段落標(biāo)簽
- 2.html換行標(biāo)簽
- 3.html字符實體
- 三、html塊標(biāo)簽、含樣式的標(biāo)簽
- 1.html塊標(biāo)簽
- 2.含樣式和語義的標(biāo)簽
- 3.語義化的標(biāo)簽
- 4.html圖像標(biāo)簽
- 5.html鏈接標(biāo)簽
- 四、html列表
- 1.有序列表
- 2.無序列表
- 3.定義列表
- 4.html表單
- 5.html表格
一、html概述和基本結(jié)構(gòu)
1.html概述
- HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接
- 標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的標(biāo)簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者h(yuǎn)tm
- 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。
2.html基本結(jié)構(gòu)
一個html的基本結(jié)構(gòu)如下：
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"><title>網(wǎng)頁標(biāo)題</title></head><body>網(wǎng)頁顯示內(nèi)容</body> </html>- 第一行是文檔聲明
- 第二行 “<html> ” 標(biāo)簽和最后一行“</html>”定義html文檔的整體
- “<html>”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統(tǒng)計用。
- “<head>”標(biāo)簽和“<body>”標(biāo)簽是它的第一層子元素
- “<head>”標(biāo)簽里面負(fù)責(zé)對網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄
- “<body>”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。
3.HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
3.1xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本，目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法： html:xt + tab
文檔示例：
3.2html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創(chuàng)建方法： html:5 + tab 或者 ! + tab
文檔示例：
3.3兩種文檔的區(qū)別
- 1、文檔聲明和編碼聲明
- 2、html5新增了標(biāo)簽元素以及元素屬性
4.html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->5.html標(biāo)題標(biāo)簽
通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標(biāo)簽可以在網(wǎng)頁上定義6種級別的標(biāo)題。6種級別的標(biāo)題表示文檔的6級目錄層級關(guān)系，比如說： <h1>用作主標(biāo)題，其后是 <h2>，再其次是 <h3>，以此類推。搜索引擎會使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁上使用標(biāo)題是很重要的。
<h1>這是一級標(biāo)題</h1> <h2>這是二級標(biāo)題</h2> <h3>這是三級標(biāo)題</h3>二、html段落標(biāo)簽、換行標(biāo)簽與字符實體
1.html段落標(biāo)簽
- <p>標(biāo)簽定義一個文本段落，一個段落含有默認(rèn)的上下間距，段落之間會用這種默認(rèn)間距隔開，代碼如下：
2.html換行標(biāo)簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網(wǎng)頁時候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行，代碼如下：
<p> 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。 </p>3.html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網(wǎng)頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
<!-- 在段落前想縮進(jìn)兩個文字的空格，使用空格的字符實體： --> <p> 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。</p>在網(wǎng)頁上顯示 “<” 和 “>” 會誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實體，比如：
<!-- “<” 和 “>” 的字符實體為 < 和 > --> <p>3 < 5 <br>10 > 5 </p>三、html塊標(biāo)簽、含樣式的標(biāo)簽
1.html塊標(biāo)簽
1、<div> 標(biāo)簽 塊元素，表示一塊內(nèi)容，沒有具體的語義。 2、<span> 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語義。2.含樣式和語義的標(biāo)簽
1、<em> 標(biāo)簽 行內(nèi)元素，表示語氣中的強調(diào)詞 2、<i> 標(biāo)簽 行內(nèi)元素，表示專業(yè)詞匯 3、<b> 標(biāo)簽 行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名 4、<strong> 標(biāo)簽 行內(nèi)元素，表示非常重要的內(nèi)容3.語義化的標(biāo)簽
- 語義化的標(biāo)簽，就是在布局的時候多使用有語義的標(biāo)簽，搜索引擎在爬網(wǎng)的時候能認(rèn)識這些標(biāo)簽，理解文檔的結(jié)構(gòu)，方便網(wǎng)站的收錄。
- 比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標(biāo)簽不多。
4.html圖像標(biāo)簽
<img>標(biāo)簽可以在網(wǎng)頁上插入一張圖片，它是獨立使用的標(biāo)簽，它的常用屬性有：
- src屬性 定義圖片的引用地址
- alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
5.html鏈接標(biāo)簽
<a>標(biāo)簽可以**在網(wǎng)頁上定義一個鏈接地址，**它的常用屬性有：
- href屬性 定義跳轉(zhuǎn)的地址
- title屬性 定義鼠標(biāo)懸停時彈出的提示文字框
- target屬性 定義鏈接窗口打開的位置
- target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
- target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
四、html列表
1.有序列表
在網(wǎng)頁上定義一個有編號的內(nèi)容列表可以用<ol>、<li>配合使用來實現(xiàn)，代碼如下：
<ol><li>列表文字一</li><li>列表文字二</li><li>列表文字三</li> </ol>在網(wǎng)頁上生成的列表，每條項目上會按1、2、3編號，有序列表在實際開發(fā)中較少使用。
2.無序列表
在網(wǎng)頁上定義一個無編號的內(nèi)容列表可以用
- 、
- 配合使用來實現(xiàn)，代碼如下：
在網(wǎng)頁上生成的列表，每條項目上會有一個小圖標(biāo)，這個小圖標(biāo)在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉默認(rèn)的小圖標(biāo)，如果需要圖標(biāo)，可以用樣式自定義圖標(biāo)，從而達(dá)到在不同瀏覽器上顯示的效果相同,實際開發(fā)中一般用這種列表。
實際應(yīng)用實例：
3.定義列表
定義列表通常用于術(shù)語的定義。<dl>標(biāo)簽表示列表的整體。<dt>標(biāo)簽定義術(shù)語的題目。<dd>標(biāo)簽是術(shù)語的解釋。一個<dl>中可以有多個題目和解釋，代碼如下：
<h3>前端三大塊</h3> <dl><dt>html</dt><dd>負(fù)責(zé)頁面的結(jié)構(gòu)</dd><dt>css</dt><dd>負(fù)責(zé)頁面的表現(xiàn)</dd><dt>javascript</dt><dd>負(fù)責(zé)頁面的行為</dd></dl>4.html表單
表單用于搜集不同類型的用戶輸入，表單由不同類型的標(biāo)簽組成，相關(guān)標(biāo)簽及屬性用法如下：
- 1、<form>標(biāo)簽 定義整體的表單區(qū)域
- action屬性 定義表單數(shù)據(jù)提交地址
- method屬性 定義表單提交的方式，一般有“get”方式和“post”方式
- 2、<label>標(biāo)簽 為表單元素定義文字標(biāo)注
- 3、<input>標(biāo)簽 定義通用的表單元素
- type屬性
- type="text" 定義單行文本輸入框
- type=“password” 定義密碼輸入框
- type="radio" 定義單選框
- type=“checkbox” 定義復(fù)選框
- type="file" 定義上傳文件
- type=“submit” 定義提交按鈕
- type="reset" 定義重置按鈕
- type=“button” 定義一個普通按鈕
- type=“image” 定義圖片作為提交按鈕，用src屬性定義圖片地址
- type=“hidden” 定義一個隱藏的表單域，用來存儲值
- value屬性 定義表單元素的值
- name屬性 定義表單元素的名稱，此名稱是提交數(shù)據(jù)時的鍵名
- 4、<textarea>標(biāo)簽 定義多行文本輸入框
- 5、<select>標(biāo)簽 定義下拉表單元素
- 6、<option>標(biāo)簽 與<select>標(biāo)簽配合，定義下拉表單元素中的選項
注冊表單實例：
<form action="http://www..." method="get"> <p> <label>姓名：</label><input type="text" name="username" /> </p> <p> <label>密碼：</label><input type="password" name="password" /> </p> <p> <label>性別：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>愛好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <p> <label>個人描述：</label> <textarea name="about"></textarea> </p> <p> <label>籍貫：</label> <select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">廣州</option><option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <!-- input類型為submit定義提交按鈕 還可以用圖片控件代替submit按鈕提交，一般會導(dǎo)致提交兩次，不建議使用。如：<input type="image" src="xxx.gif"> --> <input type="reset" name="" value="重置"> </p> </form>5.html表格
- 1、<table>標(biāo)簽：聲明一個表格，它的常用屬性如下：
- border屬性 定義表格的邊框，設(shè)置值是數(shù)值
- cellpadding屬性 定義單元格內(nèi)容與邊框的距離，設(shè)置值是數(shù)值
- cellspacing屬性 定義單元格與單元格之間的距離，設(shè)置值是數(shù)值
- align屬性 設(shè)置整體表格相對于瀏覽器窗口的水平對齊方式,設(shè)置值有：left | center | right
- 2、<tr>標(biāo)簽：定義表格中的一行
- 3、<td>和<th>標(biāo)簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格，它們的常用屬性如下：
- align 設(shè)置單元格中內(nèi)容的水平對齊方式,設(shè)置值有：left | center | right
- valign 設(shè)置單元格中內(nèi)容的垂直對齊方式 top | middle | bottom
- colspan 設(shè)置單元格水平合并，設(shè)置值是數(shù)值
- rowspan 設(shè)置單元格垂直合并，設(shè)置值是數(shù)值
總結(jié)
- 上一篇： Python中的WSGI
- 下一篇： 深入理解浏览器原理和架构|硬核