HTML 入门

HTML 简介

1. 什么是 HTML？

全称：HyperText Markup Language（超文本标记语言）。

超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。

标 记：文本要变成超文本，就需要用到各种标记符号。

语 言：每一个标记的写法、读音、使用规则，组成了一个标记语言。

2. 相关国际组织（了解）

1. IETF

全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。官网：IETF | Internet Engineering Task Force

2. W3C

全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。共计发布了200多项技术标准和实施指南，对互联网技术的发展和应用起到了基础性和根本性的支撑作用，官网：W3C

3. WHATWF

全称：Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）成立于2004年，是一个以推动网络HTML 5 标准为目的而成立的组织。由Opera、Mozilla基金会、苹果， 等这些浏览器厂商组成。官网：Web Hypertext Application Technology Working Group (WHATWG)

HTML 入门

1. HTML 初体验

  1. 第一步：鼠标右键 => 新建 => 文本文档 => 输入内容，并保存。

  2. 第二步：修改后缀为 .html ，然后双击打开即可。

  3. <!--这里的后缀名，使用 .htm 也可以，但推荐使用更标准的 .html 。-->

  4. 程序员写的叫 源代码，要交给浏览器进行渲染。

  5. 借助浏览器看网页的 源代码，具体操作： 在网页空白处：鼠标右键 ==> 查看网页源代码

2. HTML 标签

  1. 标签 又称 元素，是HTML的基本组成单位。

  2. 标签分为：双标签 与 单标签 （绝大多数都是双标签）。

  3. 标签名不区分大小写，但推荐小写，因为小写更规范。

  4. 双标签：

  1. 单标签：

  1. 标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进：

3. HTML 标签属性

  1. 用于给标签提供 附加信息。可以写在：起始标签 或 单标签中，形式如下：

  1. 有些特殊的属性，没有属性名，只有属性值，例如：

<input disabled>

  1. 注意点：

  1. 不同的标签，有不同的属性；也有一些通用属性。

  2. 属性名、属性值不能乱写，都是W3C规定好的。

  3. 属性名、属性值，都不区分大小写，但推荐小写。

  4. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。

  5. 标签中不要出现同名属性，否则后写的会失效，例如：

4. HTML 基本结构

  1. 在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择“检查”。

  2. 【检查】 和 【查看网页源代码】的区别：

    1. 【查看网页源代码】看到的是：程序员编写的源代码。

    2. 【检查】看到的是：经过浏览器 “处理” 后的源代码。

      备注：日常开发中，【检查】用的最多。

  3. 网页的 基本结构 如下：

    1. 想要呈现在网页中的内容写在 body 标签中。

    2. head 标签中的内容不会出现在网页中。

    3. head 标签中的 title 标签可以指定网页的标题。

    4. 图示：

    5. 代码：

      <html><head><title>网页标题</title></head><body>......</body>
</html>

5. HTML 注释

  1. 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。

  2. 作用：对代码进行解释和说明。

  3. 写法

        <!-- 这是注释 -->
  1. 注释不可以嵌套，以下这么写是错的（反例）。
        <!--我是一段注释<!-- 我是一段注释 -->-->

6. HTML 文档声明

  1. 作用：告诉浏览器当前网页的版本。

  1. 写法：

    • 旧写法：要依网页所用的HTML版本而定，写法有很多。

      具体有哪些写法请参考 ：W3C官网-文档声明（了解即可）

    • 新写法：一切都变得简单了！W3C 推荐使用 HTML 5 的写法。

            <!DOCTYPE html>或<!DOCTYPE HTML>或<!doctype html>

  1. 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

7. HTML 字符编码

  1. 计算机对数据的操作：

    • 存储时，对数据进行：编码。

    • 读取时，对数据进行：解码。

  1. 编码、解码，会遵循一定的规范 —— 字符集。

  2. 字符集有很多中，常见的有（了解）：

    1. ASCII ：大写字母、小写字母、数字、一些符号，共计128个。

    2. ISO 8859-1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。

    3. GB2312 ：继续扩充，收录了 6763 个常用汉字、682个字符。

    4. GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文。

    5. UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用

  1. 使用原则是怎样的？

    原则1：存储时，务必采用合适的字符编码 。

    否则：无法存储，数据会丢失！

    原则2：存储时采用哪种方式编码 ，读取时就采用哪种方式解码。

    否则：数据错乱（乱码）！

  1. 总结：

  • 平时编写代码时，统一采用 UTF-8 编码（最稳妥）。

  • 为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码。

        <head><meta charset="UTF-8"/></head>

8. HTML 设置语言

  1. 主要作用：

    让浏览器显示对应的翻译提示。

    有利于搜索引擎优化。

  1. 具体写法：

        <html lang="zh-CN">

  1. 扩展知识： lang 属性的编写规则（了解即可）。

    1. 第一种写法（ 语言-国家/地区 ），例如：

      zh-CN ：中文-中国大陆（简体中文）

      zh-TW ：中文-中国台湾（繁体中文）

      zh ：中文

      en-US ：英语-美国

      en-GB ：英语-英国

    2. 第二种写法（ 语言—具体种类）已不推荐使用，例如：

      zh-Hans ：中文—简体

      zh-Hant ：中文—繁体

9. HTML标准结构

  • HTML标准结构如下：

        <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我是一个标题</title></head><body></body></html>

  • 在VScode中输入 ! ，随后回车即可快速生成标准结构。

  • 配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制。

  • 在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/821370.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java面试之线程八锁

java面试之线程八锁

所谓的“线程八锁”&#xff0c;其实就是考察 synchronized 锁住的是哪个对象 情况1&#xff1a;12 或 21情况2&#xff1a;1s后12&#xff0c;或 2 1s后 1情况3&#xff1a;3 1s 12 或 23 1s 1 或 32 1s 1情况4&#xff1a;2 1s 后 1情况5&#xff1a;2 1s 后 1情况6&#xff…
阅读更多...
PLC扩展更自由，钡铼IOy系列模块实现DI/DO/AI/AO任意组合

PLC扩展更自由，钡铼IOy系列模块实现DI/DO/AI/AO任意组合

随着工业自动化的不断发展&#xff0c;PLC&#xff08;可编程逻辑控制器&#xff09;作为工业控制领域的核心设备&#xff0c;扮演着至关重要的角色。而钡铼IOy系列模块作为PLC的重要扩展设备&#xff0c;不仅实现了DI&#xff08;数字输入&#xff09;、DO&#xff08;数字输出…
阅读更多...
nodejs读取并计算指定文件的MD5哈希值

nodejs读取并计算指定文件的MD5哈希值

读取并计算指定文件的MD5哈希值 /*** 读取并计算指定文件的MD5哈希值* param {string} file - 文件路径* returns {void} 不返回任何值&#xff0c;但会打印出文件的MD5哈希值*/ const fs require(fs); // 引入文件系统模块 const crypto require(crypto); // 引入加密模块 …
阅读更多...
Scala之List

Scala之List

列表 不可变列表(List) 在Scala中&#xff0c;通过List来定义不可变列表&#xff0c;需要注意的是&#xff0c;List本身是一个抽象类&#xff0c;所以并不能直接使用List来构建对象&#xff0c;需要使用它的伴生对象来构建 package com.fesco.listimport scala.::object ListD…
阅读更多...
代码随想录训练营第三十五期|第天16|二叉树part03|104.二叉树的最大深度 ● 111.二叉树的最小深度● 222.完全二叉树的节点个数

代码随想录训练营第三十五期|第天16|二叉树part03|104.二叉树的最大深度 ● 111.二叉树的最小深度● 222.完全二叉树的节点个数

104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 递归&#xff0c;可以前序遍历&#xff0c;也可以后序遍历 前序遍历是backtracking 下面是后序遍历的代码&#xff1a; /*** Definition for a binary tree node.* public class TreeNode {* int val;* …
阅读更多...
TOP100 二分法

TOP100 二分法

写在前面&#xff1a;二分法用在有序序列上 1.35. 搜索插入位置 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示…
阅读更多...
Ubuntu20从0开始选择合适版本手动安装cuda，torch-geometric，jax

Ubuntu20从0开始选择合适版本手动安装cuda，torch-geometric，jax

一个全新的ubuntu20台式机&#xff0c;在Additional Drivers安装nvidia-470-server&#xff08;一开始安装450&#xff0c;cunda版本只能到11.0&#xff0c;torch有些库用不了&#xff0c;可以直接切换点击Apply Changes重启就行&#xff09; nvidia-smi查看CUDA Version可到…
阅读更多...
全球最新国内外18个热门风景视频素材网站推荐

全球最新国内外18个热门风景视频素材网站推荐

寻找最新的高清风景视频素材&#xff1f;这里有国内外共18个热门网站&#xff0c;精心整理供您选择。 国内资源&#xff1a; 蛙学网&#xff1a;免费提供多种无版权视频素材&#xff0c;资源丰富。新GG网&#xff1a;需QQ登录&#xff0c;提供丰富的视频模板&#xff0c;通过…
阅读更多...
【数据库】MVCC

【数据库】MVCC

MVCC是一种用来解决读写冲突的无锁并发控制&#xff0c;也就是为事务分配单项增长的时间戳&#xff0c;为每个修改保存一个版本&#xff0c;版本与事务时间戳关联&#xff0c;读操作只读该事务开始前的数据库的快照 MVCC&#xff0c;全称Multi-Version Concurrency Control&am…
阅读更多...
vue快速入门（十七）v-model数据双向绑定修饰符

vue快速入门（十七）v-model数据双向绑定修饰符

注释很详细&#xff0c;直接上代码 上一篇 新增内容 v-model.trim 自动去除首尾空格v-model.number 自动转换成数字类型 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" con…
阅读更多...
kubelet的作用

kubelet的作用

1、节点管理 定时向api server汇报本节点的信息状态&#xff0c;资源使用状态&#xff0c; 2、pod管理 负责维护节点pod的生命周期&#xff0c;创建、更新、删除容器 3、容器健康检查 kubelet会定期调用容器中的探针来检测容器是否存活、就绪&#xff0c;来进行对应的操作…
阅读更多...
基于ADB的Scrcpy实现电脑控制手机

基于ADB的Scrcpy实现电脑控制手机

Scrcpy是一个开源的&#xff0c;基于ADB&#xff08;Android 调试桥&#xff09;的手机到电脑上的投屏操控的实现&#xff0c;本文将介绍如何搭建开发环境&#xff0c;使得在Windows系统中去控制投屏的安卓手机。 1. 安装投屏软件 下载Scrcpy软件到电脑上&#xff0c;该软件中…
阅读更多...
贪心算法--购买股票

贪心算法--购买股票

给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格。 在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候 最多 只能持有 一股 股票。你也可以先购买&#xff0c;然后在 同一天 出售。 返回 你能获得的 最大 利润 。 示例 1&a…
阅读更多...
YoloV9实战：从Labelme到训练、验证、测试、模块解析

YoloV9实战：从Labelme到训练、验证、测试、模块解析

模型实战 训练COCO数据集 本次使用2017版本的COCO数据集作为例子&#xff0c;演示如何使用YoloV8训练和预测。 下载数据集 Images: 2017 Train images [118K/18GB] &#xff1a;http://images.cocodataset.org/zips/train2017.zip2017 Val images [5K/1GB]&#xff1a;htt…
阅读更多...
【电控笔记2.2】电流回路+延迟效应

【电控笔记2.2】电流回路+延迟效应

延迟效应的来源以及影响 数字控制系统的delay： 5.4节有介绍T0=0.5TS 低通滤波器的时间常数？ 滤波器的传递函数与性能参数
阅读更多...
【多线程】阻塞队列 | put()方法 | take()方法 | 生产者-消费者模式 |实现阻塞队列

【多线程】阻塞队列 | put()方法 | take()方法 | 生产者-消费者模式 |实现阻塞队列

文章目录 阻塞队列1.生产者-消费者模式生产者消费者模型的意义&#xff1a;1.解耦合2.削峰填谷&#xff1a; 2.阻塞队列的使用BlockingQueue 3.实现阻塞队列唤醒&#xff1a;使用阻塞队列实现生产者消费者模型 阻塞队列 阻塞队列是一种特殊的队列&#xff1a; 1.是线程安全的。…
阅读更多...
Vue 阶段练习：记事本

Vue 阶段练习：记事本

将 Vue快速入门 和 Vue 指令的学习成果应用到实际场景中&#xff08;如该练习 记事本&#xff09;&#xff0c;我们能够解决实际问题并提升对 Vue 的技能掌握。 目录 功能展示 需求分析 我的代码 案例代码 知识点总结 功能展示 需求分析 列表渲染删除功能添加功能底部统计…
阅读更多...
网络—DAY4

网络—DAY4

思维导图 多进程并发服务器 #include<myhead.h> #define SER_IP "192.168.122.56" #define SER_PORT 8888 void handler(int signo) {if(signoSIGCHLD){while(waitpid(-1,NULL,WNOHANG)>0);} } int main(int argc, char *argv[]) {//将SIGCHLD信号与处理…
阅读更多...
项目中，如何写 readme.md 文件 | 写项目总结

项目中，如何写 readme.md 文件 | 写项目总结

tips&#xff1a;注意写 1. readme文件&#xff1a;①项目文档&#xff08;项目需求和设计文档、项目系统架构和技术文档、接口文档&#xff09;、②项目结构、③启动项目。具体结构见下文。 2. 项目总结&#xff1a;技术栈、描述、主要工作&#xff01;&#xff01;需求及功…
阅读更多...
MySQL常见故障现象分析及解决办法

MySQL常见故障现象分析及解决办法

一、背景 MySQL作为广泛使用的关系型数据库管理系统&#xff0c;在日常使用中难免会遇到各种故障。本文将通过一个具体的案例&#xff0c;分析MySQL常见的故障现象&#xff0c;并提供相应的解决办法和代码示例。 二、故障现象 某企业使用的MySQL数据库服务器近期出现以下问题…
阅读更多...
最新文章

Copyright @ 2022~2023