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>
在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é)果
<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é)果
在網(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é)果
無序列表<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é)果
<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ù)出個視頻,這樣可以更形象的講解。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。