第12天，HTML基础
@(Html)[筆記](méi)
目錄
一、HTML初識(shí)1.1 html結(jié)構(gòu)1.2 html標(biāo)簽格式1.3 標(biāo)簽的語(yǔ)法：二、常用標(biāo)簽2.1 < head >內(nèi)的常用標(biāo)簽2.1.1 < meta >標(biāo)簽2.1.2 非meta標(biāo)簽2.2 < body >內(nèi)常用標(biāo)簽2.2.1 基本標(biāo)簽（塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）2.2.2 < div >和< span >2.2.3 < img >圖片插入標(biāo)簽2.2.4 < a >超鏈接標(biāo)簽（錨標(biāo)簽）2.2.5 列表標(biāo)簽2.2.6 < table >表格標(biāo)簽2.2.7 < form >表單標(biāo)簽一、HTML初識(shí)
1.1 html結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>網(wǎng)頁(yè)標(biāo)題</title> </head> <body>文件體 </body> </html>- <!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來(lái)解析html文檔;
- <html></html>是文檔的開(kāi)始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個(gè) HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>;
- <head></head>元素出現(xiàn)在文檔的開(kāi)頭部分。<head>與</head>之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義;
- <title></title>定義網(wǎng)頁(yè)標(biāo)題，在瀏覽器標(biāo)題欄顯示;
- <body></body>之間的文本是可見(jiàn)的網(wǎng)頁(yè)主體內(nèi)容。
1.2 html標(biāo)簽格式
1、HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如：<html>
2.、HTML標(biāo)簽通常是成對(duì)出現(xiàn)的（雙邊標(biāo)記），比如：<div>和</div>
3.、標(biāo)簽不區(qū)分大小寫(xiě)；推薦使用小寫(xiě)；
4.、標(biāo)簽分為兩部分：開(kāi)始標(biāo)簽<a>和結(jié)束標(biāo)簽</a>，兩個(gè)標(biāo)簽之間的部分，叫做標(biāo)簽體，有些標(biāo)簽功能比較簡(jiǎn)單，使用一個(gè)標(biāo)簽即可，這種標(biāo)簽叫做自閉合標(biāo)簽，例如：<br>換行 、<hr>分割線、<input>、<img>
5.、標(biāo)簽可以有若干個(gè)屬性，也可以不帶屬性。如<head>元素就不帶任何屬性。
6.、標(biāo)簽可以嵌套，但是不能交叉嵌套，<a><b></a></b>這樣是錯(cuò)誤的。
1.3 標(biāo)簽的語(yǔ)法：
塊級(jí)標(biāo)簽：<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" ...>標(biāo)簽體</標(biāo)簽名>
內(nèi)聯(lián)標(biāo)簽：<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
二、常用標(biāo)簽
標(biāo)簽的分類：
- 塊級(jí)標(biāo)簽：獨(dú)占一行，塊級(jí)標(biāo)簽可以嵌套內(nèi)聯(lián)標(biāo)簽和塊級(jí)標(biāo)簽
- 內(nèi)聯(lián)標(biāo)簽：取決于內(nèi)容的長(zhǎng)度，內(nèi)聯(lián)標(biāo)簽只能嵌套內(nèi)聯(lián)標(biāo)簽
2.1 < head >內(nèi)的常用標(biāo)簽
2.1.1 < meta >標(biāo)簽
介紹
< meta >元素可提供有關(guān)頁(yè)面的元信息（meta-information），針對(duì)搜索引擎和更新頻度的供述和關(guān)鍵詞。
- < meta >標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
< meta >提供的信息是用戶不可見(jiàn)的。
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。
(1)name屬性: 主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"><meta name="description" content="老男孩培訓(xùn)機(jī)構(gòu)是由一個(gè)很老的男孩創(chuàng)建的">(2)http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁(yè)內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引號(hào)，分別在秒數(shù)的前面和網(wǎng)址的后面)<meta http-equiv="content-Type" charset=UTF8"><meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />2.1.2 非meta標(biāo)簽
<title>oldboy</title> //頁(yè)面標(biāo)題<link rel="icon" href="http://www.jd.com/favicon.ico"> //導(dǎo)入網(wǎng)站標(biāo)題圖標(biāo)<link rel="stylesheet" href="css.css"> //導(dǎo)入css文件<script src="hello.js"></script> //導(dǎo)入js腳本文件2.2 < body >內(nèi)常用標(biāo)簽
2.2.1 基本標(biāo)簽（塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）
<hn>: n的取值范圍是1~6; 從大到小. 用來(lái)表示標(biāo)題.<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.<b> <strong>: 加粗標(biāo)簽.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標(biāo) 和 下角表.<br>:換行.<hr>:水平線特殊字符：&\lt; &\gt；&\quot；&\copy; &\reg;< >；"；??#去掉\可以轉(zhuǎn)換成對(duì)應(yīng)的特殊字符2.2.2 < div >和< span >
<div></div> ：<div>只是一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn).
<span></span>： <span>表示了內(nèi)聯(lián)行(行內(nèi)元素),并無(wú)實(shí)際的意義,主要通過(guò)CSS樣式為其賦予不同的表現(xiàn).
塊級(jí)元素與行內(nèi)元素的區(qū)別：
所謂塊元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。
這兩個(gè)元素是專門(mén)為定義CSS樣式而生的。
2.2.3 < img >圖片插入標(biāo)簽
<img>標(biāo)簽的屬性： src: 要顯示圖片的路徑.alt: 圖片沒(méi)有加載成功時(shí)的提示.title: 鼠標(biāo)懸浮時(shí)的提示信息.width: 圖片的寬height:圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)2.2.4 < a >超鏈接標(biāo)簽（錨標(biāo)簽）
什么是超級(jí)鏈接？
所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上
的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。
2.2.5 列表標(biāo)簽
無(wú)序列表：
<ul>: 無(wú)序列表 [type屬性：disc(實(shí)心圓點(diǎn))(默認(rèn))、circle(空心圓圈)、square(實(shí)心方塊)]<li>列表的每一項(xiàng)內(nèi)容</li> </ul>有序列表：
<ol>: 有序列表<li>:列表中的每一項(xiàng).</li> </ol>定義列表：
<dl> 定義列表<dt> 列表標(biāo)題</dt><dd> 列表項(xiàng)</dd> </dl>2.2.6 < table >表格標(biāo)簽
表格概念：
表格是一個(gè)二維數(shù)據(jù)空間，一個(gè)表格由若干行組成，一個(gè)行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號(hào)、預(yù)置文件和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)，表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格標(biāo)簽的基本結(jié)構(gòu)：
<table><tr> //一對(duì)<tr>表示一行<th>標(biāo)題</th><th>標(biāo)題</th></tr><tr><td>內(nèi)容</td><td>內(nèi)容</td></tr> </table>屬性：
<tr>: table row<th>: table head cell<td>: table data cell屬性:border: 表格邊框.cellpadding: 內(nèi)邊距cellspacing: 外邊距.width: 像素 百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）rowspan: 單元格豎跨多少行colspan: 單元格橫跨多少列（即合并單元格）2.2.7 < form >表單標(biāo)簽
功能：表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
表單屬性
<form action="" method="">... </form>action：表單提交到哪.一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過(guò)來(lái)的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web
- method: 表單的提交方式 post/get，默認(rèn)取值就是get；
- get：提交時(shí)會(huì)將輸入的信息顯示在地址欄里；
- post：提交時(shí)不會(huì)將輸入的信息顯示在地址欄里；
表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。表單一般用來(lái)收集用戶的輸入信息。
表單工作原理：
訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫(xiě)必需的信息，然后按某個(gè)按鈕提交。這些信息通過(guò)Internet傳送到服務(wù)器上。
服務(wù)器上專門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成的信息。
< input >系列標(biāo)簽
<1> 表單類型type: text 文本輸入框password 密碼輸入框radio 單選框,兩個(gè)radio，如果name值相同，就可以實(shí)現(xiàn)單選框。checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區(qū)別？file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 上傳文件注意兩點(diǎn)：1 請(qǐng)求方式必須是post2 enctype="multipart/form-data"<2> 表單屬性name: 表單提交項(xiàng)的鍵.注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的value: 表單提交項(xiàng)的值.對(duì)于不同的輸入類型，value 屬性的用法也不同：type="button", "reset", "submit" - 定義按鈕上的顯示的文本type="text", "password", "hidden" - 定義輸入字段的初始值type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值checked: radio 和 checkbox 默認(rèn)被選中readonly: 只讀. text 和 passworddisabled: 對(duì)所用input都好使.< select >標(biāo)簽
<select> 下拉選標(biāo)簽屬性name:表單提交項(xiàng)的鍵.size：選項(xiàng)個(gè)數(shù)multiple：multiple 表示在按下Ctrl鍵時(shí)，可以多選；<optgroup>為每一項(xiàng)加上分組<option> 下拉選中的每一項(xiàng) 屬性：value:表單提交項(xiàng)的值. selected: selected下拉選默認(rèn)被選中< textarea >多行文本框
<form id="form1" name="form1" method="post" action=""><textarea cols=“寬度” rows=“高度” name=“名稱”>默認(rèn)內(nèi)容</textarea> </form>< label >標(biāo)簽
定義：<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
說(shuō)明：
1 label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
2 <label> 標(biāo)簽的 for 屬性值應(yīng)當(dāng)與相關(guān)元素的 id 屬性值相同。
< fieldset >標(biāo)簽
<fieldset><legend>登錄吧</legend><input type="text"> </fieldset>轉(zhuǎn)載于:https://www.cnblogs.com/caigy/p/7220957.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的第12天，HTML基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 报错 findMergedAnnotat
- 下一篇： 2017年html5行业报告,云适配发布