HTML小白也能懂-1
HTML簡介
什么是HTML?
HTML指超文本標記語言（Hyper Text Markup Language），它不是一種編程語言而是一種標記語言，
超文本：采用超鏈接的方法，將各種不同空間的文字資訊組織在一起的網狀文本，
標記語言：用標簽標注網頁內容，瀏覽器在運行網頁時就可以根據標注顯示相應的格式，
HTML能做什么？
制作網頁，
html基礎
基本的HTML標簽-四個實體
HTML標題
HTML標題是通過<h1> - <h6>等標簽進行定義的
實體
<h1>這是1級標題</h1>
<h2>這是2級標題</h2>
<h6>這是6級標題</h6>
運行結果
HTML段落
HTML段落是通過<p>標簽進行定義的，在同一組<p>標簽里的內容可稱為一個段落，與下一個段落會有較大行間距，
實體
<p>這是一個段落</p>
<p>這是另一段</p>
運行結果
HTML鏈接
HTML鏈接是通過<a>標簽進行定義的,通過點擊超鏈接的名字就可以直接跳轉到對應的網頁，
實體
<a href="http://www.baidu.com">百度</a>
運行結果
HTML影像
HTML影像是通過標簽進行定義的，
實體
<img src="img/Female.gif" />
<img src="img/Female.gif" width="75" height="75" />
運行結果：
注意：插入的圖片必須和所建的檔案在同一個專案中才可以運行成功，
影像的名稱和尺寸是以屬性的形式提供的，
HTML元素
HTML檔案是由HTML元素定義的，
HTML元素是指從開始標簽到結束標簽的所有代碼，
HTML屬性
屬性為HTML元素提供附加資訊，
實體1：
<a href="http://www.baidu.com">百度</a>
HTML鏈接由<a>標簽定義，鏈接的地址在href屬性中指定，
實體2：
<h1 align="center">一級標題居中對齊</h1>
<!-- 擁有對齊方式的附加資訊 -->
運行結果：
實體3：
<body bgcolor="bisque">
<!-- 擁有背景顏色的附加資訊 -->
</body>
運行結果：
實體4：
<table border="1">
</table>
<!-- 用有表格表框的附加資訊 -->
HTML標題
標題標簽不僅僅是為了產生粗體或大號的文本而使用標題，
搜索引擎使用標題為網頁的結構和網頁內容編制索引，
因為用戶可以通過標題標簽來快速瀏覽網頁，所以用標題來呈現檔案結構是很重要的，
程式實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <h1>到<h6>代表標題標簽,一共六級 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<!--
標題標簽可直接占一行
align="center" 文本居中對齊
align="right" 文本向右對齊
align="left"文本向左對齊（默認）
-->
<h1 align="center">一級標題居中對齊</h1>
<!-- 注釋用"Ctrl+/"表示，插入注釋可提高代碼的可讀性，使人更容易理解-->
</body>
</html>
運行結果：
HTML段落
程式實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 段落標簽,在<p>標簽內的話即可稱為一個段落,下一段落會有較大行間距 -->
<p>這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符
這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符</p>
<p>這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符
這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符這是一段話這是一行字符</p>
<!-- 換行標簽<br/> -->
<p>這是一段話這是一行字符這是一段話<br/>這是一行字符這是一段話這是一行字符</p>
<!-- 空格標簽  -->
這是一段話這是一行字符 這是一段話這是一行字符
<!-- 大于號>,小于號< -->
<b >是一個加粗符號
<!-- 注冊商標 -->
®
<!-- 著作權 -->
©
<!-- 空格 -->
</body>
</html>
運行結果：
HTML串列：
串列可以分為有序串列和無序串列兩大類，
程式實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--有序串列前的標注默認型別是阿拉伯數字-->
<ol>
<li>這是一個有序串列</li>
<li>這是一個有序串列</li>
</ol>
<!--有序串列前的標注默認型別也可使用大小寫英文字母或者是大小寫羅馬數字，如下以大寫字母為例，
-->
<ol type="A">
<li>這是一個有序串列</li>
<li>這是一個有序串列</li>
</ol>
<!--無序串列前的標注默認型別是實心原點-->
<ul>
<li>這是一個無序串列</li>
<li>這是一個無序串列</li>
</ul>
<!--無序串列前的標注也可使用空心原點或者是方形，如下以空心原點為例，-->
<ul type="circle">
<li>這是一個無序串列</li>
<li>這是一個無序串列</li>
</ul>
</body>
</html>
運行結果：
HTML超鏈接
鏈接HTML代碼很簡單，他類似這樣：
<a href="ur1">Link text</a>
href屬性規定鏈接的目標，
開始標簽和結束標簽之間的文字被作為超級鏈接來顯示，
實體：
<a href="http://www.baidu.com">百度</a>
上面這行代碼顯示為：百度
HTML鏈接-target屬性
使用target屬性我們可以定義被鏈接的檔案在何處顯示，
下面這行代碼會在新視窗打開檔案，若沒有特殊說明則默認為target=_self在本頁面中打開.
<a href="http://www.baidu.com" target="blank">百度</a>
注意：“鏈接文本”不必一定是文本，圖片或者其他HTML元素都可以成為超鏈接，
程式實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- target=""默認為從當前網頁打開即和target="_self"效果一
樣,若想新建網頁打開可用target="_blank" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="baidu.html" target="_blank">自建百度</a>
<a href="http://www.qq.com">
<!-- 若網路不好或者撰寫中出現錯誤使得圖片加載不出從而使得
alt中設定的屬性值 ,當滑鼠停留在本圖片上時候會顯示出title的屬性值-->
<img src="img/qq.ico" width="100" height="100"
alt="正在努力加載"
title="本產品由騰訊公司開發"
/>
</a>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 當沒有互聯網時可以在本專案中新建一個html檔案也可練習超鏈接操作，
如下方的自建百度 -->
<!-- target=""默認為從當前網頁打開即和target="_self"效果一
樣,若想新建網頁打開可用target="_blank" -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="baidu.html" target="_blank">自建百度</a>
<a href="http://www.qq.com">
<!-- 若網路不好或者撰寫中出現錯誤使得圖片加載不出從而使得
alt中設定的屬性值 ,當滑鼠停留在本圖片上時候會顯示出title的屬性值-->
<img src="img/qq.ico" width="100" height="100"
alt="正在努力加載"
title="本產品由騰訊公司開發"
/>
</a>
</body>
</html>
</html>
運行結果：
超鏈接定義錨點
程式實體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--
超鏈接定義錨點
超鏈接找錨點
<a href="#錨點名稱">鏈接名稱</a>
定義錨點
<a name="名稱">aaa</a>
-->
<body>
<h3> <a name="top"></a></h3>
<a href="#p1">產品1</a>
<a href="#p2">產品2</a>
<a href="#p3">產品3</a>
<a href="#p4">產品4</a>
<a href="#p5">產品5</a>
<hr >
<h3> <a name="p1">產品1</a></h3>
<img src="img/nike/1.png" />
<h3> <a name="p2">產品2</a></h3>
<img src="img/nike/2.png" />
<h3> <a name="p3">產品3</a></h3>
<img src="img/nike/3.png" />
<h3> <a name="p4">產品4</a></h3>
<img src="img/nike/4.png" />
<h3> <a name="p1">產品5</a></h3>
<img src="img/nike/5.png" />
<!-- 設定“回傳頂部”的錨點點擊可以迅速回傳最頂部 -->
<h3 align="right"><a href="#top">回傳頂部</a></h3>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/191079.html
標籤：其他