前端——HTML標籤(2)

<!-- 表格 
	table起始 
	tr一行
	td一列 寫數據用其
	(1)border屬性用來定義邊框寬度(外部表格邊框)
	(2)<th> 定義屬性名 表頭標籤在table下寫,每一列屬性的名字
	(3)空單元格使用 佔位:如果單元格無內容可用佔位符代替
    (4)<caption>定義標題:緊接在table之下,自動居中

 html超鏈接:
    <a>:一個字,一組詞,圖片
     href指明另一個網頁的
    target屬性:表示鏈接頁面從何處顯示,默認在本頁面打開
         _blank重新開一個頁面顯示
    <name>屬性:
 	使用name屬性創建HTML頁面的書籤,可以本頁面也可以是別的頁面,可選擇對讀者可見或不可見。
 	使用錨點時可直接回到指定位置


 	圖像標籤:<img>要使用源屬性src,圖像的地址
    alt屬性:預定義文本,當瀏覽器無法加載圖片時,用預定義的文字替換

    background定義背景圖片,html頁面的標籤,<background="圖片地址">
-->
<!DOCTYPE html>
<html>
<head>
	<title>啦啦啦</title>
	<meta charset="utf-8">
</head>
<body background="C:\Users\lenovo\Desktop\1.png">
	<p>圖片背景</p>
	<table border="5">
		<caption>table教程</caption>
		<th>Java課程</th>
		<th>教室信息</th>
		<th>養生指南</th>
		<tr>
			<td>Java從入門到精通</td>
			<td>JS從入門到精通</td>
			<td>佛性入門指南</td>
		</tr>
		<tr>
			<td>501教室</td>
			<td>啥都沒有</td>
			<td> </td>
		</tr>
	</table>


	<a href="https://www.baidu.com" target="_blank">百度</a>
	<p> 陪考家長等待參加首場考試的孩子。中新社記者 沙見龍 攝
 
中新社記者走訪擁有重慶多所重點高中的沙坪壩區發現,臨近考場附近的賓館房間早在10天前就已訂滿。除了快捷酒店 和普通賓館,五星級酒店也加入了高考房的銷售。 </p>
 
<p>
	<a name="tips"></a>
	“高考期間的入住率能趕上旺季的節假日。”沙坪壩一家星級酒店前臺工作人員告訴記者,除了每年都會推出的高考 房,今年他們還推出了“高考套餐”:包含兩晚八餐的食宿服務,同時配備專車接送考生。
 
“這個套餐是今年纔開始推的,高考期間賣出了20多套。”該工作人員說,一個月前已經有不少家長打電話或上門諮詢高 考套餐的情況,“今年明顯覺得家長對高考房的配套上要求高了,所以我們也推出多樣化的產品滿足不同的需求”。</p>
 <a href="#tips">跳轉到錨點</a>
 <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>


 <img src="https://justtalk.oss-cn-shanghai.aliyuncs.com/image/%E7%9F%B3%E5%8E%9F.jpg">
<!--  相對路徑 -->
<img src="1.png">
<!-- 絕對路徑 -->
<img src="C:\Users\lenovo\Desktop\1.png">
<img src="sadfhg" alt="替換文本">
</body>
</html>
<!-- HTML表單 
	<form>元素:用於收集用戶輸入
		<input>元素:
		  文本輸入:type=“text”用於單行文本輸入
		  單選按鈕type=“radio”check屬性爲選擇默認值
		  提交按鈕:type="submit"
		     屬性action定義在提交表單時定義的動作,默認當前頁面
		   method屬性
		      get請求會把用戶請求的數據顯示在地址欄,
		      一般提交表單用POST請求,地址欄不會顯示提交的數據,而是放在屬性欄中,大小沒有限制
		   name屬性:若想要被正確提交,必須每個輸入字段必須設置name屬性

		<fieldset>用於組合表單數據
			<legend>用於定義標題

	    <select>表單元素:用於下拉列表
	    <textarea>	
	    多行輸入,保留文檔中的縮進和換行
	    <button>可定義點擊的按鈕
HTML5新增元素
      <checkbox>複選框

-->
<!DOCTYPE html>
<html>
<head>
	<title>表單</title>
	<meta charset="utf-8">
</head>
<body>
	<form>
		username<br>
		<input type="text" name="username"><br>
		password<br>
		<input type="password" name="password">

		<p>請選擇你的性別</p>
		<input type="radio" name="sex" value="男" checked="">男<br>
		<input type="radio" name="sex" value="女">女
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		firstName<br>
		<input type="text" name="firsName"><br>
		lastName<br>
		<input type="text" name="lastName"><br>
		<input type="submit">
	</form>

	<form>
		<fieldset>
			<legend>personName</legend>firstName<br>
			<input type="text" name="firstName"><br>
			lastName<br>
			<input type="text" name="lastName"><br>
			<input type="submit" >
		</fieldset>
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<select name="cars"> 
			<option value="Benz">奔馳</option>
			<option value="BMW">寶馬</option>
			<option value="Audi">奧迪</option>
			<option value="Ford">福特</option>
		</select>
		<br><br>
		<input type="submit">
	</form>

	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<textarea name="message" rows="10" cols="30">
			今天在501上課
			很憂傷
			沒投影真累
		</textarea>
		<br><br>
		<input type="submit">
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<button type="button" οnclick="alert('hello world')">瘋狂點我</button>
	</form>


	<form>
		<input list="cars">
		<datalist id="cars">
		<option value="Benz"></option>
		<option value="Audi"></option>
		<option value="BMW"></option>
		<option value="Ford"></option>
		</datalist>
		<input type="submit">
	</form>

	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="checkbox" name="vhicle" value="bike"> I have a bike!<br>
		<input type="checkbox" name="vhicle" value="car"> I have a car!
		<br>
		<input type="submit" name="">
	</form>

   <!-- E可以輸入,其他字母不可以 -->
	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="number" name="quantity"min="1" max="5">
		<input type="submit" name="">
	</form>



	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="date" name="date" min="1997-01-01" max="2020-01-01">
		<input type="submit" name="">
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="color" name="color">
		<input type="submit" name="">
	</form>

	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		<input type="email" name="email">
		<input type="submit" name="">
	</form>


	<form action="http://www.w3school.com.cn/demo/demo_form.asp" method="get">
		FirstName<br>
	<!-- readonly 只讀框 -->
		<input type="text" name="FirstName" value="lll" readonly>
	    <br>
	<!-- disabled 禁用框 -->
	<input type="text" name="FirstName" value="lll" disabled>
	<br>
	<br>
	<!-- 對輸入的text做限制:最大輸入長度 -->
	<input type="text" name="FirstName" maxlength="11">
	<br>
	</form>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章