一、HTML

一、基础概念

        1、浏览器相关知识

        这五个浏览器市场份额都非常大,且都有自己的内核。 

        什么是内核:
        内核是浏览器的核心,用于处理浏览器所得到的各种资源。
        例如,服务器发送图片、视频、音频的资源,浏览器就需要使用内核来进行处理这些资源。内核处理完这些资源之后,我们才能看到页面。这五大浏览器都有自己的内核。

        五大浏览器,四大内核。不在这五个之中的统称为其他浏览器。其他浏览器就是在上述的内核的基础上,加上了一些精美的UI界面,实用的小功能等等。

        2、网页相关概念

        一个网页由那几部分组成:
        结构:HTML用于搭建网页的结构。
        表现:CSS让结构都具有表现力
        行为:JavaScript 让网页由交互的效果。

        3、HTML是什么

        全称:HyperText Markup Language
        译为:超文本标记语言

        超文本:可以理解为:暂时理解为 ’超级的文本‘,和普通文本比,内容更丰富。
        标记:文本变成超文本,就需要用到各种标记符号
        语言:每一个标记的写法、读音、使用规则,构成标记语言。
 

        4、HTML发展史

        

二、HTML基础

        1、 html标签:

        标签又称元素,是html的基本组成单位。
        标签名不区分大小写!但是推荐使用小写。
        标签有单标签和双标签,单标签比较少!
        标签也可以进行嵌套!

        2、HTML属性:


        1)用于给标签提供附加信息。
        2)可以写在:其实其实标签 或 单标签中,形式如下:
        

        3)有些特殊属性,没有属性名,只有属性值。
             例如:<imput disabled> 
         4)注意点:
              1、不同的标签,有不同的属性,也有一些通用的属性在任何标签中都能写。
              2、属性名、属性值不能乱写。都是w3c规定好的
              3、属性名、属性值,都不区分大小写,但推荐小写。
              4、双引号,也可以写成单引号,甚至不写都行,但还是推荐写双引号
              5、标签中不要出现同名属性,否则后写的会失效,

        3、HTML基本结构:

        1、在网页中,点击鼠标右键,选择检查,可以查看某段具体代码
        2、检查 和 查看网页源代码 的区别:

        查看网页源代码看到的是:程序员编写的源代码。
        检查看到的是:经过浏览器处理后的源代码
        备注:日常开发中,检查用的最多

        3、网页的基本结构如下:

        1、想要呈现在网页中的内容写在body标签中
        2、head标签中的内容不会出现在网页中
        3、head标签中的title标签可以指定网页的标题。
        4、图示:

        

        4、HTML注释

        1、特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见
        2、作用:对代码进行解释和说明
        3、写法:

        <!-- 下面的文字只能滚动一次 -->

        <marquee loop="1" > hello world! </marquee>

        4、注释不可以嵌套

        5、HTML文档声明

        1、作用:告诉浏览器当前网页的版本
        2、写法:
                旧写法:要依网页所用的HTML版本而定,写法有很多,具体写法请参考:W3C官网-文档声明。

                新写法:

        <!DOCTYPE html> 生命这个就代表这个代码是h5版本的。

         3、注意:文档声明,必须在网页的第一行,且在html标签的外侧。

        6、HTML字符编码

        1、计算机对数据的操作:
                存储时,对数据进行:编码
                读取时,对数据进行:解码
        2、编码、解码,会遵循一定的规范 --  字符集
        3、字符集有很多,常见的有:

        ASCII:大写字母、小写字母、数字、一些符号,共计128个。
        ISO 8859-1:在ASCII基础上,扩充了一些希腊字符等,共计是256个。
        GB2312:继续扩充,收录了6773个常用汉字,682个字符
        GBK:收录了的汉字和符号达到20000+,支持繁体中文。
        UTF-8:包含世界上所有的语言,所有文字与符号。-- 很常用

        4、使用原则:
        原则1:存储时务必使用合适的字符编码,否则无法存储,数据会丢失!
        原则2:存储时采用哪种方式编码,读取时就采用哪种方式解码。否则数据会错乱,乱码。
        

        5、总结:
        平时写代码时,统一采用UTF-8编码 最稳妥。
        为了让浏览器在渲染html文件时,不犯错误,可以通过meta标签配合 charset属性指定字符集:

        <head>

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

        7、HTML设置语言

        长按 shift + 网页左上角刷新按钮,可以强刷页面。

        1、主要作用:让浏览器显示对应的翻译提示,有利于搜索引擎优化。
        2、具体写法:

        <html lang"zh-CN">

        3、扩展知识:lang属性的编写规则

        第一种写法(语言-国家/地区):
        zh-CN:中文-中国大陆(简体中文)
        zh-TW:中文-中国台湾(繁体中文)
        zh:中文
        en-U:英语-美国
        en-GB:英语-英国

        第二种写法(语言-具体种类)以不推荐使用:
        zh-Hans:中文-简体
        zh-Hant:中文-繁体

        w3School上的说明:语言代码参考手册
        w3c官网上的说明:略

        

        8、HTML标准结构

        在vscode中,输入 ! 再回车可以直接生成标准结构:

<!DOCTYPE html> <!-- 文档声明,代表这是h5页面 -->
<html lang="zh-CN"> <!-- 设置语言为中文,可以在设置红调整该选项 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 暂未用到,跟移动端网页有关 --><title>这是一个标题</title> <!-- 标题,在网页上面显示的网页名称 -->
</head>
<body><h1> hello world! </h1>
</body>
</html>

        9、开发者文档学习网站

        推荐 MDN:https://developer.mozilla.org/zh-CN/

        可以查看相关html标签!

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

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

相关文章

行业类别-金融科技-子类别区块链技术-细分类别智能合约-应用场景供应链金融课题

1.大纲分析 针对题目“行业类别-金融科技-子类别区块链技术-细分类别智能合约-应用场景供应链金融课题”的大纲分析,以下是一个详细的结构: 一、引言 简述金融科技的发展背景与重要性引出区块链技术在金融科技中的应用强调智能合约作为区块链技术的重要细分类别提出供应链金…

记录一次非常奇怪的MIME type of “text/html“报错

报错现象 访问指定地址&#xff0c;一直转圈打不开&#xff0c;打开游览器控制台发现有如下报错&#xff1a; Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking i…

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式 1、所要用到的激活工具2、开启电脑卓越性能模式Windows11Windows10在电源模式中选择卓越性能模式 3、将系统版本切换为 工作站版本 1、所要用到的激活工具 KMS激活工具(…

若依前后端分离版部署(超详细)

一、简介 有些特殊情况需要部署到子路径下,例如:https://www.jzjtest.cn/admin-hb,可以按照下面流程修改。 二、实现步骤 2.1 后端部署 自定义后端端口 # 开发环境配置 server:# 服务器的HTTP端口,默认为8080port: 10081通过maven:package一键打包成jar 将jar上传到服务器…

text-embedding-ada-002;BGE模型;M3E模型是Moka Massive Mixed Embedding;BERT

目录 text-embedding-ada-002 一、模型概述 二、模型功能 三、模型特点 四、模型应用 五、模型优势 BGE模型 一、模型背景与特点 二、模型性能与表现 三、模型迭代与发展 M3E模型是Moka Massive Mixed Embedding 一、基本信息 二、技术特点 三、应用场景 四、性能…

膜计算 MATLAB例程(仅例程,无背景)

膜计算的实现可以用 MATLAB 进行简单的模拟。以下是一个基础的膜计算模型的示例代码&#xff0c;模拟了膜内部对象的产生和转化过程。这个例子使用简单的对象和规则来演示膜计算的基本思想。 文章目录 主要概念应用领域优势与挑战代码MATLAB 膜计算示例代码代码说明运行代码总结…

docker compose 多个 Dockerfile

文章目录 文件结构app.pyDockerfiledocker-compose.yml查看结果文件结构 %tree . ├── Dockerfile ├── app.py ├── app1 │ ├── Dockerfile │ └── app.py ├── app2 │ ├── Dockerfile │ └── app.py └── docker-compose.yml3 directories,…

Request和Response

前言 这一节主要讲的是Request和Response还有一些实例 1. 介绍 就是这两个参数 WebServlet("/demo7") public class ServletDemo7 extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletExcepti…

Vue全栈开发旅游网项目(10)-设计用户模型

1.设计用户模型 文件地址&#xff1a;accounts/models.py 1.1 用户详细信息 内容包括&#xff1a;性别 手机号 年龄 生日 真实姓名 创建常量&#xff1a;1-男&#xff0c;0-女&#xff1b;editableFalse不许循环 class Profile(models.Model):SEX_CHOICES{(1,男),(0,女)}u…

Elasticsearch实战应用:从入门到精通

在当今这个数据爆炸的时代&#xff0c;如何快速、有效地从海量数据中检索信息&#xff0c;已经成为了许多企业和开发者面临的挑战。Elasticsearch&#xff0c;作为一个基于Lucene的搜索引擎&#xff0c;以其强大的全文搜索能力、分布式特性以及易用性&#xff0c;成为了解决这一…

15分钟学 Go 第 44 天: 项目部署基础

第44天&#xff1a;项目部署基础 学习目标 在这一课中&#xff0c;我们将学习如何部署Go应用程序。重点包括&#xff1a; Go应用的构建与打包选择合适的部署环境使用Docker容器化Go应用云平台部署基础常见问题与调试方法 1. Go应用的构建与打包 1.1 构建应用 在部署之前&a…

鸿蒙next版开发:ArkTS组件点击事件详解

在HarmonyOS 5.0中&#xff0c;ArkTS提供了一套完整的组件和事件处理机制&#xff0c;使得开发者能够创建交互性强的应用程序。本文将详细解读如何使用ArkTS组件处理点击事件&#xff0c;包括事件的注册、回调函数的编写以及事件对象的使用。 点击事件基础 点击事件是用户与应…

Kafka参数了解

Kafka配置参数完整说明 1. 基础配置 参数名说明推荐值参考值broker.idbroker的唯一标识符每个节点唯一的整数1delete.topic.enable是否允许删除topictruetruelistenersbroker监听地址SASL_PLAINTEXT://host:9092SASL_PLAINTEXT://172.24.77.15:9092advertised.listeners对外发…

C++初阶——vector

一、什么是vector vector是表示可变大小的数组的序列容器&#xff0c;就像数组一样&#xff0c;vector也采用连续空间来存储元素。也就是说它的访问和数组一样高效&#xff0c;但是它的大小是动态可变的&#xff0c;并且它的大小会被容器自动处理。 二、vector的构造 常用的构…

迁徙线,动态轨迹线

使用canvas结合贝塞尔曲线实现&#xff0c;效果如下 <template><div class"box"><div class"mapBox"><div class"map"><img src"/img/dataCockpit/map.png" alt"" /><div class"dot&…

SQLI LABS | Less-39 GET-Stacked Query Injection-Intiger Based

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;过关流程 输入下面的链接进入靶场&#xff08;如果你的地址和我不一样&#xff0c;按照你本地的环境来&#xff09;&#xff1a; http://localhost/sqli-labs/Less-39/ 本关是堆…

STL常用遍历算法

概述: 算法主要是由头文件<algorithm> <functional> <numeric>组成。 <algorithm>是所有STL头文件中最大的一个&#xff0c;范围涉及到比较、 交换、查找、遍历操作、复制、修改等等 <numeric>体积很小&#xff0c;只包括几个在序列上面进行简…

【LeetCode】【算法】21. 合并两个有序链表

LeetCode 21. 合并两个有序链表 题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 思路 用归并排序的做法就可以 代码 /*** Definition for singly-linked list.* public class ListNode {* int val;* …

NVM 介绍及使用指南

在日常的开发工作中&#xff0c;我们往往会遇到需要在同一台机器上同时管理多个版本的 Node.js 的情况。为了解决这个问题&#xff0c;我一个同事推荐了NVM&#xff08;Node Version Manager&#xff09;。NVM 是一个用于管理 Node.js 版本的工具&#xff0c;可以方便地在不同的…

Suffix Tree (后缀树)、Suffix Array (后缀数组)、LZW树详细解读

一、后缀树&#xff08;Suffix Tree&#xff09; 1. 定义 后缀树是一种紧凑的前缀树&#xff08;前缀树的特殊形式&#xff09;&#xff0c;用于表示字符串的所有后缀。它是一种能够快速完成字符串模式匹配的数据结构&#xff0c;适合解决子串搜索和模式匹配等问题。 2. 工作…