HTML基本知識(1)

時間 2020-08-03

標籤 html 基本知識欄目 HTML 简体版

原文原文鏈接

認識網頁

網頁是由文字圖片音頻視頻超連接 flash等組成

如何顯示網頁

程序員寫好代碼後，通過瀏覽器渲染以後而造成網頁

瀏覽器

瀏覽器是網頁顯示運行的平臺

經常使用的五大瀏覽器及內核css

IE瀏覽器：Trident內核
火狐瀏覽器：Gecko內核
safari瀏覽器：webkit內核
谷歌瀏覽器：Bink內核（屬於webkit的分支）
歐朋瀏覽器：Bink內核

WEB標準

WEB標準不是一個標準，是W3C組織和其它標準化組織制定的一系列標準，可讓不一樣的瀏覽器在頁面顯示統一內容

WEB標準的組成

結構（html）:網頁元素的分類以及整理
表現（css）：網頁外觀的樣式
行爲（js）:網頁模型的交互及行爲。

WEB標準的好處

使WEB發展更爲廣闊
內容能被更普遍的設備訪問
下降網站流量費用
使網站更易於維護

HTML

HTML：超文本標記語言並非編程語言而是標記語言

HTML骨架格式

<!DOCTYPE html>  
<html lang="en">   
  <head> 
      <meta charset="utf-8">   
      <title></title>   
  </head>
  <body>    
  </body>
</html>

HTML元素標籤分類

html標籤：單標籤雙標籤

雙標籤html

<body></body>   <html></html>等等

單標籤html5

<img />  <br />等等

html標籤關係

嵌套關係程序員

<head>
    <title></title>
</head>

並列關係web

<head></head>
<body></body>

在嵌套關係中子元素距離父元素應縮進一個tab鍵身位編程

代碼開發工具

DWcs6
VScode
Webstrom
sublime
HBuilder

生成html5骨架的方式瀏覽器

! 或者 html:5

骨架標籤含義

!DOCTYPE html:文檔類型，指的是html5的結構。
html:根標籤
lang:指定html的語言種類
head:頭部標籤
charset:字符集
title:文檔標題標籤
body:主體標籤

字符集編碼

gb2312：簡單中文，包括6723個文字
BIG5:繁體中文，泛指港澳臺等
GBK:包括簡體中文與繁體字，是GB2312的升級版
UTF-8：包括全世界各地所須要的字符集。

標籤的語義

標籤的語義：指的是標籤的含義在合適的地方放上合適的標籤讓結構更清晰

排版標籤

標題標籤

h1~h6:指的是1~6級標題字體會依次變小，具備換行的特色

<h1>一級標籤</h1>
             <h2>二級標籤</h2>
             <h3>三級標籤</h3>
             <h4>四級標籤</h4>
             <h5>五級標籤</h5>
             <h6>六級標籤</h6>

段落標籤

p：指的是段落標籤

<p>文本</p>

水平線標籤

hr:水平線表標籤

<hr />

換行標籤

br :水平線標籤

掘金 一個專屬於程序員的APP <br />

div和span

<div>胡歌</div>
<div>霍建華</div>
<span>韓紅</span>
<span>古天樂</span>

div:分隔分區。一行內只能放一個div標籤
span：跨度跨距。一行內能夠放不少span標籤網絡

文本格式化標籤

<b>文字以加粗的方式顯示</b>     <strong>文字以加粗的方式顯示</strong>    <br />
    <i>文字以傾斜的方式顯示</i>     <em>文字以傾斜的方式顯示</em>            <br />
    <s>文字以刪除線的方式顯示</s>    <del>文字以刪除線的方式顯示</del>      <br />
    <u>文字如下劃線的方式顯示</u>   <ins>文字如下劃線的方式顯示</ins>      <br />

標籤屬性

讓HTML標籤擁有更多的信息便叫做標籤的屬性

<標籤名  屬性1="屬性值1" 屬性2="屬性值2">文本</結束標籤>

圖像屬性

<img src="圖像URL" />

總結編程語言

標籤名擁有多個屬性。必須寫在開始標籤中，且位於標籤名後面。
屬性之間不分前後順序，標籤名與屬性，屬性與屬性之間必須以空格隔開
採用鍵對值的形式，如key=value的格式。
alt是圖片不能顯示出現的文字，title是鼠標移動時顯示的文字

連接標籤

<a herf="目標的url地址"  target="頁面的打開方式">文本</a>

<a href="http:////www.baidu.com" target="_blank">外部超連接</a>
 <a href="7.圖像標籤.html">內部超連接</a>

注意事項ide

_self:是在原網頁打開連接
_blank 是在新網頁打開連接

註釋標籤

<!-- 註釋內容-->

註釋自己是讓程序人員看的，目的是爲了解釋這段代碼的含義。
程序不執行快捷鍵：ctrl+/

路徑

目標文件夾---->根目錄

相對路徑

上一級路徑

<img src="../圖像URL" />

同一級路徑

<img src="./圖像URL" />

下一級路徑

<img src="./img/圖像URL" />

絕對路徑

通常是指完整的網絡路徑

錨點定位

創建錨點連接使用戶可以快速跳到目標位置

步驟以下

建立相對應的id名
使用相對應的id名標註跳往目標的位置

<a href="#Christmas">3.聖誕樹的由來</a><br />
     <h2 id="Christmas"> 聖誕樹的由來</h2>

base標籤

base標籤是爲了設置總體連接的打開方式   寫在head與</head>之間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.qq.com/">騰訊</a>
    <a href="https://www.sina.com.cn/">新浪</a>
    <a href="https://www.163.com/">網易</a>
</body>
</html>

pre標籤

pre:文本格式化標籤，按照文本的本來的設置在網頁中呈現

<pre>
        鋤禾日當午
        汗滴禾下土
        誰知盤中餐
        粒粒皆辛苦
     </pre>

特殊字符

html 標籤不方便使用的地方可使用特殊字符它們屬於符號。

HTML5的發展之路

html5的發展之路：jingyan.baidu.com/article/59a…

相關標籤/搜索

每日一句

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