HTML結構
HTML模板
HTML：htyper text markup language， 即超文本標記語言
<!DOCTYPE html>
#按標準最新模式決議
<html lang="en">
#語言
<head>
#頭標簽內的內容不會顯示在瀏覽器內，是頁面的配置資訊
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
#體標簽內的內容會顯示在瀏覽器
<h1>Hello world!!!</h1>
</body>
</html>HTML標簽
HTML標簽解釋有兩種模式：
alert(window.top.document.compatMode)：
#提示當前決議模式
1、BackCompat：怪異模式，瀏覽器使用自己的怪異模式決議渲染頁面，
2、CSS1Compat：標準模式，瀏覽器使用W3C的標準決議渲染頁面，
頁面決議默認是怪異模式，如果頁面首行添加了<!DOCTYPE html>那么，那么就等同于開啟了標準模式，那么瀏覽器就得老老實實的按照W3C的
標準決議渲染頁面，
這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了，
這就是<!DOCTYPE html>的作用，head標簽
2.1、meta標簽之name屬性
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
meta標簽的keyword關鍵詞，是瀏覽器搜索引擎搜索時快速匹配本頁面的關鍵詞
<meta name="description" content="老男孩培訓機構是由一個老的男孩創建的">
meta標簽的description描述，是搜索引擎匹配到關鍵字，在未進入本頁面時對頁面的簡單介紹
2.2、meta標簽之http-equiv屬性
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
meta標簽的Refresh重繪，2秒后頁面自動調整到URL網站
<meta http-equiv="content-Type" charset="UTF8">
頁面編碼方式為UTF8
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
瀏覽器兼容最低版本IE7
2.3、title標簽
<title>首頁</title>
#頁面標簽文字
2.4、rel圖示鏈接
<link rel="icon" href="http://www.jd.com/favicon.ico">
配置圖示屬性及圖示的地址，圖示地址也可以是本地地址
2.5、rel腳本屬性
<link rel="stylesheet" href="https://www.cnblogs.com/welog/p/css.css">
<script src="https://www.cnblogs.com/welog/p/hello.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/welog/p/mystyle.css"/>
link標簽引入mystyle.css樣式，stylesheet樣式表單body標簽
3.1 <h1>標簽: <hn>n的取值范圍是1~6; 從大到小. 用來表示標題.
<h1>China 中國</h1>
3.2 <p>標簽，即paragraph段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.
<p>China 中國</p>
3.3 <b>和<strong>標簽: 字體加粗標簽.
<b>China 中國</b>
<strong>中華人民共和國</strong>
3.4 <strike>和<del>標簽: 為文字上加一條中線，即文字洗掉線,strike標簽過時了，
<strike>美國</strike>
<del>美國</del>
3.5 <em>標簽：文字斜體標簽
<em>日本</em>
3.6 <sup>和<sub>標簽: 上角標 和 下角表.
<sup>上</sup>
<sub>下</sub>
3.7 <br/>標簽：即break換行
<br>:換行.
3.8 <hr>標簽，即水平分隔線(horizontal rule)
<hr>:水平線
3.9 <div>標簽：塊標簽，無格式，獨自占一行
<div>獨自占一行</div>
3.10 <span>標簽：類似div的無格式內斂標簽
<span>行內標簽</span>
3.11、<img>標簽屬性：
<img src="https://www.cnblogs.com/welog/p/1.jgp" alt="圖片加載中" height="300px" title="立春">
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 滑鼠懸浮在圖片上時的提示資訊.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
3.12、<a>超鏈接標簽屬性：超鏈接功能及錨鏈功能
超鏈接：
<a href="http://www.baidu.com">百度</a>
href:要連接的資源路徑 格式如下: href="http://www.baidu.com"
text-decoration: none;#將標簽a鏈接自帶的下劃線去掉
錨鏈：定義一個頁面的書簽.用于跳轉 href : #id（錨）
<a href="https://www.cnblogs.com/welog/p/#div1">第一章</a>
<a href="https://www.cnblogs.com/welog/p/#div2">第一章</a>
<a href="https://www.cnblogs.com/welog/p/#div3">第一章</a>
<div id="div1">第一章</div>
<div id="div2">第二章</div>
<div id="div3">第三章</div>
target: _blank : 在新的視窗打開超鏈接. 框架名稱: 在指定框架中打開連接內容.
3.13、串列標簽：
<ul>: 無序串列，UNorder list，
<li>串列項
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>: 有序串列，order list,
<li>串列項
<ol>
<li>1</li>
<li>2</li>
</ol>
<dl>：定義串列；
<dt> 串列標題；
<dd> 串列項
<dl>
<dt>第一章</dt>
<dd>第一節</dd>
</dl>
3.14、<table>表格標簽屬性：
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設定長寬）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）
<th>: table header
<tbody>(不常用): 為表格進行磁區.
3.15、<form>表單標簽：
表單用于向服務器傳輸資料，表單能夠包含input元素，比如文本欄位、復選框、單選框、提交按鈕等等，
表單還可以包含textarea、select、fieldset和label元素，
<form action="api.weahter.com/post/" method="post">
<p>賬號：<input type="text" name="username"></p>
<p>密碼：<input type="password" name="password"></p>
<p><input type="submit" name="submit" value="https://www.cnblogs.com/welog/p/登錄"></p>
<p>愛好：籃球<input type="checkbox" name="hobby" value="https://www.cnblogs.com/welog/p/basketball"></p>
<p>足球<input type="checkbox" name="hobby" value="https://www.cnblogs.com/welog/p/football"></p>
<p>男<input type="radio" name="sex" value="https://www.cnblogs.com/welog/p/male"></p>
<p>女<input type="radio" name="sex" value="https://www.cnblogs.com/welog/p/female"></p>
<p><input type="file" name="upfile"></p>#選擇打開檔案
<p><input type="reset" value="https://www.cnblogs.com/welog/p/重置"></p>
</form>
1.表單屬性
HTML 表單用于接收不同型別的用戶輸入，用戶提交表單時向服務器傳輸資料，從而實作用戶與Web服務器的互動，表單標簽, 要提交的所有內容都應該在該標簽中.
action: 將表單資料提交到指定服務介面,比如https://www.sogou.com/web
method: 表單的提交方式post和get，默認取值get，
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
<input>標簽的屬性和對應值：
type屬性:輸入的物件的型別
text：文本輸入框
password：密碼輸入框
radio：單選框
checkbox：多選框
submit：提交按鈕
button：按鈕(需要配合js使用.) button和submit的區別？
file：提交檔案：form表單需要加上屬性enctype="multipart/form-data"
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都好使.
form表單上傳檔案注意兩點：
1 請求方式必須是post，檔案資訊封裝在request.FILES物件中
2 enctype="multipart/form-data"
3 上傳檔案接入到服務器實體代碼
def uploadfile(request):
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')
<select>下拉標簽屬性：
name:表單提交項的鍵.
size：選項的可視候選個數
multiple：multiple 支持多選
<option> 下拉選中的每一項 屬性：
value:表單提交項的值. selected: selected下拉選默認被選中
<optgroup>為每一項加上分組
<select name="city">
<option value="https://www.cnblogs.com/welog/p/beijing">北京</option>
<option value="https://www.cnblogs.com/welog/p/shanghai">上海</option>
</select>
<textarea>：文本域標簽屬性
name:表單提交項的鍵.
cols:文本域默認有多少列
rows:文本域默認有多少行
<label>標簽：label的for屬性值與其他標簽的id值相同即關聯，當點擊label名時，自動選中關聯標簽
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>標簽：
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>4、塊標簽與行內標簽
4.1、標簽分為：
塊標簽（block）、
行內標簽（inline）、
特殊標簽
4.2、塊標簽特點: <p> <h1> <table> <ol> <ul> <form> <div>
總是在新行上開始；
寬度預設是它的容器的100%，除非設定一個寬度，
它可以容納行內元素和其他塊元素
4.3、行內標簽特點：<a> <input> <img> <sub> <sup> <textarea> <span>
和其他元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
行內元素只能容納文本或者其他行內元素
4.4、特殊字符：
< ：小于號
>；：大于號
"：雙引號
: 空格
4.5、標簽嵌套規則：
1、塊級元素可以包含行內元素或某些塊級元素，但行內元素不能包含塊級元素，它只能包含其它行內元素，
2、有幾個特殊的塊級元素只能包含行內元素，不能包含塊級元素，如h1,h2,h3,h4,h5,h6,p,dt
3、li內可以包含div
4、塊級元素與塊級元素并列、行內元素與行內元素并列，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/536912.html
標籤：Html/Css
下一篇：HTML標簽