前端筆記之html篇

小白從頭開始學所做的筆記）

Web標準構成

主要包括：結構、表現和行為三個方面

<!DOCTYPE>文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁；

lang用來定義當前文檔顯示的語言；

字符集（cahracter set）是多個字符的集合，以便計算機能夠識別和存儲各種文字；

charset常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符集。

HTML常用標簽

標題標簽：<h1></h1>,<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>（字體大小依次來變小）

段落標簽：<p></p>

換行標簽：<br/>

加粗標簽：<strong></strong>或<b></b>(推薦使用strong標簽,因為atrong效果更好)

傾斜標簽：<em></em>;<i></i>(推薦使用em標簽,因為em效果更好)

刪除線標簽： <del></del>或<s></s>(推薦使用del標簽,因為del效果更好)

下劃線標簽：<ins></ins>或<u></u>(推薦使用ins標簽,因為ins效果更好)

div和span標簽：是一個盒子，用來裝內容，div是塊級標簽，span是行內標簽

圖像標簽：<img src="圖像 URL"/>

水平線標記：<hr/>

圖像路徑

相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑

絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑

超鏈接標簽：<a href="跳轉地址" target="目標窗口的彈出方式"> </a>作用從一個頁面跳轉到另外一個頁面

描點連接：配合id選擇器使用

注釋：<!-- --!>

/**/

特殊字符： (空格)等

表格標簽：<table></table> 作用于展示數據

<th></th>----表頭單元格

<tr></tr> ----行

<td></td>----單元格，列

row="行數" cols="每行的字數"

<thead></thead>標簽用于表格的頭部區域；<tbody></tbody>標簽用于表格的主題區域

無序列表：<ul><li></li></ul>

有序列表：<ol><li></li></ol>

自定義列表：<dl><dt><dd></dd></dt></dl>-----------dt是用于標題，dd是內容

表單的組成：

在HTML中，表單通常由表單域、表單控件和表單信息

from用于定義表單域，以實現用戶信息的收集和傳遞

表單域標簽：<from action="url地址" method="提交方式" name="表單域名稱"></form>

其中name屬性是表單的名字，相同的名字可以實現多選一

<lable>標簽：用于綁定一個表單元素，當點擊《lable》標簽內的文本時，瀏覽器就會自動將焦點（光標）轉到或者選擇對應的表單元素上，用來增加用戶體驗

<select>表單元素：下拉表單元素，

</select>

select中至少包含一對option

textarea表單元素：<textarea></textarea>-----文本域標簽

做登錄界面可以用表格來做，能直接對齊

后續會更新后面的知識

TML是誰發明的？

1.HTML的全稱是什么？

超文本標記語言（Hyper Text Markup Language)，是一種用于創建網頁的標準標記語言。

2.誰發明的？

是由Tim Berners-Lee發明的。

HTML 起手應該寫什么？

<!DOCTYPE html>
  <!--文檔類型為html 此行必須為第一行 前面空一行也會報錯-->
  <html lang="en">
    <!--html標簽 en是英語 zh-CN是中文-->
    
    <head>
                 <meta charset="UTF-8">
                   <!--文件的字符編碼-->
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <!--content里的內容代表禁止縮放，兼容手機-->
                     <meta http-equiv="X-UA-Compatible" content="ie=edge">
                       <!--content里的內容表示讓ie使用最新的內容-->
                       <title>Document</title>
    </head>

常用的表章節的標簽有哪些，分別是什么意思?

h1-h6 標題
section 章節
article 文章
p 段落
header 頭部
footer 腳部
main 主要內容
aside 旁支內容
div 劃分，表示一個區塊

全局屬性有哪些？

class 用來對網頁元素進行分類。如果不同元素的class屬性值相同，就表示它們是一類的。
contentteditable HTML 網頁的內容默認是用戶不能編輯，contenteditable屬性允許用戶修改內容。
hidden hidden是一個布爾屬性，表示當前的網頁元素不再跟頁面相關，因此瀏覽器不會渲染這個元素，所以就不會在網頁中看到它。
id id屬性是元素在網頁內的唯一標識符
style 用來指定當前元素的 CSS 樣式
tabindex 網頁通常使用鼠標操作，但是某些情況下，用戶可能希望使用鍵盤，或者只有鍵盤可以用。因此，瀏覽器允許使用 Tab 鍵，遍歷網頁元素。也就是說，只要不停地按下按鈕 Tab 鍵，網頁的焦點就會從一個元素轉移到另一個元素，選定焦點元素以后，就可以進行下一步操作，比如按下回車鍵訪問某個鏈接，或者直接在某個輸入框輸入文字。
title 用來為元素添加附加說明。大多數瀏覽器中，鼠標懸浮在元素上面時，會將title屬性值作為浮動提示，顯示出來。

常用的內容標簽有哪些，分別是什么意思?

ol+li 有序列表
ul+li 無序列表
dl+dt+dd 自定義的列表
pre 顯示文本中的空白符號
hr 分割線
br 換行
a 鏈接通過<a>標簽表示，用戶點擊后，瀏覽器會跳轉到指定的網址。
em <em>是一個行內標簽，表示強調（emphasize），瀏覽器會以斜體顯示它包含的內容。
strong <strong>是一個行內元素，表示它包含的內容具有很強的重要性，需要引起注意。瀏覽器會以粗體顯示內容。
code 呈現一段計算機的代碼，各類語言。
quote 行內的引用
blockquote 塊的引用

TML基本結構

HTML基本結構

網頁：由HTML(HyperText Markup Language)超文本標記語言所組成。文件后綴一般為.htm或.html

靜態網頁：由html、js、css等組成，不具備交互性。后綴一般為.htm或.html

動態網頁：在html中加入asp/asp.net/jsp/php等技術，使網頁有交互性，后綴一般為.asp/.aspx/.jsp/.php

網站：由一個或若干個網頁、圖片、音頻、視頻、動畫、文件夾等組成的一個集合（文件夾）。

網站中的所有文件和文件夾均不能使用漢字命名。

首頁：也叫主頁/homepage,即打開網站時默認顯示的第一個網頁（http://www.XX.com,https://www.XX.cn），首頁名稱一般為index.html或default.html

標題標簽：h1……h6,h1最大，h6最小

……

HTML注意事項：

1、html中的標點符號必須是英文輸入法中的標點符號

2、HTML標簽不區分大小寫，但一般習慣小寫；Html不區分空格、空行，html標簽和屬性、屬性和屬性之間用一個空格隔開，如<p align=”center” style=”color:red;”>；屬性值一般放置在單引號或雙引號中。

3、html標簽必須放置在尖括號<>中

4、html標簽一般是成對出現（雙標簽），結束標簽在開始標簽的基礎上添加/，如<h1>……</h1>、<p>……</p>

如果是單標簽則在右尖括號前加/，如<br />、<hr />、<img />

5、Html標簽是包含關系，不要交叉書寫。如<p><b><i>文字</i></b></p>,不要書寫為<p><b><i>文字</p></b></i>

段落：<p>……</p>

分行：<br />

網頁中支持的圖像格式：jpg、gif、png、bmp，其中支持背景透明的有gif和png,支持動畫的有：gif

圖像：img

Src:圖像的地址。 ./當前目錄下 ../向上退一級目錄 ../../向上退二級目錄 /根目錄

Width:寬度

Height:高度

在線咨詢

上一篇：HTML5與Web前端什么關系？學好小程序，前端漲薪20%
下一篇：把HTML網頁下載為單文件，可離線訪問

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端筆記之html篇

小白從頭開始學所做的筆記）

您的項目需求