前端知識點總結——HTML-創(chuàng)新互聯(lián)

前端知識點總結——HTML

HTML：HTML4.01 指的就是網頁技術
HTML5：HTML4.01的升級版本

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站建設、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的林芝網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

1.web的基礎知識

web與Internet
1.Internet:全球性的計算機互聯(lián)網絡，因特網，互聯(lián)網，交互網。前端學習圈：767273102 ，從最基礎的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的項目實戰(zhàn)的資料都有整理


2.提供服務

訪問網站：www（world wide web）服務
Email:電子郵件服務
BBS：電子公告板，俗稱論壇
FTP：文件的上傳下載
telenet:遠程登錄

3.Internet上的應用程序

1.C/S程序
  C：Client客戶端
  S：Server服務器端
  代表：QQ，微信，網絡游戲
2.B/S程序
  B：Browser 瀏覽器
  S：server 服務器
  代表：網站

4.web

web:運行在Internet之上的一種B/S結構的應用程序，俗稱網站。
w3c:(萬維網聯(lián)盟)
w3c:制定web技術規(guī)范
web的工作原理：
   基于瀏覽器和服務器還有通信協(xié)議來實現(xiàn)信息的傳輸和展示。
   1.通信協(xié)議
     HTTP/HTTPS
 規(guī)范了數(shù)據是如何傳遞和打包
   2.服務器
     1.功能
   1.存儲web信息，并提供程序運行環(huán)境
   2.接收用戶請求并給出響應
   3.具備一定的安全功能
 2.服務器產品
   1.TOMCAT 
   2.APACHE
   3.IIS
 3.服務器技術
   1.php
   2.java
   3..NET
   3.瀏覽器
     功能：
      1.代理用戶（UA:user agent）提交請求
  2.以圖形化的方式顯示網頁
  3.作為HTML和JS的解釋器
 瀏覽器產品：
  1.IE
  2.chrome
  3.firefox 
  4.opera
  5.safari
 瀏覽器技術：
  1.HTML
  2.CSS
  3.Javascript

2.HTML快速入門

1.什么是HTML？

HTML：Hyper Text Markup Language
      超文本標記語言
ex:
  普通文本 a：英文首字符
  超級文本 a：超鏈接
  普通文本 b：英文第二個字符
  超級文本 b：加粗
  language:語言，有自己的語法結構
特點：
  1.以.html或.htm為后綴
  2.由瀏覽器解析執(zhí)行
  3.可以嵌套腳本語言（javascript）
  4.用帶有尖括號的標記來標識

2.HTML的基礎語法

1.標記
  標記又稱為"元素"，或"標簽"，在網頁中，主要表示一些功能。
  標記在使用時，必須用<>括起來
  標記分類：
    1.封閉類型
  又稱為雙標記
  語法：
    <標記>內容</標記>
     ex：<a>百度</a>
     <b>加粗</b>
      注意：必須有開始就有結束。
2.非封閉類型
  又稱為單標記
  語法：<標記>或<標記/>
      ex:<img>或<img/>
         <br>或<br/>
2.標記嵌套
  1.什么是嵌套？
    在一對標記中出現(xiàn)另外一對（個）標記，從而形成功能的層疊。
  2.語法
    <標記>
   <標記>
      <標記/>
   </標記>
</標記>
ex：
<a>
   <b>這是演示文本</b>
</a>
ex：
 <a><b>這是演示文本</b></a> 正確，不推薦
ex:
 <a><b>dfdsfsdfs</a></b> 錯誤
注意：
  1.換行縮進，如果是雙標記必須成對出現(xiàn)
3.元素（標記）屬性
  作用：修飾元素
  語法：
   1.必須聲明在開始標記中
     <標記 屬性名></標記>
   2.屬性名與值之間用"="連接
     <標記 屬性名=值></標記>
   3.元素允許有多個屬性，每個屬性之間用空格隔開
     <標記 屬性名1=值1 屬性名2=值2 ...></標記>
 ex:
 p標記的align屬性的值為center,title屬性的值為"這是段落"
     <p align=center title="這是段落"></p>
    標準屬性(通有屬性)：
  id:定義元素的唯一標識（名稱）
  title:定義鼠標懸停在元素上時所提示的文本
  style:css中,定義行內樣式
  class:css中,引用類選擇器
   4.注釋
     語法：<!--注釋內容-->
 注意：
   1.注釋本身不能嵌套
   2.不能嵌套在標記中

3.HTML文檔結構

1.HTML文檔結構

1.文檔類型聲明
  作用：告訴瀏覽器HTML的版本類型
  語法：<!doctype html>
  在網頁的最頂端編寫
2.HTML頁面
  在文檔類型聲明的下面寫上一對根標記
  <html></html>
  在根標記中包含兩部分：
     文件頭：<head></head>
         定義網頁的全局信息
 文件主體：<body></body>
         定義網頁中顯示的內容
2.搭建網頁結構
  1.文檔類型的聲明
  2.HTML頁面結構
    在主體內容（body）位置處顯示“我的第一個網頁”
3.head元素
  head是其它頭元素的容器
  1.<meta> 定義基本信息:編碼格式，關鍵詞，描述內容等
    <meta charset="utf-8">
<meta name="keywords" content="關鍵詞">
<meta name="description" content="描述內容">
  2.<title></title> 定義網頁的標題
  3.<style></style> 定義內部樣式
  4.<script></script>定義或引用javascript文件
  5.<link>          引入外部樣式
4.body元素
  顯示網頁的主要內容
  1.特殊字符
    &nbsp; 表示空格
&lt;   表示一個<
&gt;   表示一個>
&copy; 版權
    &yen;  ￥
  2.文本標記
    1.文本樣式
  <b></b>:加粗
  <i></i>:斜體
  <u></u>:下劃線
  <s></s>:刪除線
  <sup></sup>:上標
  <sub></sub>:下標
2.標題元素
  語法：在網頁中以醒目的方式來顯示文字
  語法：
    <hn>內容</hn> n:1-6
    <h2>內容</h2> 一級標題
      ...
    <h7>內容</h7> 六級標題
      特點：
    1.字體大小可變
    2.加粗
    3.上下文之間有垂直空白間距
   屬性：align
   作用：標記內容的水平對齊方式
   取值：left/center/right
3.段落元素
  作用：以突出的形式表示一段文本
  語法：<p></p>
  屬性：align
  取值：left/center/right
4.換行元素
  語法：<br>或<br/>
5.分隔線元素
  語法:<hr>或<hr/>
  屬性：
    1.size 表示水平線的尺寸（高度），取值為px或%的數(shù)字
    2.width 寬度，取值為px或%的數(shù)字
    3.align 水平對齊方式 left/center/right
    4.color 水平線的顏色，取值為合法顏色值
    6.預格式化
  作用：保留html代碼中的回車和空格
  語法：<pre>內容</pre>
7.分區(qū)元素
  1.塊分區(qū)元素
    作用：用于頁面中元素的布局
    語法：<div></div>
  2.行分區(qū)元素
    作用：處理同一行文本中的不同樣式
    語法：<span></span>
8.行內元素和塊級元素
  1.塊級元素
    在網頁頁中獨占一行的元素就是塊級元素
    常見的塊級元素：
       1.標題元素 h2-h7
       2.段落元素 p
       3.div
       4.結構標記(header...)
  2.行內元素
    多個元素位于同一行顯示，從左往右排列
    常見的行內:
       span,b,i,u,s,sup,sub,a,img
  3.行內塊
    顯示方式如同行內元素，但具備塊級元素的特征
  4.table ...

4.圖像和鏈接

1.URL

1.目錄結構
  文件目錄：文件夾嵌套結構
2.URL
  URL:Uniform Resource Locator統(tǒng)一資源定位器，俗稱路徑。
  作用：用于表示網絡中任意一個資源的位置。
3.路徑的表現(xiàn)形式
  1.絕對路徑
    絕對路徑就是完整路徑，一定可以找到你想找的資源。
1.網絡資源
      通信協(xié)議+服務器主機+文件目錄結構+文件名稱
  ex:/tupian/20230522/56656
2.本地資源
  從最高盤符處開始查找
  C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt
  2.相對路徑
     1.什么是相對路徑
   從當前文件所在的位置處開始查找資源文件所經過的路徑，就是相對路徑。
       1.同級目錄
     直接引用 
     ex:Koala.jpg
   2.子級目錄
     先進入，再引用 
     ex:img/Koala2.jpg
   3.父級目錄
     先返回，再引用
     ex:../Koala1.jpg
  3.根相對路徑
    從服務器所在的根目錄位置處開始查找
表現(xiàn)：/
/codeboy/img/logo.png

5.圖像

1.圖像格式
  1.jpg 壓縮比率較大
  2.png 背景透明
  3.gif 動圖
2.圖像標記
  標記：<img>或<img/>
  屬性：
     1.src 源，要顯示的圖像的url
 2.width 寬度，取值以px或%為單位的數(shù)字
 3.height 高度，取值以px或%為單位的數(shù)字
 4.alt 圖片出錯時顯示的提示文本

6.鏈接

1.語法
  <a>內容</a>
2.屬性
  1.href 鏈接的url
  2.target 目標，指定打開網頁的方式
    取值：
   _blank 在新的標簽頁中打開
   _self 默認值，在當前頁面中打開新的網頁
 2.給一張圖片設置超級鏈接，打開Tmooc網站（www.tmooc.cn）
3.其它表現(xiàn)形式
  1.資源下載
    讓鏈接的URL，鏈接到rar/zip文件即可
    href="*.zip/*.rar"
  2.電子郵件鏈接
    href="mailto:合法的郵箱地址"
  3.返回頁面的頂部
    href="#"
  4.鏈接到javascript
    href="javascript:js腳本"

7.錨點

  1.什么是錨點？
    就是網頁中的一個記號，可以通過超級連接調整到記號的位置處。
  2.使用錨點
    1.定義錨點
  1.使用a標記的name屬性定義錨點
    <a name="錨點名稱"></a>
  2.使用任意標記的id屬性定義錨點
    <ANY id="錨點名稱"></ANY>
2.鏈接到錨點
  <a href="#錨點名稱"></a>
  <a href="url#錨點名稱"></a>

8.表格

1.表格的語法

1.表格
  <table></table>
2.行
  <tr></tr> --->table row
3.單元格/列
  <td></td> --->table data

2.表格的屬性

1.table屬性
  width:寬度
  height:高度
  border:設置表格邊框
  align:設置表格的水平對齊方式 
        取值：left/center/right
  cellpadding:設置單元格的內邊距（內容與td之間的間距）
  cellspacing:設置單元格的外邊距（td邊框外的距離）
  bgcolor:背景顏色
2.tr屬性
  align 設置當前行的水平對齊方式
        取值：left/center/right
  valign 設置當前行的垂直對齊方式
        取值：top/middle/bottom
  bgcolor 設置當前行的背景顏色
3.td屬性
  width:寬度
  height:高度
  align:水平對齊
  valign:垂直對齊
  bgcolor:列的背景顏色
  colspan:跨列
  rowspan:跨行

3.可選標記

1.表格標題
  標記：<caption></caption>
        如果設置表格標題，則必須位于<table>下的第一個子元素位置處
2.行/列標題
  標記：<th></th>
  所有的td都可以用<th>取代

4.表格復雜應用

可以將連續(xù)的幾個行，劃分到一組中，進行統(tǒng)一管理。
1.行分組
  1.表頭行
    <thead></thead>
表格中最上面的一行進行分組的話，可以放在表頭行中
  2.表主體行
    <tbody></tbody>
允許將若干行放在tbody中進行統(tǒng)一管理
  3.表尾行
    <tfoot></tfoot>
表格中最后一行進行分組的話，可以放在表尾行中
2.不規(guī)則表格
  1.跨行
    rowspan
從指定單元格的位置處開始，縱向向下合并幾個單元格（包含自己），被合并的單元格要刪除。
  2.跨列
    colspan
從指定單元格的位置處開始，橫向向右合并幾個單元格（包含自己），被合并的單元格要刪除。

9.列表

1.列表的作用

按照從上到下(從左往右)的方式來顯示所有的數(shù)據，并且可以在數(shù)據前增加顯示的標識。

2.列表的組成

列表都是由"列表類型"和"列表項"來組成
1.列表類型
  有序列表：<ol></ol> order list
  無序列表：<ul></ul> unorder list
2.列表項
  用于表示列表中的數(shù)據(嵌套在列表中)
  <li></li> list item
3.有序列表
  1.type 作用：指定列表的排序類型
         取值：
        1 默認值，以數(shù)字排序
    a 小寫字母 
    A 大寫字母
    i 小寫羅馬數(shù)字
    I 大寫羅馬數(shù)字
  2.start 作用：指定起始編號是從第 幾 開始
          取值：數(shù)字

4.無序列表

 1.type 作用：指定列表的標識類型
        取值：
        disc:實心圓
    circle:空心圓
    square:實心方塊
    none:不顯示標識

5.列表嵌套

 在一個列表中又出現(xiàn)另一個列表
 被嵌套的列表只能出現(xiàn)在li中
 ex:
   <ol>
     <li>
   這是有序列表內容
   <ul>
     <li>內容</li>
   </ul>
 </li>
   </ol>

10.定義列表

1.什么是定義列表
  定義列表常用于給出一類事物或對名詞的解釋說明等。
2.語法
  1.<dl></dl> 表示一個定義列表
  2.<dt></dt> 表示定義列表中要解釋說明的名詞
  3.<dd></dd> 表示定義列表中對名詞解釋的內容
  ex:
    <dl>
   <dt>名詞</dt>
   <dd>解釋具體內容</dd>
</dl>
  使用場合：圖文混排時使用

11.結構標記

1.結構的作用

用于描述整個網頁的結構（取代div做布局）
提升標記的語義性

2.常用的結構標記

1.<header></header>
  作用：定義網頁或某區(qū)域的頭部
2.<nav></nav> 
  作用：定義網頁的導航鏈接
3.<section></section>
  作用：主體內容
4.<aside></aside>
  作用：定義頁面中的側邊欄信息，靠近邊緣。
5.<footer></footer>
  作用：定義網頁偏底部信息，比如：網站的備案號，解釋說明，版權。
6.<article></article>
  作用：定義與文字描述相關的內容，比如：論壇帖子，微博條目，用戶評論等

12.表單（重點&難點）

1.表單的作用

1.提供可以與用戶交互的可視化界面
2.收集用戶信息并提交給服務器

2.表單的組成部分

1.前端部分 
  表單控件，與用戶交互的可視化控件
2.服務器端部分
  對提交的數(shù)據的處理,***.php

3.表單標記

<form></form>
屬性：
  1.action 
    作用：定義表單提交時發(fā)生的動作，通常定義的是服務器上處理程序的url地址，
ex:action="login.php"
  2.method
    作用：指定表單數(shù)據的提交方式
取值：
    1.get(默認值)
      1.明文提交，待提交的數(shù)據會顯示在地址欄中
      2.安全性較低
      3.提交數(shù)據有大小限制，限制為2KB
      4.向服務器要數(shù)據時，使用get方式
    2.post
      1.隱式提交，提交的數(shù)據不會顯示
      2.安全性較高
      3.提交數(shù)據大小無限制
      4.要傳遞數(shù)據給服務器時，使用post方式
    3.delete
    4.put
  3.enctype  
    作用：指定表單數(shù)據的編碼方式，允許將什么樣的數(shù)據提交給服務器
1.application/x-www-form-urlencoded
  默認值，允許將任意字符提交給服務器（文件無法提交）
2.multipart/form-data
  允許將文件提交給服務器
3.text/plain
  只能將普通字符提交給服務器

4.表單控件

能夠與用戶進行交互的可視化元素
1.分類：
  1.input元素
  2.textarea多行文本域元素
  3.select和option 選項框元素
  4.其它元素
2.input元素
  1.作用：在頁面中提供各種各樣的輸入控件，如：文本框，密碼框，單選按鈕，復選框等。
  2.語法
    標記：<input>或<input/>
屬性：
   1.type 指定創(chuàng)建輸入控件的類型
   2.name 為控件定義名稱，提交給服務器端使用（必須）
   3.value 控件的值，提交給服務器端使用
       4.disabled 禁用控件，不能操作并不能提交給服務器使用
     該屬性無值，只要出現(xiàn)在標記中，就是禁用。
  3.input元素詳解
    1.文本框和密碼框
  文本框：<input type="text">
  密碼框：<input type="password">
  屬性：
    1.maxlength 指定限制輸入的字符數(shù)
    2.readonly 只讀，只能看，不能改，但允許提交。
    3.placeholder 占位符，即默認顯示在控件上的文本。

13.按鈕

  1.提交按鈕
    type="submit"
    作用：將表單的數(shù)據提交給服務器上指定的程序
  2.重置按鈕
    type="reset"
    作用：將表單的內容恢復到初始化的狀態(tài)
  3.普通按鈕
    type="button"
    沒有功能
  屬性：
    value:顯示在按鈕上的文本
    3.單選按鈕和復選框
  單選按鈕：type="radio"
  復選框：type="checkbox"
  屬性：
    name 除定義控件名稱之外，還能起到分組的作用
    checked 設置默認選中項，無值屬性
    4.隱藏域和文件選擇框
  1.隱藏域
    type="hidden"
    想要提交給服務器，但不想展示給用戶的數(shù)據可以放在隱藏域中。
  2.文件選擇框
    type="file"
        注意：
      1.method的值必須為post
      2.enctype的值必須為multipart/form-data
3.textarea元素
  1.作用
    允許錄入多行文本
  2.語法
    標記：<textarea></textarea>
屬性：
   1.name 定義控件名稱，提供給服務器使用
   2.readonly 只讀
   3.cols 指定文本域的列數(shù)，即一行能顯示多少個英文字符（中文減半）
   4.rows 指定文本域的行數(shù)，即默認顯示多少行的數(shù)據，超出rows的話會出現(xiàn)滾動條。

14.選項框

  1.語法
    1.<select></select> 
作用：在頁面中表示一個選項框
    2.<option></option>
作用：顯示選項框中的內容項
  2.屬性
    1.select屬性
  1.name 定義選項框的名稱
  2.size 定義顯示選項的數(shù)量，默認值為1
  3.multiple 設置多選，無值的屬性
    注意：只有滾動列表支持多選
2.option屬性
  1.value 定義選項的值
  2.selected 設置默認選中項，無值屬性
5.其它元素
  1.label元素
    作用：關聯(lián)文本域表單控件
語法：<label></label>
屬性：for 要與表單控件關聯(lián)的id值
  2.為控件分組
    <fieldset></fieldset>為控件定義分組
<legend></legend>為分組指定標題
  3.浮動框架
    作用：允許在一個網頁中，再引入另外一個網頁。
語法：<iframe></iframe>
屬性：
    1.src 要引入頁面的url路徑
    2.width 寬度
    3.height 高度
    4.frameborder 浮動框架的邊框，默認值1

15.單位轉換

1px=0.025rem;

分享標題：前端知識點總結——HTML-創(chuàng)新互聯(lián)
新聞來源：http://muchs.cn/article46/ddheeg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網站維護、虛擬主機、品牌網站設計、企業(yè)建站、App設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網站建設