*這篇文章主要讓大家認識網頁的構成,知道什么是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) 塊狀元素的特點:
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>標簽中聲明的東西是至關重要的。它是所有頭部元素的容器,可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
下面我們來逐條分析:
<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瀏覽器,谷歌這個墻角挖的真給力!
各式各樣的移動端
<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)。
<meta name="format-detection" content="telephone=no" />
規定在設備瀏覽頁面時對數字不啟用電話號碼的功能,在有些頁面需要網站點擊數字識別電話號碼,點擊跳轉到撥打電話界面,這時啟用電話功能即可:telephone=yes
HTML5是HTML最新的修訂版本,最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。為了更方便的使用H5的新標簽,有很多方法可以使用,感興趣的童鞋可以閱讀下面的網址學習:
http://www.cnblogs.com/Capricornus/archive/2013/03/26/2982122.html
總結上面的內容就不難發現,寫在head內申明的標簽有:<meta>、<link>、<title>、<script>、<base>等,那這些標簽的順序該如何排列呢?事實上這是沒有唯一答案的,一般首先要指定編碼,當然服務端也要指定編碼,保持一致。所以大多數瀏覽器都是把<meta charset="UTF-8">放在第一位。
一般按照經驗來分配的順序如下:
<meta>
<title>
<link> \ <style>
<base>
<script>
上面就是關于html文件中<head>標簽內一些常見的問題,歡迎補充和指正,請在下方留言評論。
<!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頁面中顯示空格,使用
4.
標題標簽:<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>
<!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>
<!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>
<!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>
<dt><dd>是同級標簽
絕對路徑:
相對路徑:
效果圖
<!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>
超鏈接標簽
空鏈接:<a href="#"> </a>
任務:
<!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>
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
*請認真填寫需求信息,我們會在24小時內與您取得聯系。