HTML学习笔记1（基础知识）

已于 2023-06-02 16:15:39 修改
阅读量33 收藏
点赞数
分类专栏： 菜鸟网站之路 文章标签： html 学习 笔记
于 2023-06-02 16:05:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YanMCui/article/details/131009022
版权

<!--

    1. vscode常用设置

        1.1 打开文件

            1）文件 -- 打开

            2）直接拖拽

       

        1.2 新建文件

            1）右键新建

            2）文件名称右侧 -- +

        1.3 自动保存（ctrl + s）

            1）左下角设置

   

    2. 常用快捷键 eclipse插件

        2.1 自动补全代码

        2.2 标签自动补全 tab按键/回车

        2.3 复制多行 复制当前行：ctrl + alt + 向下键

        2.4 删除当前行ctrl + D

        2.5 注释|取消注释 ctrl + /

        2.6 多行注释|取消注释 ctrl + shift + /

        2.7 统一编辑 按住alt

        2.8 超多行定义 如p*50

        2.9 快捷文字 如p{}

        2.10 打开浏览器 右键Open in default Browser

            快捷键alt + b

        2.11 打开浏览器控制台

            1）F12

            2）右键菜单 -- 检查

            3）ctrl + shift + i

   

    3. 三种语言

        HTML：网页中的内容，比如：图片，文字，视频，搜索框。

        CSS：网页的样式，比如：文字颜色，大小，图片大小，位置等。

        JavaScript：轮播图，编码逻辑。

    4. HTML介绍

        4.1 简介

            HTML：超文本标记语言

            作用：写网页结构内容 如：图片、文字、视频等

            文件后缀：.html 或者 .htm

       

        4.2 标签/标记/元素 <>中包括的关键词

            HTML由标签组成

            标签是尖括号包含的关键词，如：<p><b><dir>

            分类 双标记/单标记

            双标记：又名封闭类型标记之间可以写任何内容。<p>内容</p>

            单标记：又名空标记，非封闭类型标记，无内容。<meta>

        4.3 HTML版本及浏览器

            H5，解析HTML代码，查看网页效果

       

        4.4 HTML属性

            作用：用于修饰HTML标签。

            语法：属性 = "属性值" 双标记写在开始标记中，一个标签可以有多个属性，多个属性之间用空格隔开，不区分前后

            例子：<p style="" class =""></p>

       

        4.5 HTML语法

            HTML不区分大小写，推荐小写

            HTML忽略多余的空格

            HTML由浏览器解析执行，从上往下，从左向右

        4.6 网页标题

    5.网页标题

        5.1 六个标题

        <h1></h1>

        <h2></h2>

        <h3></h3>

        <h4></h4>

        <h5></h5>

        <h6></h6>

        网页垂直显示，内容居左切加粗。推荐使用2~5标题。推荐一个网页最多只有一个一号标题。

        了解：align="" 设置标签内容的水平对齐方式。默认left。可以取值center或者right。

    6.段落 <p></p>

    7.换行 <br>

    8.水平线 <hr>

-->

<!DOCTYPE html>

<!-- html文档开始 -->

<html lang="en">

<head>

    <!-- meta提供文档级别的元数据，用于传达信息 -->

    <!-- 1.字符集 如utf-8 编码 -->

    <!-- 2.name属性：元数据的名称 content：元数据的内容 -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 适配移动端 -->

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

    <meta name="description" content="html基本结构讲解">

    <meta name="keywords" content="关键字,有利于SEO,可以被搜索引擎搜索到">

    <title>网页标题</title>

</head>

<body>

    <!-- 标题h$*6 -->

    <h1 align="right">watermelon爱你们</h1>

    <h2>watermelon爱你们</h2>

    <h3>watermelon爱你们</h3>

    <h4>鸡你太美！！</h4>

    <h5>鸡你太美！！</h5>

    <h6>鸡你太美！！</h6>

    <!-- 段落 -->

    <p>这么冷的天</p>

    <p align="center">这么冷的天</p>

    <p align="right">这么冷的天</p>

    <!-- 组合 -->

    <h3 align="center">云升大哥</h3>

    <p align="center">这么冷的天！</p>

    <p align="center">别理我那么远！</p>

    <!-- 组合 -->

    <h3 align="center">鸡你太美</h3>

    <p align="center">蔡徐坤最帅！</p>

    <p align="center">迎面走来的你让我蠢蠢欲动！</p>

    <!-- 换行 -->

    <p>这么冷的天！<br>

        别理我那么远！</p>

    <!-- 水平线 -->

    <p>这么冷的天！<hr color = "red" width="1500" size="50">

        别理我那么远！</p>

   

    <img src="https://developer.huawei.com/images/new-content/HMS-Core/arengine/image_pad_main-banner.jpg?__scale=w:200,h:121,t:2" alt="">

   

</body>

</html>


 

猫漆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python基础知识点总结
学Python的小白！
08-25 7万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
html基础知识学习笔记分享
04-09
下面将详细讲解HTML的一些基础知识。 1. **文档类型声明**： `<!DOCTYPE>` 用来告诉浏览器文档遵循的HTML版本。例如，`<!DOCTYPE html>` 表示遵循HTML5标准。 2. **HTML标签**： - `<html>`：整个HTML文档的根...
【学习笔记】网络安全基础知识总结
HERODING23的博客
03-06 7498
网络安全基础知识总结前言一、网络安全概述1.1 引言1.2 密码学的发展1.3 密码学基础1.4 对称密码1.4.1 数据加密标准DES二、数论知识2.1 数论基础2.2 有限域2.2.1 群2.2.2 环2.2.3 域2.3 数论入门2.3.1 素数2.3.2 费马定理2.3.3 欧拉定理2.3.4 中国剩余定理三、网络安全进阶3.1 多重加密3.1.1 双重DES3.1.2 三重DES3.1.3 AES3.2 分组密码的工作模式3.2.1 电子密码本模式（ECB）3.2.2 密文分组链接模式（CBC）3
学习HTML的知识点总结
Zrf2191318455的博客
11-01 2763
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
区块链基础知识【1】学习笔记
weixin_44826468的博客
11-17 3606
学习地址：https://www.bilibili.com/video/BV1gt411T7Tq 1 区块链概念 狭义：区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构，并以密码学方式保证的不可篡改和不可伪造的分布式账本。 常规理解：一条链，链上有好多区块，区块里面数据不能改。 2 区块链发展背景：比特币 2.1 解决问题 （1）高度自治 （2）无国界贸易 （3）不可篡改(交易数据，一旦完成 不可篡改) （4）隐私安全(比特币不用提交真实姓名和用途) 2.2 去中心化模型（点对
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 6271
JavaScript基础语法学习笔记，视频教程链接放在末尾
HTML常用知识点总结笔记
果冻
07-01 6374
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
嵌入式学习笔记——STM32硬件基础知识
qq_41954556的博客
03-04 6842
STM32开发前必备硬件基础
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3615
Web前端学习笔记（1）
JS学习笔记——入门基础知识总结
bxqm111的博客
07-11 2264
前言 基础背景知识 一、产生历史： 二、特点： 三、应用方向： 四、Javascript组成： JavaScript书写使用方式 一、行内式（了解即可，项目中不使用，日常练习尽量不用） 二、内嵌式 三、外链式 学习笔记链接 1、Javascript由来及书写方式【本篇】 2、数据类型与简单运算 3、选择语句if、switch及练习题 4、循环语句while、dowhile、for及练习题 5、函数、预解析、作用域 6、数组、冒泡排序、选择排序
JAVA基础学习大全（笔记）
热门推荐
Frank---7的博客
12-22 9万+
JAVASE和JAVAEE的区别 JDK的安装路径 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-perPRPgq-1608641067105)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201222001641906.png)] 卸载和安装JDK [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYnXvbAn-1608641067107)(C:\Users
html学习笔记1 基础标签
05-25
以下是 HTML 学习笔记 1 - 基础标签的知识点总结。 声明标签 * `<!DOCTYPE html>`：声明 HTML 文档的开始，用于声明 HTML 版本，写于最前面的 HTML 标签之前。 HTML 基础结构 * `<html lang="zh-CN">`：定义 ...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
JavaScript基础知识学习笔记
10-25
以上只是JavaScript基础知识的一部分，深入学习JavaScript还需要理解更多高级概念，如模块系统、Promise和async/await、模板字符串、ES6及后续版本的新特性等。对于初学者来说，逐步掌握这些知识，结合实践操作，将...
javascript学习笔记（一）基础知识
10-25
总的来说，JavaScript的基础知识包括但不限于语法、变量、数据类型、运算符、流程控制和函数等，这些都是编写JavaScript程序的基础。通过深入理解和熟练掌握这些知识点，开发者可以构建出功能丰富的交互式网页和应用...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 502
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
HTML最快速最简单
07-08 295
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 402
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
最新发布
weixin_73074505的博客
07-08 270
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
前端基础学习总结（看大佬文章）
12-02
在前端基础学习过程中，我通过阅读一些大佬的文章，深入了解了前端开发的基础知识和技能。这些文章包括对HTML、CSS、JavaScript等语言的介绍和应用，以及对前端工程化、性能优化、移动端开发等领域的探讨。通过阅读...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值