web前端学习Day1

最新推荐文章于 2024-06-02 21:27:33 发布
最新推荐文章于 2024-06-02 21:27:33 发布
阅读量35 收藏
点赞数
文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75408313/article/details/131593946
版权

01-html骨架

<!DOCTYPE html>
<!--声明文档 html  -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    .....
</body>

</html>

02-快速生成+注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!--快速注释：shift+“/”或者shift+alt+a -->
</body>

</html>

03-标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>

<body>
    <!-- 标题标签    h1-h6逐渐变小 -->
    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>

</body>

</html>

04-段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 段落标签 p -->
    <p>ujtdcmjtd</P>
    <p>iydcgjndc</p>
</body>

</html>

05-换行标签、水平线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 水平线 hr/ -->
    <!-- 换行标签 br/ -->
    <hr/>
    <p>ekjwhfui<br/>fkudjuhuithiu</p>
</body>

</html>

06-文本格式化标签

<!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>
    <!-- 
        加粗  strong或b
        斜体  em或i
        划去  del或s
        下划线 nds
    -->
    <p>欢迎来到<strong>MDN学习区</strong>。本系列文章旨在为<b>零基础Web开发初学者提供指导和开始编写网站代码所需的所有内容</b>。</p>
    <p>该教程并不是<em>“从入门到精通”</em>类型的教程，只能让你做到<i style="color: pink;">“从入门到适应”</i>。在此之后，你应该能够以你自己的方式学习MDN的其他内容，并接触到其他中、高级资源。</p>
    <p>从零开始学习Web开发极具挑战性，该教程将为你提供详细的资料，手把手帮助你轻松愉快地学习。
        无论你是正在学习Web开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，亦或是仅仅想了解一点点 Web 技术，我们都希望你能感到宾至如归。</p>
    <del>2999</del>9.9<br/>
    <s>11.0</s>10.0
</body>

</html>

07-无语义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- div 独占一行  多用于布局 -->
    <div>
        efuichlds
    </div>
    <div>
        dsajuhdajkbx
    </div>
    <!-- span 一行可存在多个 -->
    <span>a</span>
    <span>a</span>
</body>

</html>

08-图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- src  指向图片位置 -->
    <!-- ail  图片地址发生错误时，用来提示的字 -->
    <!-- title  鼠标经过时，显示的文字 -->
    <!-- width  宽度 -->
    <!-- height  高度 -->
    <!-- border  框架 -->
    <img src="" alt="" title="" width="" height="" border=""></img>
</body>

</html>

09-视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 
        controls 控件
        autoplay 自动播放
        muted 静音播放
        poster 等待加载时的显示图片
        loop  播放完是否继续
    -->
    <video src="" controls autoplay muted poster=""></video>
</body>

</html>

10-音频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 
        controls 控件
        autoplay 自动播放
        muted 静音播放
        poster 等待加载时的显示图片
        loop  播放完是否继续
    -->
    <audio src="" controls autoplay muted poster=""></audio>
</body>

</html>

11-链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 默认当前窗口打开
        href 跳转网站
        target 换页跳转网站
    -->
    <a href="" target="_blank" ></a>
</body>

</html>

12-锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- id属性------身份证号 -->
    <a href="#one">wehfjbkejw</a>
    <p>cihfrgrv</p>
    <p>sjnoziueda</p>
    <p>ouxsgbiuc</p>
    <p>ciuxygywxz</p>
    <p>xseahgvuazzesx</p>
    <p>iuxwgzeyufvghjxq</p>
    <p>zuiuyfqgtyudwxcy</p>
    <p>uaghhzFyrsdryaxc</p>
    <div id="one">ouixcshaoud</div>
    <p>guojagsbkjax</p>
    <p>iqhsauqjgvksbkhqa</p>
</body>

</html>

13-有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 有序列表 ol -->
    1234
    <ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</body>

</html>

14-无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 无序列表 ul -->
    1234
    <ul type="circle">
        <li>111</li>
        <li>112</li>
        <li>113</li>
        <li>114</li>
    </ul>
</body>

</html>

15-自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>
            10
        <dd>
            1
        </dd>
        <dd>
            2
        </dd>
        </dt>

    </dl>
</body>

</html>

16-iframe框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 框架 iframe 嵌套网站 -->
    主页
    <iframe src="" width="" height="" ></iframe>
</body>

</html>

17-特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 
        空格符    &nbsp;           摄氏度     &deg;
        大于号    &lt;             正负号     &plusmn;
        小于号    &gt;             乘号       &times;
        和号      &amp;            除号       &divide;
        人民币    &yen;            平方       &sup2;
        版权      &copy;           立方       &sup3;
        注册商标   &reg;
     -->
    <div>
        10086 &lt; 10087
    </div>
</body>

</html>

无妄之灾|
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
WEB前端学习 Day 1（DIV＋盒子模型＋CSS文本＋实例）
sdanfy的博客
10-22 6392
关于html，用得最多的就是DIV。所以先把DIV学好，搞懂他的一些特性。其次，文字在一个网页里面也是很重要的，所以先学CSS文本。从html下手，那么，DIV是什么？ DIV就是一个块，在DIV里面又可以放很多块或者别的元素。它就是一个容器。它有面积，它是一个盒子模型。 那么什么是盒子模型，看下面这张图。 可以看到上面部分有margin-top,border-top,padding-to
HY的Web前端周记 Day1
qq_51167539的博客
03-14 2369
HY的Web前端开发周记 Day1 引子 2021.3.04，信息管理创新实践课程开始学习。主要了解了关于HTML、CSS、JavaScript 的基本概念及其用途，并对html基础元素、属性有了一定的了解。运用了HBuilder作为开发环境，在Hbulider上面实践了我们的第一个专属网页：个人自我介绍页。以下是我对本次课程学习的总结。 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML、CSS、JavaScript HTML 超文本标记语言（英语：HyperText Markup Langu
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1315
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
快速学习web前端day1
javfen的博客
02-03 72
自主学习web前端
vito的Web前端学习 Day1（HTML）
vitocool的博客
01-11 315
学习html的基本标签
WEB前端学习日志Day 1
bbbbbbxxx的博客
03-16 1234
WEB前端学习日志网页的组成网页的构成WEB标准计算机语言HTML的发展初次尝试VScode 网页的组成 1.网址（域名） 2.资源存储空间（租用空间）：服务器 3.项目制作：a.规划网站的资源，功能等 b.网站的设计，界面，交互 c.前端设计（承上启下） d.后端 e.联调，测试 f.上线 g.维护 网页的构成 网页的结构：网页中的文字，图片等 网页的表现：网页中的排版，文字的颜色等 网页的...
Web前端作业day1
elementqueen的博客
10-24 548
Web前端作业day1
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3907
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
WEB前端学习日志Day5
bbbbbbxxx的博客
03-20 1137
WEB前端学习日志Day5 今日学习内容总结：通过一天的学习，主要学习了CSS选择符的权重问题，并对css层叠性做解释，也学习了CSS的文本属性，并且初步了解了浮动。 1.CSS选择符的权重 选择符的权重： id > class > 标签 首先通过四个数字表示权重： 内联样式表 -> 1000 id -> 100 class -> ...
Web安全学习day02
weixin_52445990的博客
01-18 2459
CSRF 1.什么是CSRF？ Cross-Site Request Forgery 跨站请求伪造 CSRF概念： CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解： 攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞
vito的Web前端学习_JavaScript_Day1
03-04
vito的Web前端学习_JavaScript_Day1
Web前端.DAY1.mp4
05-16
Web前端.DAY1.mp4
Web前端.DAY1实体.avi
05-16
Web前端.DAY1实体.avi
Web前端.DAY1路径.avi
05-16
Web前端.DAY1路径.avi
Web前端.DAY1关系.mp4
05-16
Web前端.DAY1关系.mp4
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 490
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 489
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 571
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
【JS实战案例汇总——不定时更新版】
微木
05-30 323
练习JS的实用案例，倒计时算法、定时轮播图
web前端实现制作课程表
06-09
{ name: '语文', day: 'monday', start: 1, end: 2, location: '教室A' }, { name: '数学', day: 'tuesday', start: 3, end: 4, location: '教室B' }, // 其他课程的数据 ]; // 遍历数据，将课程信息填充到表格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值