一、常用标签
HTML(Hypertext Markup Language)，超文本标记语言。
超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
常用标签:
doctype：<!doctype html> 网页文档声明
网页注释 注释的意义
html：<html></html> 网页根标签
head：<head></head> 网页属性定义
body：<body></body> 网页内容定义
header：<header></header> 网页头部内容定义
section：<section></section> 网页模块内容定义
footer：<footer></footer> 网页页脚内容定义
<h1>~<h6> 标题标签
<p></p> 段落标签
<div></div> 块标签
<video></video> 视频标签
<audio></audio> 音频标签
<hr/> 风骚的分隔线
<br/> 换行标签
<img src=“”/> 图片标签
<b/i/em/u/del></..> 文本修饰标签
<table></table> 表格标签
<a></a> 超链接标签
<form></form> 表单标签，包含<input></input>、<textarea></textarea>、<select></select>
列表标签 ul / ol / dl
表单元素标签
二、项目案例
1.第一个html页面
<!DOCTYPE html>
<html>
<head>
<!-- title为网页标题标签，唯一可见的，meta设置页面属性，自结束标签
--> <meta charset="utf-8">
<title>徐璐新闻</title>
</head>
<body>
<!--hn，n为1-6为内容标题标签，会换行，为块标签-->
<h1>花花</h1>
<h2>花花/h2>
<h3>花花</h3>
<h4>花花</h4>
<h5>花花</h5>
<h6>花花</h6>
<h7>花花</h7>
<!--p为承载段落的标签，会换行，为块标签-->
<!--b为加粗标签-->
<!--u为下划线强调标签-->
<!--i为斜体标签-->
<!--br/为换行标签，自结束，能换行为块标签，不会换行为行标签-->
<!--del为删除标签-->
<!--span标签承载的是文字，不会换行，为行标签-->
<p><b>出道</b>以来，花花便仿佛乘着风在<u>娱乐圈</u>驰骋，从《***》》到《****》，她总能演到适合自己的角色。<br/>但成名的代价就是所有优缺点会被众人放大审视，她很坦然：“我都以<i>‘打不死的小强’</i>精神调整情绪。
</p>
”这份乐观是<del>不外露的</del>耀眼光芒，带着她走向更宽广的未来。
<!--img标签也是自结束标签，后面的为属性，src表示路径,alt为图片找不到时的提醒文字，title为图片的名字，鼠标悬在图片时可以看到-->
<p>
<img src="C:/Users/admin/Desktop/新建文件夹/1.png" alt="当图片不显示时提示的文字" title="这是一张图片">
</p>
<p>
<!--video 视频标签，src为路径，controls为添加播放控制，autoplay为自动播放-->
<video src="" controls="" autoplay=""></video>
</p>
<p>
<!--video 音频标签，src为路径，controls为添加播放控制，autoplay为自动播放-->
<audio src="" controls="" autoplay=""> </audio>
</p>
<!--div是一个块标签,自己占满一行，具有盒子模型，涉及到布局问题-->
<div>这是一个div</div>
</body>
</html>
2.a链接和锚点
<!DOCTYPE html>
<html>
<head>
<title>a链接和锚点的使用</title>
<style type="text/css">
div {
background: red;
height:1000px;
width: 500px;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- a标签可以通过href链接到某个模块，加#表示页面不会跳转，而是滚动到链接的模块，div一般通过id来定义自己的模块，便于被链接-->
<a href="#zb">好店直播</a>
<a href="#ts">品质特色</a>
<a href="#rm">实惠热卖</a>
<a href="#xh">猜你喜欢</a>
<div id="zb">好店直播</div>
<a href="#zb">好店直播</a>
<a href="#ts">品质特色</a>
<a href="#rm">实惠热卖</a>
<a href="#xh">猜你喜欢</a>
<div id="ts">品质特色</div>
<a href="#zb">好店直播</a>
<a href="#ts">品质特色</a>
<a href="#rm">实惠热卖</a>
<a href="#xh">猜你喜欢</a>
<div id="rm">实惠热卖</div>
<a href="#zb">好店直播</a>
<a href="#ts">品质特色</a>
<a href="#rm">实惠热卖</a>
<a href="#xh">猜你喜欢</a>
<div id="xh">猜你喜欢</div>
</body>
</html>
3.form表单标签
<!DOCTYPE html>
<html>
<head>
<title>表单标签的使用</title>
</head>
<body>
<form action="#" method="get"><!-- form为表单标签，action属性表示输入的数据提交到的地址，若为#表示页面不会跳转，method方法常用两个值get和post，form标签中比较重要的标签有input、textarea和select，其中input类型不同又有很多种用法,form标签中，name属性必不可少 -->
<label for="username">账号:</label>
<input type="text" name="username" placeholder="请输入用户名" /><!-- type为text表示文本类型，placeholder属性可以填写提示文字 -->
<br>
<label for="password">密码:</label>
<input type="password" name="password" placeholder="请输入密码"/><!-- type为password类型时，输入密码后显示黑色圆点，而不是文本 -->
<br>
<label for="">性别:</label>
<input type="radio" name="gender" value="男"/>男<!-- type为radio时表示单选框，注意一定要规定name属性，name相同的为同一组，否则会出现多选 -->
<input type="radio" name="gender" value="女"/>女
<br>
<label for="tel">电话:</label>
<input type="text" name="tel"/>
<br>
<label for="email">邮箱:</label>
<input type="email" name="email" required/><!-- type为email时表示输入的必须为邮箱类型，required表示若输入不为邮箱就会出现错误提示 -->
<br>
<label for="inters">兴趣爱好:</label>
<input type="checkbox" name="inters" value="篮球"/>篮球
<input type="checkbox" name="inters" value="游泳"/>游泳
<input type="checkbox" name="inters" value="跑步"/>跑步
<input type="checkbox" name="inters" value="唱歌"/>唱歌
<input type="checkbox" name="inters" value="看书"/>看书
<br><!-- type为checkbox类型时为多选框，value的值为真实的最终会被提交的数据，后面的表示向客户展示的数据 -->
<label for="url">个人博客:</label>
<input type="url" name="url" required><!-- type为url类型时表示网址，用法同email一样 -->
<br>
<label for="addr">家庭地址:</label>
<select name="addr" id="addr"> <!-- select也是表单标签的一种，表示下拉框，下拉内容通过option标签定义 -->
<option value="-1">请选择家庭所在城市:</option>
<option value="郑州">郑州</option>
<option value="平顶山">平顶山</option>
<option value="洛阳">洛阳</option>
<option value="新乡">新乡</option>
<option value="开封">开封</option>
<option value="周口">周口</option>
<option value="信阳">信阳</option>
<option value="漯河">漯河</option>
<option value="安阳">安阳</option>
<option value="鹤壁">鹤壁</option>
</select> <br>
<label for="intrs">个人描述:</label>
<textarea cols="30" rows="5" placeholder="个人描述"></textarea><!-- textarea表示文本域，也是表单标签的一种，表示多行，可自定义文本域的大小 -->
<br>
<label for="image"></label>
<input type="file" name="image"/><!-- type为file类型，表示可以上传文件 -->
<br>
<label for="submit"></label>
<input type="submit" name="submit" value="注册" /><!-- subimt表示提交 -->
<label for=""></label>
<input type="reset" name="reset" value="重置" / ><!-- reset表示重置 -->
</form>
<button>h5的按钮</button><!-- 只是一个按钮 -->
</body>
</html>
2915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
