整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML文件中，有些標簽會被經常用到，可能有人覺得太基礎，就不認真對待，但是我可以負責任的告訴你，越基礎的往往越重要。這次重點學一學標題、段落和鏈接等基礎標簽。
為了不重復粘貼HTML代碼，咱們來個約定，除了第一次出現完整的HTML文件的頁面結構之外，之后只現新增的標簽內容，你自己將新的內容，添加到HTML文件中，進行效果驗證。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第3個HTML文件</title>
</head>
<body>
<!--這是一個完整的HTML頁面結構,常用標簽放在這個注釋后面即可-->
</body>
</html>在HTML中，標題從一級到六級，對應標簽為<h1>到<h6>，字體逐步變小。屬性為align(對齊方式)，屬性值為left(左對齊，默認）、right(右對齊)和center(居中對齊)。
<h1 align="center">一級標題</h1>
<h2 align="center">二級標題</h2>
<h3>三級標題</h3>
<h4 align="left">四級標題</h4>
<h5 align="right">五級標題</h5>
<h6 align="right">六級標題</h6>輸出結果
<p> 標簽定義段落。瀏覽器解析到<p>標簽時，會自動在其前后創建一些空白。<p>標簽的屬性也是align。其實為了HTML文件統一布局，很少會用align來指定位置，大多數是用CSS統一指定。
<p>老陳說編程，除了說編程，</p>
<p>還有程序員的愛情與友情，</p>
<p>那是不可能的。</p>輸出結果
在網頁發的文字多時，好多人習慣性會使用分割線。在HTML，用<hr/>單標簽就可以實現分割線。而換行，則用<br/>標簽。<hr>標簽屬性有表示位置的align、高度的的size和寬度width三個屬性，其中size和width的單位是像素，但如果用到這些屬性的話，推薦用CSS。
<hr size="1"/>
小舅子要結婚了，丈母娘跟我借了10萬塊錢做彩禮，結果婚事談崩了。<br/>
今天公司急用錢，我向丈母娘要那10萬塊錢。<br/>
丈母娘說：借你這10萬塊錢是干啥用的？<br/>
我說：給小舅子結婚用啊！<br/>
丈母娘說：那婚結成了嗎？<br/>
我說：沒結成。<br/>
丈母娘大聲罵道：婚都沒結成你還有臉來要錢！<br/>
突然感覺丈母娘這話說的沒什么毛病啊！
<hr size="1"/>輸出結果
無序列表<ul>標簽，可用粗體圓點標記一個項目的列表；有序列表<ol>標簽使用數字進行標記，而列表項用<li>標簽實現。有關列表的屬性，不是被H5拋棄，就是不被推薦，所以......。
<p>
程序員最喜歡做的三件事
<ul>
<li>編程</li>
<li>開發</li>
<li>敲代碼</li>
</ul>
程序員最喜歡的三個美女
<ol>
<li>潘金蓮</li>
<li>楊貴妃</li>
<li>楊八妹</li>
</ol>
</p>輸出結果
<a>標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。最重要的屬性是 href和target， href指定鏈接的目標(網頁地址)，target指定打開窗口的模式，_blank：打開新窗口，_parent：在父窗口中打開，_self：默認，當前頁面跳轉，_top：在當前窗體打開鏈接，并替換當前的整個窗體。
在沒點擊鏈接之前，你先看一下鏈接內容的字體顏色，點擊鏈接之后，你再看一下，你就會發現，鏈接內容的顏色會有所變化。
(1) 未被訪問的鏈接帶有下劃線而且是藍色的;
(2) 已被訪問的鏈接帶有下劃線而且是紫色的;
(3) 活動鏈接帶有下劃線而且是紅色的。
<a href="demo1.html">去到老陳說HTML的第1個Demo中</a>輸出結果
好了，有關html基礎標簽的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##HTML##程序員##編程##CSS#
、什么是HTML？
HTML：Hyper Text Markup Language（超文本標記語言）
作用：編寫網站；
基本格式：
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>
注：< body>、</body>等成對的標簽，分別叫開放標簽和閉合標簽
單獨呈現的標簽（空元素），如 <hr/> ；意為用 / 來關閉空元素
二、基本標簽：
1、title標簽：<title>我愛上了不該愛的人</title>
2、meta標簽：<meta charset="UTF-8" />
<meta name=“keywords” content=“亮哥Java學堂" />
<meta name=“description” content=“Java體系系統學習……" />
3、標題標簽：<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
4：段落標簽：
<p>北京歡迎你，有夢想誰都了不起！</p>
<p>有勇氣就會有奇跡。</p>
5、換行標簽：<br/>
6、水平線標簽：<hr/>
7、字體樣式標簽：加粗：<strong>..<strong/>
斜體：<em>..<em/>
8、圖片標簽：<img src="path" alt="text" title="text" width="x" height="y" />
9、鏈接標簽：<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
添加新內容：
塊元素：無論內容多少，該元素獨占一行（p、h1-h6…），可以改變高度，可以改變左右距離
行內元素內容撐開寬度，左右都是行內元素的可以排在一行(a、strong、em…)，不可以改變高度，只可以改變左右的距離。
示例：
<html lang="en">
<!-- lang 語言，zh-CN -->
<!-- hello -->
<head >
<title>我的頁面標題</title>
<!-- 給頁面標題添加頭像 -->
<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="姑娘，歡迎降落在這殘酷的世界" />
<!-- 顯示京東圖片，點擊跳轉到百度頁面 -->
</body>
</html>
效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlOne/hello.html
著橙先生上一篇的常見樣式屬性，可以用在絕大多數的標簽中，如div、sapn、p等標簽中，這篇繼續講樣式屬性，不過是一些特殊標簽的樣式屬性。
廢話不多說，直接往下看
1、<img src="圖片路徑" alt="圖片的描述說明文字">
Img標簽也有橙先生上一篇文章中介紹的常見樣式屬性，另外如上所見它也有自己特殊的屬性src和alt屬性，img就是圖片標簽，那么src就是引入圖片的屬性，其中輸入圖片路徑地址即可，而alt屬性是對圖片的描述文字，當圖片不能正常顯示時，將會顯示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橙先生’是我的公眾號名稱，請關注一下吧！謝謝" style="width: 400px; height: auto;">
</body>
</html>
如下圖所示
圖片未正常顯示的效果
<ul>
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol>
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol的固定樣式效果
2、無序列表和有序列表，它們有固定的樣式如下圖的圓點和序號，大多數情況我們是不需要的，這時我們就可以通過list-style: none;這個樣式屬性取消它們的固定樣式
<ul style="list-style: none;">
<li>這是ul標簽中的一個小LI</li>
</ul>
<ol style="list-style: none;">
<li>這是ol標簽中的一個小li</li>
</ol>
ul和ol取消固定樣式的效果
3、另外在常見的標簽中的文章中提到的a標簽，其中href屬性就是填寫鏈接目標的地方，而target屬性定義被鏈接的文檔（即網址）在何處顯示，常用的就是“_blank”代表在新窗口中打開被鏈接文檔。默認的是“_self”代表在此窗口中打開被鏈接文檔，其他屬性值不常用，就不過多介紹了
<a href="需要跳轉到的網址或是文件，如" target="_blank">這個是文字的鏈接</a>
4、外邊距（margin）、內邊距（padding）,每個標簽元素都可以設定外邊距和內邊距，外邊距可以理解為是盒子以外的部分，而內邊距是盒子以內的部分直到內容的地方，看圖或是實際操作會比較好理解一些
所有HTML元素可以看作盒子，它包括：邊距（margin），邊框(border)，填充（padding），和實際內容(content)，如下圖
HTML元素可以看作盒子
當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完整大小的元素，你還必須添加內邊距，邊框和邊距。
下面的例子中設置div元素的寬度為300px，而實際寬度為450px
<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">這是一個div盒子</div>
實際寬度為450px的div
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
margin和padding（內邊距和外邊距）
margin或是padding只設置一個數值時代表上下左右都是這個數值，以下以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）
這部分先講到這里，后續將會不斷的提到這些屬性，記得要上手操作哦，動手寫一下才能更好的理解！加油！爭取后續出個視頻，這樣可以更形象的講解。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
