一、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,一经查实,立即删除!

相关文章

记录一次非常奇怪的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激活工具(…

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

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

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…

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/ 本关是堆…

NVM 介绍及使用指南

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

web——[SUCTF 2019]EasySQL1——堆叠注入

这个题主要是讲述了堆叠注入的用法&#xff0c;来复现一下 什么是堆叠注入 堆叠注入&#xff1a;将多条SQL语句放在一起&#xff0c;并用分号;隔开。 1.查看数据库的名称 查看数据库名称 1;show databases; 发现有名称为ctftraining的数据库 2.对表进行查询 1;show tabl…

【ARM】MDK-烧录配置文件无权限访问

【更多软件使用问题请点击亿道电子官方网站】 1、 问题场景 客户代码编译正常、调试出现报错<Error: Flash Download failed - "Cortex-M4"> 仿真器识别正常&#xff0c;keil-Debug内显示相关信息、设备启动正常。 记录排查步骤&#xff0c;找到配置文件位…

深度解析 ICP 备案、公安备案、等保备案编号与统一社会信用代码

1. 前言 在当今数字化时代&#xff0c;各类网站和系统如雨后春笋般涌现&#xff0c;为了确保网络安全、合法运营以及用户信息保护&#xff0c;不同类型的备案工作应运而生。其中&#xff0c;ICP 备案、公安备案和等保备案尤为重要&#xff0c;它们各自对应的备案编号不仅是一串…

11个简单易用的电商购物车设计案例

文章目录 前言正文1.扁平化设计购物车2.无表格布局购物车3.美食购物车4.响应式购物车5.jQuery购物车6.动态价格更新购物车7.标签式滑动购物车8.动态商店与购物车一体化设计9.简约清爽的购物车设计10.基于Vue.js的购物车11.域名购物车 总结 前言 现在的电子商务网站&#xff0c…

turtlesim修改窗口大小;添加自己的小乌龟;

目前手边有humble版本ROS。以此为教程。其他版本以此类推 github中搜索ros&#xff0c;然后选择ros官网&#xff08;九点方阵那个图标&#xff09;。然后 在branch中&#xff0c;选择humble&#xff0c;然后复制链接。 git clone https://github.com/ros/ros_tutorials.git -…

电阻按材料分类、不同的电阻

TOC 按电阻材料工艺进行分类 3.1.线绕电阻&#xff1a; 使用高电阻率的康铜、锰铜或镍铬合金丝缠绕在陶瓷骨架&#xff08;一般采用陶瓷、塑料、涂覆绝缘层的金属骨架&#xff09;上制作而成的。玻璃釉绕线电阻表面被覆一层玻璃釉&#xff1b;涂漆线绕电阻表面被覆一层保护有…

spark的学习-06

SparkSQL读写数据的方式 1&#xff09;输入Source 方式一&#xff1a;给定读取数据源的类型和地址 spark.read.format("json").load(path) spark.read.format("csv").load(path) spark.read.format("parquet").load(path) 方式二&#xff1a…

react-markdown内容宽度溢出和换行不生效问题

情景复现&#xff1a; 解决办法&#xff0c;添加样式进行限制 /* index.css */ .markdown-container {word-break: break-word; /* 强制长单词断行 */white-space: pre-wrap; /* 保留空白符序列&#xff0c;但是正常地进行换行 */overflow-wrap: break-word; /* 在长单词或…

java双向链表解析实现双向链表的创建含代码

双向链表 一.双向链表二.创建MyListCode类实现双向链表创建一.AddFirst创建&#xff08;头插法&#xff09;二.AddLast创建&#xff08;尾叉法&#xff09;三.size四.remove(指定任意节点的首位删除)五.removeAll(包含任意属性值的所有删除)六.AddIndex(给任意位置添加一个节点…

VMWare虚拟机NAT模式下与外部主机(非宿主机)通信

VMWare虚拟机NAT模式下与外部主机(非宿主机)通信 1. VMWare虚拟机网络 VMWare的三种网络工作模式&#xff1a; Bridged&#xff1a;桥接模式NAT&#xff1a;网络地址转换模式Host-Only &#xff1a;仅主机模式 VMWare 网络连接配置界面如下&#xff1a; 在本次测试环境中&a…

Mac保护电池健康,延长电池使用寿命的好方法

使用Mac的过程中&#xff0c;如何延长电池的使用寿命是大家非常关心的问题&#xff0c;而养成一个良好的充电习惯能够有效的延长电池的使用寿命 避免过度充电和过度放电能够有效的保护电池&#xff0c;因此长时间的充电与长时间放点都不可取&#xff0c;但是在日常的使用过程中…