整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
管現代Web開發更加依賴于各種MVC框架，但是開發者仍然需要對HTML和DOM有基本的了解。然而，即使對有多年經驗的前端開發人員來說，也會遇到一些不知道的情況。
HTML<head>元素用作元數據（關于數據的數據）的容器。它用在<html>標簽和<body>標簽之間。
HTML文檔的頭部內容在頁面加載時不會顯示在瀏覽器中。它僅包含有關HTML文檔的元數據。
元數據定義HTML文檔的標題，字符集，樣式，鏈接，腳本和其他元信息。
HTML頭部可以包含很多元數據信息，也可以很少或沒有信息，這取決于我們的需求。但是頭部對HTML文檔至關重要。
<head>元素包含了所有的頭部標簽元素。在<head>元素中你可以插入腳本（scripts）,樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為:<title>,<style>,<meta>,<link>,<script>,<noscript>和<base>。
HTML<title>元素用于定義文檔的標題。它在所有HTML/XHTML文檔中使用。<title>元素必須放在<head>元素之間，并且一個文檔只能有一個title元素。
它定義了瀏覽器選項卡中的標題。
當用戶將頁面添加到收藏夾時，它為頁面提供標題。
它在搜索引擎結果中顯示頁面的標題。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>文檔內容......</body>
</html>12345678復制代碼類型：[html]HTML<base>元素
<base>標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<head>
<base href="http://www.runoon.com/images/" target="_blank">
</head>123復制代碼類型：[html]HTML<link>元素
HTML<link>元素用于將外部樣式表鏈接到您的網頁。<link>元素包含兩個主要屬性，即“rel”和“href”。rel屬性表示它是一個樣式表，href給出該外部文件的路徑。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>123復制代碼類型：[html]HTML<style>元素
HTML<style>元素用于為HTML頁面設置樣式。<style>元素只影響當前頁面HTML頁面的CSS屬性。如果要對多個頁面應用CSS，則應使用單獨的CSS文件。
<head>
<style type="text/css">body {background-color:yellow} p {color:blue}</style>
</head>123復制代碼類型：[html]HTML<meta>元素
HTML<meta>元素用于指定網頁上的字符集，頁面描述，關鍵字，作者和其他元數據。
搜索引擎和其他Web服務使用元數據來更好地對網頁進行排名。
<meta>標簽提供的元數據不顯示在頁面上，但會被瀏覽器解析。
<meta>一般放置于<head>區域。
<meta>標簽定義字符集：
<meta charset="UTF-8"> 1復制代碼類型：[html]charset屬性指定字符編碼。在此示例中，我們將其設置為“UTF-8”，這意味著它可以顯示任何語言。
<meta>標簽定義搜索引擎關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">1復制代碼類型：[html]<meta>標簽定義網頁描述內容:
<meta name="description" content="免費 Web & 編程 教程">1復制代碼類型：[html]<meta>標簽定義網頁作者:
<meta name="author" content="Runoon">1復制代碼類型：[html]<meta>標簽定義每30秒鐘刷新頁面:
<meta http-equiv="refresh" content="30">1復制代碼類型：[html]元刷新用于向瀏覽器提供指令，以在給定的時間間隔后自動刷新頁面。如上例所示，它將在30秒后自動刷新。
<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html>1復制代碼類型：[html]如果添加了URL，則在指定時間結束后重定向到該頁面。
<meta>標簽定義設備尺寸
HTML5中引入了此方法，以通過使用<meta>標簽來控制視窗大小。視窗是用戶在網頁上的可見區域。它隨設備的不同而變化，在手機上的顯示尺寸明顯小于計算機屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1復制代碼類型：[html]<meta>視窗元素如何設定和控制頁面的尺寸和縮放比例。
width=device-width是用來設置頁面的寬度將與設備的屏幕寬度保持一致。
當最初由瀏覽器加載頁面時，initial-scale=1.0用于設置初始縮放級別。
HTML<script>元素
<script>標簽用于加載腳本文件，如：JavaScript。
<script>元素在以后的章節中會詳細描述。
HTMLhead元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
「鏈接」
TML 框架
框架的作用就是把瀏覽器窗口劃分成多個子窗口。
每個子窗口可以載入各自的HTML文檔。
框架(frameset)與頁面主體body是同級的關系
1.框架的整體結構
<frameset rows="高度"> ~ </frameset>
<frameset cols="寬度"> ~ </frameset>
<frame src="http://www.haook.cn" name="框架名稱">
<noframes> ~ </noframes>
屬性屬性值說明
rowspx , %上下分割窗口
colspx , % 左右分割窗口
srcurl指定要載入到框架的頁面地址
name指定框架名稱
例 1：上中下分割框架
<frameset rows="高度A,高度B,高度C">
<frame src="1.html" />
<frame src="2.html" />
<frame src="3.html" />
</frameset>
例 2：左右分割框架
<frameset cols="寬度A, 寬度B, 寬度C">
<frame src="1.html" />
<frame src="2.html" />
<frame src="3.html" />
</frameset>
例 3：
<frameset rows="高度A,高度B">
<frame src="top.html" />
<frameset cols="寬度A,寬度B">
<frame src="menu.html" />
<frame src="main.html" />
</frameset>
</frameset>
2.設置框架的顯示方式
<frame scrolling="yes" noresize />
<frame marginwidth="左右縮進" marginheight="上下縮進" />
屬性屬性值說明
scrolling yes、no、auto是否顯示滾動條
noresize 禁止改變框架的尺寸大小
marginwidthpx框架內左右的空白區域
marginheightpx框架內上下的空白區域
frameborder1, 0是否顯示邊框
framespacing0框架與框架之間的空白
border0 邊框
3. <iframe> 內嵌框架
<iframe src="URL" name="框架名"> ~ </iframe>
屬性屬性值說明
widthpx , %指定框架的寬度
heightpx , % 指定框架的高度
scrollingyes,no,auto是否顯示滾動條
frameborder1, 0是否顯示邊框
head 頭信息
1.設置頁面標題
<title> ~ </title>
2. 設置頁面編碼
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
utf-8 多國語言編碼
gb2312 中文簡體編碼
3. 設置頁面關鍵字，內容介紹
<meta name="keywords" content="關鍵字1，關鍵字2，…" />
<meta name="description" content="內容介紹" />
HTML是用來開發網頁的，它是開發網頁的語言
全稱HyperText Mark-up Language，超文本標記語言
標記就是標簽
<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。
超文本 兩層含義：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容
網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁
VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具
下載網址: https://code.visualstudio.com/Download
選擇對應的安裝包進行下載:
安裝一切默認
1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容， 比如: img標簽
標簽的使用形式
列表標簽
網頁效果
表格標簽
<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭
屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并
網頁效果
表單標簽
表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器
<form>標簽 表示表單標簽，定義整體的表單區域
一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內容有很多其他標簽來承載
這些標簽稱為表單元素標簽
網頁效果
表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器
兩種方式的區別:
表單元素屬性設置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定義單行文本輸入框
密碼 type="password" 定義密碼輸入框
性別 type="radio" 定義單選框
愛好 type="checkbox" 定義復選框
照片 type="file" 定義上傳文件
個人描述 <textarea></textarea> 定義多行文本輸入框
地址 <select></select> 定義下拉列表
提交 type="submit" 定義提交按鈕
重置 type="reset" 定義重置按鈕
按鈕 type="button" 定義一個普通按鈕
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
點擊提交：
可以看到服務器收到了請求報文。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
