前端基礎-html 字體標籤,排版標籤,超連接,圖片標籤
主要內容:javascript
-
字體標籤：
h1~h六、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
-
排版標籤
<div> 、<span> 、 <br>、<hr>、<center>、<pre>
-
超連接 <a>
-
圖片標籤 <img>
<!--文檔的聲明 一個html文件就是一個文檔-->
<!DOCTYPE html>
<html lang="en">
<!--雙閉合-->
<head>
<!--head標籤中的內容不會顯示到瀏覽器上-->
<!--單閉合標籤 定義文檔的編碼類型-->
<meta charset="UTF-8">
<title>今天咱們學習html</title>
</head>
<!--body中的內容都會顯示到瀏覽器上-->
<body>
吳老闆
<!--h1 只容許頁面中只有一個: 爲了seo和爬蟲-->
1、字體標籤css
字體標籤包含：h1~h6、<font>、<u>、<b>、<strong>、<em>、<sup>、<sub>html
1）標題java
標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。python
2）字體標籤<font>（已廢棄）數組
3）粗體標籤<b> 或 <strong> （已廢棄）瀏覽器
4）下劃線標記<u> 、中劃線標記<s> （已廢棄）、服務器
5）斜體標記<i> 或 <em> （已廢棄）網絡
6）上標<sup> 、下標<sub>less
上下標這兩個標籤容易混淆，怎麼記呢？這樣記：b的意思是bottom：底部，以下示例代碼：
5<sup>2</sup>
8<sub>2</sub>
效果顯示：
2、排版標籤
1）段落標籤<p>
段落：是英文paragraph的縮寫。
注意：p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。其餘的一概不能放。
2）塊級標籤<div>和行內標籤<span>
div和span是很是重要的標籤，div的語義是division「分割」； span的語義就是span「範圍、跨度」。CSS課程中你將知道，這兩個東西，都是最最重要的「盒子」。
若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。
div在瀏覽器中，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域。
div標籤是一個容器級標籤，裏面什麼都能放，甚至能夠放div本身。
span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。
就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。
3）換行標籤<br />
當你打算結束一行，而又不想開始一個新的段落時，<br />標籤就派上用場了。不管你將它置於何處，<br />標籤都會產生一個強制的換行。
注意<br /> 沒有結束標籤，把<br>標籤寫爲 <br /> 是經得起將來考驗的作法，XHTML 和 XML 都接受在打開的標籤內部來關閉標籤的作法。
4）水平線標籤<hr />
水平分隔線（horizontal rule）能夠在視覺上將文檔分隔成各個部分。
5）內容居中標籤<center> （已廢棄）
center表明是一個標籤，而不是一個屬性值了。只要是在這個標籤裏面的內容，都會居於瀏覽器的中間。到H5裏面，center標籤不建議使用。
6）預約義（預格式化）標籤<pre>
含義：將保留其中的全部的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
注意：真正排網頁過程當中，<pre>標籤幾乎用不着。但在PHP中用於打印一個數組時使用。
PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了很是好的開發工具，很是適合咱們開發人員使用。審查元素功能的快捷鍵是F12。
3、超連接標籤<a>
1）外部連接：連接到外部文件。以下示例：
<a href=「new.html」>點擊進入到新網頁</a> 或
<a href=「http://www.baidu.com」target=「_blank」>進入百度</a>
a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。a是一個文本級的標籤。
href是英語hypertext reference超文本地址的縮寫。讀做「喝瑞夫」，不要讀做「喝夫」。
2）錨連接
指給超連接起一個名字，做用是在本頁面或者其餘頁面的不一樣位置進行跳轉。好比說，在網頁底部有一個向上的箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。以下示例：
<h1 id="top" name="top">這是頂部標題</h1>
<a href="#top">回到頂部</a>
上述代碼中，h1標籤元素這個錨叫作top。而後在底部設置超連接a，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top），注意href值中的#不要忘記了，表示跳到名爲top的特定位置，這是規定。
若是咱們將a標籤的代碼改爲<a href="new.html#top">回到頂部</a>,就表示，點擊以後，跳轉到new.html頁面的top錨點中去。
注意：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。爲了向前兼容，所以，name和id這兩個屬性都要寫上，而且值是同樣的。
3）郵件連接
代碼舉例：<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
效果：點擊以後，會彈出outlook，做用不大。
前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息。
4）特殊的幾個連接：
a、返回頁面頂部的位置：<a href="#">跳轉到頂部</a>
b、與js有關：
(1) javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應，例如：
<a href="javascript:;">內容</a>
<a href="javascript:void(0);">內容</a>
咱們能夠這樣寫來阻止a標籤的默認點擊行爲。
(2) javascript: 是表示在觸發<a>默認動做時，執行一段javascript代碼。例如：
<a href="javascript:alert(1)">內容</a>
5）超連接的屬性
href：目標URL；
title：懸停文本；
name：主要用於設置一個錨點的名稱；
target：告訴瀏覽器用什麼方式來打開目標頁面；target屬性有如下幾個值：
_self：在同一個網頁中顯示（默認值）
_blank：在新的窗口中打開。
_parent：在父窗口中顯示
_top：在頂級窗口中顯示
blank就是「空白」的意思，表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。
4、圖片標籤<img />
img：表明的就是一張圖片。img是自封閉標籤，也稱爲單標籤。
1）能插入的圖片類型：
可以插入的圖片類型有：jpg（jpeg）、gif、png、bmp。各種型之間有什麼區別，介紹css時再講。
不能往網頁中插入的圖片格式有：psd、ai。
2）src屬性：圖片的相對路徑和絕對路徑
html頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。
這裏涉及到圖片的一個屬性：src屬性：指圖片的路徑。
在寫圖片路徑時，有兩種寫法：相對路徑、絕對路徑
a、相對路徑
相對當前頁面所在的路徑。兩個標記 . 和 .. 分別表明當前目錄和父級目錄。以下示例：
<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src="./2.jpg">
<!-- 上一級目錄中的圖片 -->
<img src="../2.jpg">
b、絕對路徑
(1) 以盤符開始的絕對路徑，以下示例：
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
(2) 網絡路徑，以下示例：
<img src="http://www.baidu.com/2016040102.jpg">
總結：
相對路徑的好處：站點無論拷貝到哪裏，文件和圖片的相對路徑關係都是不變的。
相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。
問題：個人網頁在C盤，圖片卻在D盤，能不能插入呢？
答案： 用相對路徑不能，用絕對路徑也不能。
注意：可使用file://來插入，可是這種方法，沒有任何意義！由於服務器上沒有所謂c盤、d盤。
綜上：
不管是在a標籤、img標籤，若是要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑；
相對路徑，就是../image/ 這種路徑。從本身出發，找到別人；
絕對路徑，就是http://開頭的路徑；
絕對不容許使用file://開頭的東西，這個是徹底錯誤的！
3）img標籤的經常使用其餘屬性
width：寬度
height：高度
title：提示性文本，公有屬性，也就是鼠標懸停時出現的文本
align：指圖片是水平對齊方式，屬性值能夠是：left、center、right
alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）
4）注意事項
a、文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」；
b、若是想要保證圖片等比例縮放，請只設置width和height中其中一個；
c、若是想實現圖文混排的效果，請使用align屬性，取值爲left或right；
d、若是想點擊圖片的時候跳轉到某個連接，應該是：
<a href="跳轉的目標地址">
<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣'>
</a>
5、特殊字符 網站
：空格 （non-breaking spacing，不斷打空格），記住！！！
<：小於號（less than），記住！！！
>：大於號（greater than），記住！！！
&：符號&
"：雙引號
'：單引號
©：版權©，記住！！！
™：商標™
好比說，你想把<p>做爲一個文本在頁面上顯示，直接寫<p>是確定不行的，由於這表明的是一個段落標籤，因此這裏須要用到特殊字符。代碼應該這麼寫：
這是一個HTML語言的<p>標籤
效果顯示：
總結:
標籤分類:
1. 內行標籤:
span
a
em i
strong b
特色:
- 在一行內顯示,不換行
- 不能設置寬高,若是不設置寬高,默認是內容的寬高
- 行內快標籤: img input
特色:
一行內顯示
能夠設置寬高
2. 塊級標籤
h1-h6
div
p: 記住 只能放行內標籤 img 表單元素 不能放塊
ul
unordered list : 無序列表 它的子元素只能是li
. 手機 電話卡
. 電視 盒子
ul
li li只能在ul裏面
ol
ordered list : 有序列表
1.
2.
3.
4.
dl
dd
dt
table
tr
td
border="1" style="border-collapse:collapse;"
form
action:提交服務器的地址
method:提交的方式
input:
type
name
value
特色:
- 獨佔一行
- 能夠設置寬高,若是不設置寬,默認是父盒子寬度的100%;
div：把標籤中的內容做爲一個塊兒來對待(division)。必須單獨佔據一行。
div標籤的屬性：
align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center
<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。
若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。
示例：
<body> <div> 導航欄 </div> <div> 中心banner </div> <span>路飛</span> <span>alex</span> </body>
效果：
div在瀏覽器中，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域。
div標籤是一個容器級標籤，裏面什麼都能放，甚至能夠放div本身。
span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。
就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。
span舉例：
<p> 商品簡介: <span> <a href="">詳細信息</a> <a href="">生產日期</a> </span> </p>
div舉例：
<div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="guanggao"></div> <div class="shop"></div> </div> <div class="footer"></div>
因此，咱們親切的稱呼這種模式叫作「div+css」。div標籤負責佈局，負責結構，負責分塊。css負責樣式。
ps:這個class屬性名就與css有很大關聯，講到css模塊會詳細講這塊內容。
換行標籤<br> （已廢棄）
當你打算結束一行，而又不想開始一個新段落時，<br>標籤就派上用場了。不管你將它置於何處，<br>標籤都會產生一個強制的換行。
示例：
This <br> is a para<br>graph with line breaks
效果：
上圖顯示，<p>標籤和<br>標籤的區別在於：<p>標籤會在段落的先後自動插入一個空行，而<br>標籤沒有空行；並且<br>標籤沒有屬性。
注意<br> 沒有結束標籤，把<br>標籤寫爲 <br/> 是經得起將來考驗的作法，XHTML 和 XML 都接受在打開的標籤內部來關閉標籤的作法。
水平線標籤<hr>（已廢棄）
水平分隔線（horizontal rule）能夠在視覺上將文檔分隔成各個部分
示例：
<p>小馬哥</p> <hr> <hr> <p>我是段落</p> This <br> is a para<br>graph with line breaks
效果以下：
內容居中標籤 <center>
此時center表明是一個標籤，而不是一個屬性值了。只要是在這個標籤裏面的內容，都會居於瀏覽器的中間。
示例：
<center> <p>小馬哥</p> </center>
效果以下：
到了H5裏面，center標籤不建議使用。
預約義（預格式化）標籤：<pre>
含義：將保留其中的全部的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網頁過程當中，<pre>標籤幾乎用不着。但在PHP中用於打印一個數組時使用。
示例：
<pre> 鵝鵝鵝 做者：李白 曲項向天歌 白毛浮綠水 </pre>
效果以下：
上圖中，好像pre標籤部分的字體變小了，並且還出現了縮進，好吧， 這個實際上是瀏覽器搞的鬼。
爲何要有<pre>這個標籤呢？答案是：
全部的瀏覽器默認狀況下都會忽略空格和空行。
好吧，其實這個標籤也用的比較少。排版標籤就給你們介紹到這裏。
3、超連接
超連接有三種形式：
一、外部連接：連接到外部文件。舉例：
<a href="new.html">點擊進入到新網頁</a>
a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。
href是英語hypertext reference超文本地址的縮寫。讀做「喝瑞夫」，不要讀做「喝夫」。
效果：
固然，咱們也能夠直接點進連接，訪問一個網址。舉例以下；
<a href="http://www.baidu.com" target="_blank">進入百度</a>
二、錨連接：
指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。
首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果以下：
上圖中解釋：
11行代碼表示，頂部這個錨的名字叫作top。
而後在底部設置超連接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意上圖中紅框部分的#號不要忘記了，表示跳到名爲top的特定位置，這是規定。若是少了#號，點擊以後，就會跳到top這個文件或者top這個文件夾中去。
若是咱們將上圖中的第23行代碼寫成：
<a href="new.hhml#top">回到頂部</a>
就表示，點擊以後，跳轉到new.html頁面的top錨點中去。
說明：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。爲了向前兼容，所以，name和id這兩個屬性都要寫上，而且值是同樣的。
三、郵件連接：
代碼舉例：
<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
效果：點擊以後，會彈出outlook，做用不大。
前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息
特殊幾個連接：
返回頁面頂部的位置
<a href="#">跳轉到頂部</a>
與js有關：
<a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a>
- javascript:;表示什麼都不執行，這樣點擊
<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</2 - javascript:是表示在觸發
<a>默認動做時，執行一段JavaScript代碼。 例如：<ahref="javascript:alert()">內容</a>
超連接的屬性
href：目標URLtitle：懸停文本。name：主要用於設置一個錨點的名稱。target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：_self：在同一個網頁中顯示（默認值）_blank：在新的窗口中打開。_parent：在父窗口中顯示_top：在頂級窗口中顯示
blank就是「空白」的意思，就表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白標籤頁中打開。
ps:a是一個文本級的標籤
好比一個段落中的全部文字都可以被點擊，那麼應該是p包含a；
<p> <a href="">段落段落段落段落段落段落</a> </p>
而不是a包裹p：
<a href=""> <p> 段落段落段落段落段落段落 </p> </a>
a的語義要小於p，a就是能夠當作文原本處理，因此p裏面至關於放的就是純文字。
- 1. 前端(一)——HTML之基本標籤、圖片標籤、超連接、錨連接
- 2. 【HTML篇】3.HTML的圖片標籤、超連接標籤
- 3. HTML超連接標籤 表格標籤
- 4. JavaWeb.HTML標籤、排版標籤、列表標籤、圖片超連接標籤、表格標籤、表單標籤、框架標籤
- 5. HTML,文本標籤，連接標籤，列表標籤，圖像標籤，表格標籤，實體字符
- 6. HTML-圖片與超連接標籤
- 7. 前端基礎--HTML標籤
- 8. 前端：HTML(一)---初識 HTML，網頁的基本標籤，圖像標籤，超連接標籤
- 9. HTML基礎（三）---超連接標籤
- 10. HTML基礎（超連接標籤 & URL）
- 更多相關文章...
- • Mybatis select標籤 - MyBatis教程
- • MyBatis if標籤 - MyBatis教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-歸併排序
-
每一个你不满意的现在，都有一个你没有努力的曾经。