1.2.HTML的核心標籤

時間  2019-12-08
標籤 1.2.html html 核心 標籤 欄目 HTML 简体版
原文   原文鏈接

HTML的核心標籤css

1.HTML頭標籤

序號 標籤 標籤解釋
1 <head> 定義關於文檔的信息
2 <title> 定義文檔標題
3 <base> 定義頁面上全部連接的默認地址或默認目標
4 <link> 定義文檔和外部資源的關係
5 <meta> 定義關於html文檔的元數據
6 <script> 定義客戶端腳本
7 <style> 定義文檔的樣式信息html

1）使用Editplus定義一個html的模板文件
新建模板文件**.html，將模板文件放在editplus目錄下
配置一下。工具/配置用戶工具/模板/添加/應用
文件/新建下便可看見該模板算法

Head標籤、tittle標籤和base標籤的用例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>New Document</title>
<base href="http://www.imeixue.cn">
<base target="_blank">
</head>
<body>
測試一把

東方求敗

西方求勝

南方求水

</body>瀏覽器

</html>工具

2.DOCTYPE標籤

<!DOCTYPE html >，目前基本上是此標籤
該標籤必須放在最前面，處於<html>標籤以前
用於告知瀏覽器文檔使用哪一種html規範
若是此標籤不存在，文檔能夠正常解析，主要看瀏覽器的解析方式，和版本測試

3.關於文本顯示的幾個標籤

P
font字體

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>關於文本格式的標籤</title>
</head>
<body>
<!--段落標籤-->
<p>你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！2017/2/12
<span style="color:#F00">nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!</span>
</p>
<!--font標籤，不用，使用css來控制其樣式spa

使用css基本語法是：style="屬性:屬性值;屬性:屬性值;屬性:屬性值;屬性:屬性值;屬性:屬性值;"
 查找位置：W3C/css/字體

-->
<span style="font-size:34px;color:red;font-weigt:bold;font-style:italic;font-family:'華文新魏';">窗前明月光！</span>code

</body>htm

</html>

文本其它標籤

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>文本和格式</title>
</head>
<body>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<!--若是但願更大或更小字體-->
<p style="font-size:200px">標題4</p>
<p style="font-size:2px">標題5</p>

hello，word！

abc100


<!--顯示一段代碼-->
<!--格式化標籤-->
<pre>
function sayHello()
{ 
window.alert("ok");

}
</pre>

a2+b2=100;


a2+b2=200;

</body>

</html>

在後面一個頁面中設置一個返回的超連接，點擊返回後返回原頁面

4.字符的實體

案例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>New Document</title>
</head>
<body>

©

< <

> >

& &

" 「」

<!--空格注意：&nbsp；全角的空格-->
  空格

' 　　　　　　　　　　　　　　　　‘ ，

'

</body>

</html>

注意的細節：字符的實體區分大小寫

5.超連接標籤

基本的用法：文字，圖片
超連接和錨點技術

案例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>超連接和錨點技術</title>
</head>
<body>
<!--href屬性指定跳轉到哪裏
target標示是當前頁面打開仍是在新窗口打開
_self,在本頁面打開窗口
_top，替換整個窗口
--href路徑的指定：絕對路徑，http://www.baidu.com/aaa/bbb....
--href路徑的指定：相對路徑，
-->
老鼠愛大米
</body>

</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h1>老鼠愛大米<h1>


<h6>我聽見你的聲音，有種特別的感受，讓我不斷想，不敢再忘記你........<h6>

</body>
</html>

返回原頁面的操做，在後面一個文檔添加超連接
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h1>老鼠愛大米<h1>


<h6>我聽見你的聲音，有種特別的感受，讓我不斷想，不敢再忘記你........<h6>

返回
</body>
</html>

同一頁面創建錨點
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>超連接和錨點技術</title>
</head>
<body>
<!--href屬性指定跳轉到哪裏 target標示是當前頁面打開仍是在新窗口打開 _top
--href路徑的指定：絕對路徑，http://www.baidu.com/aaa/bbb....
--href路徑的指定：相對路徑，
-->
老鼠愛大米
查看具體信息
</body>




























































































































<p name="a" id="a">這是具體的內容</p>

</html>

跨頁面創建錨點
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>超連接和錨點技術</title>
</head>
<body>
<!--href屬性指定跳轉到哪裏 target標示是當前頁面打開仍是在新窗口打開 _top
--href路徑的指定：絕對路徑，http://www.baidu.com/aaa/bbb....
--href路徑的指定：相對路徑，
-->
老鼠愛大米
老鼠愛大米
查看具體信息
</body>
















<p name="a" id="a">這是具體的內容</p>

</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h1>老鼠愛大米<h1>


<h6>我聽見你的聲音，有種特別的感受，讓我不斷想，不敢再忘記你........<h6>

<p id="flag1" name="flag1">這是test頁面的內容</p>
返回
</body>
</html>

name及id便是錨點名稱
發送電子郵件
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>超連接和錨點技術</title>
</head>
<body>
<!--href屬性指定跳轉到哪裏 target標示是當前頁面打開仍是在新窗口打開 _top
--href路徑的指定：絕對路徑，http://www.baidu.com/aaa/bbb....
--href路徑的指定：相對路徑，
-->
老鼠愛大米
老鼠愛大米
查看具體信息
點擊發送電子郵件
</body>












<p name="a" id="a">這是具體的內容</p>

</html>

6.擴展的知識點

../ 表示上一級目錄
../../ 表示上兩級目錄
./ 表示同一級目錄
相對路徑：由當前文件去找
絕對路徑：由根目錄出發去找
CTRL+J：複製當前這一行

7.圖像標籤

基本的用法
<imag src=」圖片的路徑」 width=」xxpx」 heigth=」xxpx」 alt=」當圖片不能正常顯示時，就顯示該段文字」 title=」標題，當鼠標移動到該圖片時，顯示的文字」>
img是一個單標籤

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖像標籤</title>
</head>
<body>
<!--圖片指定了寬度後，不指定高度，將會稱比例的縮放

1px指邊框的寬度，順序能夠隨意
solid指實
red指邊框顏色
border樣式選擇在css邊框中選擇
tittle：表示鼠標移動會出現的效果
alt：圖片不能正常顯示時，顯示的文字
寬度是固定像素，不會隨窗口變化而變化
寬度是百分比，會隨窗口變化而變化

-->
<img src="./niu.png" width="220px" height="" style="border:1px solid red" title="這是一頭牛，太牛!" alt="的確時候一頭牛！">
<img src="./niu.png" width="30%" height="">
<img src="./niu.png">
<img src="./niu.png">
<img src="./niu.png">
<img src="./niu.png">
<img src="./niu.png">
<img src="./niu.png">
<img src="./niu.png">
</body>

</html>

8.map映射標籤

圖片不一樣區域對應不一樣超連接
基本用法
<imag src=」圖片的路徑」 usemap=」#映射名稱」>
<map name=」映射名稱」 id=」映射名稱」>
<area shap=」circle」 cords=」座標」 href=」」>
<area shap=」rect」 cords=」座標」 href=」」>
</map>

座標體系算法
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>map 案例</title>
</head>
<body>
<img src="./sun.png" usemap="#sun" title="太陽">
<map name="sun" id="sun">

<area shape="rect" coords="0,0,110,260" href="http://www.baidu.com">
<area shape="circle" coords="200,132,10" href="http://www.imeixue.cn" target=」_blank」>

</map>
</body>

</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程