搜尋
首頁web前端html教學前端之HTML知識點整理

一、html概述

  htyper text markup language  即超文本標記語言

  超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。

  標記語言: 標記(標籤)構成的語言.  

  網頁==HTML文檔,由瀏覽器解析,用來展示的

  靜態網頁:靜態的資源,如xxx.html

  動態網頁:html程式碼是由某種開發語言根據使用者請求動態產生的

   以下為html檔案的樹狀結構圖

  

  標籤的概念

  • 是由一對尖括號包裹的單字構成 例如: *所有標籤中的單字不可能以數字開頭.
  • 標籤不區分大小寫. 和 . 建議使用小寫.
  • 標籤分為兩部分: 開始標籤 和 結束標籤. 兩個標籤之間的部分 我們叫做標籤體.
  • 有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉和標籤.例如:

    前端之HTML知識點整理
  • 標籤可以巢狀.但是不能交叉巢狀.

  標籤的屬性:  

  • 通常是以鍵值對形式出現的. 例如 name="alex"
  • 屬性只能出現在開始標籤 或 自閉和標籤中.
  • 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
  • 如果屬性值和屬性名稱完全一樣.直接寫屬性名即可. 例如 readonly

二、head主要標籤介紹

  

  • meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁 功能。

 

  1 name屬性主要用於描述網頁,與之對應的屬性值為content,content中的內容 主要是便於搜尋引擎機器人查找資訊和分類資訊用的。

 

     

 

     

 

  2 http-equiv顧名思義,相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,與之對應的屬性值為content, content        中的內容其實就是各個參數的變數值。

 

    //(注意後面的引號,分別在秒數的前面和網址的後面)

 

   

 

   

 

  • 老男孩

三、body標籤

  基本標籤:

 

  : n的取值範圍是1~6; 從大到小. 用來表示標題.

 

  

: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.

 

   : 加粗標籤.

 

  : 為文字加上一條中線.

 

  : 文字變成斜體.

 

  : 上角標 和 下角表.

 

  
:換行.

 

  


:水平線

 

   

  

  块级标签和内联标签

  块级标签:

        内联标签:前端之HTML知識點整理

        block(块)元素的特点
        ① 总是在新行上开始;

        
        ② 高度,行高以及外边距和内边距都可控制;
        ③ 宽度缺省是它的容器的100%,除非设定一个宽度。
        ④ 它可以容纳内联元素和其他块元素

        inline元素的特点
        ① 和其他元素都在一行上;
        ② 高,行高及外边距和内边距不可改变;
        ③ 宽度就是它的文字或图片的宽度,不可改变
        ④ 内联元素只能容纳文本或者其他内联元素

        对行内元素,需要注意如下 
        设置宽度width 无效。
        设置高度height 无效,可以通过line-height来设置。
        设置margin 只有左右margin有效,上下无效。
        设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

       

        特殊字符:

            < >;";©®

        图形标签前端之HTML知識點整理  

        src: 要显示图片的路径.

        alt: 图片没有加载成功时的提示.

        title: 鼠标悬浮时的提示信息.

        width: 图片的宽

        height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

        超链接标签: 

        href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

       

        target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

       

        name: 定义一个页面的书签.

       

        用于跳转 href : #书签名称.

       

        列表标签:  

        

        : 无序列表

          

        :有序列表

             

      1. :列表中的每一项.

          

        定义列表

             

        列表标题

             

        列表项

          表格标签


        

        border: 表格边框.

        cellpadding: 内边距

        cellspacing: 外边距.

        width: 像素 百分比.(最好通过css来设置长宽)

        

      : table row

                 

      (不常用): 为表格进行分区

        表单标签

        

        表单用于向服务器传输数据。

            表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

            表单还可以包含textarea、select、fieldset和 label 元素。

        1、表单的属性

        HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

        action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web

        method: 表单的提交方式 post/get 默认取值 就是 get(信封)

         get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

        post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

         get/post是常见的两种请求方式.

        2.表单元素

        

             type:     text 文本输入框

                     password 密碼輸入框

                     radio 單選框

                     checkbox 多重選取框  

                     submit 提交按鈕            

                     button 按鈕(需搭配js使用.) button與submit的差異?

                     file 提交文件:form表單需加上屬性enctype="multipart/form-data"

        

      <span style="color: #008080;"> 1</span> <span style="color: #0000ff;">def</span><span style="color: #000000;"> index(request):
      </span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.POST
      </span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.GET
      </span><span style="color: #008080;"> 4</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.FILES
      </span><span style="color: #008080;"> 5</span>     <span style="color: #0000ff;">for</span> item <span style="color: #0000ff;">in</span><span style="color: #000000;"> request.FILES:
      </span><span style="color: #008080;"> 6</span>         fileObj =<span style="color: #000000;"> request.FILES.get(item)
      </span><span style="color: #008080;"> 7</span>         f = open(fileObj.name, <span style="color: #800000;">'</span><span style="color: #800000;">wb</span><span style="color: #800000;">'</span><span style="color: #000000;">)
      </span><span style="color: #008080;"> 8</span>         iter_file =<span style="color: #000000;"> fileObj.chunks()
      </span><span style="color: #008080;"> 9</span>         <span style="color: #0000ff;">for</span> line <span style="color: #0000ff;">in</span><span style="color: #000000;"> iter_file:
      </span><span style="color: #008080;">10</span> <span style="color: #000000;">            f.write(line)
      </span><span style="color: #008080;">11</span> <span style="color: #000000;">        f.close()
      </span><span style="color: #008080;">12</span>     <span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">'</span><span style="color: #800000;">ok</span><span style="color: #800000;">'</span>)
      View Code  

        name: 表單提交項目的鍵.注意和id屬性的區別:name屬性是和伺服器通訊時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是為了方便客戶端編程,而在

        css和javascript中使用的。

            value: 表單提交項目的值.對於不同的輸入類型,value 屬性的用法也不同:

        type="button", "reset", "submit" - 定義按鈕上的顯示的文字

        type="text", "password", "hidden" - 定義輸入欄位的初始值

        type="checkbox", "radio", "image" - 定義與輸入相關聯的值

            checked: radio 和 checkbox 預設選取

            readonly: 只讀. text 及 password

            disabled: 對所用input都好使.

       

        

                     name:表單提交項目的鍵.

                     size:選項數量

                     multiple:multiple 

                   

                   為每項加上分組

        

        

        

             >
             
        

        

      >      >登入 >      



                
       

      : table head cell

                 

      : table data cell

        rowspan: 单元格竖跨多少行

        colspan:  单元格横跨多少列(即合并单元格)

        

      : table header

      陳述
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
      公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?Mar 04, 2025 pm 12:32 PM

      公眾號網頁更新緩存,這玩意兒,說簡單也簡單,說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章,結果用戶打開還是老版本,這滋味,誰受得了?這篇文章,咱就來扒一扒這背後的彎彎繞繞,以及如何優雅地解決這個問題。讀完之後,你就能輕鬆應對各種緩存難題,讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存,說白了就是瀏覽器或者服務器為了提高訪問速度,把一些靜態資源(比如圖片、CSS、JS)或者頁面內容存儲起來。下次訪問時,直接從緩存裡取,不用再重新下載,速度自然快。但這玩意兒,也是個雙刃劍。新版本上線,

      如何使用HTML5表單驗證屬性來驗證用戶輸入?如何使用HTML5表單驗證屬性來驗證用戶輸入?Mar 17, 2025 pm 12:27 PM

      本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

      HTML5中跨瀏覽器兼容性的最佳實踐是什麼?HTML5中跨瀏覽器兼容性的最佳實踐是什麼?Mar 17, 2025 pm 12:20 PM

      文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

      如何高效地在網頁中為PNG圖片添加描邊效果?如何高效地在網頁中為PNG圖片添加描邊效果?Mar 04, 2025 pm 02:39 PM

      本文展示了使用CSS為網頁中添加有效的PNG邊框。 它認為,與JavaScript或庫相比,CSS提供了出色的性能,詳細介紹瞭如何調整邊界寬度,樣式和顏色以獲得微妙或突出的效果

      &lt; datalist&gt;的目的是什麼。 元素?&lt; datalist&gt;的目的是什麼。 元素?Mar 21, 2025 pm 12:33 PM

      本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

      我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?Mar 12, 2025 pm 04:05 PM

      本文解釋了HTML5&lt; time&gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

      &gt; gt;的目的是什麼 元素?&gt; gt;的目的是什麼 元素?Mar 21, 2025 pm 12:34 PM

      本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

      &lt; meter&gt;的目的是什麼。 元素?&lt; meter&gt;的目的是什麼。 元素?Mar 21, 2025 pm 12:35 PM

      本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

      See all articles

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序,用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      AI Hentai Generator

      AI Hentai Generator

      免費產生 AI 無盡。

      熱門文章

      R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
      2 週前By尊渡假赌尊渡假赌尊渡假赌
      倉庫:如何復興隊友
      4 週前By尊渡假赌尊渡假赌尊渡假赌
      Hello Kitty Island冒險:如何獲得巨型種子
      4 週前By尊渡假赌尊渡假赌尊渡假赌

      熱工具

      VSCode Windows 64位元 下載

      VSCode Windows 64位元 下載

      微軟推出的免費、功能強大的一款IDE編輯器

      SublimeText3 Linux新版

      SublimeText3 Linux新版

      SublimeText3 Linux最新版

      記事本++7.3.1

      記事本++7.3.1

      好用且免費的程式碼編輯器

      EditPlus 中文破解版

      EditPlus 中文破解版

      體積小,語法高亮,不支援程式碼提示功能

      禪工作室 13.0.1

      禪工作室 13.0.1

      強大的PHP整合開發環境