前端零基礎入門---步驟一：頁面結構層HTML---01-HTML基礎

01-HTML基礎

第1章基礎語法

html是超文本標記語言
<head>,<title>標籤里的內容不會在網頁文檔中顯示
<hr/>標籤是水平線，不需要成對出現
注釋代碼：

<!DOCTYPE html>
<html>
<head>
        <title>hello</title>
</head>
<body bgcolor="grey">
        <p>HELLO,everyone.This is my first page!</p>
</body>
</html>

我自己是一名從事了多年開發的web前端老程式設計師，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後台私信我：前端，即可免費獲取。

第2章文章段落

2.1 文檔聲明和META標籤

<html>,<body>,<head>標籤是html文檔結構標籤，<!DOCTYPE HTML>不屬於html標籤，它用於定義文檔類型

網頁中不能正常顯示中文，出現亂碼現象，使用meta標籤設置編碼格式：<meta charset="utf-8">

<!DOCTYPE html>
<html>
<head>
        <title>第一個網頁</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        大家好，一起來學習html標記語言
</body>
</html>

3.如果想在html頁面中顯示空格，使用

標題標籤：<h1></h1>~<h6></h6>

段落標籤：

align對齊屬性值：

left:左對齊內容

right:右對齊內容

center:居中對齊內容

justify:對行進行延申，這樣每行都可以有相等的長度

換行標籤

5.一個標籤代表一個段落，兩個標籤中的文本內容不在同一行，在標籤中，使用 文本內容的位置只是換行，其實還是一個段落

6.<pre></pre>標籤用於預定義格式顯示文本，即文本在瀏覽器中顯示時遵循在HTML原文檔中定義的格式

<!DOCTYPE html>
<html>
<head>
        <title>練習1</title>
        <meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
        <h3 align="center">《早發白帝城》</h3>
        <p align="center">朝辭白帝彩雲間，千里江陵一日還。</p>
        <p align="center">兩岸猿聲啼不住，輕舟已過萬重山。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
        <title>練習2</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <h1>敕勒歌</h1>
        <h2>朝代：南北朝</h2>
        <h3>作者：佚名</h3>
        <p>  敕勒川，<br/>
             陰山下，<br/>
             天似穹廬，<br/>
        </p>
        <pre>
  籠蓋四野，
   天蒼蒼，
   野茫茫，
風吹草低見牛羊。
        </pre>
</body>
</html>

2.2 文字和段落標籤

文字斜體：和
加粗：和
下標：
上標：

特殊符號

任務

<!DOCTYPE html>
<html>
<head>
        <title>任務</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <p align="center">關於我們  |  招聘信息  |  聯繫我們  |  意見反饋</p>
        <hr/>
        <p align="center">Copyright © 2016 imooc.com All Rights Reserved</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
        <title>任務</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html>

第3章列表標籤

3.1 列表標籤-無序列表

<!DOCTYPE html>
<html>
<head>
        <title>3</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <ul type="disc">
                <li>朝辭白帝彩雲間，</li>
                <li>千里江陵一日還，</li>
                <li>兩岸猿聲啼不住，</li>
                <li>輕舟已過萬重山，</li>
        </ul>
        <ul type="square">
                <li>朝辭白帝彩雲間，</li>
                <li>千里江陵一日還，</li>
                <li>兩岸猿聲啼不住，</li>
                <li>輕舟已過萬重山，</li>
        </ul>
</body>
</html>

3.2 列表標籤-有序列表

<!DOCTYPE html>
<html>
<head>
        <title>3</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <ol type="a">
                <li>朝辭白帝彩雲間，</li>
                <li>千里江陵一日還，</li>
                <li>兩岸猿聲啼不住，</li>
                <li>輕舟已過萬重山，</li>
        </ol>
        <ol type="i">
                <li>朝辭白帝彩雲間，</li>
                <li>千里江陵一日還，</li>
                <li>兩岸猿聲啼不住，</li>
                <li>輕舟已過萬重山，</li>
        </ol>
</body>
</html>

3.3 列表標籤-定義列表

<dt><dd>是同級標籤

第四章圖像和超連結

4.1 圖像

圖像標籤

絕對路徑：

相對路徑：

效果圖

<!DOCTYPE html>
<html>
<head>
        <title>3</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <p>一幅圖像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
        <p>一幅動畫圖像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>

4.2 超連結

超連結標籤

空連結：<a href="#"> </a>

4.3 錨連結

定義錨（同一頁面）

任務：

<!DOCTYPE html>
<html>
<head>
        <title>3</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <p><a name="dingbu">這裡是頂部</p>
        <p><a href="#shuiguo">水果</p>
        <p><a href="#shucai">蔬菜</p>
        <p><a href="#yundong">運動</a></p>
        <h3><a name="shuiguo">水果</a></h3>
        <ul>
                <li>香蕉</li>
                <li>蘋果</li>
                <li>葡萄</li>
                <li>梨</li>
                <li>西瓜</li>
                <li>櫻桃</li>
                <li>菠蘿</li>
                <li>橙子</li>
                <li>柚子</li>
                <li>芒果</li>
        </ul>
        <p><a href="#dingbu">返回頂部</a></p>
        <h3><a name="shucai">蔬菜</a></h3>
        <ul>
                <li>西紅柿</li>
                <li>黃瓜</li>
                <li>土豆</li>
                <li>芹菜</li>
                <li>蒜苔</li>
                <li>西葫蘆</li>
                <li>香菇</li>
                <li>菠菜</li>
                <li>豆角</li>
                <li>油菜</li>
        </ul>
        <a name="yundong"></a>
        <p><a href="#dingbu">返回頂部</a></p>
</body>
</html>

定義錨（不同頁面）

4.3 連結擴展功能

1. 電子郵件連結

2.文件下載

<!DOCTYPE html>
<html>
<head>
        <title>3</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
        <a href="mailto:2539391306@qq.com.cn">郵箱連結</a>
        <a href="58ca5b6700018dfc02400135.zip">文件下載</a>
</body>
</html>

原文連結：https://blog.csdn.net/qq_43405634/article/details/103789819