一、常用标签
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>