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

news2024/11/16 23:36:48

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

                                                                                —— 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.coloradmin.cn/o/1615338.html

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

相关文章

【Web】2022DASCTF X SU 三月春季挑战赛 题解(全)

目录 ezpop calc upgdstore ezpop 瞪眼看链子 fin#__destruct -> what#__toString -> fin.run() -> crow#__invoke -> fin#__call -> mix.get_flag() exp <?php class crow {public $v1;public $v2;}class fin {public $f1; }class what {public $a; }…

grafana安装篇(1)

目录 grafana概念&#xff1a; 它具有以下主要特点&#xff1a; Grafana 常用于以下场景&#xff1a; 环境介绍&#xff1a; 前置环境&#xff1a; (1)保证可以连接外网 (2)防火墙和selinux已关闭 1.下载安装grafana10.0.1-1rpm包 2.启动grafana 3.浏览器访问 3.设置…

android学习笔记(五)-MVP模式

1、MVP模式demo的实现&#xff0c;效果下&#xff1a; 2、创建一个Fruit类&#xff1a; package com.example.listview; //Fruit类就是Model&#xff0c;表示应用程序中的数据对象。 public class Fruit {private int imageId;private String name;private String price;publi…

TFTLCD原理硬件介绍

介绍 TFT LCD&#xff08;薄膜晶体管液晶显示器&#xff09;是一种广泛使用的显示技术&#xff0c;它结合了薄膜晶体管&#xff08;TFT&#xff09;和液晶显示&#xff08;LCD&#xff09;技术。TFT LCD的主要特点是使用TFT矩阵来控制施加到每个像素的电压&#xff0c;从而实现…

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

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

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

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

扫描工具nmap

介绍 说到黑客&#xff0c;知识就是力量。您对目标系统或网络的了解越多&#xff0c;可用的选项就越多。因此&#xff0c;在进行任何利用尝试之前&#xff0c;必须进行适当的枚举。 假设我们获得了一个 IP&#xff08;或多个 IP 地址&#xff09;来执行安全审计。在我们做任何…

Linux使用Docker部署DashDot访问本地服务器面板

文章目录 1. 本地环境检查1.1 安装docker1.2 下载Dashdot镜像 2. 部署DashDot应用 本篇文章我们将使用Docker在本地部署DashDot服务器仪表盘&#xff0c;并且结合cpolar内网穿透工具可以实现公网实时监测服务器系统、处理器、内存、存储、网络、显卡等&#xff0c;并且拥有API接…

牛客NC233 加起来和为目标值的组合(四)【中等 DFS C++、Java、Go、PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/7a64b6a6cf2e4e88a0a73af0a967a82b 解法 dfs参考答案C class Solution {public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可*** param nums int整型…

【从浅学到熟知Linux】进程间通信之匿名管道方式(进程间通信方式汇总、匿名管道的创建、匿名管道实现进程池详解)

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 进程间通信介绍如何实现进程间通信进程间通信分类 管道通信方式什么是管道匿名管道pipe匿名管道读写规则管…

TQZC706开发板教程:编译zynq linux内核2019_R1

您需要下载对应版本的Linux系统文件以及IMG1.3.1镜像文件。为了方便您的操作&#xff0c;本文所使用的所有文件以及最终生成的文件&#xff0c;我都已经整理并放置在本文末尾提供的网盘链接中。您可以直接通过该链接进行下载&#xff0c;无需在其他地方单独搜索和获取。希望这能…

spring aop介绍

Spring AOP&#xff08;面向切面编程&#xff09;是一种编程范式&#xff0c;它允许开发者将横切关注点&#xff08;cross-cutting concerns&#xff09;从业务逻辑中分离出来&#xff0c;从而提高代码的模块化。在传统的对象导向编程中&#xff0c;这些横切关注点&#xff0c;…

Vue2进阶之Vue2高级用法

Vue2高级用法 mixin示例一示例二 plugin插件自定义指令vue-element-admin slot插槽filter过滤器 mixin 示例一 App.vue <template><div id"app"></div> </template><script> const mixin2{created(){console.log("mixin creat…

MySql 安装教程+简单的建表

目录 1.安装准备 1.MySQL官方网站下载 2.安装步骤 3.测试安装 4.简单的建表 1.安装准备 1.MySQL官方网站下载 下载安装包或者压缩包都可以 选择相应版本&#xff0c;点击Download开始通过网页下载到本地&#xff08;压缩包下载快一些&#xff09; 2.安装步骤 双击此.exe…

c++ - 类与对象 - explicit关键字 | static成员 | 友元 | 内部类 | 匿名对象

文章目录 一、 explicit关键字二、static成员三、友元四、内部类五、匿名对象 一、 explicit关键字 1、隐式类型转换 再进行隐式类型转换是会产生一个临时变量tmp,再用临时变量进行赋值。 如&#xff1a; double d 1.2; //再用 d 给 i 进行赋值时&#xff0c;会进行隐式类型…

面向对象设计与分析40讲(25)中介模式、代理模式、门面模式、桥接模式、适配器模式

文章目录 门面模式代理模式中介模式 之所以把这几个模式放到一起写&#xff0c;是因为它们的界限比较模糊&#xff0c;结构上没有明显的差别&#xff0c;差别只是语义上。 这几种模式在结构上都类似&#xff1a; 代理将原本A–>C的直接调用变成&#xff1a; A–>B–>…

探索RadSystems:低代码开发的新选择(二)

系列文章目录 探索RadSystems&#xff1a;低代码开发的新选择&#xff08;一&#xff09;&#x1f6aa; 文章目录 系列文章目录前言一、RadSystems Studio是什么&#xff1f;二、用户认证三、系统角色许可四、用户记录管理五、时间戳记录总结 前言 在数字化时代&#xff0c;低…

HoloLens2的Unity应用在电脑上发布成安装包,然后通过wifi安装到设备

一、VS工程中的鼠标右键 二、发布——>创建应用程序包 三、选择【旁加载】 四、选择签名方法&#xff1a; 五、选择和配置包 六、创建完毕 七、网络连接设备 八、登录设备 九、安装app

基于springboot实现的摄影跟拍预定管理系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven…

OpenHarmony实战开发-合理选择条件渲染和显隐控制。

开发者可以通过条件渲染或显隐控制两种方式来实现组件在显示和隐藏间的切换。本文从两者原理机制的区别出发&#xff0c;对二者适用场景分别进行说明&#xff0c;实现相应适用场景的示例并给出性能对比数据。 原理机制 条件渲染 if/else条件渲染是ArkUI应用开发框架提供的渲…