HTML總結(jié)

1、基本概念

HTML
超文本標(biāo)記語言
H Hyper
T text （超鏈接 圖片 視頻 音頻等）
M markup（標(biāo)記，標(biāo)簽 <不是編程語言>）
L language

HTML是一個樹狀結(jié)構(gòu)，標(biāo)簽間是有父子，兄弟關(guān)系的

html結(jié)構(gòu)
------head
顯示網(wǎng)頁信息聲明 title/meta/link/script
title是必填項(xiàng)
-----------title
------body
------------所有可顯示內(nèi)容
所有要在頁面主體區(qū)域顯示的內(nèi)容必須寫在body內(nèi)

文檔聲明頭：告訴瀏覽器你要用的H5標(biāo)準(zhǔn)來解釋當(dāng)前的HTML文檔
<!DOCTYPE html>

元素分類
塊級元素：默認(rèn)情況下，沾滿爸爸整行，可以設(shè)置寬高 如：div p ul li
內(nèi)聯(lián)/行內(nèi)元素：元素并列在同一行，不能夠設(shè)置寬高，也就是說他們的內(nèi)容多少決定了標(biāo)簽的大小 如：a span b i
img（行內(nèi)塊級元素/置換元素 可以設(shè)置寬高）

HTML可以將元素分類方式分為行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素三種。首先需要說明的是，這三者是可以互相轉(zhuǎn)換的，使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換：
　　(1)display:inline;轉(zhuǎn)換為行內(nèi)元素
　　(2)display:block;轉(zhuǎn)換為塊狀元素
　　(3)display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素

實(shí)體字符（都是以&開頭；結(jié)尾的）

特殊字符 字符實(shí)體
大于號(>) &gt;
小于號(<) &lt;
引號" &quot;
? &reg;
? &copy;
& &amp;
一個英文的空格 &nbsp;
一個漢字的空格 &emsp;

結(jié)構(gòu)層(HTML)、表現(xiàn)層(CSS)、行為層(JavaScript)
樣式：模樣的形式（對齊方式，顏色，寬高大小）
錨點(diǎn)：頁內(nèi)跳轉(zhuǎn)，在地址欄上會拼接上#targetId
“#”回到頁面頂部

2、重要標(biāo)簽&屬性

<div>塊級元素
實(shí)際意義（應(yīng)用場景）：它可以作為一個容器

<p>段落標(biāo)簽語言

<img> 圖片標(biāo)簽:

  • src屬性：指定顯示圖片的路徑
  • alt屬性：圖片備注
  • 全局屬性title：鼠標(biāo)移上去的提示

<a>

  • href：指定超鏈接的目標(biāo)網(wǎng)址（如果是線上地址，必須以HTTP開頭的完整路徑）
  • target:指定了目標(biāo)鏈接的打開方式
    a標(biāo)簽綁定手機(jī)號碼,發(fā)短信，發(fā)郵件，下載
<a href="#targetId">錨點(diǎn)測試</a>
<a href="tel:13539748339">點(diǎn)擊請聯(lián)系我</a>
<a href="sns:13539748339">點(diǎn)擊請聯(lián)系我</a>
<a href="mailto:13539748339@qq.com">點(diǎn)擊請聯(lián)系我</a>

<table>

  • border 邊框
  • cellspacing 單元格與單元格之間的間隙
  • cellspadding 內(nèi)邊距 內(nèi)容與邊框之間的距離
  • tr 表示table的一行
  • th/td 一個單元格
  • rowspan 跨行
  • colspan 跨列

<ul> <li>無序列表 <ol>有序列表

  • start 開始下標(biāo)
  • type 指定序列號類型
  • reverse 倒序

<dl><dt><dd>列表標(biāo)簽 標(biāo)題 列表 (開頭有縮進(jìn))

一些常用的行內(nèi)元素

  • span標(biāo)簽 行內(nèi)元素，包裹文字
  • sup 上標(biāo)
  • sub 下標(biāo)
  • b 粗體
  • i 斜體
    -mark 定義帶記號文本 文本被加顏色背景

input屬性

  • placeholder 空內(nèi)容時占位提示內(nèi)容
  • value 可以指定input的默認(rèn)值
  • autofocus 自動獲取鼠標(biāo)焦點(diǎn)
  • autocomplete 自動提示之前提交的內(nèi)容
  • required 必填項(xiàng),否則無法提交
  • readonly 只讀
  • disabled 禁用
  • accept 文件接收類型
  • multiple 上傳文件多選
  • name屬性：指定向后臺傳值的字段（后臺通過這個字段來獲取用戶的輸入）

type:number 并不是說,你只能輸入數(shù)字,而是HTML會將內(nèi)容盡量轉(zhuǎn)為數(shù)字,
它在移動端時是非常有意義的,例如電話號碼輸入框(彈出數(shù)字鍵盤)

audio屬性

  • controls 顯示出控制板
  • autoplay 現(xiàn)在已經(jīng)被谷歌瀏覽器禁用了,設(shè)置了也不會自動播放(可以設(shè)置捕獲用戶行為來進(jìn)行播放)
  • loop 循環(huán)播放

利用source解決音頻兼容問題

<audio>
        <source type="audio/mpeg" src="media/生日歌 - 英文童謠 英文.mp3"/>
        <source type="audio/ogg" src="media/生日歌 - 英文童謠 英文.ogg"/>
    </audio>
<audio src="">
    你的瀏覽器不支持audio標(biāo)簽,請升級瀏覽器!
</audio>
<!--如果不支持audio標(biāo)簽,就表示為自定義標(biāo)簽顯示文字-->

video屬性

  • width/heigth 設(shè)置視頻寬高
  • controls 顯示操作臺
  • Preload 預(yù)加載
  • muted 靜音
  • poster 設(shè)置海報(bào)地址
  • autoplay 自動播放(目前大部分瀏覽器不再支持)

Mp4 WebM Ogg
MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

3、重要知識點(diǎn)

路徑問題
絕對路徑：表示路徑的完整描述信息 D:\study\classfile\2018.12.24helloworld\img
相對路徑：根據(jù)相對位置得到路徑信息
/ 進(jìn)入文件夾
./ 表示當(dāng)前文件夾
../ 表示上一層文件夾

form標(biāo)簽

  • method屬性：指定通訊方式（常用get/post/put/delete）
    form表單提交的方式get和post的區(qū)別
    1.傳值方式不同,get會把傳遞的值以URL查詢字符串的形式顯示在地址欄里,而post是把要傳遞的值放在了請求體里面,相比來說post會更安全一點(diǎn),千萬不要把帶有密碼的內(nèi)容以get的方式傳值.get傳值多個值用&連接 用?查詢字符串
    2.傳輸數(shù)據(jù)量的大小,因?yàn)間et的內(nèi)容是放在地址欄的,但是地址欄能傳輸數(shù)據(jù)大小是有限制的,所以get方式傳輸數(shù)據(jù)的大小是有限制的,大約3000字符.post方式理論上說是沒有大小限制的.
    3.一般情況下需要從服務(wù)器獲取數(shù)據(jù)是用get方式,一般向服務(wù)器發(fā)送數(shù)據(jù)時,用post的方式,
    4.當(dāng)需要向后臺傳遞文件信息是必須post請求,同時在form標(biāo)簽修改enctype屬性為multipart/form-data
    其他參考資料:https://www.cnblogs.com/logsharing/p/8448446.html#!comments
    https://blog.csdn.net/qq_28483283/article/details/80207674

src與href的區(qū)別
使用src的標(biāo)簽：img JavaScript iframe
href 超文本引用
當(dāng)前元素與外鏈資源建立一種聯(lián)系
src source資源引入
當(dāng)前元素正確顯示必須的資源
如果src地址寫錯，會影響頁面顯示出錯，而href不會影響

meta使用

<!--設(shè)置頁面編碼-->
<meta charset="UTF-8">
<!--設(shè)置頁面描述-->
<meta name="Description" content="這里描述網(wǎng)站的內(nèi)容"/>
<!--設(shè)置頁面關(guān)鍵字-->
<meta name="Keywords" content="CSS,HTML,JavaScript,前端"/>
<!--設(shè)置頁面是否緩存和方式-->
<meta http-equiv="Pragma" content="no-cache" />
<!--聲明作者信息-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--指定渲染引擎的類型和版本,使兼容性更好-->
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<!--移動端關(guān)閉電話號碼識別-->
<meta name="format-detection" content="telephone=no" />
<!--移動端關(guān)閉郵箱地址識別-->
<meta name="format-detection" content="email=no" />
<!--合二為一的寫法-->
<meta name="format-detection" content="telephone=no,email=no" />
<!--解決防盜鏈的問題,可以播放別的網(wǎng)站的多媒體鏈接-->
<meta name="referrer" content="never"/>
<!--設(shè)置標(biāo)簽圖標(biāo)-->
<link rel="shortcut icon" type="text/css" href=""/>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • html是什么：超文本標(biāo)記語言 html的唯一作用就是：給指定的文本添加語義。 html的標(biāo)準(zhǔn)格式： <!DOCT...
    Lins7閱讀 1,082評論 0贊 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評論 1贊 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,828評論 1贊 45
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,955評論 0贊 0
  • 1 . 有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要...
    osborne閱讀 645評論 0贊 0

友情鏈接更多精彩內(nèi)容