一、html概述
htyper text markup language 即超文本標(biāo)記語言
超文本: 就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標(biāo)記語言: 標(biāo)記（標(biāo)簽）構(gòu)成的語言.
網(wǎng)頁==HTML文檔，由瀏覽器解析，用來展示的
靜態(tài)網(wǎng)頁：靜態(tài)的資源，如xxx.html
動態(tài)網(wǎng)頁：html代碼是由某種開發(fā)語言根據(jù)用戶請求動態(tài)生成的
以下為html文件的樹形結(jié)構(gòu)圖
標(biāo)簽的概念：
•是由一對尖括號包裹的單詞構(gòu)成 例如: <html> *所有標(biāo)簽中的單詞不可能以數(shù)字開頭.
•標(biāo)簽不區(qū)分大小寫.<html> 和 <HTML>. 推薦使用小寫.
•標(biāo)簽分為兩部分: 開始標(biāo)簽<a> 和 結(jié)束標(biāo)簽</a>. 兩個(gè)標(biāo)簽之間的部分 我們叫做標(biāo)簽體.
•有些標(biāo)簽功能比較簡單.使用一個(gè)標(biāo)簽即可.這種標(biāo)簽叫做自閉和標(biāo)簽.例如: <br/> <hr/> <input /> <img />
•標(biāo)簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標(biāo)簽的屬性：
•通常是以鍵值對形式出現(xiàn)的. 例如 name="alex"
•屬性只能出現(xiàn)在開始標(biāo)簽 或 自閉和標(biāo)簽中.
•屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
•如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
二、head主要標(biāo)簽介紹
•<meta>meta標(biāo)簽的組成：meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁 功能。
1 name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容 主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<meta name="keywords"content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description"content="老男孩培訓(xùn)機(jī)構(gòu)是由一個(gè)老的男孩創(chuàng)建的">
2 http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有 用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content， content 中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
<meta http-equiv="Refresh"content="2;URL=https://www.jb51.net"> //(注意后面的引號，分別在秒數(shù)的前面和網(wǎng)址的后面)
<meta http-equiv="content-Type"content="text/html;charset=UTF8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
•<title>老男孩</title>
•<link rel="icon" href="http://www.jd.com/favicon.ico">
三、body標(biāo)簽
基本標(biāo)簽：
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題.
<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
<b> <strong>: 加粗標(biāo)簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標(biāo) 和 下角表.
<br>:換行.
<hr>:水平線
<p><span>
塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
塊級標(biāo)簽：<p><h1><table><ol><ul><form><p>
內(nèi)聯(lián)標(biāo)簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點(diǎn)
① 總是在新行上開始；
② 高度，行高以及外邊距和內(nèi)邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
④ 它可以容納內(nèi)聯(lián)元素和其他塊元素
inline元素的特點(diǎn)
① 和其他元素都在一行上；
② 高，行高及外邊距和內(nèi)邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對行內(nèi)元素，需要注意如下
設(shè)置寬度width 無效。
設(shè)置高度height 無效，可以通過line-height來設(shè)置。
設(shè)置margin 只有左右margin有效，上下無效。
設(shè)置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
特殊字符：
< >；"；©®
圖形標(biāo)簽<img>：
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時(shí)的提示.
title: 鼠標(biāo)懸浮時(shí)的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個(gè)屬性只用一個(gè)會自動等比縮放.)
超鏈接標(biāo)簽<a>:
href:要連接的資源路徑 格式如下: href="https://www.jb51.net"
target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容.
name: 定義一個(gè)頁面的書簽.
用于跳轉(zhuǎn) href : #書簽名稱.
列表標(biāo)簽:
<ul>: 無序列表
<ol>:有序列表
<li>:列表中的每一項(xiàng).
<dl> 定義列表
<dt> 列表標(biāo)題
<dd> 列表項(xiàng)
表格標(biāo)簽<table>：
border: 表格邊框.
cellpadding: 內(nèi)邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設(shè)置長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）
<th>: table header <tbody>(不常用): 為表格進(jìn)行分區(qū)
表單標(biāo)簽<form>
表單用于向服務(wù)器傳輸數(shù)據(jù)。
表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1、表單的屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。表單標(biāo)簽, 要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中.
action: 表單提交到哪. 一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過來的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 默認(rèn)取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內(nèi)容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內(nèi)容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input>
type:
text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區(qū)別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- def index(request):
- print request.POST
- print request.GET
- print request.FILES
- for item in request.FILES:
- fileObj = request.FILES.get(item)
- f = open(fileObj.name, 'wb')
- iter_file = fileObj.chunks()
- for line in iter_file:
- f.write(line)
- f.close()
- return HttpResponse('ok')
name: 表單提交項(xiàng)的鍵.注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在
css和javascript中使用的。
value: 表單提交項(xiàng)的值.對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值
checked: radio 和 checkbox 默認(rèn)被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.
<select> 下拉選標(biāo)簽屬性：
name:表單提交項(xiàng)的鍵.
size：選項(xiàng)個(gè)數(shù)
multiple：multiple
<option> 下拉選中的每一項(xiàng) 屬性：value:表單提交項(xiàng)的值. selected: selected下拉選默認(rèn)被選中
<optgroup>為每一項(xiàng)加上分組
<textarea> 文本域 name:表單提交項(xiàng)的鍵. cols:文本域默認(rèn)有多少列 rows:文本域默認(rèn)有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
以上這篇前端之HTML知識點(diǎn)整理匯總(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
