HTML5學習總結

時間 2020-11-30

標籤 html 正則表達式瀏覽器安全框架 ide 佈局 post 網站欄目 HTML5 简体版

原文原文鏈接

1，什麼是HTML?

HTML html

Hyper Text Markup Language（超文本標記語言）正則表達式
HTML5優點瀏覽器
- 知名瀏覽器對HTML5的支持安全
- 市場的需求框架
- 能夠誇平臺ide
W3C佈局
- World Wide Web Consortium（萬維網聯盟）post
- W3C標準網站
  - 結構化標準語言（HTML、XML）ui
  - 表現標準語言（CSS）
  - 行爲標準（DOM、ECMAScript）
常見IDE
- 記事本
- Dreamweaver
- IDEA
- WebStorm
- ......

HTML基本結構

<html>
    <head>
        <title>個人第一個網頁</title>
    </head>
    <body>
        個人第一個網頁
    </body>
</html>

<body>、</body>等成對的標籤，分別叫開放標籤和閉合標籤，單獨呈現的標籤，如< hr/>；用/來關閉空元素。

2，網頁基本標籤

註釋
```

```
DOCTYPE聲明

告訴瀏覽器要使用什麼規範
<title>標籤

表示網頁標題
<meta>標籤

描述性標籤，用來描述網站的一些信息。通常用來作SEO
標題標籤

<h1>一級標籤</h1>

<h2>二級標籤</h2>

<h3>三級標籤</h3>

<h4>四級標籤</h4>

<h5>五級標籤</h5>
段落標籤

<p>段落標籤</p>
換行標籤

<br>
水平線標籤

<hr/>
特殊符號

空格：&nbsp

大於：&gt

小於：&lt

版權符號：&copy

特殊符號能夠用&+來搜索

3，圖像，超連接，網頁佈局

圖像標籤(<img>)
```
<img src="../img/1.png" alt="頭像" title="點擊下載" width="30" heigth="30">
```
src：圖片的地址

相對地址，絕對地址

alt：圖片名字

title：懸停文字

超連接

文本連接
```
<a herf="https://www.baidu.com" target="_blank">點擊跳轉百度</a>
<a herf="https://www.baidu.com" target="_self">點擊跳轉百度</a>
```
herf：必填，表示要跳轉到的那個頁面地址

target：表示窗口打開位置

_blank：在新標籤中打開

_self：在當前窗口中打開（默認）

圖像連接

<a herf="https://www.baidu.com">
    <img src="../img/1.png" alt="頭像" title="點擊下載" width="30" heigth="30">
</a>

錨連接

須要一個錨標記
經過#跳轉到標記

<html>
    <head>
        <title>個人第一個網頁</title>
    </head>
    <body>
        <!-- 使用name作爲標記 -->
        <a name="top">頂部</a>
        個人第一個網頁
        <a herf="https://www.baidu.com">
    <img src="../img/1.png" alt="頭像" title="點擊下載" width="30" heigth="30">
</a>
        <a href="#top">回到頂部</a>
    </body>
</html>

功能性連接

郵件連接：mailto:

<a href="mailto:233166@qq.com">點擊聯繫我</a>

4，列表，表格，媒體元素

列表

什麼是列表？

列表就是信息資源的一種展現形式。它能夠使信息結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地得到相應的信息。

無序列表

<ul>
    <li>Java</li>
    <li>C/C++</li>
    <li>Python</li>
</ul>

有序列表

<ol>
    <li>Java</li>
    <li>C/C++</li>
    <li>Python</li>
</ol>

自定義列表

<dl>
    <dt>學科</dt>
    
    <dd>Java</dd>
    <dd>C/C++</dd>
    <hr/>
    <dt>城市</dt>
    
    <dd>武漢</dd>
    <dd>重慶</dd>
</dl>

dl：標籤

dt：表頭

dd：列表內容

表格

<table border="1px">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

border：邊框

colspan：跨列

rowspan：跨行

視頻和音頻

<video src="../video/1.mp4" controls autoplay></video>
<audio src="../audio/2.mp3" controls autoplay></audio>

controls：控制條

autoplay：自動播放

5，頁面結構

6，iframe內聯框架

<iframe src="path" name="mainFrame" ></iframe>

src：地址

width,height：寬高

7，表單及表單應用

初識表單

<form method="post" action="result.html">
    <p>名字：<input name="name" type="text"></p>
    <p>密碼：<input name="pass" type="password"></p>
    <p>
        <input type="submit" name="button" value="提交">
        <input type="reset" name="Reset" value="重填">
    </p>
</form>

action：表彰提交的位置，能夠是網站，也能夠是一個請求處理地址

method：post，get 提交方式

get方式提交：能夠在url中看到提交的信息，不安全，但高效

post：比較安全，也能夠傳輸大文件

表單元素

文本框:

input type="text"

value：單選框的值

單選框：

input type="radio"

value：單選框的值

name：表示組

多選框:

<input type="checkbox" value="sleep" name="hobby">睡覺
<input type="checkbox" value="chat" name="bobby">聊天

checkbox：多選框

按鈕：

<input type="button" name="btn1" value="點擊">
<input type="image" src="../image/1.jpg">
<input type="submit" value="提交">
<input type="reset" value="重置">

button：普通按鈕

image：圖像按鈕

submit：提交按鈕

reset：重置

下拉框：

<p>
    <select name="列表名稱">
        <option value="china" selected>中國</option>
        <option value="us">美國</option>
        <option value="eth">瑞士</iption>
        <option value="yingdu">印度</option>
    </select>
</p>

文本域：

<p>
    <textarea name="textarea" cols="50" rows="10">文本內容</textarea>   
</p>

文件域：

<p>
    <input type="file" name="files">
</p>

表單元素格式

8，表單初級驗證

經常使用方式：

placeholder(提示)

required(非空判斷)

pattern(正則表達式判斷)

9，總結

相關標籤/搜索

每日一句

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