HTML新手上路

最新推荐文章于 2024-08-02 10:25:30 发布

tqmorningstar

最新推荐文章于 2024-08-02 10:25:30 发布

阅读量1.2k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/tqmorningstar/article/details/111087415

版权

思维导图

新手上路

案例

案例一（常用标签）

<!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>

案例的代码可能写的不大好，有啥错误的地方也希望大家能够指出来哈。
在学习这门技术时候，我们不需要去死记硬背那些标签，我们应该多去练习、应用、理解这些标签，在之后的编码过程中才能运用的得心应手。希望以上的内容能够对你有帮助。

tqmorningstar

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
HTML新手上路

思维导图案例案例一（常用标签）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>啊吧</title> <base target="_self"></head><body bgcolor="AliceBlue" ><div align="center"> <form ac
复制链接

扫一扫