前端三剑客 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.hqwc.cn/news/640282.html

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

相关文章

Python中的设计模式与最佳实践

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python中的设计模式与最佳实践 在软件开发中&#xff0c;设计模式是一种解决常见问题的经过…

触摸数字化未来形态,挖掘企业持续性发展的数智秘诀

近日&#xff0c;由北大创新评论、百望云联合主办的2024数字商业创新论坛在北京大学中关新园隆重召开。 来自北京大学、国家能源、国家电投、首钢集团、中兴通讯、山东担保、华为云等机构与企业的知名学者、行业大咖&#xff0c;从政策引领、技术深化、风险合规、案例研讨等角度…

街道社区信息宣传工作做的好这个投稿方法不能少

作为一名刚刚接手街道社区信息宣传工作的新人,伊始对于如何有效地向各大媒体平台投稿我可谓是一头雾水。那时的日子充满了曲折与挑战,每一步都似乎布满了荆棘。为了让更多居民了解社区的工作动态和服务亮点,我怀揣着满腔热情,着手撰写一篇篇生动详实的新闻稿件。然而,投稿的过程…

清华新突破,360°REA重塑多智能体系统:全方位提升复杂任务表现

引言&#xff1a;多智能体系统的新篇章——360REA框架 在多智能体系统的研究领域&#xff0c;最新的进展揭示了一种全新的框架——360REA&#xff08;Reusable Experience Accumulation with 360 Assessment&#xff09;。这一框架的提出&#xff0c;不仅是对现有系统的一次重大…

redis面试题——项目中怎么用的

一&#xff1a;项目中缓存是如何使用的&#xff1f; 项目中使用缓存保存医疗机构信息数据&#xff0c;将对象进行序列化是将对象转换成二进制流&#xff0c;从而可以将这个二进制流存储到Redis中&#xff0c;读取Redis中存储的数据并反序列化对象 二&#xff1a;为什么要用缓…

docker学习第一步:基于Linux安装docker

要求Linux下的CentOS 7.0 以上的版本 01、安装docker版本仓库 1、设置仓库 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 2、稳定仓库 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo 02、安装及使用…

每日OJ题_其它背包问题④_力扣96. 不同的二叉搜索树(卡特兰数)

目录 力扣96. 不同的二叉搜索树 解析代码 力扣96. 不同的二叉搜索树 96. 不同的二叉搜索树 难度 中等 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1…

GitOps 和 DevOps 有什么区别?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

IP地址定位:揭秘精准定位的技术与应用

在数字化时代&#xff0c;IP地址已成为连接互联网世界的关键标识之一。但是&#xff0c;很多人对于IP地址的精准定位能力存在疑虑。本文将深入探讨IP地址定位的技术原理以及其在实际应用中的精确度。 IP地址查询&#xff1a;IP数据云 - 免费IP地址查询 - 全球IP地址定位平台 …

京东商品详情数据采集API接口|附京东商品数据返回PHP多语言高并发

京东获得JD商品详情 API 返回值说明 item_get-获得JD商品详情 API测试 注册开通 jd.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址…

Linux--uboot移植(二)

修改uboot以匹配开发板的方式有两种&#xff0c;一种是在NXP原厂开发板i.MX 6ULL EVK的文件上进行修改&#xff0c;另一种仿造NXP的开发板文件&#xff0c;添加自己的开发板文件。 为了能更多的了解uboot&#xff0c;我们使用代码改动较大的第二种方式进行uboot的移植。 在修…

Python环境找不到解决方法

Python环境找不到 打开设置&#xff1a;Ctrl Alt S 添加Local Interpreter... 打开System Interpreter&#xff0c;找到本地安装的Python.exe路径&#xff0c;然后一路点OK Trust Project 如果打开工程时&#xff0c;出现如下对话框&#xff0c;请勾选 Trust projects in ...&…