html學習

時間 2019-12-05

標籤 html 學習欄目 HTML 简体版

原文原文鏈接

什麼是HTML？

HTML:超文本標記語言。
所謂超文本也就是超連接,可讓咱們從一個網頁跳轉到另外一個網頁。

HTML基本格式

<html>                              
    <head>                          
        <title>HTML入門</title>      
    </head>
    
    <body>
        <h1>Hello World</h1>
    </body>
</html>

html：css

根標籤:只有一個（網頁全部內容都應該寫在根標籤裏面）

head:html

子標籤：用來設置頭部內容

body:html5

子標籤:網頁主體,全部要顯示的內容放這裏面

title：windows

網頁的標題標籤，也就是網頁顯示名字。
搜索引擎檢索頁面時，會首先檢索titlte中的內容。
元素：一個完整的標籤<></>
標籤<>

HTML後綴名

將編寫好的文件保存爲.html網頁格式文件瀏覽器
顯示文件格式名框架

HTML註釋

<！-- 這是一個註釋的格式，能夠直接換行
     繼續寫註釋。
 -->

註釋中的內容，不會顯示在頁面。
能夠寫註釋來對代碼進行描述，便於後期的維護。要養成良好的編寫註釋習慣。

標籤屬性

<html>
    <head>
        <title>HTML入門</title>
    </head>
    
    <body>
        <h1>Hello <font color="red">World</font> ！</h1>
        <!-- 這是一個註釋，不會顯示在網頁中。 -->
    </body>
</html>

顯示效果：工具

屬性只能在開始標籤中設置
屬性名 ="屬性值"
怎麼知道有哪些屬性，能夠參考W3C

文檔申明

主要用於申明網頁版本最新爲html5ui

html5的文檔申明，申明當前的網頁是按照HTML5頁標準編寫的必定要放在網頁的最上邊，不申明，則會致使有些瀏覽器有些頁面沒法正常顯示，因此爲了不，必定要寫文檔申明. 搜索引擎

<!DOCTYPE html>
<html>
 <head>
     <title>HTML入門</title>
 </head>

 <body>
     <h1>Hello <font color="red">World</font> ！</h1>
     <!-- 這是一個註釋，不會顯示在網頁中。 -->
     <h1>怎麼知道有哪些屬性？</h1>
     <p>能夠參考<a href="http://www.w3school.com.cn/">W3C</a></p>
 </body>
</html>

進制

二進制編碼

滿2進1

0 1 。。。。

十進制

滿10進1

0 1 2 3 4 5 6 7 8 9 10 11 12 。。。。

十六進制

滿16進1

只能用10 11 12 13 14 15標誌

使用a b c d e f 分別表示10 11 12 13 14 15

0--f

八進制

滿8進1

0 1 2 3 4 5 6 7 10 11 12 13 。。。。

經常使用十進制、二進制、十六進制

亂碼問題

用PC自帶記事本能夠寫html，可是效率不高。

經常使用html編寫工具：

Sublime、notepad++等等

在計算機中保存的任何內容，都須要轉爲爲0 1這種二進制來保存，包括在讀取內容時，須要將二進制彪馬，在轉換爲正確的內容。
編碼：一句必定的規則，將字符轉換爲二進制編碼的過程。
解碼：一句必定的規則，將二進制編碼轉換爲字符的過程。
字符集：編碼和解碼所採用的規則，咱們稱爲爲字符集
產生亂碼緣由：編碼和解碼採用的字符集不一樣。
經常使用字符集：ASCII（最先）、IOS-8859-一、GBK（英文）、GB2312（中文）、UTF-8(萬國碼)

注意：中文系統瀏覽器，默認使用的是GBK進行解碼

設置網頁編碼字符集

meta:用來這是網頁的一些元數據，好比網頁的字符集、關鍵字、簡介

meta：是單標籤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>HTML入門</title>
    </head>
    
    <body>
        <h1>Hello <font color="red">World</font> ！</h1>
        <!-- 這是一個註釋，不會顯示在網頁中。 -->
        <h1>怎麼知道有哪些屬性？</h1>
        <p>能夠參考<a href="http://www.w3school.com.cn/">W3C</a></p>
    </body>
</html>

ANSI:自動編碼

咱們使用都是UTF-8

標題標籤

<h1>標題標籤</h1>
        <h2>標題標籤</h2>
        <h3>標題標籤</h3>
        <h4>標題標籤</h4>
        <h5>標題標籤</h5>
        <h6>標題標籤</h6>

使用HTML標籤時，關心的是標籤的語義，咱們使用的標籤時語義化標籤，全部表現都使用CSS來設置。

h1:對搜索引擎，重要性僅次於title標籤

h1：很是重要，爲影響搜索引擎中的排名

頁面中只能寫一個h1

通常只使用h1\h2\h3

段落標籤

用於表示內容的一個天然段

使用P標籤

<p>個人一個p段落標籤</p>

p標籤默認會佔一行，端與端之間有間距

表現的都用css，html不關心

html都是語義標籤

換行標籤

空格：

&nbsp;     空格

換行標籤

<br />     換行，是一個單標籤（自結束標籤）

橫線

<hr />    水平線，是一個自結束標籤

實體(特殊元素)

特殊字符（實體）

&lt；    小於
&gt;     大於

版權

&copy;    版權

參考W3c實體

圖片

支持圖片格式：jpeg、gif、png

jpeg不支持透明，經常使用於保存圖片顏色豐富的圖片

gif支持的顏色少，支持動態圖。支持簡單透明。圖片顏色單一用gif。

png支持的顏色多，而且支持複雜透明，能夠用來顯示顏色複雜的透明圖片。

實際開發中經常使用png多一點。

圖片使用原則：

效果不一致，使用效果好的，

想過一致，使用小的。

<img src="1.gif" alt="圖片" width="200px" height="120px"/>

alt「圖片不能顯示時，才顯示。百度搜索只識別alt

只設置width或height時，高度或寬段會按比例自動變化。若是同時制定寬度和高度，圖像比例會發生變化。

路徑問題

通常使用相對路徑：

返回上級目錄

../     訪問上級目錄

絕對路徑：直接在目錄下面全路徑

mate標籤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" name="keywords" content="html5,JavaScript,前段，Java"/>
        <title>html練習筆記01</title>
        <meta name="description"content="發佈html五、js等前段相關信息"/>
        <meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>
    </head>
    
    <body>
        <a href="https://ww.baidu.com" target="_blank" style="text-decoration:none">百度一下</a>
        &nbsp; 
        <a href="https://www.taobao.com" target="_blank" style="text-decoration:none">淘寶</a>
        &nbsp; 
        <a href="https://www.jd.com" target="_blank" style="text-decoration:none">京東</a>
        
        <hr />
        
        <img src="../img/01.gif" alt="這是一個動態圖片" width="600px"></img>
        
        <hr />
        
        <!--你好，歡迎光臨---->
            a &lt; b
            <br />
            c &gt; d
            <br />
            &copy;鄧凌
    </body>
</html>

name:名字

content:內容

使用meta標籤還能夠用來設置網頁的關鍵詞
還能夠用來制定網頁的描述，搜索引擎在檢索頁面時，會同時檢索頁面中的關鍵詞和描述，可是這兩個值不會影響頁面在搜索引擎中的排名
能夠用來作請求的重定向
```
<meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/>
```
content:

5:時間秒數

url：重定向鏈接地址

HTML語法規範

XHTML：語法相對更嚴格

HTML中不區分大小寫的，可是咱們通常都使用小寫。有些狀況仍是使用大寫。
HTML中註釋不能嵌套。
HTML標籤必須結構完整，要麼成對出現，要麼自結束標籤。
HTML標籤能夠嵌套，不能交叉嵌套。
HTML標籤中的屬性必須有值，且必須加引號。

內聯框架（用得很少）

一個頁面引入另外一個外部頁面

屬性：

src：只想一個外面頁面的相對路徑

<iframe src="html.html" name="show"></iframe>

現實開發中不推薦使用，由於內聯框架中網頁，搜索引擎不會搜

width：
height：
name：能夠爲內聯框架制定一個name屬性，經過該名字使用超連接標籤時，能夠將跳轉頁面顯示在內聯框架中。

超連接

使用超連接能夠一個頁面跳轉到另外一個頁面

代碼：

<a href="https://ww.baidu.com" target="_blank">百度一下</a>

href: 指向鏈接跳轉的目標地址，能夠寫一個相對路徑也能夠寫一個絕對路徑。
默認訪問過的鏈接和沒有訪問過的鏈接，顏色有區別。

若是href值設置爲#,鏈接會回到頂部，設置爲#id值，就回到那。

<a href="#foot">回到底部</a>

<a href="#">回到頂部</a>
<center id="foot">我會居中顯示哦</center>

聯繫咱們，自動打開發送郵件應用程序。

設置href值爲mailto:郵件地址
```
<a href="mailto:batis@foxmail.com">聯繫咱們</a>
```
沒有郵件應用程序，就不會打開，有會自動填充發送人郵箱地址。
target：設置在哪裏打開鏈接（默認值爲_self)

_blan: 在新頁面中打開鏈接。

_self: 在當前窗口中打開。

<ul>
            <li><a href="https://www.baidu.com/" target="windows">主頁</a></li>
            <li><a href="http://news.baidu.com/" target="windows">公司簡介</a></li>
            <li><a href="https://tieba.baidu.com/index.html" target="windows">產品介紹</a></li>
            <li><a href="https://wenku.baidu.com" target="windows">聯繫方式</a></li>
        </ul>
        <iframe src="html.html" name="windows" width="100%" height="80%"></iframe>