搜尋
首頁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
      說明將一致的編碼樣式用於HTML標籤和屬性的重要性。說明將一致的編碼樣式用於HTML標籤和屬性的重要性。May 01, 2025 am 12:01 AM

      一致的HTML編碼風格很重要,因為它提高了代碼的可讀性、可維護性和效率。 1)使用小寫標籤和屬性,2)保持一致的縮進,3)選擇並堅持使用單引號或雙引號,4)避免在項目中混合使用不同風格,5)利用自動化工具如Prettier或ESLint來確保風格的一致性。

      如何在 Bootstrap 4 中實現多項目輪播?如何在 Bootstrap 4 中實現多項目輪播?Apr 30, 2025 pm 03:24 PM

      在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...

      deepseek官網是如何實現鼠標滾動事件穿透效果的?deepseek官網是如何實現鼠標滾動事件穿透效果的?Apr 30, 2025 pm 03:21 PM

      如何實現鼠標滾動事件穿透效果?在我們瀏覽網頁時,經常會遇到一些特別的交互設計。比如在deepseek官網上,�...

      HTML 視頻的播放控件樣式怎麼修改HTML 視頻的播放控件樣式怎麼修改Apr 30, 2025 pm 03:18 PM

      無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能,使用庫如Video.js或Plyr可簡化過程。

      在手機上使用原生select會帶來哪些問題?在手機上使用原生select會帶來哪些問題?Apr 30, 2025 pm 03:15 PM

      在手機上使用原生select的潛在問題在開發移動端應用時,我們常常會遇到選擇框的需求。通常情況下,開發者傾...

      在手機上使用原生select的弊端是什麼?在手機上使用原生select的弊端是什麼?Apr 30, 2025 pm 03:12 PM

      在手機上使用原生select的弊端是什麼?在移動設備上開發應用時,選擇合適的UI組件是非常重要的。許多開發者�...

      如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理?如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理?Apr 30, 2025 pm 03:09 PM

      使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...

      在手機上使用原生select會遇到哪些問題?在手機上使用原生select會遇到哪些問題?Apr 30, 2025 pm 03:06 PM

      使用原生select在手機上的問題在移動設備上開發應用時,我們經常會遇到需要用戶進行選擇的場景。雖然原生sel...

      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脫衣器

      Video Face Swap

      Video Face Swap

      使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

      熱工具

      PhpStorm Mac 版本

      PhpStorm Mac 版本

      最新(2018.2.1 )專業的PHP整合開發工具

      EditPlus 中文破解版

      EditPlus 中文破解版

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

      Atom編輯器mac版下載

      Atom編輯器mac版下載

      最受歡迎的的開源編輯器

      Dreamweaver CS6

      Dreamweaver CS6

      視覺化網頁開發工具

      MinGW - Minimalist GNU for Windows

      MinGW - Minimalist GNU for Windows

      這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。