前端-day1

已于 2024-08-06 10:51:15 修改
阅读量156 收藏 5
点赞数 3
分类专栏： 前端 文章标签： 前端
于 2024-08-06 10:50:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlx2513/article/details/140949826
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 标题标签 从低到高，字体逐一变小-->

    <!-- 独占一行 加粗 -->

    <h1>1级标题-h1</h1>

    <h2>2级标题-h2</h2>

    <h3>3级标题-h3</h3>

    <h4>4级标题-h4</h4>

    <h5>5级标题-h5</h5>

    <h6>6级标题-h6</h6>

    <hr>

    <!-- 段落标签 -->

    <p>这句话虽然看似“端水”，其实是提到两个重点。一是孙颖莎当打之年体力和精力都更好，二是陈梦老将沉着，心态上更加稳定。</p>

    <p>而决赛的过程的确也很胶着。先是孙颖莎小胜一局，之后陈梦追回两局，又在孙颖莎扳回一局后连赢两局，才最终成为巴黎奥运会的女单冠军。<p>

    <hr>

    <!-- 换行 -->

    123456

    <br>123

    <br>456

    <br>

    <!-- 分割线 -->

    <hr>

    <!-- 文本格式化标签 -->

    <!-- 第二种方法表示强调突出 -->

    <!-- 加粗 -->

    <b>加粗</b>

    <strong>加粗</strong>

    <!-- 下划线 -->

    <u>下划线</u>

    <ins>下划线</ins>

    <!-- 倾斜 -->

    <i>倾斜</i>

    <em>倾斜</em>

    <!-- 删除线 -->

    <s>删除线</s>

    <del>删除线</del>

    <hr>

    <!-- 图片标签 -->

    <!-- src：图片路径 -->

    <!-- alt：图片未正常显示的文字提示 -->

    <!-- title:共用属性，鼠标悬停时的显示的文字 -->

    <!-- width和height是显示图片的大小；以及若只标一个，另一个自动缩放 -->

    <img src="image/i1.png" alt="sorry" title="鼠标悬停时的显示的文字">

    <br><br><br>

    <img src="image/i1.png" alt="sorry" title="美女" width="20%">

    <img src="image/i1.png" alt="sorry" title="美女" width="20%" height="320px">

    <br><br><br>

    <img src="cat.png" alt="sorry,无法显示">

    <hr>

    <!-- 路径(绝对路径和相对路径) -->

    <img src="G:\image\absolute_path.png" alt="绝对路径" title="绝对路径" width="30%">

    <img src="https://imagepphcloud.thepaper.cn/pph/image/208/130/261.jpg" alt="网络地址图片打不开" title="网络地址" width="30%">

    <!-- 平级或下级:./xx.png or aa/xx.png  or  xx.png -->

    <!-- 上级:../xx.png -->

    <img src="image/i1.png" alt="相对路径" title="相对路径" width="30%">

    <hr>

    <!-- 音频标签 -->

    <!-- src:路径 -->

    <!-- controls:显示播放键 -->

    <!-- autoplay:自动播放(部分浏览器不支持) -->

    <!-- loop：循环播放 -->

    <audio src="audio/bird.mp4" controls autoplay loop></audio>

    <hr>

    <!-- 视频标签 -->

    <!-- src:路径 -->

    <!-- controls:显示播放键 -->

    <!-- autoplay:自动播放(部分浏览器不支持) -->

    <!-- loop：循环播放 -->

    <video src="https://vodpub1.v.news.cn/original/20221016/c1fc2025b1e54e39accc1969c4d13854.mp4" controls autoplay loop></video>

    <hr>

    <!-- 超链接标签 -->

    <!-- href:跳转的地址 -->

    <!-- target="_blank"--打开新的页面 -->

    <!-- target="_self"---覆盖原页面（默认） -->

    <a href="https://www.baidu.com/" target="_blank">打开新的页面，跳转到百度</a>

    <br>

    <a href="https://www.baidu.com/" target="_self">跳转到百度，覆盖原页面</a>


 

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 标题标签 从低到高，字体逐一变小-->
    <!-- 独占一行 加粗 -->
    <h1>1级标题-h1</h1>
    <h2>2级标题-h2</h2>
    <h3>3级标题-h3</h3>
    <h4>4级标题-h4</h4>
    <h5>5级标题-h5</h5>
    <h6>6级标题-h6</h6>

    <hr>

    <!-- 段落标签 -->
    <p>这句话虽然看似“端水”，其实是提到两个重点。一是孙颖莎当打之年体力和精力都更好，二是陈梦老将沉着，心态上更加稳定。</p>
    <p>而决赛的过程的确也很胶着。先是孙颖莎小胜一局，之后陈梦追回两局，又在孙颖莎扳回一局后连赢两局，才最终成为巴黎奥运会的女单冠军。<p>

    <hr>

    <!-- 换行 -->
    123456
    <br>123
    <br>456
    <br>

    <!-- 分割线 -->
    <hr>

    <!-- 文本格式化标签 -->
    <!-- 第二种方法表示强调突出 -->
    <!-- 加粗 -->
    <b>加粗</b>
    <strong>加粗</strong>
    <!-- 下划线 -->
    <u>下划线</u>
    <ins>下划线</ins>
    <!-- 倾斜 -->
    <i>倾斜</i>
    <em>倾斜</em>
    <!-- 删除线 -->
    <s>删除线</s>
    <del>删除线</del>

    <hr>

    <!-- 图片标签 -->
    <!-- src：图片路径 -->
    <!-- alt：图片未正常显示的文字提示 -->
    <!-- title:共用属性，鼠标悬停时的显示的文字 -->
    <!-- width和height是显示图片的大小；以及若只标一个，另一个自动缩放 -->
    <img src="image/i1.png" alt="sorry" title="鼠标悬停时的显示的文字">
    <br><br><br>
    <img src="image/i1.png" alt="sorry" title="美女" width="20%">
    <img src="image/i1.png" alt="sorry" title="美女" width="20%" height="320px">
    <br><br><br>
    <img src="cat.png" alt="sorry,无法显示">

    <hr>

    <!-- 路径(绝对路径和相对路径) -->
    <img src="G:\image\absolute_path.png" alt="绝对路径" title="绝对路径" width="30%">
    <img src="https://imagepphcloud.thepaper.cn/pph/image/208/130/261.jpg" alt="网络地址图片打不开" title="网络地址" width="30%">
    <!-- 平级或下级:./xx.png or aa/xx.png  or  xx.png -->
    <!-- 上级:../xx.png -->
    <img src="image/i1.png" alt="相对路径" title="相对路径" width="30%">

    <hr>

    <!-- 音频标签 -->
    <!-- src:路径 -->
    <!-- controls:显示播放键 -->
    <!-- autoplay:自动播放(部分浏览器不支持) -->
    <!-- loop：循环播放 -->
    <audio src="audio/bird.mp4" controls autoplay loop></audio>

    <hr>

    <!-- 视频标签 -->
    <!-- src:路径 -->
    <!-- controls:显示播放键 -->
    <!-- autoplay:自动播放(部分浏览器不支持) -->
    <!-- loop：循环播放 -->
    <video src="https://vodpub1.v.news.cn/original/20221016/c1fc2025b1e54e39accc1969c4d13854.mp4" controls autoplay loop></video>

    <hr>

    <!-- 超链接标签 -->
    <!-- href:跳转的地址 -->
    <!-- target="_blank"--打开新的页面 -->
    <!-- target="_self"---覆盖原页面（默认） -->
    <a href="https://www.baidu.com/" target="_blank">打开新的页面，跳转到百度</a>
    <br>
    <a href="https://www.baidu.com/" target="_self">跳转到百度，覆盖原页面</a>


</body>
</html>

 

小王在学习了
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3959
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
学习前端-HTML-day01
08-17
学习前端-HTML-day01
自学前端---day 1
weixin_44584059的博客
01-21 8127
第一次，不会标记文本
前端笔记-day07
qyk666的博客
05-20 389
学成在线网站
前端学习--Day03
Cure The World的博客
08-24 3530
1、table的介绍 2、table合并单元格及其他基础标签案例 3、div的介绍 4、块级标签与行内标签的行内块标签的特点以及区别
百度前端实战训练营--day1学习
qq_45969400的博客
01-04 1283
前端学习笔记
前端学习--Day04
Cure The World的博客
08-25 1658
1.css基本概念 2.选择器 3.三种连接方式 4字体相关属性
前端day3-表格
最新发布
wlx2513的博客
08-06 92
【代码】前端day3-表格。
前端学习--Day01
Cure The World的博客
08-22 4302
Web前端基础知识 HBuilder中Chrome无法运行问题 一、Web基本概念 Web：网页、公众号、动画 H5：html5 URL：网络资源的地址 服务器：一个性能比较高（内存大、运行速度快）的电脑，安装了提供服务的软件（Apache，tomcat，ISS，Nginx） 云服务器：阿里云、腾讯云、百度云、华为云 有专门的团队提供维护工作 浏览器：能帮我们打开网页，Google Chrome、IE、火狐 二、标记语言 用各种标签将相关的信息或者关键字包裹起来，方便搜索引擎的抓
前端学习--Day02
Cure The World的博客
08-23 2780
Web前端基础知识 一、
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1356
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
练习前端-HTML标签进阶篇-day02-03
08-19
练习前端-HTML标签进阶篇-day02-03
ylsislove#make-a-little-progress-every-day#前端-CSS选择器优先级1
07-25
声明在样式表或文档中越靠后出现，权重越大。如果样式表中有通过 @import 导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表的所有声明在后。
计算机前端-Web前端.DAY12-.mp4
05-24
计算机前端-Web前端.DAY12-.mp4
计算机前端-Web前端.DAY12-.avi
05-24
计算机前端-Web前端.DAY12-.avi
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 465
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 549
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 305
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
文章相关接口
qq_74474809的博客
08-03 232
跟着黑马程序员学习SpringBoot3+Vue3
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值