html學習筆記整理

時間 2019-11-16

標籤 html 學習筆記整理欄目 HTML 简体版

原文原文鏈接

網頁html

1.網頁的組成部分git

　　　網頁是由文字，圖片，視頻，音頻，輸入框，按鈕這些元素（也就是html標籤）組成。web

2.瀏覽網頁經常使用的五大主流瀏覽器後端

　　　谷歌，IE，火狐，歐朋，safari。瀏覽器的內核（渲染引擎）將咱們的html標籤渲染成咱們人眼可視的。瀏覽器

　　　谷歌瀏覽器內核：webkit -> blink安全

　　　 IE => trident服務器

　　　火狐 => geckoide

歐朋 => prestopost

safari => webkit 1.4 服務器(瞭解)spa

HTML

html的全稱是：Heper Text Markup Language（超文本標記語言）

<!DOCTYPE html>
<html>

</html>

HTML標籤

文本標籤

　　1.加粗標籤

<b>你好</b>
<strong>你好</strong>

　　2.斜體標籤

<i>你好</i>
<em>你好<em>

　　3.下劃線

<u>你好</u>
<ins>你好</ins>

　　4.中劃線標籤

<del>你好</del>
<s>你好</s>

標題標籤

<h1 ailgn="left(默認值)/center/right"></h1>
.......
<h6></h6>
雙標籤
<h1></h1>在一個網頁中有且僅有一個。

段落標籤

<p></p>
<p ailgn="left/center/right"></p>

特色:獨佔一行
        顯示不下自動換行
        寬度繼承父元素寬度，自帶外邊框

圖片標籤

<img src="圖片路徑">

img標籤的經常使用屬性及做用
src屬性：引用圖片的路徑
height屬性：圖片的高度
width屬性：圖片的寬度
title屬性：圖片的標題，鼠標在圖片上顯示的文字
alt屬性：圖片沒法顯示時的文字

超連接

<a href="外部網址或頁面內部的路徑"></a>


href:超連接地址

屬性：
target
<a target="_self">在當前頁面打開對應頁面（默認）</a>
<a target="_blank"> 新建一個標籤頁打開相應頁面</a>

特色：
自帶下劃線 默認爲藍色點擊後變成紫色

表格標籤

1.表格的概述

　　表格由若干個單元格有次序的組成了行和列

2.標籤

　　table 整個表格

　　tr 每個tr表明一行

　　td 每個td表明一行裏的一列，或單元格

3.屬性

　　border 設置表格裏的邊框

　　width 寬，數字，默認單位px, 100%;

　　hegith 高

　　align 設置表格裏的水平對齊方式，left/center/right

　　cellspaching 設置表格內單元格的間距取值0

　　cellpadding 設置單元格的內邊距，數字

　　bgcolor 背景色

　　rowspan 跨行，取值爲數字1,2,3

　　colspan 跨列，取值數字　

表單

1.表單的做用

　　提供了供用戶操做的可視控件

　　跟服務器交互

2.表單語法標籤

<form></form>

3.表單屬性

　　action 表單發送的服務地址

　　method 表單提交數據的方法，包括get和post

　　method：指定數據提交的方式

　　　　get 1.明文提交，待提交的數據會在地址欄中顯示出來

　　　　　 2.不安全

　　 3.有安全限制

　　post 1.隱式提交

　　 2.安全性較高

　　　　　　 3.沒有大小限制

4.表單經常使用標籤

輸入框
    <input type="" name=""> 
下拉框
    <select>
            <option></option>
    </select>
文本域
    <textarea></textarea>
按鈕
    <button></button>
表單分組
    <fieldset></fieldset>

5.input經常使用屬性

　　type屬性，name屬性，value屬性，placeholder屬性，tabindex屬性，checked屬性，disabled屬性（該屬性數據不會傳到表單中），hidden屬性

6.input的type屬性

　　text：文本輸入框

　　password：密碼輸入框

　　radio：單選按鈕

　　checkbox：複選按鈕

　　file：文件上傳按鈕

　　submit：表單提交按鈕

　　reset：重置按鈕

　　image：圖形提交按鈕
7.表單總結

name: 只要用了form表單，並且這個值你想發送給服務器，則必須添加name屬性，由於後端就是靠name來獲取你傳過來的值，另一個做用，能夠爲單選和複選分組

value: 指定input元素內的值，給js使用或給服務器用

disabled: 禁用控件，無值屬性，只要這個詞出如今input上，就禁用了，不能操做也不能提交

type：指定input表單元素的類型

輸入框

type="text" 文本輸入框

type="password" 密碼輸入框

type="number" 數字輸入框

屬性：

placeholder：佔位符，默認顯示在輸入框中的文字

maxlength: 規定了輸入框內最大能夠輸入的字符數量，取值數字

readonly: 只讀，不能改，可是能夠提交給服務器，無值屬性

按鈕

type="submit" 提交按鈕，特色：提交表單，缺點：自動刷新頁面

type="reset" 重置按鈕，特色：清空表單內input框內的值

type="button" 普通按鈕，無特色

屬性value，設置按鈕的文字

單選框和複選框

type="radio" 單選框

type="checkbox" 複選框

屬性：

name：給單選框或多選框分組，跟服務器進行交互

checked: 設置默認被選中的複選框或單選框，無值屬性

disabled

文件

type="file"

?username=admin

提供給用戶能夠輸入多行文字的控件
<textarea></textarea>

選項框
<select>  定義一個選項框
    <option></option>  每個選項
</select>


屬性

option:

value
selected: 無值屬性，設置哪一個option默認被選中
select:

size: 取值數字，設定用戶能夠直觀看到的條數，若是選項數量超過了size的值，會出現滾動條,size默認是1
name
multiple: 能夠設置多選，無值屬性，前提是size>1

塊級標籤和行級標籤

塊級元素

　　特色：1.獨佔一行

　　　　　2.能夠設置寬高，默認寬度爲父元素寬度，默認高度爲內容所佔高度

　　　　　3.兩個塊級元素默認縱向排列

行內元素

　　特色：1.默認水平排列能夠在一行顯示

　　　　　2.不能夠設置寬高，寬高有行內元素的內容決定

　　　　　3.能夠設置margin和padding的左右邊距，上下不能夠

行內塊元素

　　特色：既有行內元素特色，又有塊級元素的特色

1.經常使用的列表

1.無序列表標籤
<ul>
    <li></li>
</ul>    
2.有序列表標籤
<ol>
    <li></li>
</ol>
3.定義列表標籤
<dl>
    <dt></dt>
    <dd></dd>
</dl>

2.經常使用的塊級標籤

1.<div></div>
2.<br/>
3.<p></p>
4.<h1></h1>...<h6></h6>
5.<ul><li></li></ul>
6.<dl></dl>

3.常見的行級標籤

1.<a></a>// a標籤的經常使用屬性及做用：href屬性：連接的地址；target屬性：_self 在當前頁打開新頁面；

_blank 在新窗口打開新頁面

 2.<span></span> 3.<strong></strong> 4.<em></em> 5.<i></i> 6.<b></b>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。