前端-HTML基礎

来源:https://www.cnblogs.com/lsf123456/archive/2019/07/25/11245862.html
-Advertisement-
Play Games

一、什麼是HTML hyper text markup language 即超文本標記語言 超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 標記語言: 標記（標簽）構成的語言. 網頁==HTML文檔，由瀏覽器解析，用來展示的 靜態網頁：靜態的資源，如xxx.html 動態網頁 ...


一、什麼是HTML

hyper text markup language  即超文本標記語言

超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。

標記語言: 標記（標簽）構成的語言.

網頁==HTML文檔，由瀏覽器解析，用來展示的

靜態網頁：靜態的資源，如xxx.html

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

html文檔樹形結構圖：

二、標簽

1. 什麼是標簽

  • 是由一對尖括弧包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.
  • 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
  • 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
  • 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />
  • 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

2. 標簽的屬性

  • 通常是以鍵值對形式出現的. 例如 name="alex"
  • 屬性只能出現在開始標簽 或 自閉和標簽中.
  • 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
  • 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

3. <!DOCTYPE html>標簽

由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在
W3C標準出台以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱為Compatibility 
Mode)；由於W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars
mode)，這就是二者最簡單的區別。
W3C標準推出以後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，
很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的相容性，使以
前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode，兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。

如果你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啟了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

4. <head>標簽

<meta>

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

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

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="這是一個網站"/>

　　2: http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，content中的內容其實就是各個參數的變數值 。

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(註意後面的引號，分別在秒數的前面和網址的後面)
<meta http-equiv="content-Type" charset=UTF8">
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

其他標簽

<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>

5. <body>標簽

塊級標簽和內聯標簽

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div><span>

　　塊級標簽：<p><h1><table><ol><ul><form><div>

　　內聯標簽：<a><input><img><sub><sup><textarea><span>

　　block（塊）元素的特點

    • 總是在新行上開始；
    • 寬度預設是它的容器的100%，除非設定一個寬度。
    • 它可以容納內聯元素和其他塊元素

　　inline元素的特點

    • 和其他元素都在一行上；
    • 寬度就是它的文字或圖片的寬度，不可改變
    • 內聯元素只能容納文本或者其他內聯元素

　　特殊字元

　　　　&lt; &gt；&quot；&copy;&reg;

圖形標簽<img>

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

<img src="img/abc.jpg " alt="123" title="rua" width="300" height="300"/>

超鏈接標簽<a>

href:要連接的資源路徑 格式如下: href="http://www.baidu.com" 
target: _blank : 在新的視窗打開超鏈接. 框架名稱: 在指定框架中打開連接內容.
name: 定義一個頁面的書簽.
用於跳轉 href : #id.（錨）
<a href="http://www.xiaohuar.com/" target="_blank">

列表標簽

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>
<dl>
	<dt>第一章</dt>
	<dd>第一節</dd>
	<dd>第二節</dd>
	<dt>第二章</dt>
	<dd>第一節</dd>
	<dd>第二節</dd>
</dl>

表格標簽<table>

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
<tr>: table row
         <th>: table head cell
         <td>: table data cell
rowspan:  單元格豎跨多少行
colspan:  單元格橫跨多少列（即合併單元格）
<th>: table header <tbody>(不常用): 為表格進行分區.

<table bgcolor="beige" border="1px" cellpadding="5px" cellspacing="1px">
	<tr>
		<th rowspan="2">111</th>
		<th>222</th>
		<th>333</th>
	</tr>
	<tr>
		<td>222</td>
		<td>333</td>
	</tr>
	<tr>
		<td>111</td>
		<td colspan="2" align="center">222</td>
	</tr>
</table>

表單標簽<form>

<input> 標簽的屬性和對應值 

 type:     text 文本輸入框
             password 密碼輸入框
             radio 單選框
             checkbox 多選框  
             submit 提交按鈕            
             button 按鈕(需要配合js使用.) button和submit的區別？
             file 提交文件：form表單需要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.註意和id屬性的區別：name屬性是和伺服器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的

 value:   表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：

?12345type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入欄位的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　

 checked:  radio 和 checkbox 預設被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

<select> 下拉選標簽屬性

name:表單提交項的鍵.
size：選項個數
multiple：multiple 
    <option> 下拉選中的每一項 屬性：
        value:表單提交項的值.   selected: selected下拉選預設被選中
    <optgroup>為每一項加上分組

<textarea> 文本域

name:    表單提交項的鍵.
cols:    文本域預設有多少列
rows:    文本域預設有多少行

<label> 

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>

<fieldset>
    <legend>登錄吧</legend>
    <input type="text">
</fieldset>

<form action="192.168.50.85:8080">
	<div>姓名<input type="text" name="user" /></div>
	<div>密碼<input type="password" name="passwd" /></div>
	<div>性別   男<input type="radio" name="gender" value="man"/>  女<input type="radio" name="gender" value="woman"/></div>
	<div>愛好   電影<input type="checkbox" name="hobby" value="movie"/>  音樂<input type="checkbox" name="hobby" value="music"/></div>
	<div><input type="submit" value="提交"/></div>
	<div><input type="button" value="提交"/></div>
	<div>簡介<textarea name="text" id="1" cols="30" rows="3">請輸入簡介</textarea></div>
	<div>省<select name="province" id="2" >
		<option value="henan">河南</option>
		<option value="hubei">湖北</option>
		<option value="hebei">河北</option>
	</select>
	</div>
</form>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 藍牙Beacon廣播數據包格式以及解析
    內容轉載自 "我的博客" 如果你只想找到如何用代碼解析各數據請點擊目錄"使用Java解析數據" @ "TOC" 1. 獲取原始藍牙廣播包 首先需要開啟 開發者選項 ：不同Android手機打開此功能的方法基本一致，首先打開設置，然後找到系統版本號（例如MIUI系統的全部參數選項的MIUI版本），快速 ...
  • 7.智能快遞櫃(APP及微信公眾號)
    1.智能快遞櫃(開篇) 2.智能快遞櫃(終端篇) 3.智能快遞櫃(通信篇-HTTP) 4.智能快遞櫃(通信篇-SOCKET) 5.智能快遞櫃(通信篇-Server程式) 6.智能快遞櫃(平臺篇) 7.智能快遞櫃(APP及微信公眾號) 8.智能快遞櫃SDK(聯網型鎖板) 9.智能快遞櫃SDK(串口型鎖 ...
  • iOS 圖解彈幕功能的實現
    先來看一張效果圖(LICEcap錄製的有點卡, 湊合看) 理一下大概流程: 接下來實現: 彈幕視圖從底部彈上來, 依次動畫向上滾動, 出屏幕就移除加入重用隊列, 下次使用. 定義相關屬性: 1. 根據彈幕區域, 確定總共需要的彈幕itemView個數(總區域高度/最小高度),並添加到彈幕控制項底部 從 ...
  • 林大媽的JavaScript基礎知識（一）：JavaScript簡史
    前言：做一名Web設計師是一件令人興奮的事。在Web技術中，JavaScript是一個經歷從被人誤解到萬眾矚目的巨大轉變，在歷史的衝擊中被留存下來的個體。因為JavaScript的引導，Web開發也從混亂無序的狀態轉變為需要經過嚴格訓練才能勝任的工作。當大家談論起Web開發時，自然會提到Web標準中 ...
  • JavaScript ES6 Promiss對象
    說明 Node.js中，以非同步(Async)回調著稱，使用了非同步，提高了程式的執行效率，但是，代碼可讀性較差的。 假如有幾個非同步操作，後一個操作需要前一個操作的執行完畢之後返回的數據才能執行下去，如果使用Node.js，就需要一層層嵌套下去，Promised對象就是針對此問題所提出來的的解決辦法。 ...
  • EggJS介面開發
    需求 隨著Nodejs的普及，前端開發的開發場景基本可以貫穿界面交互到數據存儲，無縫實現全棧開發。最近在實現一個內部項目管理工具的時候，就嘗試了一把介面和資料庫開發。 什麼是Egg.js Egg.js是阿裡開源的一套Nodejs開發框架。Egg.js官網的介紹是： Egg.js 為企業級框架和應用而 ...
  • @media screen媒體查詢實現頁面自適應佈局
    @media screen and (max-width:375px) { //小於等於375可以進入 html { background: red; } } 由此可見，邊界都包含在內。 更多參考連接 https://www.runoob.com/cssref/css3-pr-mediaquery. ...
  • GoogleMap增加標記和路線軌跡的方法
    聲明：本文基於JavaScript環境編寫。 前言 按照目前的項目需求，我們需要在谷歌地圖上標記出當前倉庫的位置、司機補貨的行車路徑、司機當前班次需要補貨的機器的位置，同時根據補貨狀態的不同標記成不同狀態的圖標。 分析完需求，總結一下就是我們需要在谷歌地圖上顯示眾多標記、軌跡畫線、不同的標記顯示不同 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類