學點東西

時間 2021-02-20

標籤 html 工具開發工具網站 this url spa code htm 欄目 HTML 简体版

原文原文鏈接

HTML 標籤 (上)

HTML 語法規範

基本語法概述

HTML 標籤是由尖括號包圍的關鍵詞, 如 <html>
HTML 標籤一般成對出現, 如<html> </html>
少數單標籤, 如 <br />

標籤關係

包含關係
並列關係

HTML 基本結構標籤

第一個 HTML

每一個網頁都有基本的結構標籤(骨架標籤)html

標籤名	定義	說明
`<html> </html>`	HTML 標籤	頁面中最大的標籤, 稱爲根標籤
`<head> </head>`	文檔的頭部	head 標籤中必須設置 title 標籤
`<title> </title>`	文檔的主題	讓網頁擁有標題
`<body> </body>`	文檔的主體	元素包含文檔中的全部內容

<html> 
    <head>
        <title> 第一個HTML 網頁</title> 
    </head>
    <body>爆炸吧現實, 粉碎吧精神, 放逐這個世界!
    </body>
</html>

顯示的結果以下:工具

網頁開發工具

此處用 vscode開發工具

VSCode 工具生成骨架標籤新增代碼

標籤
lang 語言
charset 字符集

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vscode
    </title>
</head>

<body>
    爆ぜろリアル！弾けろシナプス！vanishment　this　world！
</body>

</html>

文檔類型聲明標籤

當前頁面採起 HTML5 版原本顯示網頁

lang 語言種類

<html lang="zh-CN">網站

lang="en" 定義語言爲英語
lang="zh-CN" 定義語言爲中文

字符集

<meta charset="UTF-8">ui

HTML 經常使用標籤

標籤語義

根據語義,再合適的位置添加合理的標籤,使得頁面結構更加清晰this

標題標籤 `<h1>-<h6>`

例:url

<h1>一級標題</h1>

段落和換行標籤

段落標籤 <p>spa

能夠將 HTML 文檔劃分爲若干段落, 例:code
```
<p>段落標籤</p>
```
換行標籤 <br/>htm

將文本強制換行顯示, 例:
```
文本<br/>
```
不一樣: 段落標籤會使得兩端之間有必定垂直距離

文本格式化標籤

語義	標籤
加粗	或者
斜體	或者
刪除線	或者
下劃線	或者

`<div>` 和 `<span>`標籤

沒有語義, 就是用來裝內容的

<div> 一行只能有一個, 大盒子
<span> 一行能夠有多個, 小盒子

例:

<div>一個div</div>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
<div>一個div</div>
<div>一個div</div>

圖像標籤和路徑

圖像標籤

<img src = "url"/>

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	圖片顯示失敗時候顯示的文字
title	文本	鼠標懸停在圖像上顯示的文字
width	像素	寬
height	像素	高
border	像素	設置圖像的邊框粗細

路徑(略)

超連接標籤 `<a>`

語法
```
<a href = "跳轉目標" target = "目標窗口跳出方式"> 文本或者圖像</a>
```
屬性做用

href url, 必須

taget 打開方式, 默認_self當前, _blank 新標籤

屬性	做用
href	url, 必須
taget	打開方式, 默認_self當前, _blank 新標籤

鏈接分類

外部鏈接 :

<a href = "https://www.baidu.com"> 百度</a>

內部連接: 網站內部各個頁面之間的連接
```
<a href = "index.html"> 首頁 </a>
```
空連接:
```
<a href = "#"> 首頁 </a>
```
下載連接:
```
<a href = "文件"> 點擊下載 </a>
```

網頁元素連接:

<a href = "url"> <img src = "img.jpg"> </a>

錨點連接: 定位到當前頁面的某個位置zz　　　　　　　　　　　　　　　　

<a href = "#barusu"> 跳轉到 barusu </a>
<div id = "barusu" > 巴魯斯 </div>

HTML 註釋和特殊字符

註釋
```

```
特殊字符

空格:   &: & 之類的

HTML 標籤 (下)

表格標籤

表格主要做用 (略)

表格的基本語法

<table>
    <tr>
        <th>表頭</th>
        <td>單元格里面的文字</td>
    </tr>
</table>

<table> </table>定義表格
<tr> </tr> 定義表格中的行,必須嵌套在 <table> </table> 中
<th> </th> 表示 HTML 表格的表頭單元格
<td> </td> 定義表格中的數據單元格, 必須嵌套在 <tr> </tr> 中

表格屬性

不經常使用

屬性名	屬性值	描述
align	left, center, right	對齊方式
border	"1"或""	默認爲"", 即無邊框
cellpadding	像素值	規定單元邊沿與其內容之間的空白, 默認1像素
cellspacing	像素值	規定單元格之間的空白, 默認2像素
width	像素或者百分比	表格的寬度

表格結構標籤

<thead> </thead> 表格的頭部區域, 必須包含 <tr> 標籤
<tbody> </tbody> 表格的主體區域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <th>排名</th>
                <th>關鍵詞</th>
                <th>趨勢</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相關連接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td> &#8595</td>
                <td>345</td>
                <td>123</td>
                <td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">貼吧</a></span><span> <a
                            href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">圖片</a></span><span> <a
                            href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                            target="_blank">百科</a></span> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td> &#8595</td>
                <td>345</td>
                <td>123</td>
                <td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">貼吧</a></span><span> <a
                            href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">圖片</a></span><span> <a
                            href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                            target="_blank">百科</a></span> </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹燈</td>
                <td> &#8595</td>
                <td>345</td>
                <td>123</td>
                <td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">貼吧</a></span><span> <a
                            href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
                            target="_blank">圖片</a></span><span> <a
                            href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                            target="_blank">百科</a></span> </td>
            </tr>

        </tbody>
    </table>
</body>

</html>