html基礎總結

時間 2019-11-07

標籤 html 基礎總結欄目 HTML 简体版

原文原文鏈接

07.29自我總結

HTML(頁面架構)

一.什麼是HTML

HTML是一種超文本標記語言html

超文本:文本,圖片,音頻,視頻,超連接等
標記:符號,標籤 標記是沒有邏輯的

組成:python

指令
轉義字符
標籤

目的:完成頁面的搭建後端

HTML頁面大體的組成部分瀏覽器

<!doctype html>:必須出如今頁面的最上方，規定該文檔採用的html版本類型
<html>:頁面標籤：包含全部頁面內容，只有head與body兩個子標籤
<head> :頭標籤：樣式、腳本、後勤操做：頁面編碼、頁面標籤標題圖標,主放功能
<body>:體標籤：頁面顯示內容存放區域、樣式、腳本,主放內容

簡單的一個htm5搭建:服務器

<!DOCTYPE html>
<html lang="en"> <!--en會告訴瀏覽器內容爲英文,中文爲zh,若沒有lang則瀏覽器會根據內容本身解析>
<head>
    <meta charset="UTF-8"> <!--meta 爲body裏內容的編碼的方式-->
    <title>Title</title>  <!--網頁的標題-->
</head>
<body>
</body>
</html>

二.指令

註釋:,還有一種不經常使用的註釋寫法<!-註釋內容->架構
文檔類型:<!doctype>app

三.轉義字符

語法:&內容;框架

經常使用的轉義字符post

<: &lt;
>: &gt;
空格：&nbsp;
版權：&copy;

四.標籤

1.標題標籤

h1~h6:裏面內容相對於普通的內容會加粗,且會自動換行編碼

2.段落標籤

p:自帶換行，有段落間距

3.文本類型標籤

共同點都不帶換行

經常使用的文本類型標籤

b與strong:內容加粗
i與em:內容斜體
sup:上角標
sub:下角標
span:沒有什麼意義,可是會用來嵌套其餘文本表示共同使用

4.超連接標籤

a標籤

例如以下一句

<a href ='http://www.baidu,com' targe = '_slef'>頁面中顯示的文本內容</a>

href:裏面選擇超連接地址,注意若是沒加http://,https://,file://,前綴默認會在原來地址後面添加拼接成一個新的連接
targe:
- _self:在本來的窗口打開
- _blank:建立一個新窗口打開
- _top:覆蓋上一條記錄
- _parent:覆蓋全部的記錄
且超連接點擊後會在瀏覽器上生成記錄,顯示文本顏色會變紫色

5.圖片標籤

<img title="這是二哈" alt="二哈" src="url">

title:鼠標停留會顯示,也能夠用於其餘標籤當屬性
alt:src中的 url響應失敗顯示的內容
src:圖片的url

6.列表標籤

ul>li:無序標籤

ol>li:有序標籤

特殊的快捷鍵:ul>li{第$列}*5,其中$表示顯示序列的位數
 顯示結果:
<ul>
    <li>第1列</li>
    <li>第2列</li>
    <li>第3列</li>
    <li>第4列</li>
    <li>第5列</li>
</ul>
ul>li{第$$列}*5 顯示結果
<ul>
    <li>第01列</li>
    <li>第02列</li>
    <li>第03列</li>
    <li>第04列</li>
    <li>第05列</li>
</ul>

7.表格標籤

table>tr>th|td

tr:行
th:標題單元格
td:普通單元格

屬性

border:邊框像素
cellspacing:單元格的間距,最小爲0
cellpadding:單元格的內邊距
rules:all處理成一條直線,可是不能與cellspacing一塊兒用會衝突
colspan:th與td的屬性表示佔幾列默認爲1
rowspan:th與td的屬性表示佔幾行默認爲1

案例

<table border="1" rules="all">
        <tr>
            <th>標題1</th>
            <th>標題2</th>
            <th>標題3</th>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td colspan=2">2</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>

五.表單

from>input|label|button|textarea|select

1.form表單屬性

屬性	值	含義
action	url	指定一個表單處理目標URL，表單數據將被提交到該URL地址的處理程序。若是該屬性值爲空，則提交到文檔自身。該屬性值能夠爲絕對地址、相對地址、文檔片斷，甚至是腳本代碼
method	get或post	將表單數據提交到http服務器的方法，可能值有兩個：get和post
enctype	application/x-www-form-urlencoded	指定表單數據的編碼類型，此屬性只有在method屬性設置爲post時纔有效。默認值爲application/x-www-form-urlencoded對全部字符進行編碼。若是表單包含用於文件上傳的控件（input type=「file」），那麼這個屬性值必須設爲multipart/form-data ，不對字符進行編碼。

2.input標籤

input屬性大概介紹:

type:按鈕的屬性
id:標識
name:與後端交互的key
values:給後端的值,若是沒有name則無法給到後端

案例介紹

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單標籤</title>
</head>
<body>
    <!--一、form的做用：完成先後臺數據的交互的 - 將用戶錄入的信息提交給後臺 | 文件上傳 -->
    <form action="">
        <p>
            <!--label做爲input的文本解釋標籤，for綁定id-->
            <!--value屬性是表單標籤的內容，就是提交給後臺的-->
            <!--name是提交給後臺的key，value是值-->
            <!--placeholder是文本佔位符-->
            <!--type是決定標籤的類型本質(input|button)-->
            <!--multiple,checked布爾類型屬性，不須要寫值，multiple多選 checked默認激活-->
            <label for="username">帳號：</label>
            <input id="username" type="text" value="Owen" name="usr">
        </p>
        <p>
            <label for="password">密碼：</label>
            <input id="password" type="password" placeholder="請輸入密碼" name="pwd">
        </p>
        <p>
            <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
        </p>
        <p>
            男<input type="radio" value="male" name="sex" checked>
            女<input type="radio" value="female" name="sex">
        </p>
        <p>
            男<input type="checkbox" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
        </p>
        <p>
            <button type="button">普通按鈕</button>
            <button type="reset">重置按鈕</button>
            <button type="submit">提交按鈕</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="button" value="按鈕" />
            <input type="reset" value="重置" />
            <input type="submit" value="登陸" />
        </p>
    </form>
</body>
</html>

3.input標籤type屬性

type屬性	空間名稱	對應代碼
text	單行文本輸入框	`<input type="text"/>`
password	密碼輸入框	`<input type="password"/>`
checkbox	複選框	`<input type="checkbox" checked='checked'/>`
radio	單選框	`<input type="radio"/>`
submit	提交按鈕	`<input type="submit" value='提交'/>`
reset	重置按鈕	`<input type="reset" value='重置'/>`
button	普通按鈕	`<input type="button" value=「普通按鈕」/>`
hidden	隱藏按鈕	`<input type="hidden" value=「隱藏按鈕」/>`
file	文本選擇框	`<input type="file"/>`

4.select標籤(下拉列表)

<form id="form1" name="form1" method="post" action="">
    <select name="city" id="city">
        <option value="北京">北京</option>
        <option value="天津" selected="selected">天津</option>
        <option value="河北">河北</option>
        <option value="山東">山東</option>
        <option value="內蒙">內蒙</option>
    </select>
</form>

5.select屬性

multiple : 布爾屬性，設置後容許多選，不然只能選擇一個
disabled : 禁用該下拉列表
selected : 首次顯示時,爲選中狀態
value : 定義發往服務器的選項值

6.textarea標籤

<form id="form1" name="form1" method="post" action="">
    <textarea cols=「寬度」 rows=「高度」 name=「名稱」>
    默認內容
    </textarea>
</form>

7.textarea屬性

屬性	屬性值	說明
name	name	控件名稱
rows	number	設置多行文本框的顯示行數（高度）
cols	number	設置多行文本框的顯示列數（寬度）
disabled	disabled	布爾屬性，設置當前文本框爲禁用狀態

8.label標籤

<form id="form1" name="form1" method="post" action="">
    <label for="username">用戶名</label>
    <input type="text" name="username" id="username" />
</form>

9.label屬性

label元素不會向用戶呈現任何特殊效果
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同
結合CSS能夠控制表單文本或控件對齊，美化表單

10.button標籤

只是個簡單的按鈕

六.單標籤

br:換行
hr:分割線
表單使用的標籤
img:圖片標籤

七.div標籤

div標籤自帶換行,主要是用來網頁大致的分區框架的劃分

八.注意

html中不區分大小寫
若是你寫的顯示內容沒有寫在body內,瀏覽器解析後仍是會默認把內容丟到body內

相關標籤/搜索

每日一句

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