HTML

什么是HTML

HTML
- Hyper Text Markup Language(超文本標記語言)

HTML發展史

在這里插入圖片描述

HTML 5，提供了一些新的元素和一些有趣的新符性，同時也建立了一些新的規則，這些元素、特性和規則的尖子，提供了許多新的網頁功能，如使用網頁實作動態渲染圖形、圖表、影像、和影片，以及不需要安裝任何插件直接使用網頁播放視頻等，

W3C標準

W3C
- World Wide Web Consortum (萬維網聯盟)
- 成立于1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C標準包括
- 結構化標準語言（HTML、XML）
- 表現標準語言（CSS）
- 行為標準（DOM、ECMAScript）

HTML基本結構

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    //網頁頭部
<body>

</body>
    //主體部分
</html>

、等成對的標簽，分別叫開放標簽和閉合標簽單獨呈現的標簽（空元素），如

; 意為用/來關閉空元素

網頁基本資訊

DOCTYPE宣告

標簽標簽

網頁基本標簽

標題標簽

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

段落標簽

<p>由于第一次安裝這個環境，</p>
<p>扯了挺久了，弄好了，高進記錄一下，避免以后還需要</p>
<p>下面鏈接是npm官方的安裝</p>
<p>https://www.npmjs.com/package/windows-build-tools</p>

換行標簽
```
<br>
```
水平線標簽
```
<hr>
```

字體樣式標簽

粗體：<strong>i love you</strong>
斜體：<em>i love you</em>

注釋和特殊符號

注釋<!-- -->
空格
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于&gt;
<br>
小于&lt;
&copy;著作權所有

影像標簽

常見的影像格式

<img src="path" alt="text" title="text" width="x" height="y"

src:影像地址 alt：影像的替代文字 title:滑鼠懸停提示文字 width:影像寬度 height:影像高度

鏈接標簽

<a href="path"target="目標視窗位置">鏈接文本或影像</a>

href="path"鏈接路徑 target鏈接在哪個視窗打開常用之：_self\blank

文本超鏈接
影像超鏈接
超鏈接
- 頁面間鏈接
- 從一個頁面鏈接到另一個頁面

錨鏈接

<a name="top">頂部</a>

<a href="#top">回到頂部</a>

功能性鏈接

<!--功能性鏈接
郵件鏈接：mailto
-->
<a href="mailto:2820678041@qq.com">點擊聯系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52"
         alt="點擊這里給我發訊息" title="點擊這里給我發訊息"/></a>
</body>

行內元素和快元素

塊元素
- 無論內容多少，該元素獨占一行
- (p、h1-h6)
行內元素
- 內容撐開寬度，左右都是行內元素的可以在排在一行
- (a.strong.em)

串列

什么是串列
- 串列就是資訊資源的一種展示形式，它可以使資訊結構化和條理化，并以串列的樣式顯示出來，以便瀏覽者能更快捷的獲得相應的資訊

串列的分類

無序串列

<!--無序串列-->
<ul>
    <li>java</li>
    <li>Python</li>
    <li>運維</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

有序串列

<!--有序串列
應用范圍：試卷，問卷....
-->
<ol>
    <li>java</li>
    <li>Python</li>
    <li>運維</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

自定義串列

<!--自定義串列
dl:標簽
dt：串列名稱
dd：串列內容
公司網站底部
-->
<dl>
    <dt>學科</dt>

    <dt>Java</dt>
    <dt>Python</dt>
    <dt>Linux</dt>
    <dt>C</dt>

    <dt>位置</dt>

    <dt>河北</dt>
    <dt>河南</dt>
    <dt>山西</dt>

</dl>

表格

為什么使用表格
- 簡單通用
- 結構穩定

基本結構

單元格
行
列
跨行
跨列

<!--表格table
行  tr  rows
列  td
-->
<table border="1">
    <tr>
       <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--colspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

頁面結構分析

元素名	描述
header	標題頭部區域的內容（用于葉敏或頁面重點一塊區域）
footer	標記腳部區域的內容（用于整個頁面或頁面的一塊區域）
section	Web頁面中的一塊獨立區域
article	獨立的文章內容
aside	相關內容或應用（常用于側邊欄）
nav	導航類輔助內容

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274419.html

標籤：其他

上一篇：大咖帶你免費學前端，附不容錯過的前端100篇文章合集

下一篇：零基礎轉行前端，學習之路上的面試題分享

HTML5基礎