HTML學習總結&基礎篇

時間 2019-12-12

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

原文原文鏈接

何爲堅持？一個「勤」，一個「忍」。html

年前給本身定的目標，今年必定要堅持多逛園子，多看一些大佬的帖子，而後本身也儘可能可以分享本身學習的收穫，讓本身進步快些，可是多逛園子是作到了，寫博客這個東西，今年好像還沒分享了一篇，想一想真是慚愧。仔細想一想，主要緣由是本身懶，文筆差，感受本身技術掌握的東西太少了，對學習到的東西理解不深刻，不知道該寫些啥......，因此就沒有去作，不過在接下來，本身也反覆思考，以爲仍是但願本身可以勤快點，經過博客記錄本身學習的東西，多和你們討論學習。前端

今天主要分享的是本身這兩天學習HTML的一些知識點，因爲本身在學校沒有好好學，致使前端的知識點學的是一團糟，因此想趁着最近項目不是很趕，找點時間來補補從新去學習一下。編程

1.0何爲HTML?

HTML（超文本標記語言）是一種用於建立網頁的標準標記語言，HTML不須要編譯，能夠直接由瀏覽器執行，它的解析依賴於瀏覽器的內核。它不是一種編程語言，而是一種標記語言。瀏覽器

2.0HTML骨架

<!DOCTYPE>       //文檔聲明頭

<html>                //html標籤

<head>               //head標籤的開始

<meta charset="utf-8"> //meta標籤，設置編碼，編碼種類有不少，可是常見的是utf-8和gb2312

<title>HelloWord</title> //title標籤

</head>              //head標籤結束

<body>              //body標籤開始，主要是包含了可見頁面內容

</body>             //body標籤結束

</html>             //html標籤結束

3.0兩類標籤

一、容器級標籤，表明：h系類標籤,h標籤有六種h1,h2,h3,h4,h5,h6服務器

二、文本級標籤，表明p標籤框架

4.0圖片標籤

HTML的圖像是經過標籤<img>來定義的。編程語言

語法: <img src=」01.jpg」 />佈局

src 圖片地址 alt圖片沒法顯示時顯示文字 title 懸停文字, 當鼠標停在圖片上禁止不動時, 出現的補充說明post

5.0圖片的相對路徑

1、圖片和html文件在同一個文件夾中, 則src="01.jpg" 或者src=」./01.jpg」學習

2、圖片在上一層文件夾中, 則 src=」../01.jpg」

3、圖片在下一層文件夾中, 則 src="./images/01. jpg"

4、圖片在上一層的上一層文件夾中, 則 src=」../../01.jpg」

注意：超連接的相對路徑和圖片的相對路徑基本同樣

6.0給圖片添加超連接的語義

意思就是咱們點擊一張圖片能夠跳轉到一個網頁

<a href=」http://www.taobao.com」><img src=」./images/02.jpg」 /></a>

7.0頁面內的錨點

回到頂部：<a href=」#」 >回到頂部</a>

8.0無序列表

無序列表是一個組合標籤（缺一不可）

<ul>
<li>語文</li>
<li>數學</li>
<li>英語</li>
</ul>

9.0有序列表

有序列表是一個組合標籤（缺一不可）

<ol>
<li>冠軍</li>
<li>亞軍</li>
<li>季軍</li>
</ol>

10.0自定義列表

<dl>

</dl>

11.0 div和span

HTML能夠經過<div>和<span>將元素組合到一塊兒。

div是一個塊級元素，能夠包含段落，表格等內容，用於放置不一樣的內容。通常咱們在網頁經過div來佈局定位網頁中的每一個區塊。
span是一個內聯元素，沒有實際意義，它的存在純粹是爲了應用樣式，給一段內容加上<span></span>標記能夠經過在span上定義樣式來設定其內容的樣式。

12.0表單元素

表單主要獲取用戶填寫的數據，而後經過瀏覽器向服務器傳送。

表單使用的標籤（<form></form>）

12.1文本框

<form>
<input type="text" name=」username」>
</form>

Input 就是輸入的意思 type是類型 text就是文本 name是元素的名稱 value是input元素的值

12.2密碼框

<form>
<input type=」password」 name=」pwd」>
</form>

Input 就是輸入的意思 type是類型 password就是密碼,密碼字段不會以明文形式顯示，而是以星號或者原點代替

12.3單選框

<form>
<input type="radio" name="sex"  value=」male」>男
<input type="radio" name="sex"  value=」female」>女
</form>

要實現單選功能, 必須使用name屬性, 讓該屬性具備相同的值, 那麼就成組, 就能夠實現單選功能。

12.4複選框

<form>
<input type="checkbox" name="hobby」 value="basketball">打籃球
<input type="checkbox" name="hobby」 value="football">踢足球
</form>

12.5 label標籤

<form>
<input type="checkbox" name="sex" id=」male」 value="1"><label for=」male」>男</label>
</form>

12.6下拉列表

<form>
<select>
<option>C#</option>
<option>Java </option>
<option>PHP</option>
</select>
</form>

12.7多行文本域

<form>
<textarea cols=」20」 rows=」10」 name=」content」></textarea>
</form>

name 是元素的名稱 rows是指定文本框的高度 cols 是指定文本框的寬度

12.8隱藏域

<form>
<input type="hidden」 name="id」 value="1」/>
</form>

12.9上傳文件

<form>
<input type="file」 name="image"/>
</form>

利用這項功能時，在 form 標籤中要指定method屬性。要把method 指定爲post, enctype屬性指定爲 multipart/form-data。

multiple 控制是否上傳多文件

12.10三種按鈕標籤

普通標籤

<form>
<input type="button" value="登陸" />
</form>

提交按鈕

<form>
<input type="submit" value="提交"/>
</form>

重置按鈕

<form>
<input type="reset" value="重置"/>
</form>

13.0 <iframe>內嵌框架

語法：<iframe src="url" name="框架名"></iframe>

<iframe src="http://www.taobao.com" name="taobao" height="800" width="1080"></iframe>

主要屬性:

width 指定框架的寬度屬性值：px ,%

heigh 指定框架的寬度屬性值：px ,%

scrolling 是否顯示滾動條屬性值：yes,no,auto

frameborder 是否顯示邊框屬性值：1, 0

14.0表格

表格是由<table>標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）

15.0雜項

15.1文本格式，設置文本字體元素

<br />換行

<hr />水平線

15.2註釋

主要功能是用於解釋說明代碼，讓閱讀起來更方便

語法：

<table border="1">
    <tr>
        <td>12</td>
        <td>12</td>
    </tr>
    <tr>
        <td>21</td>
        <td>21</td>
    </tr>
</table>

這就是這兩天學習總結的內容，也許寫的很差，但願你們可以諒解和指正。路漫漫其修遠兮，吾將上下而求索.

相關標籤/搜索

每日一句

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