整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
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)系。
