HTML,CSS,JS,DOM

時間 2019-12-01

標籤 html css dom 欄目 HTML 简体版

原文原文鏈接

HTMLjavascript

翻譯成代碼以下css

web：

import socket
def handle_request(client):
    buf = client.recv(1024)
    client.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

    client.sendall(bytes("<h1>Hello, World</h1>","utf8"))

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8082))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':

    main()

html css 以及js的關係html

HTML 是什麼？

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

超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。 web

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

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

靜態網頁：靜態的資源，如xxx.html編程

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的瀏覽器

html文檔樹形結構圖安全

什麼是標籤:

是由一對尖括號包裹的單詞構成例如: <html> *全部標籤中的單詞不可能以數字開頭.
標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標籤分爲兩部分: 開始標籤<a> 和結束標籤</a>. 兩個標籤之間的部分咱們叫作標籤體.
有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>

標籤的屬性:

一般是以鍵值對形式出現的. 例如 name="alex"
屬性只能出如今開始標籤或自閉和標籤中.
屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"
若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly


<!DOCTYPE html>標籤

head標籤：

標籤分類
- 自閉合標籤
<meta charset="UTF-8">
- 主動閉合標籤
<title>老男孩</title>

head標籤中
　　- <meta -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容
　　<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
　　- title標籤
　　- <link /> 搞圖標，欠
　　- <style />用來寫頁面的風格，像背景色，字體顏色，等
　　- <script> 欠

1 name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

2 http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值爲content， content 中的內容其實就是各個參數的變量值。

<link rel="icon" href="http://www.jd.com/favicon.ico">

body標籤：

一基本標籤

  > <

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

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

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標和下角表.

<br>:換行.

<hr>:水平線

塊級標籤和內聯標籤

塊級標籤：<p><h1><table><ol><ul><form><div> （div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距））

內聯標籤：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特色
① 老是在新行上開始；
② 高度，行高以及外邊距和內邊距均可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它能夠容納內聯元素和其餘塊元素

inline元素的特色
① 和其餘元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其餘內聯元素

對行內元素，須要注意以下
設置寬度width 無效。
設置高度height 無效，能夠經過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

特殊字符：

< &gt；&quot；©®

ps:chorme審查元素的使用
- 定位
- 查看樣式

********

- h系列
- div
- span
- input系列 + form標籤
input type='text' - name屬性，value="趙凡"
input type='password' - name屬性，value="趙凡"
input type='submit' - value='提交' 提交按鈕，表單
input type='button' - value='登陸' 按鈕

input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥）
input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量獲取數據）
input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data"
input type='rest' - 重置

<textarea >默認值</textarea> - name屬性
select標籤 - name,內部option value, 提交到後臺，size，multiple

二圖形標籤: <img> :

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

三超連接標籤(錨標籤)<a>:

href:要鏈接的資源路徑格式以下: href="http://www.baidu.com"

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

name: 定義一個頁面的書籤.

用於跳轉 href : #書籤名稱.

四列表標籤：

<ul>: 無序列表

<ol>:有序列表

<li>:列表中的每一項.

<dl> 定義列表

<dt> 列表標題

<dd> 列表項

五表格標籤: <table>:

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素百分比.（最好經過css來設置長寬）

<tr>: table row

<th>: table head cell

<td>: table data cell

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列（即合併單元格）

<th>: table header <tbody>(不經常使用): 爲表格進行分區.

六表單標籤（django）<form>:

表單用於向服務器傳輸數據。

表單可以包含 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.表單元素

<input> type: text 文本輸入框

password 密碼輸入框

radio 單選框

checkbox 多選框

submit 提交按鈕

button 按鈕(須要配合js使用.) button和submit的區別？

file 提交文件：form表單須要加上屬性enctype="multipart/form-data"

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都好使.

<select> 下拉選標籤屬性：

name:表單提交項的鍵.

size：選項個數

multiple：multiple

<option> 下拉選中的每一項屬性：value:表單提交項的值. selected: selected下拉選默認被選中

<optgroup>爲每一項加上分組

<textarea> 文本域 name:表單提交項的鍵. cols:文本域默認有多少列 rows:文本域默認有多少行

<label>

css

在標籤上設置style屬性：
background-color: #2459a2;
height: 48px;
...

編寫css樣式：
1. 標籤的style屬性
2. 寫在head裏面 style標籤中寫樣式
- id選擇區
#i1{
background-color: #2459a2;
height: 48px;
}

- class選擇器 ******

.名稱{
...
}

<標籤 class='名稱'> </標籤>

- 標籤選擇器
div{
...
}

全部div設置上此樣式

- 層級選擇器（空格） ******
.c1 .c2 div{

}
- 組合選擇器（逗號） ******
#c1,.c2,div{

}

- 屬性選擇器 ******
對選擇到的標籤再經過屬性再進行一次篩選
.c1[n='alex']{ width:100px; height:200px; }

PS:
- 優先級，標籤上style優先，編寫順序，就近原則

2.5 css樣式也能夠寫在單獨文件中
<link rel="stylesheet" href="commons.css" />

三、註釋
/* */

四、邊框
- 寬度，樣式，顏色 (border: 4px dotted red;)
- border-left

五、
height，高度百分比
width，寬度像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根據標籤高度
color、字體顏色
font-size、字體大小
font-weight 字體加粗

六、float
讓標籤浪起來，塊級標籤也能夠堆疊
老子管不住：
<div style="clear: both;"></div>

七、display
display: none; -- 讓標籤消失
display: inline;
display: block;
display: inline-block;
具備inline,默認本身有多少佔多少
具備block，能夠設置沒法設置高度，寬度，padding margin
******
行內標籤：沒法設置高度，寬度，padding margin
塊級標籤：設置高度，寬度，padding margin

八、padding margin(0,auto)

DOM

一、找到標籤
獲取單個元素 document.getElementById('i1')
獲取多個元素（列表）document.getElementsByTagName('div')
獲取多個元素（列表）document.getElementsByClassName('c1')

a. 直接找
document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName 根據class屬性獲取標籤集合
document.getElementsByTagName 根據標籤名獲取標籤集合

b. 間接
tag = document.getElementById('i1')

parentElement // 父節點標籤元素
children // 全部子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素

二、操做標籤

a. innerText

獲取標籤中的文本內容
標籤.innerText

對標籤內部文本進行從新複製

標籤.innerText = ""

b. className
tag.className =》直接總體作操做
tag.classList.add('樣式名') 添加指定樣式
tag.classList.remove('樣式名') 刪除指定樣式

PS：

<div onclick='func();'>點我</div>
<script>
function func(){

}

</script>

c. checkbox
獲取值
checkbox對象.checked
設置值
checkbox對象.checked = true