Html學習筆記（主體結構&amp;教程資料）

么是HTML？

HTML（Hypertext Marked Language）超文本標記語言
文件的后綴名.html .htm
Hypertext可以在文件中標識圖片、鏈接、表格、文本等。
Marked<或>以及字符串組成
是一種編程語言
-瀏覽器解釋的語言

HTML主體標記

代碼分為三部分編寫

<html>是網(wǎng)頁文件的最外層標記
 <head>
之間的文本是頭信息，不會顯示在瀏覽器中，包括基本的描述，整個網(wǎng)頁的公共屬性
 </head> 
 <body>
是網(wǎng)頁的主體部分，正文：文字、圖片、鏈接、表單等
 </body>
</html>

HTML文檔頭部標記

<head>頭部標記</head> 
<title></title>只能有一個 
<base/>只能有一個 
<link>可以有多個 
<meat>可以有多個 
<meat name="" content=""> 
<meat http-equiv="" content="">

title

定義網(wǎng)頁標題，顯示在瀏覽器的標題欄中有利于搜素引擎（也是在搜索引擎中顯示的標題）

base

基底網(wǎng)址標記
用于設定瀏覽器中文件的絕對路徑
網(wǎng)頁中的文件只需要寫下文件的相對路徑即可，這個路徑就是base指定下的路徑

link

設置外部文件的鏈接標記
用于確定本頁面和其他文檔之間的關系

meta

兩種用法

name用于在網(wǎng)頁中加入關于網(wǎng)頁的描述信息

網(wǎng)頁的關鍵字，網(wǎng)頁描述信息

http-equiv：屬性用于在HTME文檔中模擬HTTP協(xié)議的

響應消息頭，例如，告訴瀏覽器，是否緩存頁面，

使用什么樣的字符集顯示網(wǎng)頁內容

meta的name標簽屬性：不是自己定義的值

Keywords:網(wǎng)頁的關鍵字

Description：網(wǎng)頁的描述 Robots：index noindex follow nofollow all none Author

copyright:版本

mate標簽的http-equiv屬性設置

Content-Type :網(wǎng)頁文檔類型，刷新頁面

<meta http-equiv="refresh" content="3; url=http://wwww.baidu.com/">
<meta http-equiv="Windows-Target" content="_top"
此條語句的作用：禁止別人把你的網(wǎng)頁放在小窗體里，一旦鏈接到你的網(wǎng)頁，會全屏顯示

Page=Enter和Page=Exit

<meta http-equiv="Page-Enter" content="revealTrans(Transition=5,Ouration=1.000)">
<meta http-equiv="Page-Exit" content="revealTrans(Transition=8,Ouration=1.000)">
為頁面進入和退出特效，一共有23種

主體標記<body>

在它中放置網(wǎng)頁中所有內容

<body bgcolor="#ff00ff" text="#00ff00" link="red"
alink=""(鼠標單擊顏色) topmargin=""（頂部距離）
vlink=""(鼠標放在上時的顏色)
leftmargin=""（默認左距離） background=""(放置背景圖片)>

只要是可以用樣式控制的，就不用HTML本身的屬性，可以用CSS控制

Id name class style 通用屬性，所有的元素都可以使用

DTD

文檔類型定義

<!DDCTYPE HTML PUBLIC"-//w3c//DTD XHML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transition1.dtd"(dtd的地址，按照dtd地址的格式顯示本頁面)>

想要學習Html的伙伴，私信松鼠并回復：Html

即可領取Html的教學資料和教學視頻了（注意回復的大小寫要一致哦~）

TML標簽：

基本標簽：

<html></html>雙標簽開頭結尾 HTML標簽為最大的標簽稱為根標簽

<head></head> 文檔頭部標簽且必須設置title

<title></title> 頁面標題

<body></body> 文檔的主體包含頁面的內容

<h1>-<h6> HTML提供6個等級的頁面標題有大到小

<p></p> p標簽用于定義段落可以將頁面分為若干個段落根據(jù)窗口大小自動換行

<br/>單標簽換行標簽（break打斷）

格式化標簽：

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

斜線 <em></em>or<i></i>

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

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

div和span標簽：

沒有語義屬于一種盒子來裝內容

<div></div> 表示分割分區(qū) 用來布局一行一個大盒子

<span></span>意為跨度，跨距一行可以哦有多個小盒子

圖像標簽：

<img src="圖像路徑(url)"/> 定義頁面中的圖像

圖像標簽包含多個屬性

src 圖片路徑必須屬性

alt 文本替換文本圖像不能顯示的文字

title 文本鼠標放到圖像上顯示文字

width 像素寬度

height 高度

border 邊框

相對路徑和絕對路徑

相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑

分類：下級路徑/ 上級路徑../

絕對路徑：是指目錄下的絕對位置，如硬盤中的路徑或網(wǎng)路地址

超鏈接標簽：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href用于指定鏈接目標的url地址(必須屬性)

target用于指定鏈接打卡方式 _self為默認值 _blank為在新窗口打開方式

錨點鏈接：可以快速到頁面某個位置

在鏈接文本中的href屬性中，設置屬性值為#名字的形式，如<a href="#two">目標</a>

找到目標位置標簽，里面添加一個id屬性 = 名字，如：<h3 id="two">目標</h3>

注釋：

快捷鍵CTRL + /

特殊字符：

HTML 原代碼	顯示結果	描述
<	<	小于號或顯示標記
>	>	大于號或顯示標記
&	&	可用于顯示其它特殊字符
"	“	引號
?	?	已注冊
?	?	版權
?	?	商標
		半個空白位
		一個空白位
		不斷行的空白

表格標簽：

<table></table> 是用于定義表格的標簽

<tr></tr> 標簽用于定義表格中的行，必須嵌套在<table></table>標簽中

<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標簽中

<td> 元素中的文本通常是普通的左對齊文本。字母td指表格數(shù)據(jù)(table data)，即數(shù)據(jù)單元格的內容

表頭單元格標簽：

<th>標簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。

表格屬性：

align left center right 規(guī)定表格相對于周圍元素的對齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認為"",表示沒有邊框

cellpadding 像素值規(guī)定單元邊沿與其內容的空白，默認1像素

cellspacing 像素值規(guī)定單元格直接的空白默認2像素

with 像素值or百分比規(guī)定表格的寬度

合并單元表格方式：

跨行合并：rowspan="合并單元格的個數(shù)"

跨列合并：colspan="合并單元格的個數(shù)"

列表標簽：

<ul>標簽表示無序列表里面只能包含li

<ol>有序標簽里面只能包含li

<li>相當于一個容器定義列表項與<ui>or<li>嵌套使用 li里面可以包含任何標簽

<dl>標簽用于定義描述列表(或自定義列表),該標簽會與<dt>(定義項目和名字)和<dd>(描述每一個項目名字)一起使用

表單標簽：

標簽	描述
<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個多行的輸入控件)
<label>	定義了 <input> 元素的標簽，一般為輸入標題
<fieldset>	定義了一組相關的表單元素，并使用外框包含起來
<legend>	定義了 <fieldset> 元素的標題
<select>	定義了下拉選項列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個點擊按鈕
<datalist> New	指定一個預先定義的輸入控件選項列表
<keygen> New	定義了表單的密鑰對生成器字段
<output> New	定義一個計算結果

<input>標簽用于收集用戶信息包含一個type屬性可以有多種樣式

<input type="屬性值" />

屬性值：

button	定義可點擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動腳本）。
checkbox	定義復選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。
submit	定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。

<label>標簽

<label> 標簽為 input 元素定義標注（標記）。 label是標注的意思

label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同

詳情可參考

https://www.runoob.com/ 菜鳥教程

https://www.w3school.com.cn/ w3c

行一行的吸引人

表單呀表單

W3C標準

World Wide WebConsortium(萬維網(wǎng)聯(lián)盟)

成立于1994.web技術領域,最具權威和影響力的國際中立性技術標準機構

http://www.w3.org/

http://www.chinaw3c.org/

W3C標準包括

結構化標準語言(HTML,XHTML,XML)

表現(xiàn)標準語言(CSS)

行為標準(DOM,ECMAScript)

編輯工具

>記事本

>Dreamweaver

>WebStorm (企業(yè)主流)

基本結構

<!doctype html>

<html>

<head>

網(wǎng)頁頭部

</head>

<body>

網(wǎng)頁主體

顯示的網(wǎng)頁主題內容

</body>

</html>

===========================================================

網(wǎng)頁的基本標簽

>標題標簽

>段落標簽

<p></p>

>換行標簽

>水平線標簽

<hr/>

>字體樣式標簽

>注釋以及特殊代碼

空格 &nbsp

大于號 &gt

小于號 &lt

引號 &quot

版權符號 &copy

>圖像標簽

常見的圖像格式:JPG GIF PNG BMP

>超鏈接標簽

<a href="path" target="_self ^ _blank">連接文本或頭像</a>

>錨鏈接標簽

實現(xiàn)由甲位置跳轉到乙位置

>功能性鏈接

===========================================================

行內元素和塊元素

行內元素排在一行

塊元素獨占一行<p></p> <h1></h1>

===========================================================

列表

>有序列表

<ul>

</ul>

>無序列表

<ul>

</ul>

>定義列表

<dl>

</dl>

===========================================================

表格

特點

簡單通用

結構穩(wěn)定

基本結構

行

列

單元格

</tr>

<tr>

</tr>

</tr>

</table>

===========================================================

網(wǎng)頁中的媒體元素

如何實現(xiàn)在網(wǎng)頁上播放視頻和音頻

1,第三方自主開發(fā)的播放器

2,FLash

3,HTML5媒體元素

視頻元素

</video>

音頻元素

</oudio>

===========================================================

iframe框架

===========================================================

表單

表單元素

>單選按鈕 type="radio"

<from>

</from>

-----------------------------------------------------------

>復選框 type="checkbox"

<from>

<input name="名字" type="checkbox" value="選擇值1" checked默認選中/>提示1

<input name="名字" type="checkbox" value="選擇值2" checked默認選中/>提示2

<input name="名字" type="checkbox" value="選擇值3" checked默認選中/>提示3

</from>

-----------------------------------------------------------

>下拉列表框

</select>

-----------------------------------------------------------

按鈕

>重置按鈕type="reset"

>提交按鈕type="submit"

>button按鈕

>圖片按鈕 type="image"

>文件域 type="file"

>郵箱type="emil"

>網(wǎng)址type="url"

>數(shù)字 type="number"

>滑塊 type="range"

>搜索框 type="search"

表單元素的語法

method和action屬性

常見的表單元素

input(text、password、radio、checkbox、submit、reset、email、url、number、range、search)、select、textare

===========================================================

表單的高級應用

>隱藏<input name="名字" type="text" value="值1" readonly/>

>禁用<input type="submit" value="保存" disabled/>

>標注

===========================================================

表單的初級驗證

1,減輕服務器的壓力

2,保證數(shù)據(jù)的可行型和安全性

>初級驗證的方法

>placeholder屬性(提示信息)

>required屬性(必填項)

>pattern屬性(符合正則表達式)

在線咨詢

上一篇：Css實現(xiàn)手機端頁面強制橫屏
下一篇：一篇文章帶你了解CSS 文本樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

Html學習筆記（主體結構&amp;amp;教程資料）

么是HTML？

HTML主體標記

HTML文檔頭部標記

DTD

想要學習Html的伙伴，私信松鼠并回復：Html

即可領取Html的教學資料和教學視頻了（注意回復的大小寫要一致哦~）

TML標簽：

基本標簽：

格式化標簽：

div和span標簽：

圖像標簽：

超鏈接標簽：

注釋：

特殊字符：

表格標簽：

列表標簽：

表單標簽：

<label>標簽

您的項目需求

Html學習筆記（主體結構&教程資料）

么是HTML？

想要學習Html的伙伴，私信松鼠并回復：Html