HTML新手上路
日期： 2020-12-13 分类： 跨站数据测试 408次阅读
思维导图
案例
- 案例一（常用标签）
<!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>
案例的代码可能写的不大好，有啥错误的地方也希望大家能够指出来哈。
在学习这门技术时候，我们不需要去死记硬背那些标签，我们应该多去练习、应用、理解这些标签，在之后的编码过程中才能运用的得心应手。希望以上的内容能够对你有帮助。
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
标签：html
上一篇： 心得小体会
精华推荐