對HTML知識點的整理總結

下面小編就為大家帶來一篇前端之HTML知識點整理總結(推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

一、html概述

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

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

標記語言: 標記（標籤）構成的語言.

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

靜態網頁：靜態的資源，如xxx.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; 從大到小. 用來表示標題.

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

: 加粗標籤.

: 為文字加上一條中線.

: 文字變成斜體.
 
^{和_{: 上角標和下角表.}}

:換行.

---

:水平線

 

區塊級標籤與內嵌標籤

#區塊級標籤：

內嵌標籤：

內嵌標籤：_{^{<span><strong><span style="max-width:90%"></span></strong>block（區塊）元素的特徵</span>}}

#block（區塊）元素的特性

###### ###① 總是在新行上開始；######② 高度，行高以及外邊距和內邊距都可控制；######③ 寬度缺省是它的容器的100 %，除非設定一個寬度。 ###

④ 它可以容纳内联元素和其他块元素

inline元素的特点

① 和其他元素都在一行上；

② 高，行高及外边距和内边距不可改变；

③ 宽度就是它的文字或图片的宽度，不可改变

④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下

设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

特殊字符：

< >；"；©®

图形标签：

src: 要显示图片的路径.

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

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

width: 图片的宽

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

超链接标签:　

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

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"

XML/HTML Code复制内容到剪贴板

1. def index(request):   

2.     print request.POST   

3.     print request.GET   

4.     print request.FILES   

5.     for item in request.FILES:   

6.         fileObj = request.FILES.get(item)   

7.         f# = open(fileObj.name, 'wb')   

# # = 
8. fileObj

   .chunks()           for line in iter_file: 1  

9. ##        f.close()   

10.     return HttpResponse('ok') 項目的鍵.注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在
    css和javascript使用的。
11. value: 表單提交項目的值.對於不同的輸入類型，value 屬性的用法也不同：

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

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

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

checked: radio 和checkbox 預設被選取

readonly: 只讀. text 和password

disabled: 對所用input都好使.

下拉選標籤屬性：

name:表單提交項目的鍵.

size：選項個數

multiple：multiple

下拉選取的每項屬性：value:表單提交項目的值.   selected: selected下拉選預設被選取

為每一項加上分組

文字域name:表單提交項目的鍵. cols:文字域預設有多少列rows:文字域預設有多少行

     姓名

    

#

   

登入

   

####################################################################################################################################################################'

: table head cell	: table data cell rowspan: 单元格竖跨多少行 colspan:  单元格横跨多少列（即合并单元格）	: table header

以上是對HTML知識點的整理總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！