html所有總結

時間 2020-12-02

標籤 javascript css html java css3 瀏覽器服務器 app 編輯器 ide 欄目 HTML 简体版

原文原文鏈接

html總結 
基本結構javascript

1.簡單的基本結構css

<html>
<head>
    <title>標題</title>
</head>
<body>
    網頁主體內容
</body>
</html>
head不打印在網頁上面，只有body裏面的文字內容打印在網頁上面

<hr/>是分割線
添加背景元素的話須要添加在body開始標籤的後面
好比<body bgcolor=「red」>
語法：<標籤名屬性名1=「屬性值」屬性名2=「屬性值>……</標籤名>
 html

文檔類型聲明
<!DOCTYPE html>聲明必須放在html文檔的第一行
 java

網頁編碼設置
在<head></head>標籤之間添加
<meta http-equiv=「Content-Type」 content=「text/html;charset=utf-8」>
utf-8能夠換成你想要的編碼
 css3

文字和段落標籤
文字斜體：<i></i>,<em></em>
文字加粗：<strong></strong>,<b></b>
下標：<sub></sub>
上標:<sup></sup>
⚠：<i></i>只是斜體而已，<em></em>更多表示強調！！！！！！
⚠：<b></b>只是斜體，<strong></strong>表示強調瀏覽器

特殊符號：那好比說你想在網頁上打印出來<p></p>的這種屬於標籤的內容
你是沒法打印出來的由於這時候它們會自動被讀取
因此你須要用特殊的符號來代替裏面的一些符號
好比：
&lt < 小於或顯示標記
&gt > 大於或顯示標記
&reg 已註冊
&copy 版權
&trade 商標
&nbsp 空格服務器

標題標籤：<h1></h1>~<h6></h6>
段落標籤：<p></p>:表明同一個段落文字app

align對齊屬性：
left 左對齊內容
right 右對齊內容
center 居中對齊
justify 對行進行伸展編輯器

屬性的例子：
<p align=「left」></p>
表示這個段落左對齊了ide

換行標籤<br/>

<pre></pre>:不須要輸入空格代碼和<br/> 保留編輯器裏的文本格式
因此多用於書寫代碼
 

列表標籤
列表分爲有序列表，無序列表，和定義列表

1.有序列表是<ul></ul>中間以<li></li>來區分每一項
type屬性值

1 數字1，2.....
a 小寫字母
A 大寫字母
i 小寫羅馬數字
I 大寫羅馬數字

2.無序列表是<ol></ol>中間也是以<li></li>來區分每一項
無序列表的type屬性

disc 圓點
square 正方形
circle 圓形

3.定義列表<dl></dl>中間以<dt></dt>來定義列表項，<dd></dd>來列表項描述

<dd></<dd>和<dt></dt>他們是平級，因此不能夠互相包含
<dt>能夠有多個<dd>

圖像標籤：
語法：
<img src=「」 alt=「」…../>
img屬性

src url 顯示圖像url（分爲相對路徑和絕對路徑）
alt 文字圖像代替文本
height 數值和百分比圖像的高
width 數值和百分比圖像的寬
alt：當用戶沒法查看圖像，alt屬性能夠代替圖像顯示在瀏覽器中的內容

錨連接

同一個頁面：
由一個連接跳轉到另一個
語法：
<a href= 「」>內容</a>

屬性：

href 連接地址,能夠連接網站內部或者外部連接
target 連接的目標窗口
title 連接提示文字
name 連接命名

定義錨：

<a href=「#錨名1>目錄1</a>
<a href=「#錨名2>目錄2</a>從這兩個開始跳轉
<a href=「….」 name =「錨名1」>內容</a>
xxxxx
xxxxxxxx
<a href=「….」 name =「錨名2」>內容</a>
xxxxx
xxxxxxxx

錨名的位置定義了錨開始的位置

總結：
1.定義錨的位置和錨名
2.設置尋找錨的連接

不一樣網頁：
定義錨：

網頁1:<a herf=「網頁名稱＃錨名>……</a>從網頁1跳轉到網頁2
網頁2:<a herf =「….」 name=「錨名「>……</a>被跳轉的那個頁面

電子郵件連接：
<a herf=「mailto;郵件地址「>……</a>

在本網站的內部跳轉：站內連接

站內和站外連接：
e.g.

站內連接：
假設從網頁1跳轉到網頁2

網頁1:
<a herf =「html12.html」><img src =「img/html/jpg」 alt =「html基礎課程「 width=「50px」 height=「80px」/></a>
網頁2:
地址在html12.html

外部網站連接：
（好比友情連接）（通常使用絕對路徑）
<a herf=「http://………..>……</a>

空連接：
<a href =「#」>……</a>
不會發生任何跳轉
可是會保留連接的特色

target屬性：
默認狀況下打開一個新的頁面是在當前頁面打開咱們想要的
target擁有的屬性：_self,_blank,_top,_parent
_self(當前窗口打開）
_blank(新頁面打開）
 

html表格
好比購物單就是用表格建立的

表格主要的標籤：
`<table>表格
<tr>行
<td>單元格`

基本語法與結構
<table>
    <tr>
        <td>…….</td>

        …………………

    </tr>
    <tr>
        <td>………</td>
        
        ………………….

        …………………..

    </tr>
</table>

e.g.建立兩行三列標籤

<table border=「1」>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td><／

td>
    </tr>
</table>

表格的操做：

帶表頭的表格：<th></th>:表格頭，內容居中，加粗顯示
<caption>……</caption>：表格標題，居中顯示，放在table下面，每個table只有一個caption

表格結構標籤：
表格劃分三部分：表頭，主體，腳註
－thead：表格的頭（放表格的表頭）
－tbody：表格的主體（放數據本體）
－tfoot：表格的腳（放表格的腳註）

e.g.
<table>
    <caption>….</caption>
    <thead>
        <tr>
            <th>表頭</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主體</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>腳註</td>
        </tr>
    </tfoot>
</table>

這三個標籤不會影響佈局，主要功能是加載
無論body仍是head仍是foot改變書寫順序，thead老是在表格最上方

<table>表格屬性：
Width             pixels,%             規定表格的寬
align            Left,center,right    表格對齊方式
border            pixels               表格邊框寬度
Bgcolor        rgb(x,x,x),Colorname    表格背景顏色
Cellpadding        Pixels,%            單元邊沿與其內容之間的空白
cellspacing        Pixels,%            單元格之間的空白
frame            屬性值                規定外側邊框的哪個部分是可見的
rules            屬性值                規定內側邊框哪個部分是可見的

Frame：
void        不顯示外側邊框
above        顯示上部的外側邊框
below        顯示下部的外側邊框
hsides        顯示上部和下部的外側邊框
vsides        顯示左邊和右邊的外側邊框
lhs        顯示左邊的外部邊框
rhs        顯示右邊的外部邊框
box        在全部四個邊上顯示外側邊框
border        在全部四個邊上顯示外側邊框

rules:
none        沒有線條
groups        位於行組和列組之間的線條
rows        位於行之間的線條
cols        位於列之間的線條
all        位於行和列之間的線條

<tr>標籤屬性：
align Left,center,right,justify,char 行內容的水平對齊
Valign top,middle,bottom,baseline 行內容的垂直對齊
Bgcolor rgb(x,x,x),#xxx,colorname 行的背景顏色

<td> 和 <th>標籤屬性
align
valign
bgcolor
width
height

跨列屬性colspan：
e.g.
td colspan =「2」
就是說把兩列合併成一列，多餘的那個刪掉

跨行屬性rowspan：
把行合併在一塊兒，多餘的那個刪掉

表格嵌套：

<table>
    <tr>
        <td>……</td>
        <td>
            <table>
                <tr>
                    <td>…….</td>
                    <td>………</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

必須是完整的表格，而且只能放在td當中

 
表單

建立表單：

<form>
    表單元素
</form>

⚠：表單自己不可見
咱們網頁裏看到的是表單元素

表單元素添加：

<input>                    表單輸入標籤
<select>                菜單和列表標籤
<option>                菜單和列表項目標籤
<textarea>                文字域標籤
<optgroup>                菜單和列表項目分組標籤

<input type=「類型屬性」    name=「名稱」……../>
<input>標籤：
type屬性值：
text                文字域
password            密碼域
file                文件域
checkbox            複選域
radio               單選域
Button              按鈕
Submit              提交按鈕
Reset               重置按鈕
Hidden              隱藏域
image               圖像域
單行文本域：
Name                文本域的名稱
Maxlength           指用戶輸入的最長字符長度
Size                指定文本框的寬度
Value               指定文本框的默認值
Placeholder         規定用戶填寫輸入字段的提示
哪一個裏面放input哪一個是默認選項
name               確認哪一組數據是同一組

圖像域：

<input type=「image」 name=「…..」 src=「imageurl」/>
隱藏域：
<input type=「hidden」 name=「….」 value=「……」/>
用戶看不到
value：裏是傳給服務器的值

下拉菜單和列表標籤：
例如：城市的選擇
<select> and <option>
語法：

<select>
    <option value=「….」>選項</option>
    <option value=「….」>選項</option>
    ……
</select>

<select>標籤屬性：

name                設置下拉菜單和列表的名稱
multiple            設置可選擇多個項目
size                設置列表中可見選項的數目（至關於一次能夠看到幾個）
<option>標籤屬性
selected            設置選項初始選中狀態（看到的第一個就是他）
value                定義送往服務器的選項值

分組下拉菜單和列表標籤：

<select name=「」>
    <optgroup label=「組1「>
    <option value=「….」>選項</option>
    <option value=「….」>選項</option>
    …..
    </optgroup>
    <optgroup label =「組2」>
    <option value=「…..」>選項</option>
    <option value =「…..」>選項</option>
    …..
    </optgoup>
    …..
</select>

多行文本域<textarea>:
<textarea name=「….」 rows=「….」 col=「,,」 …..>
</textarea>(就是比較大，還有滾動條）
在textarea中輸入的內容，就會自動顯示在文本域內

<textarea>的屬性：
name                設置文本區的名稱
placeholder            描述文本區域內預期值的簡短提示
rows                設置文本區內的可見行數
cols                設置文本區內可見寬度`

表單屬性：

語法：

<form action=「」 method=「」 name=「」…..>
    表單元素
</form>

<form>標籤：

action ，URL 提交表格時向何處發送表單數據
method get,post 設置表單以何種方式發送到指定頁面
name form_name 表單的名稱
target _blank,_self,_parent,_top 在何處打開action URL
enctype application/plain….. 在發送表單數據以前如何對其進行編碼

post和get的區別：
GET：使用url傳遞參數
對全部信息的數量也有限
通常用於信息的獲取

POST：表單數據做爲對於http請求體的一部分
對所發送信息的數量無限制
通常用於修改服務器上的資源
 

<div>和<span>

<div>是一個容器標記，能夠包含段落，表格，圖片等各類html元素
<span>沒有任何意義，爲了應用樣式

html標籤
塊級標籤：相似div，佔據一行，換行
行內標籤：相似span，在一行不換行

標籤嵌套：

塊級元素（佔據一行，換行）：
`<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>
<h1>~<h6>,<p>,<form>,<hr>…..`
行內標籤（在一行，不換行）：
`<b>,<em>,<img>,<input>,<a>,<sup>,<sub>,<textarea>,<span>`

塊級元素能夠包含行內元素和某些塊級元素
div基本上能夠包含所有塊級元素
行內元素不能包含塊級元素，只能包含行內
特殊塊級元素只能包含行內元素，不能包含塊級元素：
如：h1~h6,p,dt

塊級元素和塊級元素並列是對的
行內元素和行內元素並列是對的

e.g.
<!DOCTYPE html>
<html lang=「en」>
<head>
    <meta charset=「UTF-8」>
    <title>html案例</title>
</head>
<body>
    <div>
        <div><img src=「img/logo.jpg」/></div>
        <div>
            <ul>
                <li><a herf=「http://www.immoc.com」>HTML5</li>
                <li><a herf=「http://www.immoc.com」>JAVASCRIPT</li>
                <li><a herf=「http://www.immoc.com」>CSS</li>
                <li><a herf=「http://www.immoc.com」>PHP</li>
                <li><a herf=「http://www.immoc.com」>IOS</li>
                <li><a herf=「http://www.immoc.com」>ANDROID</li>
                <li><a herf=「http://www.immoc.com」>PHOTOSHOP</li>
                
        </div>
        <div><imp src=「img/banner.jpg」/></div>
    </div>
        <div><h1>如何成爲優秀的工程師<h1></div>
        <div><h6>2天前&nbsp;&nbsp308瀏覽nbsp;&nbsp308;1.評論<h6></div>
        <p>



            複製內容

        </p>
        <ol>
            <li></li>
            <li></li>
        </ol>
        <h6>做者<h6>
        
    <div>
        <dl>
            <dt>HTML標記語言<dt>
            <dd><img src=「img」/></dd>
            <dd></dd>

        
        </dl>
    
        <dl>
            <dt>CSS層疊樣式表</dt>
            <dd><img src=「img/css3.jpg」/></dd>
            <dd></dd>

        </dl>
        <dl>
            <dt>什麼是javascript<dt>
            <dd><img src=「img/js.jpg」/></dd>]
            <dd></dd>
        
        </dl>
    </div>
    <div><p>只學有用的</p></div>
</body>
</html>