整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端入門二(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">放在第一位。

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

          1. <meta>

          2. <title>

          3. <link> \ <style>

          4. <base>

          5. <script>

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

          1-HTML基礎

          第1章 基礎語法

          1. html是超文本標記語言
          2. <head>,<title>標簽里的內容不會在網頁文檔中顯示
          3. <hr/>標簽是水平線,不需要成對出現
          4. 注釋代碼:<!-- -->

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

          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 錨鏈接
          1. 定義錨(同一頁面)



          任務:


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


          主站蜘蛛池模板: 无码国产精品一区二区免费式影视 | 久久国产香蕉一区精品| 日本一区视频在线播放| 亚洲AV成人一区二区三区AV| 另类ts人妖一区二区三区| 日韩精品视频一区二区三区| 亚洲国模精品一区| 无码一区二区三区中文字幕| 性色av一区二区三区夜夜嗨| 欧洲精品码一区二区三区免费看| 91久久精品无码一区二区毛片| 国产一区麻豆剧传媒果冻精品| 男人的天堂av亚洲一区2区| 亚洲AV无码一区东京热久久| 亚洲国产高清在线一区二区三区 | 国产一区二区三区播放| 好爽毛片一区二区三区四无码三飞| 久久免费区一区二区三波多野| 无码毛片一区二区三区视频免费播放 | 日本无卡码免费一区二区三区| 久久久精品人妻一区二区三区蜜桃| 中文日韩字幕一区在线观看| 女人和拘做受全程看视频日本综合a一区二区视频 | 乱色精品无码一区二区国产盗| 日韩精品无码一区二区视频| 一级特黄性色生活片一区二区| 国产一区二区三区精品久久呦| 人妻av综合天堂一区| 亚洲AV无码一区二区三区性色| 蜜桃视频一区二区三区在线观看| 亚洲一区二区三区电影| 国产AV午夜精品一区二区三区 | 中文字幕日韩一区二区三区不| 亚洲一区二区三区在线视频| 一区二区三区在线免费 | 国产精品视频无圣光一区| 国产成人欧美一区二区三区 | 一区二区三区免费精品视频| 精品天海翼一区二区| 高清一区二区三区视频| 亚洲一区二区三区在线视频|