整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          第3天 - 16天搞定前端,html基礎(chǔ)標(biāo)簽,一點都

          第3天 - 16天搞定前端,html基礎(chǔ)標(biāo)簽,一點都不基礎(chǔ)?

          HTML文件中,有些標(biāo)簽會被經(jīng)常用到,可能有人覺得太基礎(chǔ),就不認(rèn)真對待,但是我可以負(fù)責(zé)任的告訴你,越基礎(chǔ)的往往越重要。這次重點學(xué)一學(xué)標(biāo)題、段落和鏈接等基礎(chǔ)標(biāo)簽。

          為了不重復(fù)粘貼HTML代碼,咱們來個約定,除了第一次出現(xiàn)完整的HTML文件的頁面結(jié)構(gòu)之外,之后只現(xiàn)新增的標(biāo)簽內(nèi)容,你自己將新的內(nèi)容,添加到HTML文件中,進(jìn)行效果驗證。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>第3個HTML文件</title>
          </head>
          <body>
          <!--這是一個完整的HTML頁面結(jié)構(gòu),常用標(biāo)簽放在這個注釋后面即可-->
          </body>
          </html>

          3.1 標(biāo)題<h1>~

          在HTML中,標(biāo)題從一級到六級,對應(yīng)標(biāo)簽為<h1>到<h6>,字體逐步變小。屬性為align(對齊方式),屬性值為left(左對齊,默認(rèn))、right(右對齊)和center(居中對齊)。

          <h1 align="center">一級標(biāo)題</h1>
          <h2 align="center">二級標(biāo)題</h2>
          <h3>三級標(biāo)題</h3>
          <h4 align="left">四級標(biāo)題</h4>
          <h5 align="right">五級標(biāo)題</h5>
          <h6 align="right">六級標(biāo)題</h6>

          輸出結(jié)果


          3.2 段落<p>

          <p> 標(biāo)簽定義段落。瀏覽器解析到<p>標(biāo)簽時,會自動在其前后創(chuàng)建一些空白。<p>標(biāo)簽的屬性也是align。其實為了HTML文件統(tǒng)一布局,很少會用align來指定位置,大多數(shù)是用CSS統(tǒng)一指定。

          <p>老陳說編程,除了說編程,</p>
          <p>還有程序員的愛情與友情,</p>
          <p>那是不可能的。</p>

          輸出結(jié)果


          3.3 水平線和換行

          在網(wǎng)頁發(fā)的文字多時,好多人習(xí)慣性會使用分割線。在HTML,用<hr/>單標(biāo)簽就可以實現(xiàn)分割線。而換行,則用<br/>標(biāo)簽。<hr>標(biāo)簽屬性有表示位置的align、高度的的size和寬度width三個屬性,其中size和width的單位是像素,但如果用到這些屬性的話,推薦用CSS。

          <hr size="1"/>
          小舅子要結(jié)婚了,丈母娘跟我借了10萬塊錢做彩禮,結(jié)果婚事談崩了。<br/>
          今天公司急用錢,我向丈母娘要那10萬塊錢。<br/>
          丈母娘說:借你這10萬塊錢是干啥用的?<br/>
          我說:給小舅子結(jié)婚用?。?lt;br/>
          丈母娘說:那婚結(jié)成了嗎?<br/>
          我說:沒結(jié)成。<br/>
          丈母娘大聲罵道:婚都沒結(jié)成你還有臉來要錢!<br/>
          突然感覺丈母娘這話說的沒什么毛病??!
          <hr size="1"/>

          輸出結(jié)果

          3.4 列表<ul>和<ol>

          無序列表<ul>標(biāo)簽,可用粗體圓點標(biāo)記一個項目的列表;有序列表<ol>標(biāo)簽使用數(shù)字進(jìn)行標(biāo)記,而列表項用<li>標(biāo)簽實現(xiàn)。有關(guān)列表的屬性,不是被H5拋棄,就是不被推薦,所以......。

          <p>
              程序員最喜歡做的三件事
          <ul>
              <li>編程</li>
              <li>開發(fā)</li>
              <li>敲代碼</li>
          </ul>
          程序員最喜歡的三個美女
          <ol>
              <li>潘金蓮</li>
              <li>楊貴妃</li>
              <li>楊八妹</li>
          </ol>
          </p>

          輸出結(jié)果

          3.5 超鏈接<a>

          <a>標(biāo)簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。最重要的屬性是 href和target, href指定鏈接的目標(biāo)(網(wǎng)頁地址),target指定打開窗口的模式,_blank:打開新窗口,_parent:在父窗口中打開,_self:默認(rèn),當(dāng)前頁面跳轉(zhuǎn),_top:在當(dāng)前窗體打開鏈接,并替換當(dāng)前的整個窗體。

          在沒點擊鏈接之前,你先看一下鏈接內(nèi)容的字體顏色,點擊鏈接之后,你再看一下,你就會發(fā)現(xiàn),鏈接內(nèi)容的顏色會有所變化。

          (1) 未被訪問的鏈接帶有下劃線而且是藍(lán)色的;

          (2) 已被訪問的鏈接帶有下劃線而且是紫色的;

          (3) 活動鏈接帶有下劃線而且是紅色的。

          <a href="demo1.html">去到老陳說HTML的第1個Demo中</a>

          輸出結(jié)果


          好了,有關(guān)html基礎(chǔ)標(biāo)簽的內(nèi)容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊,就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

          一個當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗。想學(xué)編程的朋友,可關(guān)注:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯的。

          #前端##HTML##程序員##編程##CSS#

          、什么是HTML?

          HTML:Hyper Text Markup Language(超文本標(biāo)記語言)

          作用:編寫網(wǎng)站;

          基本格式:

          <html>

          <head>

          <title>我的第一個網(wǎng)頁</title>

          </head>

          <body>

          我的第一個網(wǎng)頁

          </body>

          </html>

          注:< body>、</body>等成對的標(biāo)簽,分別叫開放標(biāo)簽和閉合標(biāo)簽

          單獨呈現(xiàn)的標(biāo)簽(空元素),如 <hr/> ;意為用 / 來關(guān)閉空元素


          二、基本標(biāo)簽:

          1、title標(biāo)簽:<title>我愛上了不該愛的人</title>

          2、meta標(biāo)簽:<meta charset="UTF-8" />

          <meta name=“keywords” content=“亮哥Java學(xué)堂" />

          <meta name=“description” content=“Java體系系統(tǒng)學(xué)習(xí)……" />

          3、標(biāo)題標(biāo)簽:<h1>…</h1>

          <h2>…</h2>

          <h3>…</h3>

          <h4>…</h4>

          <h5>…</h5>

          <h6>…</h6>

          4:段落標(biāo)簽:

          <p>北京歡迎你,有夢想誰都了不起!</p>

          <p>有勇氣就會有奇跡。</p>

          5、換行標(biāo)簽:<br/>

          6、水平線標(biāo)簽:<hr/>

          7、字體樣式標(biāo)簽:加粗:<strong>..<strong/>

          斜體:<em>..<em/>

          8、圖片標(biāo)簽:<img src="path" alt="text" title="text" width="x" height="y" />

          9、鏈接標(biāo)簽:<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>

          添加新內(nèi)容:

          塊元素:無論內(nèi)容多少,該元素獨占一行(p、h1-h6…),可以改變高度,可以改變左右距離

          行內(nèi)元素內(nèi)容撐開寬度,左右都是行內(nèi)元素的可以排在一行(a、strong、em…),不可以改變高度,只可以改變左右的距離。



          示例:

          <html lang="en">

          <!-- lang 語言,zh-CN -->

          <!-- hello -->

          <head >

          <title>我的頁面標(biāo)題</title>

          <!-- 給頁面標(biāo)題添加頭像 -->

          <Link rel="inco" href=".../img/one.jpg" type="image/x-icon"/>

          </head>

          <body>

          <!-- 第一部分 -->

          <!-- <h1>Hello World!</h1>

          <img src="img/人物.jpg" width="160" height="200" alt="五一" title="六一"/> -->

          <!-- 第二部分 -->

          <a href="http://www.baidu.com" target="_blank">

          <img src="img1.png" alt="姑娘,歡迎降落在這殘酷的世界" title="姑娘,歡迎降落在這殘酷的世界" />

          <!-- 顯示京東圖片,點擊跳轉(zhuǎn)到百度頁面 -->

          </body>

          </html>


          效果圖鏈接:file:///D:/ruanjian/VS/wenjianxiangmu/htmlOne/hello.html

          著橙先生上一篇的常見樣式屬性,可以用在絕大多數(shù)的標(biāo)簽中,如div、sapn、p等標(biāo)簽中,這篇繼續(xù)講樣式屬性,不過是一些特殊標(biāo)簽的樣式屬性。

          廢話不多說,直接往下看

          1、<img src="圖片路徑" alt="圖片的描述說明文字">

          Img標(biāo)簽也有橙先生上一篇文章中介紹的常見樣式屬性,另外如上所見它也有自己特殊的屬性src和alt屬性,img就是圖片標(biāo)簽,那么src就是引入圖片的屬性,其中輸入圖片路徑地址即可,而alt屬性是對圖片的描述文字,當(dāng)圖片不能正常顯示時,將會顯示alt里的文字

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Document</title>

          </head>

          <body>

          <img src="GZ.png" alt="‘Hi橙先生’是我的公眾號名稱,請關(guān)注一下吧!謝謝" style="width: 400px; height: auto;">

          </body>

          </html>

          如下圖所示


          圖片未正常顯示的效果


          <ul>

          <li>這是ul標(biāo)簽中的一個小LI</li>

          </ul>

          <ol>

          <li>這是ol標(biāo)簽中的一個小li</li>

          </ol>


          ul和ol的固定樣式效果


          2、無序列表和有序列表,它們有固定的樣式如下圖的圓點和序號,大多數(shù)情況我們是不需要的,這時我們就可以通過list-style: none;這個樣式屬性取消它們的固定樣式

          <ul style="list-style: none;">

          <li>這是ul標(biāo)簽中的一個小LI</li>

          </ul>

          <ol style="list-style: none;">

          <li>這是ol標(biāo)簽中的一個小li</li>

          </ol>


          ul和ol取消固定樣式的效果


          3、另外在常見的標(biāo)簽中的文章中提到的a標(biāo)簽,其中href屬性就是填寫鏈接目標(biāo)的地方,而target屬性定義被鏈接的文檔(即網(wǎng)址)在何處顯示,常用的就是“_blank”代表在新窗口中打開被鏈接文檔。默認(rèn)的是“_self”代表在此窗口中打開被鏈接文檔,其他屬性值不常用,就不過多介紹了

          <a href="需要跳轉(zhuǎn)到的網(wǎng)址或是文件,如" target="_blank">這個是文字的鏈接</a>


          4、外邊距(margin)、內(nèi)邊距(padding),每個標(biāo)簽元素都可以設(shè)定外邊距和內(nèi)邊距,外邊距可以理解為是盒子以外的部分,而內(nèi)邊距是盒子以內(nèi)的部分直到內(nèi)容的地方,看圖或是實際操作會比較好理解一些

          所有HTML元素可以看作盒子,它包括:邊距(margin),邊框(border),填充(padding),和實際內(nèi)容(content),如下圖


          HTML元素可以看作盒子


          當(dāng)您指定一個 CSS 元素的寬度和高度屬性時,你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道,完整大小的元素,你還必須添加內(nèi)邊距,邊框和邊距。

          下面的例子中設(shè)置div元素的寬度為300px,而實際寬度為450px

          <div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">這是一個div盒子</div>


          實際寬度為450px的div


          最終元素的總寬度計算公式是這樣的:

          總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

          元素的總高度最終計算公式是這樣的:

          總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距


          margin和padding(內(nèi)邊距和外邊距)


          margin或是padding只設(shè)置一個數(shù)值時代表上下左右都是這個數(shù)值,以下以margin為例的簡寫形式,代表的不同含義(padding也是一樣的)

          margin屬性可以有一到四個值。

          margin:25px 50px 75px 100px;

          含義如下:

          上外邊距為25px (margin-top: 25px;)

          右外邊距為50px (margin-right: 50px;)

          下外邊距為75px(margin-bottom: 75px;)

          左外邊距為100px(margin-left: 100px;)

          margin:25px 50px 75px;

          含義如下:

          上外邊距為25px(margin-top: 25px;)

          左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)

          下外邊距為75px(margin-bottom: 75px;)

          margin:25px 50px;

          含義如下:

          上和下外邊距都為25px(margin-top: 25px和margin-bottom: 25px;)

          左和右外邊距都為50px(margin-right: 50px;和margin-left: 50px)

          margin:25px;

          含義如下:

          上、下、左、右外邊距都是25px(margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px)

          這部分先講到這里,后續(xù)將會不斷的提到這些屬性,記得要上手操作哦,動手寫一下才能更好的理解!加油!爭取后續(xù)出個視頻,這樣可以更形象的講解。


          主站蜘蛛池模板: 日韩在线视频一区二区三区| 日韩一区二区免费视频| 国产精品合集一区二区三区| 日韩精品一区二三区中文| 亚洲高清美女一区二区三区| 制服中文字幕一区二区| 精品一区二区高清在线观看| 91精品一区二区综合在线| 久久精品一区二区| 中文乱码精品一区二区三区| V一区无码内射国产| 动漫精品一区二区三区3d| 日韩精品久久一区二区三区 | 一区二区三区精品高清视频免费在线播放 | 午夜影视日本亚洲欧洲精品一区| 全国精品一区二区在线观看| 国产精品亚洲一区二区三区久久 | 亚洲午夜日韩高清一区 | 精品人妻AV一区二区三区| 久久无码人妻一区二区三区午夜| 无码午夜人妻一区二区三区不卡视频| 国产福利一区二区在线视频| 亚洲国产av一区二区三区| 国产精品一区12p| 国产一区二区电影| 人妻少妇久久中文字幕一区二区 | 国产日韩综合一区二区性色AV| 日韩美女在线观看一区| 色视频综合无码一区二区三区 | 成人无码精品一区二区三区| 日韩美一区二区三区| 麻豆精品一区二区综合av| 97久久精品午夜一区二区| 国产亚洲一区二区精品| 激情内射亚洲一区二区三区爱妻| 毛片一区二区三区无码| 高清无码一区二区在线观看吞精| 亚洲AV无码一区二区三区在线观看 | 蜜桃无码AV一区二区| 亚洲国产精品一区二区成人片国内 | 精品国产高清自在线一区二区三区 |