前端入門二（html）

*這篇文章主要讓大家認識網頁的構成，知道什么是html，便于同學們入門，有個了解）

1、整個網頁的結構就是通過html作為基礎搭建起來的，js與css只是html的裝飾，但是也是必不可少的（html主要由html>head>body>組成）當然在body里面可能會用到很多html標簽

<!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">
    <meta name="format-detection" content="telephone=yes"/>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="./styles/reset.css">
    <script src="./styles/hotcss.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1103079_svcustilvsq.css">
    <title>七天洗車</title>
    <script>
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
  </body>
</html>

2、html標簽

1. 塊狀元素(block)

(1) 塊狀元素在網頁中就是以塊的形式顯示. 塊狀元素默認沒有自己高度和寬度,默認情況下它的寬度是繼承其父元素的寬度,高度是內容撐起來的高度,沒有內容的時候高度為0.

常用的塊狀元素:div, dl, dt, dd, ul, ol, fiedset, (h1-h6), p, form, hr, collgroup, col, table, tr,td等;

(2) 塊狀元素的特點:

默認的情況下,塊狀元素都會獨占一行,塊狀元素會按順序自上而下排列;
塊狀元素都可以直接設置寬度和高度;
塊狀元素都遵循盒模型的所有規則,一般作為其他元素的容器(p標簽除外);

2.內聯元素(inline 或稱行內元素)

(1) 常見的行內元素:span, a, i, em, strong, b等;

(2) 類聯元素的特點:

內聯元素后面如果是內聯元素,則會在一行內逐個顯示;
內聯元素現實的寬度,高度,不能直接定義,它最小的內容單元也會呈現矩形形狀;
內聯元素遵循盒模型的規則,但是會有部分無法顯示;

(當然我們也可以通過改變內聯元素的display屬性,來實現對其寬度和高度的設置,這個知識點我會放在下一篇和大家分享)

3.塊級內聯元素（inline-block）

（1）不管什么元素可以根據屬性（css屬性）display: inline-block變成塊級內聯元素；原始元素主要有img標簽

（2）塊級元素的特點：

集合內聯和塊級元素特點，在一行顯示

*所有元素都可以通過display屬性來改變

*行內元素不能隨意包裹塊級元素，會出現不顯示等問題

*所有標簽鏈接可參考：https://www.w3school.com.cn/html/index.asp（標簽主要使用常用的幾個div、p、a，span等標簽，入門者可以多練習一下就能記住）

在前面：

小編入坑前端，距離現在已經有兩年的時間了，這兩年也是從學習到步入工作的兩年，不是大神，但一直在努力走在成為大神的路上，開了這個頭條號想分享一些關于在前端路上的問題與小經驗，希望能幫助到那些和我碰到一樣問題的人，也希望一起學習和進步。

我們從最基礎的開始：

當你要寫一個頁面的時候，頭部<head>標簽中聲明的東西是至關重要的。它是所有頭部元素的容器，可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

下面我們來逐條分析：

1.強制使用IE最先內核渲染頁面：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

這是個是IE8的專用標記,用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，但是有熟悉瀏覽器的就知道，IE瀏覽器用的額是Trident內核，那這里為什么后面還寫了chrome=1呢？原來是谷歌做了個外掛：Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)。這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器，谷歌這個墻角挖的真給力！

各式各樣的移動端

2.為了讓你的網站頁面適用于移動端口，需要加上這一句：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

首先要清楚的是，viewport指的是哪一部分，viewport翻譯過來的意思是視口，也就是我們平時看手機，看電腦的可視區域，由于移動設備屏幕寬度不同于傳統 web，因此我們需要改變 viewport 值。

device-width規定寬度顯示的是設備的寬度；

initial-scale規定了初始縮放比例為1；

maximum-scale規定最大縮放比例為1；

user-scalable規定用戶是否可以手動縮放 (no，yes)。

3.規定頁面中的數字是否識別為電話號碼：

<meta name="format-detection" content="telephone=no" />

規定在設備瀏覽頁面時對數字不啟用電話號碼的功能，在有些頁面需要網站點擊數字識別電話號碼，點擊跳轉到撥打電話界面，這時啟用電話功能即可：telephone=yes

4.IE頁面不支持H5新標簽時，用JS來讓它支持

HTML5是HTML最新的修訂版本，最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。為了更方便的使用H5的新標簽，有很多方法可以使用，感興趣的童鞋可以閱讀下面的網址學習：

http://www.cnblogs.com/Capricornus/archive/2013/03/26/2982122.html

5.關于head標簽內標簽順序問題

總結上面的內容就不難發現，寫在head內申明的標簽有：<meta>、<link>、<title>、<script>、<base>等，那這些標簽的順序該如何排列呢？事實上這是沒有唯一答案的，一般首先要指定編碼，當然服務端也要指定編碼，保持一致。所以大多數瀏覽器都是把<meta charset="UTF-8">放在第一位。

一般按照經驗來分配的順序如下：

<meta>
<title>
<link> \ <style>
<base>
<script>

上面就是關于html文件中<head>標簽內一些常見的問題，歡迎補充和指正，請在下方留言評論。

1-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>

段落標簽：<p></p>

align對齊屬性值：

left:左對齊內容

right:右對齊內容

center:居中對齊內容

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

換行標簽<br/>

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

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 文字和段落標簽

文字斜體：<i></i>和<em></em>
加粗：<b></b>和<strong></strong>
下標：<sub></sub>
上標：<sup></sup>

特殊符號

任務

<!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

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作
下一篇：最好的編程語言是哪一種？PHP，Python還是C++？我覺得是

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商