HTML5学习笔记1

已于 2023-08-18 16:56:59 修改
阅读量224 收藏
点赞数
分类专栏： 前端 文章标签： html5
于 2023-08-18 08:55:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35484691/article/details/132309049
版权

（1）第一个前端程序（记事本，后缀txt改HTML，用浏览器打开）

<html>
       <head>
              <title>我的第一个网页</title>
       </head>
       <body>
               你好，世界！
       </body>
</html>

（2）需要的工具

1、浏览器：火狐、谷歌（推荐）或IE
2、开发者工具：推荐vscode（打开速度快，而且使用方便）
在这里插入图片描述

（3）vscode打开文件与创建文件

1、选择文件夹
2、拖曳文件夹

（4）vscode插件拓展

1、open in browser
在这里插入图片描述
2、汉化
在这里插入图片描述

（5）生成浏览器文件.html的方法

输入一个叹号“！”然后回车
在这里插入图片描述

（6）vscode常用快捷键

1、代码格式化:Shift +Alt + F
在这里插入图片描述

2、向上或向下移动一行: At + Up 或 At + Down
在这里插入图片描述

3、快速复制一行代码:Shift + Alt + Up 或 Shift + Alt + Down
在这里插入图片描述
4、快速保存: Ctrl + S
5、快速查找:Ctrl + F
6、快速替换:Ctrl + H

HTML5简介与基础骨架

可用来做：网站，小程序，App,数据可视化

在这里插入图片描述

（1）HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言，用HTML5编写的文件，后缀以.html结尾。
HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如:<html> 标签有两种表现形式：
1、双标签，例如:<html></html>
2、单标签，例如:<img>

HTML5的DOCTYPE声明

在这里插入图片描述

（2）HTML5的基本骨架

在这里插入图片描述

HTML标签

在这里插入图片描述

head标签

在这里插入图片描述

body标签

在这里插入图片描述

title标签

在这里插入图片描述

meta标签

在这里插入图片描述

（3）标签之标题

在这里插入图片描述
生成h1~h6的快捷键：h$*6
在这里插入图片描述

正确使用标题

在这里插入图片描述

标题标签位置摆放

在这里插入图片描述
在这里插入图片描述

（3）标签之段落（p）、换行(br)、水平线(hr)

标签之段落

在这里插入图片描述

标签之换行

在这里插入图片描述

  • 注意：p是双标签，br是单标签，<br/>代表结束在这里插入图片描述在这里插入图片描述

标签之水平线

在这里插入图片描述

  • 注意：hr也是单标签
<body>
    <p>我是一个段落标签</p>
    <p> 如果你希望在不产生一个<br/>新段落是情况下换行</p>
    <hr color="" width="" size="" align=""/>    <!--创建水平线-->
    <hr color="blue" width="300px" size="40px">  <!--不设置align默认居中，也可设置为center-->
    <hr color="" width="" size="" align=""/>    <!--创建水平线-->
    <hr color="red" width="300px" size="40px" align="left">
    <hr color="" width="" size="" align=""/>    <!--创建水平线-->
    <hr color="orange" width="300px" size="40px" align="right">
</body>

在这里插入图片描述

标签之图片

在这里插入图片描述
在这里插入图片描述
注意：调整图片大小，一般只规定宽度不规定高度（规定高度容易造成图片失真）

（1）图片的绝对路径

在这里插入图片描述

（2）图片的相对路径

在这里插入图片描述

  • 子级：
    这里是引用在这里插入图片描述
    注：同级关系./可以省略
  • 父级
    在这里插入图片描述
    在这里插入图片描述

（3）图片的网络路径

具体的网络地址如：https://img.zcool.cn/community/01869958648ad7a801219c77b96611.jpg@1280w_1l_2o_100sh.jpg

标签之超文本链接

在这里插入图片描述

超链接属性

在这里插入图片描述

例如：

<body>
    <a href="https://www.bilibili.com/">哔哩哔哩</a>
    <a href="https://www.csdn.net/">CSDN</a>
    <a href="https://www.bilibili.com/">
        <img src="https://i-blog.csdnimg.cn/blog_migrate/7afcb317a6b198b82901e926527064b2.png" width="200px" alt="">
    </a>
</body>

效果如下：
`
哔哩哔哩
CSDN


标签之文本

常用的文本标签

在这里插入图片描述

<body>

    <p>白菜</p>
    <p>我喜欢吃<em>白菜</em></p>
    <i>i白菜</i>
    <b>b白菜</b>
    <strong>strong白菜</strong>
    <span>span白菜</span>
    <del>del白菜</del>

</body>

效果如下：
在这里插入图片描述

  • 注：标签之间可以嵌套。

列表标签之有序列表

有序列表是一列项目，列表项目用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。

<body>

   <ol>
    <li>我们无论遇到什么困难</li>
    <li>勇敢的去面对它</li>
    <li>加油</li>
    <li>奥里给！！！</li>
   </ol>
    
</body>

在这里插入图片描述

type属性

在这里插入图片描述
如下：

   <ol type="I">
    <li>我们无论遇到什么困难</li>
    <li>勇敢的去面对它</li>
    <li>加油</li>
    <li>奥里给！！！</li>
   </ol>

在这里插入图片描述

有序列表嵌套

    <ol type="A">
        <li>我们无论遇到什么困难</li>
        <ol type="a">
            <li>大的困难</li>
            <li>小的困难</li>
        </ol>
        <li>勇敢的去面对它</li>
        <li>加油</li>
        <li>奥里给！！！</li>
    </ol>

在这里插入图片描述

列表标签之无序列表

在这里插入图片描述

<body>

    <ul>
        <li>我们无论遇到什么困难</li>
        <ul>
            <li>大的困难</li>
            <li>小的困难</li>
        </ul>
        <li>勇敢的去面对它</li>
        <li>加油</li>
        <li>奥里给！！！</li>
    </ul>


</body>

在这里插入图片描述
注：无序列表也是可以嵌套的。

type属性

<body>

    <ul type="disc">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>
    <ul type="circle">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>
    <ul type="square">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>
    <ul type="none">
        <li>加油，奥里给</li>
        <li>加油，奥里给给</li>
        <li>加油，奥里给给给</li>
        <li>加油，奥里给给给给</li>
    </ul>


</body>

在这里插入图片描述

无序列表应用场景(应用场景比有序列表广泛)

在这里插入图片描述

无序列表快捷键

快速生成ul+li布局：ul>li*3(数字根据自己需要li的数量修改)
在这里插入图片描述

标签之表格

在这里插入图片描述
表格由“行，列，单元格”组成，单元格的特点是“同行等高，同列等宽”。

注释

单行注释：
在 HTML 中可以使用<!-- -->在代码中添加注释，<!--和-->之间的所有内容都会被视为注释。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head> <!-- head 开始 -->
      <meta charset="UTF-8"> <!-- 当前文档采用UTF-8编码 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>你是最棒的！</title>
</head> <!-- head 结束 -->
<body> <!-- body 开始 -->
      <!-- 一段文本 -->
      <p>单行注释的写法</p>
</body> <!-- body 结束 -->
</html>

多行注释：
多行注释与单行注释的区别并不大，我们只需要保证注释的内容在<!--和-->之间即可，如下所示：

<!--
    多行注释的写法
-->
沐-风_
关注
专栏目录
复制代码
weixin_33756418的博客
03-01 1万+
'use strict'; /** * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px; * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体; */ const win = window; export default win.flex = (baseFontSize...
chatgpt赋能python：Python编程：如何有效地使用复制粘贴
weixin_45566993的博客
06-19 2308
本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。
chatgpt赋能python：Python编程技巧之复制粘贴技巧
虚幻私塾
06-12 2402
当我们在编写Python代码时，复制和粘贴是必不可少的操作。但在复制和粘贴时，我们需要注意格式、缩进和空格等问题。为了解决这些问题，我们可以利用文本编辑器的功能，也可以使用一些工具来处理。希望本文能给您带来一些帮助。本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。
html点击复制功能
最新发布
m0_74229873的博客
09-29 456
🎉 动感弹窗提醒，操作反馈即时呈现 科技感十足，yet简约直观！选课从未如此简单&有趣。我们的课程选择系统全新升级。✨ 智能复制功能，一键获取课程代码。👆 炫酷按钮效果，点击体验超赞。
python复制的代码怎么用,python代码怎么复制粘贴
yuuuuuuuu77的博客
03-09 1134
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取。
python 中的六种“复制”方法，Python零基础入门
一名正义的白帽黑客
01-04 9714
python 中的六种“复制”方法，Python零基础入门
复制网页文本的几种方法
热门推荐
随风潜入夜，不白头
05-30 2万+
1、网页打印预览 需要复制内容的网页 → 按下快捷键【Ctrl+P】或者鼠标右击选择打印 → 弹出打印界面后将内容放大→ 选中文本复制。 2、后台控制法 需要复制内容的网页→ 按下键 F12→ 找到 Console→ 最下面命令行面板中输入 $=0或 $={}→ 回车，就可复制。 3、 JavaScript 代码 需要复制内容的网页→ 清空浏览器地址→ 地址栏输入“javascript:void($={});” → 回车，就可复制。 4、查看网页源代码 需要复制内容的网页→鼠标右击选择【...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
HTML5学习笔记
m0_61721166的博客
03-08 9063
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
HTML5个人学习笔记
05-27
主要包含各个标签（段落、换行、图像），链接，注释，表格，列表，视频，音频等 适用于初学者，有什么不懂的可以私聊
一键复制html demo,适用web端，移动端，微信端，亲测有效
04-01
一键复制html demo,适用web端，移动端，微信端，亲测有效，直接下载直接上手，很方便使用，分享给大家
html中js点击一键复制功能，兼容各大浏览器
11-14
html中js点击一键复制功能，兼容各大浏览器，用了class，调用简单，一个页面可以有多个地方调用
点击复制.html
05-23
在很多推广页面的时候都会用到点击复制触发复制微信号的事件，在此我献上纯手写纯原生的点击复制事件，有需要可下载。
html 5 学习教程笔记.zip
01-01
html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...
HTML+CSS+JavaScript网页特效源代码，面试官都被搞懵了
m0_61043185的博客
03-21 843
);});});var box;b < bl;i < il;
WordPress文章代码高亮添加一键复制代码功能
昔明日
03-29 1014
这篇文章主题君给大家讲解下怎么给WordPress代码高亮添加一键复制，如果看了上一篇文章的朋友应该已经可以实现文章代码高亮效果，如果还没看那篇文章可以点击下面链接去看一看。WordPress代码高亮免插件纯代码实现那么这篇文章就不再讲代码高亮的效果了，直接开始今天的一键复制WordPress教程。
html点击自动复制文本代码,点击网页按钮复制指定代码JS源码
weixin_36374843的博客
06-02 9210
通过点击网页页面上的HTML控件按钮来复制指定代码，在网上搜索了几种，觉得比较好，记下以备查询一、点击复制文本框内容的代码(1)1、直接在text框中实现：2、通过函数实现function jsCopy(){var e=document.getElementById("hdhcms2");//对象是hdhcms2e.select(); //选择对象document.execCommand("Cop...
html页面自动复制代码,自动复制内容到剪切板的隐藏js代码
weixin_39640520的博客
05-31 853
自动复制内容到剪切板的隐藏js代码蓝叶网站设计2021-02-054330评论一串实用的js代码，自动复制内容到剪切板的隐藏js代码，在页面部署自动复制内容代码后，不论电脑还是手机只要用户点击就会自动复制内容到剪切板，偷偷摸摸的就把推广分享代码给复制过去了，很实用的js代码，使用很简单，只需要把代码复制到页面模板中，稍作修改即可使用。$("body").onclic...
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值