HTML5——基礎知識及使用

這篇具有很好參考價值的文章主要介紹了HTML5——基礎知識及使用。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

HTML 文件基本結構

<html>
    <head>
    	<title>第一個頁面</title>
    </head>
    <body>
    	hello world
    </body>
</html>

html 標簽是整個 html 文件的根標簽(最頂層標簽).
head 標簽中寫頁面的屬性.
body 標簽中寫的是頁面上顯示的內(nèi)容.
title 標簽中寫的是頁面的標題.

HTML 標簽

HTML 代碼是由 “標簽” 構成的.

例如：<body> hello </body>

標簽名 (body) 放到 < > 中.
大部分標簽成對出現(xiàn). <body> 為開始標簽, </body> 為結束標簽.
少數(shù)標簽只有開始標簽, 稱為 “單標簽”.
開始標簽和結束標簽之間, 寫的是標簽的內(nèi)容，例如hello.
開始標簽中可能會帶有 “屬性”. id 屬性相當于給這個標簽設置了一個唯一的標識符.例如：<body id="myId">hello</body>

標簽的層次結構

<html>
    <head>
    	<title>第一個頁面</title>
    </head>
    <body>
    	hello world
    </body>
</html>

head 和 body 是 html 的子標簽.
html 是 head 和 body 的父標簽.
title 是 head 的子標簽.
head 是 title 的父標簽.
head 和 body 之間是兄弟關系.

標簽之間的結構關系, 構成了一個 DOM 樹，DOM 是 Document Object Mode (文檔對象模型) 的縮寫。

HTML5——基礎知識及使用,前端,html5,前端,html,vscode

快速生成代碼框架

在 IDEA 中創(chuàng)建文件 xxx.html , 直接輸入 ! , 按 tab 鍵, 此時能自動生成代碼的主體框架

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   	
</body>
</html>

<! DOCTYPE html>稱為文檔類型定義，描述當前的文件是一個 HTML5 的文件.
< html lang=“en”> lang 屬性表示當前頁面是一個 “英語頁面”.
< meta charset=“UTF-8” >描述頁面的字符編碼方式.
name=“viewport” ，viewport 指設備的屏幕上用來顯示我們的網(wǎng)頁的那一塊區(qū)域，通常為移動端適配，web端不需要過多考慮。
content=“width=device-width, initial-scale=1.0” ，設置可視區(qū)和設備寬度等寬, 并設置初始縮放為不縮放

HTML 常見標簽

注釋標簽

ctrl + / 快捷鍵可以快速進行注釋/取消注釋

標題標簽

標題標簽有六個, 從 h1 - h6. 數(shù)字越大, 則字體越小

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落標簽

p 標簽表示一個段落

<p>這是一個段落</p>

p 標簽之間存在一個空隙.
當前的 p 標簽描述的段落, 前面還沒有縮進.
自動根據(jù)瀏覽器寬度來決定排版.
html 內(nèi)容首尾處的換行, 空格均無效.
在 html 中文字之間輸入的多個空格只相當于一個空格.
html 中直接輸入換行不會真的換行, 而是相當于一個空格.

換行標簽

br 是 break 的縮寫，表示換行

br 是一個單標簽。
br 標簽不像 p 標簽那樣帶有一個很大的空隙.
< br/>是規(guī)范寫法

格式化標簽

加粗: strong 標簽和 b 標簽
傾斜: em 標簽和 i 標簽
刪除線: del 標簽和 s 標簽
下劃線: ins 標簽和 u 標簽
使用 CSS 也可以完成類似的效果，實際開發(fā)中以 CSS 方式為主.

<strong>strong 加粗</strong>
<b>b 加粗</b>

<em>傾斜</em>
<i>傾斜</i>

<del>刪除線</del>
<s>刪除線</s>

<ins>下劃線</ins>
<u>下劃線</u>

圖片標簽

img圖片標簽必須帶有 src 屬性. 表示圖片的路徑，路徑分為絕對路徑和相對路徑。

<img src="rose.jpg">

img 標簽的其他屬性

alt: 替換文本. 當文本不能正確顯示的時候, 會顯示一個替換的文字.
title: 提示文本. 鼠標放到圖片上, 就會有提示.
width/height: 控制寬度高度. 高度和寬度一般改一個就行, 另外一個會等比例縮放. 否則就會圖片失衡.
border: 邊框, 參數(shù)是寬度的像素. 但是一般使用 CSS 來設定.
屬性可以有多個, 不能寫到標簽之前; 屬性之間用空格分割, 可以是多個空格, 也可以是換行;屬性之間不分先后順序;屬性使用 “鍵值對” 的格式來表示.

例如：

<img src="rose.jpg" alt="鮮花" title="這是一朵鮮花" width="500px" height="800px"border="5px">

超鏈接標簽

a超鏈接標簽

<a>hello</a>

超鏈接標簽屬性：

href: 必須具備, 表示點擊后會跳轉(zhuǎn)到哪個頁面.
target: 打開方式. 默認是 _self. 如果是 _blank 則用新的標簽頁打開

例如：

<a href="http://www.baidu.com">百度</a>

鏈接方式：

外部鏈接: href 引用其他網(wǎng)站的地址

<a href="http://www.baidu.com">百度</a>

內(nèi)部鏈接: 網(wǎng)站內(nèi)部頁面之間的鏈接

<!-- 在一個目錄中, 先創(chuàng)建一個 1.html, 再創(chuàng)建一個 2.html-->
<!-- 1.html -->
我是 1.html
<a href="2.html">點我跳轉(zhuǎn)到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">點我跳轉(zhuǎn)到 1.html</a>

空鏈接: 使用 # 在 href 中占位

<a href="#">空鏈接</a>

下載鏈接: href 對應的路徑是一個文件.

<a href="test.zip">下載文件</a>

網(wǎng)頁元素鏈接: 把元素放到 a 標簽中,可以給任何元素添加鏈接

<a href="http://www.sogou.com">
	<img src="rose.jpg" alt="">
</a>

錨點鏈接: 可以快速定位到頁面中的某個位置

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">...</p>
<p id="two">...</p>
<p id="three">...</p>

表格標簽

table 標簽: 表示整個表格.
tr: 表示表格的一行.
td: 表示一個單元格.
th: 表示表頭單元格，會居中加粗.
thead: 表格的頭部區(qū)域.
tbody: 表格得到主體區(qū)域.
table 包含 tr , tr 包含 td 或者 th.

表格標簽有一些屬性，可以用于設置大小邊框等，但是一般使用 CSS 方式來設置，這些屬性都要放到 table 標簽中。

align 是表格相對于周圍元素的對齊方式，align=“center” (不是內(nèi)部元素的對齊方式).
border 表示邊框. 1 表示有邊框(數(shù)字越大, 邊框越粗), 表示沒邊框.
cellpadding: 內(nèi)容距離邊框的距離, 默認 1 像素.
cellspacing: 單元格之間的距離. 默認為 2 像素.
width / height: 設置尺寸.

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

合并單元格

跨行合并: rowspan=“n”
跨列合并: colspan=“n”
先確定跨行還是跨列；跨列合并, 左側是目標單元格; 跨行合并, 上方是目標單元格；刪除的多余的單元格.

<table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500">
     <tr>
         <td>姓名</td>
         <td>性別</td>
         <td>年齡</td>
    </tr>
    <tr>
        <td>張三</td>
        <td colspan="2">男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

列表標簽

列表標簽主要使用來布局的.

無序列表[重要] ul li
有序列表[用的不多] ol li
自定義列表[重要] dl (總標簽) dt (小標題) dd (圍繞標題來說明)

<h3>無序列表</h3>
<ul>
    <li>劉備</li>
    <li>關羽</li>
    <li>張飛</li>
</ul>

<h3>有序列表</h3>
<ol>
    <li>劉備</li>
    <li>關羽</li>
    <li>張飛</li>
</ol>

<h3>自定義列表</h3>
<dl>
    <dt>桃園三結義</dt>
    <dd>劉備</dd>
    <dd>關羽</dd>
    <dd>張飛</dd>
</dl>

表單標簽

表單是讓用戶輸入信息的重要途徑。

表單標簽分為兩個部分：

表單域: 包含表單元素的區(qū)域，重點是 form 標簽.
表單控件: 輸入框, 提交按鈕等，重點是 input 標簽

form 標簽

<form action="test.html">
  ... [form 的內(nèi)容]
</form>

描述了要把數(shù)據(jù)按照什么方式，提交到哪個頁面中。

input 標簽

input 標簽包括各種輸入控件, 單行文本框, 按鈕, 單選框, 復選框

type(必須有), 取值種類很多多, button, checkbox, text, file, image, password, radio 等.
name: 給 input 起了個名字. 尤其是對于單選按鈕, 具有相同的 name 才能多選一.
value: input 中的默認值.
checked: 默認被選中. (用于單選按鈕和多選按鈕)
maxlength: 設定最大長度.

文本框

<input type="text">

密碼框

<input type="password">

文本框

<input type="text">

單選框

性別:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

單選框之間必須具備相同的 name 屬性, 才能實現(xiàn) 多選一效果

復選框

愛好:
<input type="checkbox"> 吃飯 
<input type="checkbox"> 睡覺 
<input type="checkbox">打游戲

普通按鈕

<input type="button" value="我是個按鈕">

點擊了沒有反應，需要搭配 JS 使用

普通按鈕

<input type="button" value="我是個按鈕" onclick="alert('hello')">

提交按鈕

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

提交按鈕必須放到 form 標簽內(nèi). 點擊后就會嘗試給服務器發(fā)送

清空按鈕

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

清空按鈕必須放在 form 中，點擊后會將 form 內(nèi)所有的用戶輸入內(nèi)容重置.

選擇文件

<input type="file">

點擊選擇文件, 會彈出對話框, 選擇文件

label 標簽

label 標簽搭配 input 使用，點擊 label 也能選中對應的單選/復選框, 能夠提升用戶體驗

for 屬性: 指定當前 label 和哪個相同 id 的 input 標簽對應. (此時點擊才是有用的)

<label for="male">男</label> <input id="male" type="radio" name="sex">

select 標簽

select下拉菜單標簽

<select>
   <option>北京</option>
   <option selected="selected">上海</option>
</select>

option 中定義 selected=“selected” 表示默認選中。

<select>
    <option>--請選擇年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

textarea 標簽

textarea文本區(qū)元素標簽

<textarea rows="3" cols="50">
    
</textarea>

文本域中的內(nèi)容, 就是默認內(nèi)容, 空格也會有影響.

div & span 標簽

div & span 標簽是無語義標簽，就是兩個盒子，用于網(wǎng)頁布局.

div 標簽, division 的縮寫, 含義是分割；div 是獨占一行的, 是一個大盒子.
span 標簽, 含義是跨度；span 不獨占一行, 是一個小盒子.

<div>
    <span>11111</span>
    <span>11111</span>
    <span>11111</span>
</div>
<div>
    <span>22222</span>
    <span>22222</span>
    <span>22222</span>
</div>
<div>
    <span>33333</span>
    <span>33333</span>
    <span>33333</span>
</div>

HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的.

例如:文章來源地址http://www.zghlxwxcb.cn/news/detail-599853.html

空格: ;
小于號: <;
大于號: >;
按位與: &;

HTML案例

<body>
    <table width="500px" cellspacing="0">
        <thead>
            <h3>請?zhí)顚懞啔v信息</h3>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label for="name">姓名</label>
                </td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>
                    性別
                </td>
                <td>
                    <input type="radio" name="sex" id="male" checked="checked">
                    <label for="male"><img src="./image/男.png" alt="" width="20px">男</label>
                    <input type="radio" name="sex" id="female">
                    <label for="female"><img src="./image/女.png" alt="" width="20px">女</label>
                </td>
            </tr>
            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <select>
                        <option>--請選擇年份--</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                        <option>2001</option>
                    </select>
                    <select>
                        <option>--請選擇月份--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>
                    <select>
                        <option>--請選擇日期--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    就讀學校
                </td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <tr>
                <td>
                    應聘崗位
                </td>
                <td>
                    <input type="checkbox" id="frontend">
                    <label for="frontend">前端開發(fā)</label>
                    <input type="checkbox" id="backend">
                    <label for="backend">后端開發(fā)</label>
                    <input type="checkbox" id="qa">
                    <label for="qa">測試開發(fā)</label>
                    <input type="checkbox" id="op">
                    <label for="op">運維開發(fā)</label>
                </td>
            </tr>
            <tr>
                <td>
                    掌握的技能
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    項目經(jīng)歷
                </td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="lisence">
                    <label for="lisence">我已仔細閱讀過公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#">查看我的狀態(tài)</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>請應聘者確認: </h3>
                    <ul>
                        <li>以上信息真實有效</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</body>

小結

HTML 只是描述了頁面的骨架結構.
使用 CSS 可以針對頁面進行進一步美化

到了這里，關于HTML5——基礎知識及使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

HTML 文件基本結構

HTML 標簽

標簽的層次結構

快速生成代碼框架

HTML 常見標簽

注釋標簽

標題標簽

段落標簽

換行標簽

格式化標簽

圖片標簽

超鏈接標簽

表格標簽

列表標簽

form 標簽

input 標簽

label 標簽

select 標簽

textarea 標簽

div & span 標簽

HTML 特殊字符

HTML案例

小結

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

二維碼2

HTML5——基礎知識及使用

HTML 文件基本結構

HTML 標簽

標簽的層次結構

快速生成代碼框架

HTML 常見標簽

注釋標簽

標題標簽

段落標簽

換行標簽

格式化標簽

圖片標簽

超鏈接標簽

表格標簽

列表標簽

form 標簽

input 標簽

label 標簽

select 標簽

textarea 標簽

div & span 標簽

HTML 特殊字符

HTML案例

小結

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

二維碼2

支付寶掃一掃領取紅包，優(yōu)惠每天領