目录
一、排版标签
(标题标签、段落标签、换行标签、水平线标签)
1)标题标签
1.文字都加粗
2.文字都有变大,从h1至h6逐渐减小
3.独占一行
4.h系列标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
5.ctrl+D(替换)
2)段落标签
1.段落之间有间隙且独占一行
2.<p>一段文字</p>
<p>我是第一段</p>
<p>我是第二段</p>
<p>我是第三段</p>
3)换行标签
1.文字强制换行显示
2.<br>
<p>我是第一段 这里换行了吗</p>
<p>我是第二段</p>
<p>我是第一段 <br>这里换行了吗</p>
<p>我是第二段</p>
4)水平线标签
1.页面中显示一条水平线
2.<hr>
二、文本格式化标签
(加粗、下划线、倾斜、删除线)
标签1 | 标签2 | 说明 |
b | strong | 加粗 |
u | ins | 下划线 |
i | em | 倾斜 |
s | del | 删除线 |
<b>加粗1</b> <strong>加粗2</strong><br>
<u>下划线1</u> <ins>下划线2</ins><br>
<i>倾斜1</i> <em>倾斜2</em><br>
<s>删除线1</s> <del>删除线2</del>
三、媒体标签
(图片标签、路径、音频标签、视频标签)
1)图片标签
<img src="" alt="">
<img src="./小black羊.gif" alt="这是一只小黑🐏" title="小羊酱">
1.src:标签属性(./: 当前文件夹)
属性注意点: |
1.标签属性写在开始标签内部 |
2.标签上可以同时存在多个属性 |
3.属性之间以空格隔开 |
4.标签名和属性之间必须以空格隔开 |
5.属性之间没有顺序之分 |
2.alt:替换文本(当图片加载失败时,才显示alt文本)
3.title:提示文本(鼠标悬停时显示的文本)
4.width和height(若只设置其中一个,会自动等比例缩放)
2)路径
(绝对路径、相对路径)
1.绝对路径:通常是从盘符开始的路径
2.相对路径:从当前文件开始出发找目标文件的过程(常用)
·同级目录:当前文件和目标文件在同一目录中
方法一:<img src="目标图片.gif">
方法二:<img src="./目标图片.gif">
·下级目录:目标文件在下级目录中
<img src="文件夹/目标图片.gif">
·上级目录
<img src="../目标图片.gif">
3)音频标签(目前支持MP3、Wav、Ogg)
<audio src="./music.mp3" controls></audio>
1.常见属性
属性名 | 功能 |
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
4)视频标签
<video src="./video.mp4" controls></video>
属性名 | 功能 |
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌配合静音muted使用) |
loop | 循环播放 |
四、链接标签
(又称a标签、超链接、锚链接)
<a href="./目标网页.html">超链接</a>
1.当开发网站初期,还不知道跳转地址时,hred的值书写#(空链接)
2.target:控制目标网页的打开形式
<a href="./目标网页.html" target="_blank">超链接</a>
取值 | 效果 |
_self | 默认值 在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
五、综合案例
1)招聘
<body>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验, <b>精通html5/css3/javascript等</b> web开发技术;</p>
<p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
<p>代码风格严谨,能高保真还原设计稿,能兼容各种浏览器;</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
<p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
<p>责任心强,思路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./腾云大厦地图.png" height="270" alt="腾云大厦地图" title="腾云大厦">
</body>
2)跳转
index
<body>
<h1>今日搜索热词</h1>
<hr>
<h2>1.左手右手</h2>
<p>很好听的歌,巴拉巴拉巴拉巴拉。音频示例:<a href="./左手右手.html" target="_blank">左手右手</a></p>
<h2>2.可爱小猫</h2>
<p>可爱小猫,巴拉巴拉巴拉巴拉。视频示例:<a href="./可爱小猫.html" target="_blank">可爱小猫</a></p>
</body>
左手右手
<body>
<h1>左手右手</h1>
<hr>
<h2>歌曲</h2>
<audio src="./左手右手.mp3" controls></audio>
</body>
可爱小猫
<body>
<h1>可爱小猫</h1>
<hr>
<h2>视频</h2>
<video src="./cat-eat.MP4" controls height="400"></video>
</body>