00HTML

時間 2019-11-30

標籤 00html html 欄目 HTML 简体版

原文原文鏈接

一.概述

超文本標記語言（Hyper Text Markup Language），HTML是一門描述性的語言.
基本語法：
　　<標籤> 內容 </標籤>
** 在一個網頁中，HTML是網頁的結構，CSS是網頁的外觀，JS是網頁的行爲。javascript

二.文檔結構

1.文檔聲明DOCTYPE

文檔聲明用於識別HTML的版本，聲明引用DTD（文檔類型定義），規定了標記語言的規則。php

/////嚴格模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
/////過渡模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
/////HTML5版，簡潔通用，沒有兼容問題
<!DOCTYPE html>css

** 注意事項：
在沒有文檔聲明時，IE瀏覽器就會進入怪異模式，也就是，瀏覽器會根據本身的標準去解釋文檔，若是加上了聲明，就會按照w3c標準解釋。
在ie盒子模型中，W/H部分包含了border和padding，也就是：W/H = content + padding+border;html

2.根元素html

限定文檔的開始和結束，包含兩個部分<head>,<body>
<html xmlns="http://www.w3.org/1999/xhtml">，其中的vmlns用於聲明該網頁使用的是W3C組織的XHTML標準。java

3.頭元素head

　　定義文檔的頭部，是頭部元素的容器。文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。瀏覽器

　　　//////<meta>元信息標籤
　　　<meta>標籤的格式是名稱/值對的形式：content中的屬性內容以 , 隔開
　　　　<meta 屬性=「屬性值」 content=」屬性內容」>
　　　　　　meta屬性：
　　　　　　　　name類型
　　　　　　　　　　設定傳遞給瀏覽器和搜索引擎的信息
　　　　　　　　　　格式：<meta name=」」 content=」」>
　　　　　　　　http-equiv類型
　　　　　　　　　　相似HTTP協議，傳遞給瀏覽器引擎，用於幫助瀏覽器正確和精確的顯示網頁內容
　　　　　　　　　　格式：<meta http-equiv=」」 content=」」>
　　　　　　　　charset
　　　　　　　　　　用於定義文檔的字符編碼
　　　　　　　　　　<meta charset="utf-8">緩存

跳轉連接：經常使用meta總結安全

　　//////<title>
　　用於定義HTML文件的標題信息，即當前文件在瀏覽器中瀏覽時有瀏覽器窗口的標題欄上顯示的文字服務器

　　////////<base>
　　　　* <base href="" /> 定義頁面連接默認基礎定位
　　　　　　<base>標籤的href屬性是爲整個頁面定義全部連接的基礎定位，主要做用是爲了確保文檔中的全部相對定位URL均可以被分解成正確的文檔地址，使文檔自己被移動或重命名的狀況下也能夠正確的解析，當這些元素進行跳轉時，都會基於當前目錄加上這個默認的URL（相對路徑的狀況下）再加上本身的href屬性值來跳轉。
　　　　** <base target="_blank"/> 定義頁面連接默認打開方式,base經過target屬性告訴瀏覽器如何打開頁面。併發

跳轉連接：base標籤

4.身元素body

　　爲HTML文件的主體標記，即只有在標記中編輯的網頁對象才能夠在瀏覽器窗口中顯示，該標記具備多個標記屬性，其全部的標記屬性基本上都是用來控制當前HTML文件的頁面屬性

5.外聯標籤

　　//////<link>
　　　　link標籤一般放置在一個網頁的頭部標籤head標籤內的用於連接外部樣式表，外部資源。
　　　　** 連接外部樣式表
　　　　　　<link rel="stylesheet" type="text/css" href="myCss.css" />
　　　　** ICO圖標引入，加載一個圖標做爲網站連接頭部的圖標。
　　　　　　<link rel="icon" type="image/x-icon" href="favicon.ico" />

　　/************************ link方式和import方式引入css文件的區別 ***********************/
　　1.link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
　　2.link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
　　3.link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持（IE5-）。
　　4.link支持使用Javascript控制DOM去改變樣式；而@import不支持。

　　//////<script>
　　　　* 引用腳本文件
　　　　　　在頁面中用script標籤引入javascript文件（<script type="text/javascript" src="js文件地址"></script>），瀏覽器在渲染頁面的時候，當讀取到script元素時，瀏覽器不會以HTML或XHTML的方式處理其內容，瀏覽器會通知瀏覽器的腳本引擎來接管script元素中的內容。
　　　　** 在頁面放置的位置
　　　　　　瀏覽器從同一個域名併發載入的資源是有限制的，因此當把腳本添加到head元素中時，首先載入的將是腳本，其次纔是文檔的剩餘部分。引入了javascript的script元素標籤放在head中可能會使得瀏覽器延遲頁面剩餘部分的顯示，主要是由於腳本中可能會調用document.write方法修改dcument對象。
　　

　　　　*****<noscript>
　　　　　　字面意思，NO-script，沒有script，也就是瀏覽器不支持JavaScript時，<noscript>標籤中內容纔會被顯示，
　　　　　　- 瀏覽器不支持腳本；
　　　　　　- 瀏覽器支持腳本，可是JavaScript被禁用；
　　　　　以上兩條符合任何一個，<noscript>標籤內的內容都會被顯示。

　　上圖頁面，給用戶了一個信息，當瀏覽器不支持或禁用JavaScript是纔會被顯示，不然用戶將永遠不會看到，而且不會影響頁面其餘元素的顯示。

6.註釋

HTML註釋：
　　 CSS註釋：/* */
　　 JS註釋：//

三.相關概念

1.自閉和標籤

大多數標籤都是成對出現的，好比<div></div>由開始標籤和結束標籤進行包裹。而有些標籤，好比<br />,<hr />都沒有結束標籤，不能對其餘元素進行包裹，因此只能定義它自身的屬性。

四.基本標籤

1.段落文字標籤

　　i.標題標籤<h1>~<h6>
　　　　一個頁面只能有一個<h1>標籤
　　ii.段落標籤<p>
　　iii.文本標籤
　　　　<span>
　　　　<b>和<strong>
　　　　　　通常使用<strong>用於着重強調
　　　　<i>和<em>
　　　　　　通常使用<em>用於着重強調
　　　　<sup>和<sub>

　　iv.換行標籤<br />
　　v.水平線標籤<hr />
　　vi.分區標籤<div>
　　　　主要用於分區，在HTML文檔中劃分區域，提供結構和背景。
　　　　Div標籤能夠放入<body>標籤的任何內部標籤
　　vii.特殊符號

連接：經常使用字符

2.圖片標籤

<img src="圖片地址" alt="替換文字" title=」提示文字」 /> 圖片（單標籤）
alt屬性是替換名字，是給搜索引擎抓取使用，當圖片顯示不出來時，就會顯示出alt的內容；
title 屬性是提示文字，當鼠標移到圖片上的時候會顯示出來，大部分的標籤都會有這個屬性

連接：img相關

3.超連接標籤

　　a標籤能夠用作連接、錨點、或者連接下載文件

　　　　　　<a href="#" target=」」></a>
　　　　　　　　target 連接打開方式
　　　　　　　　_blank 新窗口
　　　　　　　　_self 當前窗口
　　　　*在herf內將文件放上，該a標籤就會成爲下載連接
　　　　*在herf內放入某一個id，格式是#id ，就會成爲一個錨點連接，能夠實現頁面內跳轉的功能

4.列表標籤

//////ol有序列表
　　<ol>
　　　　<li>列表項</li>
　　　　<li>列表項</li>
　　</ol>
　　* ol要和li配合使用
　　* ol的子元素必須是li，不能有其餘元素

//////ul無序列表
　　<ul>
　　　　<li>列表項</li>
　　　　<li>列表項</li>
　　</ul>
　　* ul要和li配合使用
　　* ul的子元素必須是li，不能有其餘元素

///////dl定義列表

5.表格標籤

　　//////完整結構

　　//////表格樣式重置
　　　　th,td{padding:0;} 重置單元格默認填充
　　　　table{border-collapse:collapse;} 單元格間隙合併
　　//////合併單元格
　　　　colspan 規定單元格可橫跨的列數、合併行
　　　　rowspan 規定單元格可橫跨的行數、合併列

******注意事項*******
　　　　a.不要給table，th，td之外的表格標籤加樣式，不然容易出現兼容問題
　　　　b.單元格默認平分table的寬度
　　　　c.th裏面的內容默認加粗、上下左右居中
　　　　d.td裏面的內容默認上下居中，左對齊
　　　　e.table決定了整個表格的寬度
　　　　f.table裏面的寬度會被轉換成百分比
　　　　g.表格裏面的每一列都應該加寬度
　　　　h.表格同一豎列繼承最大寬度
　　　　i.表格同一行繼承最大高度

6.表單標籤

表單(form)：用於收集用戶的數據，提交給服務器上某個頁面，該頁面能夠對錶單中提交的數據進行保存或查詢(由php/jsp/aspx來擔當)。
　　action:指定表單數據的處理頁面(動態頁面)
　　method:GET/POST,前者把請求數據追加在地址欄查詢字符串中(有長度限制)；後者把數據以單獨的數據包發送給服務器(無長度限制、且可用於文件上傳)

　　　　/* method:get/post;
　　　　　　* get:把請求的數據追加在地址欄查詢字符串中，有長度的限制1024=1k，
　　　　　　* post:把數據以單獨的數據包發送給服務器，無長度限制，且能夠用於文件上
　　　　*/
　　enctype:EncodedType表單中提交的數據的編碼類型，可取值：
　　text/plain表單數據不作任何編碼直接上傳
　　application/x-www-form-urlencoded把表單中的數據(中文、特殊符號)編碼後再上傳，只能對字符進行編碼
　　multipart/form-data以一種特殊的格式上傳字符/字節數據

***1.樣式重置
　　form{margin:0;}
　　input{margin:0;padding:0;}
　　select{margin:0;}
　　textarea{margin:0;padding:0; resize:none;(禁用用戶調整尺寸)
　　overflow:hidden;outline:none;(取消焦點框)}
***2.基本結構

<form action=」提交地址」 method=」提交方式get/post」 target=」打開方式」>

　　文本框
　　　　<!--文本框-->
　　　　<input type=" text" name="" value="" />
　　　　<input type=」text」 id=」id」 name=」」 disabled=」輸入域禁用，不能改，不能提交」readonly=」輸入域只讀，不能改，能提交」 >單行文本框</input>
　　　　<!--密碼文本框-->
　　　　<input type=" password" name="" value="" />
　　選項按鈕
　　　　<!--單選按鈕 指定同一個name達到單選的效果 用label將input元素和文字包裹起來，達到點擊文字也可以選中相應的選擇按鈕,不兼容IE6-->
　　　　<input type=" radio" name="" value="" />
　　　　<!--兼容IE6-->
　　　　<input type=" radio" name="" id="id" /><label for=」id」>文字</label>
　　　　<!--複選按鈕 disabled屬性，不可選中--> 
　　　　<input type=" checkbox " name="" value="" />
　　按鈕
　　　　<!--提交按鈕-->
　　　　<input type=" submit " name="" value="" />
　　　　<!--重置按鈕 -->
　　　　<input type=" reset " name="" value="" />
　　　　<!--普通按鈕-->
　　　　<input type=" button " name="" value="" />
　　圖片域
　　　　<!--圖片按鈕-->
　　　　<in put type=" image " name="" value="" />
　　文件域
　　　　<!--上傳文件 各個瀏覽器樣式都不太同樣，很難作到兼容-->
　　　　<input type=" file " name="" value="" />
　　隱藏域
　　　　<!--隱藏-->
　　　　<input type=" hidden " name="" value="" />
　　　　<!-- 在表單中添加一個隱藏字段,用戶看不見，可是能夠提交  -->
　　　　<input type=」hidden」 name=」 (必需)隱藏字段的名」 value=」 (必需)隱藏字段的值」 /> 
　　下拉列表
　　　　<select> <!--下拉菜單：對高度的支持不兼容-->
　　　　　　<option selected>選項1 默認顯示</option>
　　　　　　<option>選項2</option>
　　　　</select>
　　文本域 
　　　　<textarea>文本域:默認滾動條在各個瀏覽器下不兼容</textarea>
</form>

***3.注意
- button按鈕：
　　在表單中涉及到提交數據到服務器，因此一般使用<input type=」button」>方式，只有不涉及提交數據的狀況下才會使用<button>
　　須要注意的是：對於須要與服務器進行交互的表單元素，必須都要放置在form標籤中，而對於不須要交互的就不須要了。

- submit提交按鈕的相關問題
　　使用的是舊的盒子模型，寬度包括padding和border
　　若是要設置左右的padding的話，ie6,7會表現比你設置的要寬，沒有正確解析，添加overflow:visible就能夠解決這個問題
　　只有ie支持line-height，火狐和谷歌都有一個你沒有辦法覆寫的line-height，因此別對submit使用這個line-height了
　　在ie6,7下表單任意元素激活時，submit btn都會出現個黑色的邊框，除非你設置border爲none
　　若是設置了border咱們會發現默認的漸變背景沒有了；第二個問題是默認背景火狐解析的有點問題，偏上，而後文字也不是那麼垂直居中對齊，仍是有幾個像素的差異，而其餘瀏覽器是完美的垂直居中對齊，根本就不須要設置上下的padding和line-height，因此咱們應該對火狐打bug，在這裏我設置其padding-bottom爲3px就能夠了

- 下拉列表：
　　select: **用戶不可輸入，只能選
　　<select name="" size="顯示行數" multiple="多選（shift/ctrl） ">
　　　　<optgroup label="選項組的名稱">
　　　　　　<option value=" " select選擇>選項</option>
　　　　　　<option value=" ">選項</option>
　　　　</optgroup>
　　</select> **用戶不可輸入，只能選

多行文本輸入域：

<textarea name=」」 rows=」行數」 cols=「列數」 disabled=」輸入域禁用，不能改，不能提交」readonly=」輸入域只讀，不能改，能提交」>
　　多行文本輸入域值沒有Value屬性，只能輸入純文本
</textarea>
若是想要輸入「富文本編輯框」—可使用第三方工具實現（KindEdtitor / FCKEdtior / CuteEditor）

表單中實現文件上傳必須知足：
(1)表單中使用<input type=」file」 name=」」/>選擇文件
(2)表單必須使用POST提交 method=」POST」
(3)表單的編碼類型必須聲明爲 enctype=」multipart/form-data」
<input type=」file」 name=」」></input>

五.其餘

1.iframe引入其餘頁面

　　浮動框架，就是在一個頁面嵌入一個或多個子頁面
　　<iframe src=」引入的頁面地址」 style=「W H frameboder=」0」去掉邊框 scrolling=」no」去掉滑動條>當頁面不顯示時顯示的文字</iframe>

2.插入多媒體

　　在線音頻和視頻文件以及flash使用<embed>標籤
　　<embed src="多媒體文件地址" width="播放界面的寬度" height="播放界面的高度"/>

3.網頁背景音樂

　　<bgsound src="背景音樂的地址" loop="播放次數">　　只適用於IE瀏覽器，在Firefox等中未必適用。　　loop="2"表示重複2次，loop="infinite"表示無限次循環播放，也可使用loop="-1"表示無限次循環播放。　　使用bgsound設置背景音樂，當窗口最小化時就自動暫停播放，窗口恢復時，繼續播放。

相關標籤/搜索

00html

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。