HTML新手上路-有解無憂

思維導圖

新手上路

案例

案例一（常用標簽）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>啊吧</title>
	<base target="_self">
</head>
<body bgcolor="AliceBlue" >
<div align="center">
	<form action="./3.html" method="get">
	<img src="cat.jpg"align="top"width="100"height="100"/><h1>書城</h1>
   <p>用戶名：<input type="test"name="username"/><br/></p>
   <hr/>
   <p>密碼：<input type="password"name="password"/></p>
   <hr/>
   <p>你是男的女的：
   <input type="radio"name="sex"value="男">男
   <input type="radio"name="sex"value="女">女
   </p>
   <p>你的喜歡的書籍
    	<input type="checkbox"name="hobby"value="都市愛情">都市愛情
    	<input type="checkbox"name="hobby"value="武俠小說">武俠小說
    	<input type="checkbox"name="hobby"value="科技科幻">科技科幻
    	<input type="checkbox"name="hobby"value="懸疑恐怖">懸疑恐怖
    </p>
    <p>你所在的城市：
    <select>
        <option value="江蘇">江蘇</option>
    	<option value="重慶">重慶</option>
    	<option value="上海">上海</option>
    	<option value="甘肅">甘肅</option>
    </select>
    </p>
    <p>你的興趣愛好：
     <select multiple="multiple">
     	<option value="干飯">干飯</option>
     	<option value="睡覺">睡覺</option>
     	<option value="學習">學習</option>
     	<option value="玩游戲">玩游戲</option>
     	<option value="看動漫">看動漫</option>
     </select>>
    </p>
    <p>
    	<textarea cols="20" rows="4">
    	  這吊人懶得一批，啥都沒留下來
    	</textarea>
    </p>
    <hr/>
    <p><input type="submit" value="提交"><input type="reset" value="重置"></p>
    <a href="file:///D:/code/2.html">查看更多</a>
	</form>
</div>
</body>
</html>

案例二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>朱</title>
</head>
<body bgcolor="AliceBlue">
	<h1>You are my destiny</h1>
	<img src="image/broken heart.jpg"alt="整夜心碎" usemap="#one">
	<map id="one" name="one">
		<area
		shape="circle"
		coords="400,200,40"
		href="https://www.baidu.com/">
		</area>
	</map>
	<a href="#C1"/>文案一<br/>
	<a href="#C2"/>文案二<br/>
	<a href="#C3"/>文案三<br/>
	<p><font color="black"size="36px"><a name="C1"/>文案一</font></p>
	<p>在我們漫長又短暫的生命里</p>
    <p><font color="black"size="36px"><a name="C2"/>文案二</font></p>
    <p>哪怕萬劫不復</p>
    <p><font color="black"size="36px"><a name="C3">文案三</a></font></p>
    <p>再深沉的愛</p>
    <p>也敵不過性格不合</p>
</body>
</html>

案例三

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="1px">
<tr>
	<td>無限流</td><td>末世</td><td>歷史</td>
</tr>
<tr>
	<td>奶爸</td><td>重生</td><td>科幻</td>
</tr>
<tr>
	<td>種田</td><td>直播</td><td>戰爭</td>
</tr>
</table>

</body>
</html>

案例四

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li><a href=""></a>老憨批</li>
		<li>德瑪西亞</li>
	</ul>
	<ol>
		<li>abc</li>
		<li>aaa</li>
	</ol>
	<dl>
		<dt>今天</dt>
		<dd>today</dd>
		<dt>明天</dt>
		<dd>tomorrow</dd>
		<dt>后天</dt>
		<dd>the day after tommmor</dd>
	</dl>
	X<sub>2</sub>
	X<sup>2</sup>
</body>
</html>

案例的代碼可能寫的不大好，有啥錯誤的地方也希望大家能夠指出來哈，
在學習這門技術時候，我們不需要去死記硬背那些標簽，我們應該多去練習、應用、理解這些標簽，在之后的編碼程序中才能運用的得心應手，希望以上的內容能夠對你有幫助，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/234225.html

標籤：其他

下一篇：Java之系統知識體系的構建