HTML筆記

HTML文檔聲明

<!DOCTYPE html>
  • HTML文檔聲明，告訴瀏覽器當(dāng)前頁面是HTML5頁面，讓瀏覽器用HTML5的標(biāo)準(zhǔn)去解析識(shí)別HTML文檔。
  • 必須放在HTML文檔的最前面，不能省略，省略了會(huì)出現(xiàn)兼容性的問題。

HTML基本元素

1.HTML

<!DOCTYPE html>
<html lang="zh">
</html>
  • html元素是HTML文檔根元素，一個(gè)文檔中只能有一個(gè)，其他所有元素都是他的后代元素。
  • W3C標(biāo)準(zhǔn)建議為html元素增加一個(gè)lang屬性值，作用是：
    1.幫助語音合成工具確定要使用的發(fā)音。
    2.幫助翻譯工具確定要使用的翻譯規(guī)則。
lang="en";告訴瀏覽器這個(gè)HTML文檔的語言是英文。
lang="zh" ;表示中文。

2.head元素

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
  • head元素里面的內(nèi)容是一些”元數(shù)據(jù)“(元數(shù)據(jù)：描述數(shù)據(jù)的數(shù)據(jù))
  • 一般用于描述網(wǎng)頁的各種信息，比如字符編碼，網(wǎng)頁標(biāo)題，網(wǎng)頁圖片。
  • 以下列出的元素大多數(shù)情況下都是在head元素內(nèi)容使用
1.mate 2.title 3.sytle 4.link 5.base 6.script 7.noscript

title元素

  • 網(wǎng)頁標(biāo)題的元素


    image.png

mate元素

  • 可以用于設(shè)置網(wǎng)頁的字符編碼，讓瀏覽器更精準(zhǔn)地顯示每一個(gè)文字，不設(shè)置或者設(shè)置錯(cuò)誤回到其亂碼。
  • 一般都是使用UTF-8編碼，涵蓋了世界上幾乎所有的文字。

body元素

  • body元素里面的內(nèi)容將是你在瀏覽器窗口中看到的東西，也就是網(wǎng)頁具體的內(nèi)容和結(jié)構(gòu)。

h、p、strong元素

  • h
    • 表示網(wǎng)頁的標(biāo)題
    • h1~h6共規(guī)定了6個(gè)等級(jí)的標(biāo)題
  • p
    表示文章中的一個(gè)段落(paragraph)
  • strong
    用于強(qiáng)調(diào)某些文本，粗體的顯示效果。

pre元素

  • 默認(rèn)情況下，HTML代碼的大多數(shù)空格都會(huì)被瀏覽器壓縮，比如一段連續(xù)的空格會(huì)被壓縮成1個(gè)空格。
  • 如果想完全保留HTML代碼中的空格，換行，可以使用pre元素。
<p>我是p1    我是p2 我是p3</p>
<pre>我是p1    我是p2 我是p3 </pre>
image.png

字符實(shí)體

  • HTML中有一些字符是預(yù)留出來做特殊用途的，比如

    • 大于號(hào) (<)
    • 小于號(hào) (>)

  • 要想在網(wǎng)頁中正確地顯示這些預(yù)留字符，必須使用字符實(shí)體，書寫格式一般有兩種

    • &entiry_name; 這種格式成為實(shí)體名稱。如 &nbsp
    • &#entiry_name;這種格式稱為實(shí)體編號(hào)。如 &#160

    字符實(shí)體表 https://www.w3school.com.cn/tags/html_ref_entities.html

code元素

  • 用于顯示程序代碼
  • 元素要做到見名知意，可以在元素要放在合適的位置。
<code> This is code </code>

br元素

  • 單標(biāo)簽，表示強(qiáng)制換行。
<br>

img元素

  • img元素專門用來顯示圖片(img是image的縮寫)。單標(biāo)簽
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" 
     alt="占位文字" (圖片加載失敗的時(shí)候顯示)
     width="100"
     height="100">

  • scr屬性（scr是source的縮寫）用來設(shè)置圖片的路徑（URL）

    • 絕對(duì)路徑：完成的描述文件位置的路徑。如上面scr的內(nèi)容。
    • 相對(duì)路徑：由這個(gè)文件所在的文件夾引起的跟其他文件的路徑關(guān)系。
      • .代表當(dāng)前文件夾(1個(gè).),可以省略。
      • ..代表上級(jí)文件夾(2個(gè). )
    • 對(duì)于網(wǎng)頁來說，不管什么操作系統(tǒng)(Windows、Mac、Linux)，路徑分隔符都是/,而不是\

  • web中常用的圖片格式有

    • png：靜態(tài)圖片、支持透明
    • jpg：動(dòng)態(tài)圖片、不支持透明
    • gif：動(dòng)態(tài)圖片、靜態(tài)圖片、支持透明

  • 注意

  • img元素如果只設(shè)置了width(或者height),瀏覽器會(huì)自動(dòng)根據(jù)圖片寬高比計(jì)算出height(或 width)

  • 在HTML5規(guī)范中，alt是img元素的必要屬性。

  • width、height的默認(rèn)單位是px。(px就是像素)

a元素

  • a元素的作用
    -定義超鏈接，用戶打開新的URL

    (
    image.png
  • 常用屬性
    • herf: 指定要打開的URL
      Hypertext Reference的簡(jiǎn)稱
    • target: 在哪里打開URL
  • target可以有以下幾種取值
    _self:默認(rèn)值，在當(dāng)前窗口中打開URL
    _blank:在新的窗口中打開URL
    _parent:在父窗口中打開URL
    _top:在頂級(jí)窗口中打開URL
    在某個(gè)frame的name值：在某個(gè)frame中打開URL
    <iframe src="http://www.baidu.com" name="frame1" frameborder="1"  width="200" height="200"></iframe>
    <iframe src="http://www.baidu.com" name="frame2" frameborder="1"  width="200" height="200"></iframe>
    <a  target="frame1">試試看</a>

iframe元素

  • 利用iframe元素可以實(shí)現(xiàn)：在一個(gè)HTML文檔中嵌入其他HTML文檔。
    <iframe src="http://www.baidu.com" name="frame1" frameborder="1"  width="200" height="200"></iframe>
  • frameborder 屬性
    用于規(guī)定是否顯示邊框：1->顯示 、0->不顯示

base元素

  • 可以利用base元素設(shè)置當(dāng)前頁面所有a元素的默認(rèn)行為
  • base元素寫在head元素中
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <base  target="_blank">
</head>
<body>
<div>
    <p><img src="img/bd_logo1.png" alt=""></p>
    <p><a href="http://s?wd=iOS" alt="">搜索iOS</a></p>
    <p><a  alt="">去小碼哥學(xué)習(xí)</a></p>
</div>
</body>
</html>

錨點(diǎn)鏈接

  • 錨點(diǎn)鏈接可以實(shí)現(xiàn)：跳轉(zhuǎn)到網(wǎng)頁中的具體位置
  • <a href="#one">go</a>
    • 點(diǎn)擊go會(huì)定位
      • id值為one的元素
      • name值為one的a元素

偽鏈接

  • 有時(shí)點(diǎn)擊鏈接的時(shí)候并不希望打開新的URL，而是希望干點(diǎn)別的事情，這時(shí)可以使用偽鏈接。
  • 偽鏈接：沒有指明具體鏈接地址的鏈接
  • 點(diǎn)擊鏈接后具體要做什么事情，需要編寫對(duì)應(yīng)的JavaScript代碼
    <a href="#" onclick="return false;">偽鏈接1</a>
    <a href="javascript:" >偽鏈接2</a>
  • 所以有時(shí)候可以將鏈接當(dāng)做按鈕來用
  • 圖片鏈接
    • img元素跟a元素一起使用，可以實(shí)現(xiàn)圖片鏈接
    <a >
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    </a>

URL

  • 什么是URL？
    • URL的全稱是Uniform Resource Locator（統(tǒng)一資源定位符）
    • URL就是資源的地址、位置，互聯(lián)網(wǎng)上的每個(gè)資源都有一個(gè)唯一的URL
    • 通過1個(gè)URL,能找到互聯(lián)網(wǎng)上唯一的一個(gè)資源
  • URL的格式
    • URL的基本格式 = protocol://hostname/path = 協(xié)議://主機(jī)地址/路徑
    • 協(xié)議：不同的協(xié)議，代表著不同的資源查找方式、傳輸方式
    • 主機(jī)地址：存放資源的主機(jī)ip地址(域名)
    • 路徑：資源在主機(jī)中的具體位置
https是協(xié)議，
www.baidu.com是主機(jī)地址，
img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png是在主機(jī)上的路徑

https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
  • URL常見的協(xié)議

    • http

      • 超文件傳輸協(xié)議，訪問的是遠(yuǎn)程的網(wǎng)絡(luò)資源，格式是http://
      • http協(xié)議時(shí)在網(wǎng)絡(luò)開發(fā)中最常用的協(xié)議
      • https協(xié)議相當(dāng)于http協(xié)議的安全版

    • file

      • 訪問的是本地計(jì)算上資源，格式是file://

    • moailto

      • 訪問的是電子郵件地址，格式是mailto://

    • ftp

      • 訪問的是共享主機(jī)的文件資源，格式是 ftp://

    • ed2k

      • 通過支持ed2k(專用下載鏈接)協(xié)議的P2P軟件訪問該資源(代表軟件：電驢)，格式是ed2k://

    • thunder

      • 通過支持thunder(專用下載鏈接)協(xié)議的P2P軟件訪問該資源(代表軟件:迅雷),格式是thunder://

標(biāo)簽(也叫元素)語義化

  • 什么是標(biāo)簽語義化

    • 選擇標(biāo)簽的時(shí)候要盡量讓每一個(gè)標(biāo)簽都有正確的語義

  • 雖然很多標(biāo)簽之間互轉(zhuǎn)之后也能實(shí)現(xiàn)功能，但還是要遵守"標(biāo)簽語義化"的原則
    -比如用strong 實(shí)現(xiàn)a、img的功能

  • 標(biāo)簽語義化的好處

    • 方便代碼維護(hù)
    • 減少讓開發(fā)者之前的溝通成本
    • 能讓語音合成工具正確識(shí)別網(wǎng)頁元素的用途，以便做出正確的反應(yīng)
    • 讓搜索引擎能夠正確識(shí)別重要的信息

  • 總結(jié)： 使用最合適的標(biāo)簽去做最合適的事情。

列表

列表簡(jiǎn)介

  • HTML提供了3組常用的用來展示列表的元素
    • 有序列表：ol、li
    • 無序列表：ul、li
    • 定義列表：dl、dt、dd

有序列表- ol、li

  • ol （ordered list）
    • 有序列表、直接子元素只能是li
  • li （list item）
    • 列表中的每一項(xiàng)
<body>
<h2>熱門車系</h2>
<ol>
<li>奧迪a6</li>
    <li>寶馬5系</li>
    <li>寶馬3系</li>
    <li>雅閣</li>
    <li>?？怂?lt;/li>
</ol>
</body>
image.png

無序列表:ul、li

  • ul （unordered list）
  • 無序列表、直接子元素只能是li
  • li (list item)
    • 列表中的每一項(xiàng)
<body>
<h2>熱門車系</h2>
<ul>
    <li>慕尚</li>
    <li>飛馳</li>
    <li>歐陸系列</li>
    <li>添越</li>
    <li>賓利臻選易手車</li>
</ul>
</body>
image.png
  • li一定要是ul或者ol的直接子元素

定義列表：dl、dt、dd

  • dl(definition list)
    • 定義列表、直接子元素只能是dt、dd
  • dt(definition term)
    • 列表中每一項(xiàng)的項(xiàng)目名
  • dd（definition description）
    • 列表中每一項(xiàng)的具體描述，是對(duì)dt的描述、解釋、補(bǔ)充
    • 一個(gè)dt后面一般緊跟著1個(gè)或者多個(gè)dd
  • dd、dt常見組合
    • 事物的名稱、事物的描述
    • 問題、答案
    • 類別名、歸屬這類的各種事物

<body>
<dl>
    <dt>西瓜汁</dt>
    <dd>紅色的飲料</dd>

    <dt>咖啡</dt>
    <dd>黑色的飲料</dd>

    <dt>牛奶</dt>
    <dd>白色的飲料</dd>
    <dd>超有營(yíng)養(yǎng)</dd>

</dl>
</body>
image.png

列表相關(guān)的CSS屬性

  • 列表相關(guān)的常見CSS屬性有4個(gè):list-style-type、list-style-image、list-style-position、list-style
    • 適用于display設(shè)置為list-item元素,比如li元素
    • 他們都可以繼承，所有設(shè)置給ol、ul元素，默認(rèn)也會(huì)應(yīng)用到li元素
  • list-style-type:設(shè)置li元素前面標(biāo)記的樣式
    • disc(實(shí)心圓)、circle(空心圓)、square(實(shí)心方塊)等
    • none(什么也沒有)
  • list-style-image：設(shè)置某張圖片為li前面的標(biāo)記，會(huì)覆蓋list-style-type的設(shè)置
  • list-style-position:設(shè)置li元素前面標(biāo)記的位置，可以取out-side,inside2個(gè)值
  • list-style是list-style-type、list-stype-image、list-style-position的縮寫屬性
    • list-style:outside url("image/dot.png")
  • 一般最常用的還是設(shè)置為none，去掉li元素前面的標(biāo)記list-style:none;

表格

常見元素

  • table 表格
  • tr 表格中的行
  • td行中的單元格
  • table的常見屬性
    • border ：邊框的寬度
    • cellpadding：?jiǎn)卧駜?nèi)容的間距
    • cellspacing：?jiǎn)卧裰g的間距
    • width：表格的寬度
    • align：表格的水平對(duì)齊方式(left、center、right)
  • tr的常用屬性
    • valign：?jiǎn)卧竦拇怪睂?duì)齊方式(top、middle、bottom、baseline)
    • align：?jiǎn)卧竦乃綄?duì)齊方式(left、center、right)
  • th、td的常用屬性
    • valign：?jiǎn)卧竦拇怪睂?duì)齊方式top、middle、bottom、baseline
    • align：?jiǎn)卧竦乃綄?duì)齊方式left、center、right
    • width：?jiǎn)卧竦膶挾?/li>
    • height：?jiǎn)卧竦膶挾?/li>
    • rowspan：?jiǎn)卧窨蓹M跨的行數(shù)
    • colspan：?jiǎn)卧窨蓹M跨的列數(shù)

細(xì)線表格的實(shí)現(xiàn)

  • 方法1
    • 表格的border為0(或不設(shè)置border)
    • 分別設(shè)置表格和單元格的背景色
      • 表格背景色決定了表格線的顏色
    • 設(shè)置cellspacing的值
      • 決定了表格線的粗細(xì)
  • 方法2

        table {
            /*合并單元格的邊框*/
            border-collapse: collapse;
        }
        td {
            border: 1px solid #000;
        }

其他元素

  • tbody ： 元素的主體
  • caption：表格的標(biāo)題
  • thead：表格的表頭
  • tfoot：表格的頁腳
  • th：表格的表頭單元格

border-spacing

  • 用于設(shè)置單元格之間的水平、垂直舉例，比如
    table{border-spacing:10px 20px}
    • 2個(gè)值分別是cell之間的水平、垂直間距
    • 如果只設(shè)置1個(gè)值,同時(shí)代表水平、垂直間距

表單

常用元素

  • form
    • 表單。一般情況下，其他表單相關(guān)元素都是他的后代元素
  • input
    • 單行文件輸入框、單選框、復(fù)選框、按鈕等元素
  • textarea
    • 多行文本框
  • select、option
    • 下拉選擇框
  • button
    • 按鈕
  • label
    • 表單元素標(biāo)題
  • fieldset
    • 表單元素組
  • legend
    • fieldset的標(biāo)題

input的常用屬性

  • type：input的類型
    • text：文本輸入框(明文輸入)
    • password：文本輸入框(密文輸入)
    • radio：?jiǎn)芜x框
    • checkbox：復(fù)選框
    • button：按鈕
    • reset：重置
    • submint：提交表單數(shù)據(jù)給服務(wù)器
    • hidden：隱藏域
  • maxlength：允許輸入的最大字?jǐn)?shù)
  • placeholder：占位文字
  • readonly：只讀
  • disabled：禁用
  • check：默認(rèn)被選中
    • 只有當(dāng)type為radio或checkbox時(shí)可用
  • autofocus：當(dāng)頁面加載時(shí)，自動(dòng)聚焦
  • name：名字
    • 在提交數(shù)據(jù)給服務(wù)器時(shí)，可用于區(qū)分?jǐn)?shù)據(jù)類型
  • value：取值
  • form：設(shè)置所屬的form元素(填寫form元素的id)
    • 一旦使用了此屬性，input元素即使不寫在form元素內(nèi)部。它的數(shù)據(jù)也能夠提交給服務(wù)器。

布爾屬性

  • 布爾屬性可以沒有屬性值。寫上屬性名就代表使用這個(gè)屬性。
  • 常見的布爾屬性有disabled、checked、readonly、multiple、autofocus、selected
  • 如果給布爾屬性設(shè)置，值就是屬性名本身
<!-- 以下兩種寫法是等價(jià)的，建議采取第一種-->
<!--第一種-->
<input type="text" readonly disabled>
<input type="radio" checked>
<!--第二種-->
<input type="text" readonly="readonly" disabled="disabled">
<input type="radio" checked="checked">

按鈕

  • 普通按鈕(type=button)：使用value屬性設(shè)置按鈕文字
  • 重置按鈕(type= reset)：重置它所屬form的所有表單元素(包括input、textarea、select)
  • 提交按鈕(type=submit)：提交它所屬form的表單數(shù)據(jù)給服務(wù)器(包括input、textarea、select)
<input type="button" value="普通按鈕">
<input type="reset" value="重置">
<input type="submit" value="注冊(cè)">
  • 默認(rèn)情況下,敲回車會(huì)自動(dòng)提交表單數(shù)據(jù)給服務(wù)器
    • 如需禁止此行為,需要編寫相應(yīng)的javaScript代碼

按鈕-button元素

  • 使用button元素也能實(shí)現(xiàn)按鈕，功能效果跟input一樣
<button type="button">普通按鈕</button>
<button type="reset">重置</button>
<button type="submit">注冊(cè)</button>

input和label

  • label元素一般跟input配合使用，用來表示input的標(biāo)題
  • label可以跟某個(gè)input綁定，點(diǎn)擊label就可以激活對(duì)應(yīng)的input 
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
也可以使用以下寫法
<label for="username">
    用戶名：
    <input type="text" id="username">
</label>
image.png

radio的使用注意

  • name值相同的radio才具備單選功能
<span>性別：</span>
<label for="male">男</label>
<input type="radio" id="male" name="sex" value="1" checked>

<label for="female">女</label>
<input type="radio" id="female" name="sex" value="0">
image.png

checkbox的使用注意

  • 屬于同一種類型的checkbox，name值要保持一致
<span>興趣：</span>
<label for="basketball">籃球</label>
<input type="checkbox" id="basketball" name="hobby" value="1">
<label for="football">足球</label>
<input type="checkbox" id="football" name="hobby" value="2">
<label for="run">跑步</label>
<input type="checkbox" id="run" name="hobby" value="3">
image.png

隱藏域(type=hidden)

  • 隱藏域不會(huì)顯示到網(wǎng)頁界面上,但提交表單數(shù)據(jù)的時(shí)候，它的name和value也會(huì)被提交給服務(wù)器
  • 如果有些發(fā)放給服務(wù)器的數(shù)據(jù)，是不需要用戶輸入的，或者不希望在界面上顯示出來，可以使用隱藏域
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="hidden" name="id" value="666">
<input type="submit" value="百度">
</form>
image.png

去除input的Tab鍵選中效果

  • 將tabindex屬性值設(shè)置為-1

textarea

  • textarea的常用屬性
    • cols：列數(shù)
      -rows：行數(shù)
  • 縮放的CSS設(shè)置
    • 禁止縮放：resize: none;
    • 水平縮放：resize: horizontal;
    • 垂直縮放：resize: vertical;
    • 水平垂直縮放：resize: both;

select和option

  • option是select的子元素，一個(gè)option代表一個(gè)選項(xiàng)
<select name="edu" id="edu">
    <option value="1">小學(xué)</option>
    <option value="2">初中</option>
    <option value="3">高中</option>
    <option value="4">大專</option>
    <option value="5">本科</option>
    <option value="6">碩士</option>
    <option value="7">博士</option>
</select>
  • select常用屬性
    • multiple：可以多選
    • size：顯示多個(gè)項(xiàng)
  • option常用屬性
    • selected：默認(rèn)被選中
      image.png

fieldset和legend

image.png

form的常用屬性

  • action
    • 用于提交表單數(shù)據(jù)的請(qǐng)求URL
  • method
    • 請(qǐng)求方法(get和post),默認(rèn)是get
  • target
    • 在什么地方打開URL(參考a元素的target)
  • enctype
    • 規(guī)定了在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)數(shù)據(jù)進(jìn)行編碼
    • 取值有3種
      • application/x-www-form-urlencoded：默認(rèn)編碼方式
      • multipart/form-data：文件上傳時(shí)必須為這個(gè)值，并且method必須為post
      • text/plain：普通文本傳輸
  • accept-charset：規(guī)定表單提交時(shí)使用的字符編碼

get和post

  • 提交表單數(shù)據(jù)時(shí)，瀏覽器發(fā)送的是http請(qǐng)求,有2種請(qǐng)求方式可以選擇
    • get
      • 在請(qǐng)求URL后面以?的形式跟上發(fā)給服務(wù)器的參數(shù)，多個(gè)參數(shù)之間用&隔開，比如https://www.baidu.com/s?wd=aa&id=666
      • 由于瀏覽器和服務(wù)器對(duì)URL長(zhǎng)度有限制，因此在URL后面附帶的參數(shù)是有限制的，通常不能超過18KB
    • post
      • 發(fā)給服務(wù)器的參數(shù)全部放在請(qǐng)求體中
      • 理論上,post傳遞的數(shù)據(jù)量沒有顯示，具體還得看服務(wù)器的處理能力
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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