整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tml屬性值可以不用引號嗎，實例驗證
HTML元素的屬性值可以不適用引號來包裹，瀏覽器一樣可以將其進行渲染。不過，如果這樣寫HTML的代碼的話，屬性與屬性值之間需要用空格來進行隔開，避免后面的屬性變成前面屬性的屬性值。
提示：雖然如此，但是還是建議使用引號來寫HTML的代碼，個人感覺這樣更規范，更便于閱讀和對代碼的維護、管理。
下方的實例中，編寫了兩個鏈接的a元素，并添加多個屬性和屬性值，且都不使用引號，其中一個使用空格隔開屬性值，一個未使用，運行一下看看效果如何：
<a href=https://www.x1y1z1.com/ style=color:green target=_blank>笨鳥工具網站首頁，使用空格隔開，點擊可打開本站首頁，功能與加引號一樣</a>
<br>
<a href=https://www.x1y1z1.com/style=color:green>笨鳥工具網站首頁，未使用空格，看看文字是否為綠色，看看鏈接是否還指向首頁？</a>原文：html屬性值可以不用引號嗎，實例驗證 | HTML教程
免責聲明：內容僅供參考。
TML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。
1 HTML骨架格式
日常生活的書信，我們要遵循共同的約定。
同理：HTML 有自己的語言語法骨架格式：
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>2 html基本標簽
作用：所有HTML中標簽的一個根節點。
作用：用于存放：title,meta,base,style,script,link
注意：在head標簽中我們必須要設置的標簽是title
作用：讓頁面擁有一個屬于自己的標題。
作用：頁面在的主體部分，用于存放所有的HTML標簽：p,h,a,b,u,i,s,em,del,ins,strong,img
3 顏色的表示方式
第一種方式：使用顏色名稱: 僅僅有16種顏色名可用英文字母，其余的要用16進制值。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow第二種方式：RGB模式
第三種：十六進制
#000000 #ffffff #325687 #3774054 文檔類型<!DOCTYPE>（重點）
<!DOCTYPE html>這句話就是告訴我們使用哪個html版本， 我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。
標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范，必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。
5 HTML標簽的語義化（重點）
所謂標簽語義化，就是指標簽的含義。
為什么要有語義化標簽：方便代碼的閱讀和維護，同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容，使用語義化標簽會具有更好地搜索引擎優化
核心：合適的地方給一個最為合理的標簽。
語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性，不管是誰都能看懂這塊內容是什么。
遵循的原則：先確定語義的HTML ，再選合適的CSS。
6 總結：（重要知識點）
<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center><br>
<hr>
<img>
<input>
<param>
<meta>
<link>1.注釋標簽：<!–注釋–>
-------------------------------------
2.換行標簽：<br/>
-------------------------------------
3.段落標簽：<p>文本文字
特點：段與段之間有行高
屬性：align對齊方式
(left：左對齊 center：居中 right：右對齊)
-------------------------------------
4.水平線標簽:<hr/>
屬性:
width：水平線的長度(兩種:第一種:像素表示；第二種，百分比表示)
size: 水平線的粗細 (像素表示，例如：10px)
color: 水平線的顏色
align:水平線的對齊方式(left：左對齊 center：居中 right：右對齊)
-------------------------------------
5.容器標簽（重點）
<div>:塊級標簽，獨占一行，換行
<span>:行級標簽，所有內容都在同一行作用
<div>:主要是結合css頁面分塊布局
<span>:進行友好提示信息為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，隨著數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行；
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>容器里面裝載著文字或圖表的一種形式，叫列表。列表最大的特點就是 整齊 、整潔、 有序
無序列表 ul （重點）
無序列表標簽： <ul></ul>
屬性：type :三個值，分別為：
circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
列表項：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。
無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！有序列表 ol
有序列表標簽：<ol>
屬性：type：1、A、a、I、i（數字、字母、羅馬數字）
列表項： <li></li>定義列表dl
\dl>
<dt>名詞1
<dd>名詞1解釋1
<dd>名詞1解釋2
…
<dt>名詞2
<dd>名詞2解釋1
<dd>名詞2解釋2
…
</dl>
dl>
名詞1
名詞1解釋1
名詞1解釋2
... 名詞2
名詞2解釋1
名詞2解釋2
...獨立標簽
屬性:
src：圖片地址： 相對路徑 （同一個網站） 絕對路徑 （不同網站）
width:寬度height:高度border:邊框align:對齊方式，代表圖片與相鄰的文本的相當位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白，以免文字或其它圖片過于貼近鏈接標簽
超鏈接可以是文本，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。（不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接）
屬性：
href:跳轉頁面的地址(跳轉到外網需要添加協議)；
name:名稱，錨點(回到錨點: 頂部，底部，中間)，在訪問錨點的書寫格式:#name的值
target:_self(自己) _blank(新頁面，之前頁面存在) _
__parent top 默認
self_search相等于給頁面起一個名字，如果再次打開時，如果頁面存在，則不再打開新的頁面。可以是任意名字。如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
注釋：<!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規范
head：網頁頭部標簽
body：代表網頁主題
標題標簽
段落標簽
換行標簽
水平線標簽
字體樣式標簽
注釋
特殊字符
特殊符號就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級目錄
文本鏈接
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內元素
什么是列表：就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標題
<dd></dd> 選項
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結構
<table border="1px" 邊框>表格標簽
<tr>
<td></td>列標簽
<td></td>
<td></td>
</tr>行標簽 這代表一行
</table>跨列：使用colspan="夸的列數" <td colspan="4">
跨行：使用rowspan="夸的行數" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標題頭部區域的內容(用于頁面或頁面中的一塊區域) |
footer | 標記腳部區域的內容（用于整個頁面或頁面的一塊區域） |
section | web頁面中的一塊獨立區域 |
atricle | 獨立的文章內容 |
aside | 相關內容或應用(常用于側邊欄) |
nav | 導航類輔助內容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認為text |
name | 指定表單元素的名稱 必填，用來后臺讀取 |
value | 元素的初試值。type為radio時必須指定一個值 |
size | 指定元素的初始寬度。當type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位 |
maxlength | type為txet或password時，輸入的最大字符數 |
cheaked | type為radio或cheackbox時，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src="點擊跳轉的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱">
<option value="選項的值" select>中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value文本域
<textarea name="name" cols="列數" rows="行數">文本內容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數字驗證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強鼠標可用性
<label for="mark">點擊</label>
<input type="text" id="mark">為什么要進行表單驗證：緩解服務器壓力、保證數據安全
提示信息
非空判斷
正則表達式驗證
高級驗證使用js
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
