前端学习-HTML常用标签及案例练习

269 阅读1分钟

1.HTML文件的固定格式

<!--title标签 命名标题-->
<title>网页标题</title>

2.常用标签

<!-- h1-h6标签 <h1>标题</h1>从大到小-->

<!-- p标签 显示大段文本 -->
<p>文本</p>

<!-- div标签 用于组合块级元素 效果上和p一样,主要用于页面上区域划分-->
<div>这是一个div</div>

<!-- img标签 图片 src图片地址 alt若加载不出,则显示alt中的内容-->
<img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt="图片丢失">

<!-- ..表示跳出当前html所在文件夹-->
<img src="../img/1.jpg" alt="图片丢失">

<!-- a标签 添加超链接 href指向超链接地址 -->
<a href="https://www.taobao.com/"><p> 超链接 </p></a>

<!-- video视频标签 src视频地址绝对/相对路径 controls可播放-->
<video controls src="../img/video.mp4"></video>

<!-- audio音频标签 -->
<audio controls src="../img/audio.wav"></audio>

<!-- input输入框 type设置输入类型:text获取文本,color选择颜色,number,range,date,time,url,email等-->
<input type="text">
<input type="color">
<input type="number">
<input type="range">
<input type="date">

<!--锚点链接 不跨页-->
<a href="#link">点击跳转</a>
<a id="link">跳转到此处</a>

<!--锚点链接 跨页-->
<a href="要跳转的页面名称.html" target="_blank">点击跳转</a>

3.仿百度首页

只用了学到的这些标签