前端基礎 基本元素 文字格式相關的元素 使用a標籤新增超連結和錨點 列表相關元素 使用img元素新增圖片 表格相關元素 iframe元素 contentEditable hidden
阿新 • • 發佈：2018-12-24
1、基本元素
html:定義文件的根元素
head:定義文件的頁面頭部分
title:定義頁面標題
body:定義頁面的主體部分
h1-h6:定義標題一到六
p:定義段落插入
br:插入一個換行符
hr:定義水平線
div:定義文件中的節
span:跟div基本相似，區別是span只是表示一段一般性文字，預設不會換行
<!DOCTYPE html> <html> <head> <title>基本元素</title> </head> <body> 這是h1-h6,預設換行不用加換行 <h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6> 輸出一條直線 <hr/> 使用三個span標籤，span標籤預設不會換行 <span>這是第一個span標籤</span><span>這是第一個span標籤</span><span>這是第一個span標籤</span> 使用三個div標籤，div標籤預設是換行的 <div>這是第一個div標籤</div><div>這是第一個div標籤</div><div>這是第一個div標籤</div> 使用三個p標籤，p標籤預設是換行的 <p>這是第一個p標籤</p><p>這是第一個p標籤</p><p>這是第一個p標籤</p> </body> </html>
效果演示
2、文字格式相關的元素
b:定義粗體文字
i:定義斜體文字
em:定義強調文字
strong:定義粗體文字
sup:定義上標文字
sub:定義下表文字
bdo:定義文字顯示方向
<!DOCTYPE html> <html> <head> <title>基本元素</title> </head> <body> <span><b>加粗文字</b></span><br/> <span><i>斜體文字</i></span><br/> <span><b><i>粗斜體文字</i></b></span><br/> <p><strong>加粗文字</strong></p> <small><span>小號字型文字</span></small> <div>普通文字<sup>上標文字</sup></div> <span><strong><sub>下標加粗文字</sub></strong></span><br/> <bdo dir="ltr">從左向右排列的文字</bdo> <bdo dir="rtl">從右向左排列的文字</bdo> </body> </html>
效果演示
3、使用a標籤新增超連結和錨點
a標籤的重要屬性
href：指定連結所連結的另一個資源
hreflang:超連結所在連結的文件所使用的語言
target:點選連結時，新連結開啟一個新視窗還是在原來視窗開啟
（ _self:自身 _blank:新視窗）
<!DOCTYPE html> <html> <head> <title>基本元素</title> </head> <body> <a href="http://www.baidu.com" target="_self">這是一個百度連結在自身的頁面開啟</a><br/> <a href="http://www.baidu.com" target="_blank">這是一個百度連結在一個新的頁面開啟</a><br/> <a href="http://www.baidu.com"><img src="" alt="這是一個圖片"></a><br/> <a href="summarize.html">開啟文字格式化元素</a> </body> </html>
此外
a標籤還可以生成一個命名錨點，命名錨點用於在HTML頁面中生成一個定位點，這樣允許超連結直接連結到指定頁面的該定位點
插入定位錨點需要指定name屬性，name屬性值就是該錨點的名稱
<!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
</head>
<body>
<a name="test">這是一個錨點</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#test">點選定位到錨點</a>
<a href="summarize.html#test">點選定位到錨點</a>
</body>
</html>
為了方便演示我這裡加了很多換行符，定義name值就是你要定位到的位置。連結的方式用兩種。第一種 a href="#test" 第二種 a href=“xxx.html#test” (其中test是name值)
跳轉到指定位置（也就是定義name值的位置）
效果展示不太明顯，需要自己親在打一下試試
4、列表相關元素
ul:定義無序列表
ol:定義有序列表
reversed:該屬性指定是否將排序反轉
li:定義列表項
dl:用於定義術語列表
dt:定義標題列表項
dd:定義普通列表項
<!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
</head>
<body>
定義無序列表
<ul>
<li>這是無序列表的列表項</li>
<li>這是無序列表的列表項</li>
<li>這是無序列表的列表項</li>
</ul>
定義有序列表
<ol>
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
</ol>
<ol reversed = "ture">
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
</ol>
<ol start="3">
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
</ol>
<ol type="a">
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
<li>這是有序列表的列表項</li>
</ol>
</body>
</html>
5、使用img元素新增圖片
src:該屬性指定圖片檔案所在的位置，該屬性既可以是相對路徑也可以是絕對路徑
ale:該屬性指定一段文字，該文字將作為圖片的提示資訊
height:指定圖片的高度
width:指定圖片的寬度
map:用於定義圖片的對映，該元素需要包含一個或者多個area子元素，每個area子元素定義到一個區域，不同區域可連結到不同的URL
area:用於定義圖片對映的內部區域
*shape:指定該內部區域是哪種區域，該屬性的預設值"rect"矩形區域；除此之外還可以是circle和poly，分別代表圓形區域和多邊形區域
*coords:指定多個座標確定區域位置。
<!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="test.jpg" width="150" height="150" alt="這是一張圖片"/></a>
</body>
</html>
建立分割槽連結圖片
主要定義usemap，ismap用來獲得點選座標
<!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
</head>
<body>
定義圖片，使用指定的圖片對映
<img src ="test.jpg" width="100" height="100" border="0" usemap="#test"/><br/>
定義圖片對映
<map name="test" >
<area shape="circle" coords="11,11,15" href="http://www.baidu.com" alt="這是一張圖片">
</map>
</body>
</html>
加上ismap獲得點選圖片的座標
6、表格相關元素
caption:用於定義表格標題
tr:定義表格行
td:定義表格單元
colspan:指定此單元格跨多少列
rowspan:指定此單元格可橫跨的行數
7、iframe元素
<!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
</head>
<body>
<iframe src="summarize.html" width="200" height="120"></iframe>
</body>
</html>
8、contentEditable
<!DOCTYPE html>
<html>
<head>
<title>基本元素</title>
</head>
<body>
<div contentEditable="true" style="width:500px;border:1px solid black">
<table style="width:420px;border-collapse:collapes;"border="1">
<tr>
<td>你真帥</td>
<td>你真帥</td>
</tr>
<tr>
<td>你真好</td>
<td>你真好</td>
</tr>
</table>
<table id="target" ondblclick="this.contentEditable=true;" style="width:420px;border-collapse:collapes" border="1">
<tr>
<td>你真厲害</td>
<td>你真厲害</td>
</tr>
<tr>
<td>你真厲害</td>
<td>你真厲害</td>
</tr>
</table>
</div>
</body>
</html>
9、hidden
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> hidden屬性 </title>
</head>
<body>
<div id="target" hidden="true" style="height:80px">
文字內容
</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!target.hidden;">顯示/隱藏</button>
</body>
</html>
10、啟動釋放
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 可自由拖動的Div </title>
</head>
<body>
<div id="source" style="width:80px;height:80px;
border:1px solid black;
background-color: #bbb;"
draggable="true">瘋狂軟體教育</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function(evt)
{
// 讓拖動操作攜帶資料
evt.dataTransfer.setData("text/plain" , "www.fkjava.org");
}
document.ondragover = function(evt)
{
// 取消事件的預設行為
return false;
}
document.ondrop = function(evt)
{
source.style.position = "absolute";
source.style.left = evt.pageX + "px";
source.style.top = evt.pageY + "px";
// 取消事件的預設行為
return false;
}
</script>
</body>
</html>
