HTML基礎總結

時間 2019-11-11

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

原文原文鏈接

HTML的概念：javascript

超文本標記語言(Hyper Text Markup Language)，標準通用標記語言下的一個應用。HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁製做所必備的html

HTML的主體結構：html5

1 <!DOCTYPE html>    //html5文檔聲明，告訴瀏覽器當前的網頁語法爲html5
2 <html>
3     <head>
4         <meta charset="utf-8">    //給網頁設置字符集編碼
5         <title></title>
6     </head>
7     <body>      //展現給用戶看的內容都寫在body標籤當中
8     </body>
9 </html>

HTML的標籤：java

文本標籤：編程

h1-h6標籤可定義標題瀏覽器

1 <h1>這是標題 1</h1>
2 <h2>這是標題 2</h2>
3 <h3>這是標題 3</h3>
4 <h4>這是標題 4</h4>
5 <h5>這是標題 5</h5>
6 <h6>這是標題 6</h6>

p標籤訂義段落編程語言

<p>This is some text in a very short paragraph</p>

strong標籤加粗ide

em標籤來表示強調的文本，斜體post

strong標籤表示重要文本編碼

u標籤下劃線

s標籤刪除線

br標籤表示回車換行

hr標籤表示水平線

span標籤被用來組合文檔中的行內元素。

blockquote標籤表示塊引用

pre標籤可定義預格式化的文本，保持原有格式的一種標籤。

a標籤訂義超連接，指定頁面間的跳轉。連接能夠指向外部連接或者頁面內部id錨點，能夠在當前頁面打開，新開窗口。

有序列表：ol (order list) 有序列表中的每一項用li表示type屬性表示序號的類型：1表示數字， A/a表示字母，i/I表示羅馬數字

1 <ol type="">
2 <li>www</li>
3 <li>www</li>
4 <li>www</li>
5 </ol>

無序列表：ul unorder list有序列表中的每一項用li表示type屬性表示序號的類型：circle表示。disc表示.square表示正方形

1  <ul>
2        <li>1-1</li>
3        <li>1-2</li>
4       <li>1-3</li>
5 </ul>

div標籤:在網頁製做過程過中，能夠把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的做用就至關於一個容器，網頁切割。

span:進行網頁切割，包含普通的文本內容

<dl> 標籤用於結合<dt> （定義列表中的項目）和 <dd> （描述列表中的項目）

1 <dl>
2    <dt>計算機</dt>
3    <dd>用來計算的儀器 ... ...</dd>
4    <dt>顯示器</dt>
5    <dd>以視覺方式顯示信息的裝置 ... ...</dd>
6 </dl>

table標籤:建立表格的四個元素：table、tbody、tr、th、td。

　　<tbody>…</tbody>：若是不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，沒必要等待表格結束後在顯示，同時若是表格很長，用tbody分段，能夠一部分一部分地顯示。

　　<th>…</th>：表格的頭部的一個單元格，表格表頭。也就是th標籤中的文本默認爲粗體而且居中顯示。

　　<tr>…</tr>：表格的一行，因此有幾對tr 表格就有幾行。

單元格與單元格之間的間距：cellspacing

單元格與內容之間的空隙：cellpadding

img:圖片標籤

src屬性、width屬性和height屬性(表示圖片的寬度和高度)、alt屬性(當圖片加載失敗的時候，顯示的提示內容)

1 <img src="/i/eg_tulip.jpg"  alt="沒法顯示圖片" />

實體字符：

空格： 

版權：©

<：<
>：>

from表單：用於收集用戶信息，如：登陸、註冊等場景；全部要提交的數據都必須放在form標籤中<form action=" " method=" ">

method:提交方法，有get和post兩種提交方法。

input標籤：輸入框，是表單中最重要的部分

　　name：指定名字，

　　value：文本框的內容，通常用在不能輸入的類型中，如改變按鈕的名字等。

　　placeholder：一般用於提示：

type屬性：

　　text：普通文本，標籤的默認屬性時text ，一般如輸入用戶名用的是text

　　passworld：密文文本，輸入的內容不顯示。如密碼輸入框

　　submit：提交按鈕。上文提到過，要與action一塊兒用。

　　radio：單選框，多個關聯選項name屬性要一致，須要設置value，默認選中用checked設置

CheckBox：複選框，屬性與單選框相似

textarea：文本域。能夠輸入多行文本

　　　　屬性：cols：列數(寬度)，rows：行數(高度)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <form action="" method="" >
 9     UserName:
10         <input type="text" name="username" placeholder="請輸入用戶名" enabled> 
11         <br>
12     PassWord:
13         <input type="password"  name="password" placeholder="請輸入密碼">
14         <br>
15     Sex:
16         <input type="radio" name="sex" value="m" checked>男
17         <input type="radio" name="sex" value="w">女
18         <br>
19     Like:
20         <input type="checkbox" name="like" value="dance">跳舞
21         <input type="checkbox" name="like" value="sing" checked>唱歌
22         <br>
23         <!--多行文本輸入域-->
24         <textarea name="main" id="" cols="100" rows="100" ">你好，我是.....</textarea>
25 
26         <br>
27     <input type="submit" value="登陸">
28     <input type="button" value="按鈕">
29     <input type="reset" value="重置">
30     </form>
31 </body>
32 </html>

表單和表格的綜合使用：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6  </head>
 7  <body>
 8   <table border="1" rules="all"> 
 9   <form>
10     <tr>
11         <td>用戶名:</td>
12         <td><input type="text" name="username" placeholder="username ...."></td>
13     </tr>
14     <tr>
15         <td>密碼:</td>
16         <td><input type="password" name="password" placeholder="password....."></td>
17     </tr>
18     <tr>
19         <td colspan="2">
20             <input type="submit" value="登陸">
21         </td>
22     </tr>
23   </form>
24   </table>
25  </body>
26 </html>

HTML5新增標籤：

語義化結構標籤：

section元素表示頁面中的一個內容區塊

article元素表示一塊與上下文無關的獨立的內容

aside元素是輔助 article 區域的內容。也能夠理解爲整個網頁的輔助區域

header元素表示頁面中一個內容區塊或整個頁面的標題

footer元素表示頁面中一個內容區塊或整個頁面的腳註

nav元素表示頁面中導航連接部分

figure元素表示一段獨立的流內容，使用figcaption元素爲其添加標題(第一個或最後一個子元素的位置)

main元素表示頁面中的主要的內容(ie不兼容)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>語義化結構標籤</title>
 6     </head>
 7     <body>
 8         <header>
 9             <h1>網頁標題</h1>
10         </header>
11         <nav>
12             <ul>
13                 <li><a href="javascript:;">首頁</a></li>
14                 <li><a href="javascript:;">文檔</a></li>
15                 <li><a href="javascript:;">編輯</a></li>
16             </ul>
17         </nav>
18         <main>
19             <aside>
20                 <section class="widget">
21                     <h4>最近文章</h4>
22                     <ul>
23                         <li><a href="javascript:;">JavaScript從入門到放棄</a></li>
24                     </ul>
25                 </section>
26             </aside>    
27         </main>
28     <footer>
29         <ul class="links">
30             <li><a href="javascript:;">關於咱們</a></li>
31             <li><a href="javascript:;">服務條款</a></li>
32             
33         </ul>
34     </footer>
35     </body>
36 </html>

新增多媒體標籤：

<audio>：音頻

1 <audio controls="controls">
2   <source src="song.mp3" type="audio/mp3" />
3 </audio>

<video>：視頻

1 <video controls="controls">
2   <source src="movie.mp4" type="video/mp4" />
3 </video>

相關標籤/搜索

每日一句

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