html--基礎知識

時間 2019-11-30

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

原文原文鏈接

HTML介紹

Web服務本質:是一個socket 連接發送消息的過程，瀏覽器輸入網址發生了什麼：
瀏覽器給服務端發送請求-->服務端接收請求並返回響應-->服務端把html文件內容發送給瀏覽器-->瀏覽器展現頁面css

編程三部分組成：是一個使用（展現）數據，存儲數據，處理數據發過程html

HTML是什麼？編程

超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。是一個標準，規定你們怎麼寫網頁
本質是瀏覽器可識別的規則
網頁文件的擴展名：.html或.htm

學習HTML：學習寫標籤的過程

1、標籤分類：

單標籤和雙標標籤,
內聯（行內）標籤：a,img,u,s,i,b,span，默認瀏覽器寬度，可修改
塊級標籤：h1-h6,div,p,hr，不可設置寬度
注：
標籤規則:
1. 行內標籤不能嵌套塊級標籤
2. p標籤不能嵌套塊級標籤
3.塊級元素能夠包含內聯元素或某些塊級元素

2、HTML文檔結構：

<!DOCTYPE html>   聲明文件類型
<html lang="zh-CN">     文檔開始標記   字體類型：中文
<head>  文檔開頭 內容不會在瀏覽器的文檔窗口顯示
  <meta charset="UTF-8">   編碼類型
  <title>css樣式優先級</title>  網頁標題
</head>   尾
<body>  網頁主體 開始
····填寫內容
</body>  網頁主體結尾
</html>     文檔結尾標記

注：有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">

HTML標籤格式：尖括號、大部分紅對出現、也有單獨出現

3、標籤的語法：

<標籤名 屬性1='屬性值' 屬性2='屬性值'>內容部分</標籤名>
<標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」…… />
注：
幾個很重要的屬性：
id 定義標籤惟一id，
class 給元素定義多個類名（css樣式名）
style 規定元素的行內樣式（CSS樣式）

HTML註釋：<!--註釋內容-->

4、HTML經常使用標籤

1.head內經常使用標籤：

<title></title>  定義網頁標題
<style></sstyle> 定義內部樣式表
<script></script>  定義js代碼或者印日外部js文件
<link></link>  引入外部樣式表文件<meta></meta> 定義網頁元數據

2. meta標籤

http-equiv屬性：至關於HTTP文件頭做用，向瀏覽器傳出一些有用的信息，內涵屬性content，content  中的內容是真正參數變量值
<!--2秒跳轉到指定網址-->
<meta http-equiv='refresh' content='2;URL=https://www.oldboyedu.com'>   
name屬性: 主要用於描述網頁,content屬性，content中的內容主要是便於搜索引擎機器人查找信息和分類信息。

3. body內經常使用標籤
3.1 基本標籤（塊級標籤和內聯標籤）

<u>下劃線</u>
<b>加粗</b>
<i>斜體</i>
<s>刪除</s>
<p>段落標籤</p>

<!--字體愈來愈小-->
<h1><h1>
<h2><h2>
<h3><h3>
<h4><h4>
<h5><h5>
<h6><h6>

換行
<br>
水平線
<hr>

3.2 特殊字符

特殊字符
內容  對應代碼
空格 &nbsp
>    &gt
<    &lt
&    &map
¥    &yen
®    &reg   註冊
©    &copy  版權
應用：
<div>2&gt1,3&lt2,海&nbsp&nbsp燕,商標&copy，註冊&reg,&yen&amp</div>

3.3 div標籤和span標籤

相同點：均主要經過css樣式爲其賦予不一樣的表現
區別：
div定義塊級元素
span 定義內聯元素

3.4img標籤（圖片）

<img src='圖片路徑'，alt='圖片加載失敗給的提示' title='鼠標懸浮時提示信息' width='寬'，high='長'（寬高兩個屬性只用一個會自動等比縮放） >
eg:

<img src="psb.jpg" alt="加載失敗" tilte="brother" width="100">

　3.5 a標籤超連接標籤瀏覽器

可連接內容：圖片，網址，相同網頁的不一樣位置，地址，應用程序
<a href='網址' target='_blank'(跳轉不一樣的頁面打開，不寫默認當前頁面打開)>點我</a>
eg:

<a href="psb.jpg" target="_blank" >點我</a>

5、url 網頁地址 統一資源定位器

URL地址由4部分組成
第1部分：爲協議：http://、ftp://等 
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。

href屬性指定目標網頁地址。該地址能夠有幾種類型：

絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）
相對URL - 指當前站點中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="#top"）

6、列表socket

6.1 無序列表學習

<ul type="disc">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
type屬性：
disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

6.2 有序列表

<ol type="1" start="2">
  <li>aaa</li>
  <li>bbb</li>
</ol>

6.3 標題列表

<d1>
    <dt>標題1</dt>
    <dd>內容1</dd>
    <dt>標題2</dt>
    <dd>內容2</dd>
</dl>

7、.表格二維數據空間字體

7.1 表格的基本結構：ui

<!--列表-->
<table border="10" cellpadding="10" cellspacing="10">
<thead>
    <tr>
        <th>序號</th>
        <th>姓名</th>
        <th>愛好</th>
    </tr>
</thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>zzy</td>
        <td rowspan="2">美食</td>
    </tr>
        <tr>
        <td>2</td>
        <td>zxc</td>

    </tr>
        </tr>
        <tr>
        <td >3</td>
        <td colspan="2">ly</td>

    </tr>
    </tbody>
</table>

7.2 表格屬性:搜索引擎

表格屬性:
border: 表格邊框. border:邊境
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）

相關標籤/搜索

每日一句

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