前端三剑客 HTML+CSS+JavaScript ③ HTML标准结构

生活没有任何意义,这就是活着的理由,而且是唯一的理由

                                                                                —— 24.4.22

一、HTML注释

1.特点

        注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见

2.作用

        对代码进行解释和说明

3.写法

        <!--

                xxxxx

        -->

<html><head><title>第一个网页 一切都会好的 我一直相信</title></head><body><marquee><!-- CTRL+/进行注释 -->一切都会好的! 我一直相信! 一定~</marquee></body>
</html>

ctrl+/ 添加/取消注释

4.注释不可以嵌套

二、HTML文档声明

1.作用

        告诉浏览器当前网页的版本

2.写法

        旧写法:要依网页所用的HTML版本而定写法有很多

        (具体参考:W3C官网的文档说明)

        新写法:W3C推荐使用HTML5写法

                文档声明:<!DOCTYPE html> 大小写都可以
                <!DOCTYPE html>    

3.注意:

        文档声明要放在网页的第一行,且在html标签的外侧

<!-- h5的文档声明 -->
<!DOCTYPE html>	
<html><head><title>第一个网页 一切都会好的 我一直相信</title></head><body><marquee><!-- CTRL+/进行注释 -->一切都会好的! 我一直相信! 一定~</marquee></body>
</html>

三、HEML字符编码 

1.计算机对数据的操作

        存取时,对数据进行:编码

        读取时,对数据进行:解码

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

3.字符集有很多,常见的有:

4.使用原则是怎样的?

        原则1:存储时,务必采用合适的字符编码

        否则:无法存储,数据会丢失!编码错误不可挽救

        原则2:存储时采用哪种方式编码,读取时就必须采用相同的方式解码

        否则:数据能呈现,但数据错乱(乱码)可以挽救——将解码方式更换为正确的解码方式

浏览器如何解码?

绝大多数浏览器如果没有声明则自动按照utf-8进行解码

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

<head><meta charset="UTF-8"/>
</head>
<!-- h5的文档声明 -->
<!DOCTYPE html>	
<html><head><!--charset字符集--><meta charset="UTF-8"><title>HTML注释</title></head><body><marquee loop="3"><!-- CTRL+/进行注释 -->一切都会好的! 我一直相信! 一定~<input type="text"></marquee></body>
</html>

 四、HTML设置语言

1.主要作用:

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

        ② 有利于搜索引擎优化

2.具体写法:

<html lang="zh-CN">

3.拓展知识

lang属性的编写规则

①第一种写法(语言-国家/地区),如:

        zh-CN:中文-中国大陆

        zh-TW:中文-中国台湾

        zh:中文

        en-US:英语-美国

        en——GB:英语-英国

②第二种写法(语言-具体种类)已不推荐使用,如:

        zh-Hans:中文-简体

        zh-Hant:中文-繁体

③W3School上的说明

④W3C官网上的说明

<!-- h5的文档声明 -->
<!DOCTYPE html>	
<!--HTML设置语言-->
<html lang="zh-CN"><head><!--charset字符集--><meta charset="UTF-8"><title>HTML设置语言</title></head><body><marquee>I love you</marquee></body>
</html>

 五、HTML标准结构

1.标准结构如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="text">
</body>
</html>

输入,随后回车即可快速生成标准结构

(生成的结构中,有两个meta标签,我们暂时用不到,可以先删掉)

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

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

设置默认的语言

将图标放在网页文件夹内

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

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

相关文章

上位机图像处理和嵌入式模块部署(树莓派4b使用pcl点云库)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 图像处理&#xff0c;大家都知道它有显著的优点和缺点。优点就是分辨率高&#xff0c;信息丰富。缺点就是&#xff0c;整个图像本身没有深度信息。…

高效可扩展,使用Dask进行大数据分析

大家好&#xff0c;Dask技术作为并行计算领域的创新力量&#xff0c;正在重塑大数据的处理模式。这项开源项目为Python语言带来了强大的并行计算能力&#xff0c;突破了传统数据处理在扩展性和性能上的瓶颈。 本文将介绍Dask的发展历程、架构设计&#xff0c;并分析其在大数据…

maven exec plugin启动springboot应用并且change port更改端口(多模块)

<!--在子模块的pom中添加--><plugin><groupId>org.codehaus.mojo</groupId><artifactId>exec-maven-plugin</artifactId><version>3.2.0</version> <configuration><executable>java</executable><arg…

Vue中的 keep-alive 实现原理

Vue中的 keep-alive 实现原理 keep-alive 用法实现原理源码展示源码分析 keep-alive 用法 官方文档&#xff1a;keep-alive 的用法 keep-alive 的作用&#xff1a;主要用于保留组件状态或避免重新渲染。keep-alive 包裹动态组件时&#xff0c;会缓存不活动的组件实例&#xff0…

常用推理框架介绍

vLLM GitHub链接&#xff1a;https://github.com/vLLM/vllm优势&#xff1a;利用CPU的向量化指令集实现推理加速&#xff0c;适合在没有强大GPU资源的场景下使用。选择建议&#xff1a;如果你主要使用CPU进行推理&#xff0c;或者希望在不依赖GPU的情况下获得较好的性能&#…

Nacos服务注册中心

1.引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency>2.application.properties中配置 # 应用名称 spring.application.namenacos-aserver…

【再探】设计模式-设计原则

设计原则是在编写程序时引导程序员遵循的一些原则和准则。这些原则旨在提高代码的可读性、可维护性、可扩展性和可重用性。 可读性&#xff1a;理解和沟通的难易程度。可维护性&#xff1a;修改和调整的难易程度。可扩展性&#xff1a;应对未来变化的能力。可重用性&#xff1…

接收区块链的CCF会议--SecureComm 2024 截止5.10 附录用率

会议名称&#xff1a;SecureComm CCF等级&#xff1a;CCF C类会议 类别&#xff1a;网络与信息安全 录用率&#xff1a;2022年录用率33%&#xff08;43/130) Topics Security and privacy in computer networks (e.g., wired, wireless, mobile, hybrid, sensor, vehicular,…

UI5:面向企业级应用的JavaScript框架

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

时间默认显示当前日期及系统时间

要将 xtdsSj 绑定到当前日期和系统时间&#xff0c;你可以在组件的 data 中初始化 xtdsSj 属性为当前日期及系统时间的字符串。然后&#xff0c;在组件创建时更新 xtdsSj&#xff0c;确保它始终显示当前日期和系统时间。 1.系统读数时间默认显示当前日期及系统时间 <templa…

斯坦福HAI年度报告增加AI4S;美阿贡国家实验室与日本最大综合研究机构建立合作;催化剂加获得深势科技未知金额投资

AI for Science 企业动态速览—— Cota Healthcare 与赛诺菲达成合作 腾讯牵头共建医疗影像国家新一代人工智能开放创新平台 催化剂加获得深势科技未知金额投资 TetraScience 与 Google Cloud 合作促进科学人工智能创新 美国阿贡国家实验室和日本理化学研究所签署谅解备忘录…

ng反向代理 conf配置

log_format szxw_timed_combined $remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for" $request_time $upstream_response_time;#外部转发 …

15.Nacos服务分级存储模型

服务跨集群调用问题&#xff1a; 服务调用尽可能的选择本地集群的服务&#xff0c;跨集群调用延迟较高。 本地集群不可访问的情况下&#xff0c;再去访问其他集群。 如何配置集群的实例属性&#xff1a; spring: cloud:nacos:server-addr: localhost:8848 #nacos服务端地址d…

JMeter--逻辑控制器--仅一次控制器

仅一次控制器&#xff08;Once Only Controller&#xff09; 可以让控制器内部的逻辑只执行一次&#xff1b;单次的范围是针对某一个线程&#xff0c;无论线程外面迭代多少次或者里面循环多少次&#xff0c;均只执行一次&#xff1b;单次控制器一般可用于登陆&#xff…

springCloud是什么,怎么创建

Spring Cloud是一个微服务框架&#xff0c;它为微服务架构开发提供了全套的分布式系统解决方案。它利用Spring Boot的开发便利性&#xff0c;简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等。Spring Cloud并没有…

findImg找图工具

findImg 安装 npm install findImg -g 启动 findImg run 介绍 找出当前目录下的所有图片&#xff08;包括svg的symbol格式&#xff09;在浏览器中显示出来 源码 https://github.com/HuXin957/find-img 场景 例如前端项目中的img目录&#xff0c;大家都在往里面放图片&#xff…

java接口自动化测试

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

实验3 7段数码管译码器动态显示

实验目的: 1、构建基于verilog语言的8位7段断数码管的驱动实验; 2、掌握数码管的数显原理。 3、完成如下功能:8位数码管循环显示0123456789。 实验内容及步骤: 一、实验原理 1、数码管结构 当数码管特定的段加上电压后,这些特定的段就会发亮,以形成我们眼睛看到的…

那些早期的iax和SIP软电话软件界面,看看你见过几个?

目录 一些iax/sip软电话UI图片SIP软电话的界面怎么设计SIP软电话的功能有哪些 早期voip发展中&#xff0c;很多公司开发了自己的SIP软电话&#xff0c;有些已经不存在了&#xff0c;有些还在使用中&#xff0c;比如X-Lite&#xff0c;Zoiper等等&#xff0c;我们一起看看这些早…

Linux文本处理三剑客:awk、grep和sed

Linux文本处理三剑客&#xff1a;awk、grep和sed的完美结合 在Linux世界里&#xff0c;文本处理是一项至关重要的任务。无论是日常的系统管理还是复杂的软件开发&#xff0c;都需要对文本数据进行提取、过滤和转换。Linux为我们提供了三款强大的文本处理工具&#xff1a;awk、…