當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

第12天，HTML基础

發(fā)布時間：2025/3/15 HTML 9 豆豆

生活随笔收集整理的這篇文章主要介紹了第12天，HTML基础小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

@(Html)[筆記]

一、HTML初識1.1 html結構1.2 html標簽格式1.3 標簽的語法：二、常用標簽2.1 < head >內的常用標簽2.1.1 < meta >標簽2.1.2 非meta標簽2.2 < body >內常用標簽2.2.1 基本標簽（塊級標簽和內聯(lián)標簽）2.2.2 < div >和< span >2.2.3 < img >圖片插入標簽2.2.4 < a >超鏈接標簽（錨標簽）2.2.5 列表標簽2.2.6 < table >表格標簽2.2.7 < form >表單標簽

一、HTML初識

1.1 html結構

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>網頁標題</title> </head> <body>文件體 </body> </html>

<!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔;
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>;
<head></head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義;
<title></title>定義網頁標題，在瀏覽器標題欄顯示;
<body></body>之間的文本是可見的網頁主體內容。

1.2 html標簽格式

1、HTML標簽是由尖括號包圍的關鍵詞，比如：<html>

2.、HTML標簽通常是成對出現(xiàn)的（雙邊標記），比如：<div>和</div>

3.、標簽不區(qū)分大小寫；推薦使用小寫；

4.、標簽分為兩部分：開始標簽<a>和結束標簽</a>，兩個標簽之間的部分，叫做標簽體，有些標簽功能比較簡單，使用一個標簽即可，這種標簽叫做自閉合標簽，例如：<br>換行、<hr>分割線、<input>、<img>

5.、標簽可以有若干個屬性，也可以不帶屬性。如<head>元素就不帶任何屬性。

6.、標簽可以嵌套，但是不能交叉嵌套，<a><b></a></b>這樣是錯誤的。

1.3 標簽的語法：

塊級標簽：<標簽名屬性1="屬性值1" 屬性2="屬性值2" ...>標簽體</標簽名>

內聯(lián)標簽：<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

二、常用標簽

標簽的分類：

塊級標簽：獨占一行，塊級標簽可以嵌套內聯(lián)標簽和塊級標簽
內聯(lián)標簽：取決于內容的長度，內聯(lián)標簽只能嵌套內聯(lián)標簽

2.1 < head >內的常用標簽

2.1.1 < meta >標簽

介紹

< meta >元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的供述和關鍵詞。
< meta >標簽位于文檔的頭部，不包含任何內容。
< meta >提供的信息是用戶不可見的。

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網頁功能。

(1)name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

(2)http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數(shù)的變量值。

2.1.2 非meta標簽

<title>oldboy</title> //頁面標題<link rel="icon" href="http://www.jd.com/favicon.ico"> //導入網站標題圖標<link rel="stylesheet" href="css.css"> //導入css文件<script src="hello.js"></script> //導入js腳本文件　

2.2 < body >內常用標簽

2.2.1 基本標簽（塊級標簽和內聯(lián)標簽）

<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題.<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.<b> <strong>: 加粗標簽.<strike>: 為文字加上一條中線.<em>: 文字變成斜體.<sup>和<sub>: 上角標和下角表.<br>:換行.<hr>:水平線特殊字符：&\lt; &\gt；&\quot；&\copy; &\reg;< &gt；&quot；??#去掉\可以轉換成對應的特殊字符

2.2.2 < div >和< span >

<div></div> ：<div>只是一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn).
<span></span>： <span>表示了內聯(lián)行(行內元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現(xiàn).

塊級元素與行內元素的區(qū)別：

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。

2.2.3 < img >圖片插入標簽

<img>標簽的屬性： src: 要顯示圖片的路徑.alt: 圖片沒有加載成功時的提示.title: 鼠標懸浮時的提示信息.width: 圖片的寬height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

2.2.4 < a >超鏈接標簽（錨標簽）

什么是超級鏈接？
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上
的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

<a href="" target="_blank" >click</a>href屬性指定目標網頁地址。該地址可以有幾種類型：絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）相對 URL - 指當前站點中確切的路徑（href="index.htm"）錨 URL - 指向頁面中的錨（href="#top"）屬性target="_blank" 表示開啟一個新窗口

2.2.5 列表標簽

無序列表：

<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]<li>列表的每一項內容</li> </ul>

有序列表：

<ol>: 有序列表<li>:列表中的每一項.</li> </ol>

定義列表：

2.2.6 < table >表格標簽

表格概念：

表格是一個二維數(shù)據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數(shù)字符號、預置文件和其它的表格等內容。

表格最重要的目的是顯示表格類數(shù)據，表格類數(shù)據是指最適合組織為表格格式（即按行和列組織）的數(shù)據。

表格標簽的基本結構：

屬性：

<tr>: table row<th>: table head cell<td>: table data cell屬性:border: 表格邊框.cellpadding: 內邊距cellspacing: 外邊距.width: 像素百分比.（最好通過css來設置長寬）rowspan: 單元格豎跨多少行colspan: 單元格橫跨多少列（即合并單元格）

2.2.7 < form >表單標簽

功能：表單用于向服務器傳輸數(shù)據，從而實現(xiàn)用戶與Web服務器的交互。

表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label標簽。

表單屬性

action：表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數(shù)據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get，默認取值就是get；
- get：提交時會將輸入的信息顯示在地址欄里；
- post：提交時不會將輸入的信息顯示在地址欄里；

表單元素

基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態(tài)頁面、數(shù)據處理等功能相結合，因此它是制作動態(tài)網站很重要的內容。表單一般用來收集用戶的輸入信息。

表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數(shù)據進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。當數(shù)據完整無誤后，服務器反饋一個輸入完成的信息。

< input >系列標簽

<1> 表單類型type: text 文本輸入框password 密碼輸入框radio 單選框,兩個radio，如果name值相同，就可以實現(xiàn)單選框。checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區(qū)別？file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 上傳文件注意兩點：1 請求方式必須是post2 enctype="multipart/form-data"<2> 表單屬性name: 表單提交項的鍵.注意和id屬性的區(qū)別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的value: 表單提交項的值.對于不同的輸入類型，value 屬性的用法也不同：type="button", "reset", "submit" - 定義按鈕上的顯示的文本type="text", "password", "hidden" - 定義輸入字段的初始值type="checkbox", "radio", "image" - 定義與輸入相關聯(lián)的值checked: radio 和 checkbox 默認被選中readonly: 只讀. text 和 passworddisabled: 對所用input都好使.

< select >標簽

<select> 下拉選標簽屬性name:表單提交項的鍵.size：選項個數(shù)multiple：multiple 表示在按下Ctrl鍵時，可以多選；<optgroup>為每一項加上分組<option> 下拉選中的每一項屬性：value:表單提交項的值. selected: selected下拉選默認被選中

< textarea >多行文本框

< label >標簽

定義：<label> 標簽為 input 元素定義標注（標記）。
說明：
1 label 元素不會向用戶呈現(xiàn)任何特殊效果。
2 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。

< fieldset >標簽

轉載于:https://www.cnblogs.com/caigy/p/7220957.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的第12天，HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
基础

上一篇：报错 findMergedAnnotat
下一篇： MyBatis延迟加载和缓存(4)