久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

【Python之路】第十篇

 highoo 2019-03-20

HTML 是什么,?

  htyper text markup language  即超文本標(biāo)記語言

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

  標(biāo)記語言: 標(biāo)記(標(biāo)簽)構(gòu)成的語言.

 

網(wǎng)頁的分類:

  網(wǎng)頁==HTML文檔,,由瀏覽器解析,,用來展示的

  靜態(tài)網(wǎng)頁:靜態(tài)的資源,如xxx.html

  動(dòng)態(tài)網(wǎng)頁:html代碼是由某種開發(fā)語言根據(jù)用戶請(qǐng)求動(dòng)態(tài)生成的

 

html文檔樹形結(jié)構(gòu)圖

什么是標(biāo)簽:

  • 是由一對(duì)尖括號(hà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)簽功能比較簡(jiǎn)單.使用一個(gè)標(biāo)簽即可.這種標(biāo)簽叫做自閉和標(biāo)簽.例如: <br/> <hr/> <input /> <img />

  • 標(biāo)簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

標(biāo)簽的屬性:

  • 通常是以鍵值對(duì)形式出現(xiàn)的. 例如 name="alex"

  • 屬性只能出現(xiàn)在開始標(biāo)簽 或 自閉和標(biāo)簽中.

  • 屬性名字全部小寫. *屬性值必須使用雙引號(hào)或單引號(hào)包裹 例如 name="alex"

  • 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

 

<!DOCTYPE html>標(biāo)簽

  在W3C標(biāo)準(zhǔn)出臺(tái)以前,,瀏覽器在對(duì)頁面的渲染上沒有統(tǒng)一規(guī)范,,產(chǎn)生了差異(Quirks mode或者稱為Compatibility Mode);

  由于W3C標(biāo)準(zhǔn)的推出,,瀏覽器渲染頁面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱為Strict mode也有叫做Standarsmode),,這就是二者最簡(jiǎn)單的區(qū)別。

1
2
3
window.top.document.compatMode:
//BackCompat:混雜模式,,瀏覽器使用自己的混雜模式解析渲染頁面,。
//CSS1Compat:標(biāo)準(zhǔn)模式,瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面,。

  這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用,,但是如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認(rèn)就是BackCompat

  如果你的頁面添加了<!DOCTYPE html>,,那么就等同于開啟了標(biāo)準(zhǔn)模式

 

head標(biāo)簽:
meta標(biāo)簽 共有兩個(gè)屬性,,它們分別是name屬性和http-equiv屬性,。

1.name 屬性主要用于描述網(wǎng)頁,,與之對(duì)應(yīng)的屬性值為content.

content中的內(nèi)容:主要是便于搜索引擎機(jī)器人查找信息和分類信息用的,。

1
2
3
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description"content="哩嗶哩(bilibili)直播是國(guó)內(nèi)首家關(guān)注 ACG 直播的互動(dòng)平臺(tái)。">

2.http-equiv 相當(dāng)于http的文件頭作用,,它可以向?yàn)g覽器傳回一些有用的信息,。以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,。

與之對(duì)應(yīng)的屬性值為content,content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值??!

1
2
3
4
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">  *(注意后面的引號(hào),分別在秒數(shù)的前面和網(wǎng)址的后面)
<meta http-equiv="content-Type" content="text/html; charset=UTF8">  簡(jiǎn)寫 <meta charset="UTF8"><br>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 

body標(biāo)簽:

一: 基本標(biāo)簽

復(fù)制代碼
<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>:水平線   可以通過border設(shè)置顏色屬性

<div><span>
復(fù)制代碼

塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽

1
2
3
塊級(jí)標(biāo)簽:<p> <h1> <table> <ol> <ul> <form> <div>
內(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)元素

⑤ 設(shè)置margin 只有左右margin有效,,上下無效,。

⑥ 設(shè)置padding 只有左右padding有效,上下則無效,。注意元素范圍是增大了,,但是對(duì)元素周圍的內(nèi)容是沒影響的。

 

特殊字符:

  <    >    "    &copy;    &reg;

 

二:圖形標(biāo)簽: <img> :

src:     要顯示圖片的路徑.
alt:     圖片沒有加載成功時(shí)的提示!.
title:   鼠標(biāo)懸浮時(shí)的提示信息.
width:   圖片的寬
height:  圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)

 

三 超鏈接標(biāo)簽(錨標(biāo)簽)<a>:

href:要連接的資源路徑 格式如下:  

target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容.

name: 定義一個(gè)頁面的書簽( id屬性也適用! ).  用于跳轉(zhuǎn) href : #書簽名稱.

復(fù)制代碼
錨標(biāo)簽:
<a href="#abc">定位第一章</a>    

<div id='abc'>我是第一章</abc>
<div id='efg'>我是第一章</abc>
或者:
<div name='abc'>我是第一章</abc>
<div name='efg'>我是第一章</abc>
復(fù)制代碼

 

四 列表標(biāo)簽:

<ul>: 無序列表

<ol>: 有序列表

         <li>:列表中的每一項(xiàng).

<dl> 定義列表

         <dt> 列表標(biāo)題

         <dd> 列表項(xiàng)

<dl>
    <dt>定義:</dt>
    <dd>內(nèi)容</dd>
</dl>

 

五 表格標(biāo)簽: <table>:

復(fù)制代碼
border:   表格邊框.
cellpadding:  內(nèi)邊距
cellspacing:  外邊距.
width:    像素 百分比.(最好通過css來設(shè)置長(zhǎng)寬)
rowspan:  單元格豎跨多少行!
colspan:  單元格橫跨多少列!(即合并單元格)
復(fù)制代碼
demo

 

六 表單標(biāo)簽<form>:

      表單用于向服務(wù)器傳輸數(shù)據(jù),。

      表單能夠包含 input 元素,,比如文本字段、復(fù)選框,、單選框,、提交按鈕等等。

      表單還可以包含textarea,、select,、fieldset和 label 元素

 

1.表單屬性

  HTML表單用于接收不同類型的用戶輸入,,用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互,。

  action: 表單提交到哪. 一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過來的數(shù)據(jù)(即表單元素值)作相應(yīng)處理,。

      method: 表單的提交方式 post/get 默認(rèn)取值 就是 get(信封)

    • get:     1.提交的鍵值對(duì).放在地址欄中url后面. 2.安全性相對(duì)較差. 3.對(duì)提交內(nèi)容的長(zhǎng)度有限制.

    • post:   1.提交的鍵值對(duì) 不在地址欄.  2.安全性相對(duì)較高.  3.對(duì)提交內(nèi)容的長(zhǎng)度理論上無限制.

    • get/post是常見的兩種請(qǐng)求方式.

1
<form action='https://www.baidu.com/' , method='post'>

2.表單元素

<input>

復(fù)制代碼
type: 可選屬性

text   文本輸入框
password  密碼輸入框
radio   單選框
checkbox  多選框  
submit  提交按鈕            
button  按鈕(需要配合js使用.) 
file    提交文件:form表單需要加上屬性enctype="multipart/form-data" 

name: 
表單提交項(xiàng)的鍵. 注意和id 屬性的區(qū)別:name屬性是和服務(wù)器通信時(shí)使用的名稱;而id屬性是瀏覽器端使用的名稱,,
該屬性主要是為了方便客戶端編程,,而在css和javascript中使用的。

value:  表單提交項(xiàng)的值. 對(duì)于不同的輸入類型,,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:  對(duì)所有input標(biāo)簽都有效果. 
復(fù)制代碼
demo

 

<select> 下拉選標(biāo)簽屬性:

復(fù)制代碼
name:  下拉列表的名稱
size:  選項(xiàng)個(gè)數(shù)
multiple: multiple 
value:    表單提交項(xiàng)的值.   
selected: selected下拉選默認(rèn)被選中

<option> 下拉選中的每一項(xiàng) 屬性
<optgroup>為每一項(xiàng)加上分組
復(fù)制代碼
demo

demo效果:

 

<textarea> 文本域

復(fù)制代碼
name:  表單提交項(xiàng)的鍵.
cols:  文本域默認(rèn)有多少列
rows:  文本域默認(rèn)有多少行

<textarea rows="4" cols="20">
    在w3school,,你可以找到你所需要的所有的網(wǎng)站建設(shè)教程,。
</textarea>
復(fù)制代碼

 

<label> 

如果您在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件,。就是說,,

當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上


demo

 

<fieldset>

組合表單中的相關(guān)元素:

demo

 

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,,所有內(nèi)容均由用戶發(fā)布,,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多