HTML超详细简介

news2024/12/24 20:41:04

HTML是什么

  1. 超文本标记语言（HyperText Mark-up Language ）
  2. 用来设计网页的标记语言
  3. 用该语言编写的文件，以 .html或 .htm为后缀
  4. 由浏览器解释执行
  5. 不区分大小写，建议小写

HTML标签

  1. HTML用于描述功能的符号成为“标签”
  2. 标签都封装在一对尖括号“<…>”之中,如就是一个标签
  3. 封闭类型标记（也叫双标记），必须成对出现,如

  4. 非封闭类型标记，也叫作空标记，或者单标记，如

    在这里插入图片描述

HTML 元素

指的是从开始标签（start tag）到结束标签（end tag）的所有代码
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML属性与值

  1. 属性是用来修饰元素的
    属性必须位于开始标签里
    一个元素的属性可能不止一个，多个属性之间用空格隔开
    多个属性之间不区分先后顺序
  2. 每个属性都有值
    属性和属性的值之间用等号链接
    属性的值包含在引号当中
    属性总是以名称/值对的形式出现
    在这里插入图片描述

注释

1.为代码添加适当的注释是一种良好的编程习惯
2.注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示
3.注释标签不支持任何属性
4.语法：
< !-- 注释的文本内容 -->
在这里插入图片描述

HTML的基本结构

在这里插入图片描述
< head lang=“en”>
lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）
< meta charset=“UTF-8”>
META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。
搜索引擎
根据一定算法搜集数据的平台，比如谷歌、百度。
爬虫
是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本程序。
爬虫指的是搜索引擎用于自动抓取网页的程序（或叫机器人）。这个就是从某一个网址为起点，去访问，然后把网页存回到数据库中，如此不断循环。只要有链接指向我们的网页，爬虫就会自动提取我们的网页。

什么是DTD文档模型，为什么写在HTML当中？

DTD文档模型也称DOCTYPE文档声明，它是Document Type Definition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
它不是HTML标签
我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。

DTD文档模型=DOCTYPE=DOCTYPE文档声明

DOCTYPE声明

  1. HTML 5
<!DOCTYPE html>
  1. HTML 4.01 Strict 严格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）

  1. HTML 4.01 Transitional 过渡
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集

  1. HTML 4.01 Frameset 框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

  1. XHTML中的DTD文档模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

  1. xhtml和html的区别
    XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（比如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了“表现层”的标签，同时要求标签的严格嵌套，标签结束等等。

HTML文档

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<html>
<head>
	<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
</body>
</html>

< head>

标签用于定义文档的头部，它是所有头部元素的容器。< head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>

应该把 < head> 标签放在文档的开始处，紧跟在 < html> 后面，并处于 < body> 标签之前。
文档的头部经常会包含一些 < meta> 标签，用来告诉浏览器关于文档的附加信息。

< title>

  1. 可定义文档的标题。
  2. 它显示在浏览器窗口的标题栏或状态栏上。
  3. 当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
  4. < title> 标签是 < head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
  5. title写和你网页相关的关键词有利于SEO优化
<html>
<head>
	<title>我会显示在收藏栏里</title>
</head>
    <body>...</body>
</html>

在这里插入图片描述

< meta>

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有
Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="web前端,尚学堂培训">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

author作者 标注网页的作者

<meta name="author" content="root,root@xxxx.com">

更多meta标签介绍请参考 HTML meta标签用法详解

标签嵌套

标签之间可以相互嵌套，但要注意嵌套顺序
在这里插入图片描述

语义化标签

语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等

好处：

  1. 更容易被搜索引擎收录
  2. 更容易让屏幕阅读器读出网页内容

图片

  1. 使用< img>元素将图像添加到页面
  2. 空标记
  3. 必须属性：src（存储图像的位置）
  4. 常用属性：width，height，alt，title
<img src="URL" width="300" alt=”替换文本属性”/>

title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的
alt当图片未能正常显示时，用于给用户的提示信息

超链接

  1. 使用< a>< /a>元素创建一个超链接
  2. 语法：
<a href=""  target=""  title=””>文本</a>

href属性：链接URL
target属性：目标，可取值_blank,_parent,_self等
name属性：锚点名称
title属性：定义了鼠标经过时的提示文字

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

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

相关文章

如何用ChatGPT+GEE+ENVI+Python进行高光谱，多光谱成像遥感数据处理？

如何用ChatGPT+GEE+ENVI+Python进行高光谱，多光谱成像遥感数据处理？

原文链接&#xff1a;如何用ChatGPTGEEENVIPython进行高光谱&#xff0c;多光谱成像遥感数据处理&#xff1f; 第一&#xff1a;遥感科学 从摄影侦察到卫星图像 遥感的基本原理 遥感的典型应用 第二&#xff1a;ChatGPT ChatGPT可以做什么&#xff1f; ChatGPT演示使用 …
阅读更多...
专访|云安全攻防：从理论到应用的全面探索

专访|云安全攻防：从理论到应用的全面探索

2023年11月&#xff0c;美国核研究实验室&#xff08;INL&#xff09;遭遇数据泄露。同年10月&#xff0c;索尼的员工数据在MOVEit攻击事件中被泄露。2024年2月&#xff0c;某知名制造商因云存储服务器的配置错误导致了敏感数据泄露。 这些事件表示企业必须重视云安全建设&…
阅读更多...
校园小情书微信小程序，社区小程序前后端开源，校园表白墙交友小程序

校园小情书微信小程序，社区小程序前后端开源，校园表白墙交友小程序

功能 表白墙卖舍友步数旅行步数排行榜情侣脸漫画脸个人主页私信站内消息今日话题评论点赞收藏 效果图
阅读更多...
[OpenCv]频域处理

[OpenCv]频域处理

目录 前言 一、频域变换 1.傅里叶变换 2.代码实现 二、频域中图像处理 1.理解数字图片的频谱 2.频域图像处理步骤 3.使用低通滤波器实现图像平滑 4.使用高通滤波器实现图像锐化 三、总结 前言 数字图像处理的方法有两大类&#xff1a;一种是空间域处理法&#xff0c;…
阅读更多...
Pytorch学习 day06（torchvision中的datasets、dataloader）

Pytorch学习 day06（torchvision中的datasets、dataloader）

torchvision的datasets 使用torchvision提供的数据集API&#xff0c;比较方便&#xff0c;如果在pycharm中下载很慢&#xff0c;可以URL链接到迅雷中进行下载&#xff08;有些URL链接在源码里&#xff09;代码如下&#xff1a; import torchvision # 导入 torchvision 库 # …
阅读更多...
Mac版2024 CleanMyMac X 4.14.6 核心功能详解以及永久下载和激活入口

Mac版2024 CleanMyMac X 4.14.6 核心功能详解以及永久下载和激活入口

CleanMyMac 是 macOS 上久负盛名的系统清理工具&#xff0c;2018 年&#xff0c;里程碑式版本 CleanMyMac X 正式发布。不仅仅是命名上的变化&#xff0c;焕然一新的 UI、流畅的动画也让它显得更加精致。新增的系统优化、软件更新等功能&#xff0c;使得在日常使用 macOS 时有了…
阅读更多...
C# Mel-Spectrogram 梅尔频谱

C# Mel-Spectrogram 梅尔频谱

目录 介绍 Main features Philosophy of NWaves 效果 项目 代码 下载 C# Mel-Spectrogram 梅尔频谱 介绍 利用NWaves实现Mel-Spectrogram 梅尔频谱 NWaves github 地址&#xff1a;https://github.com/ar1st0crat/NWaves NWaves is a .NET DSP library with a lot …
阅读更多...
Springboot 的几种配置文件形式

Springboot 的几种配置文件形式

方式一&#xff1a;多个yml文件 步骤1&#xff1a;创建多个配置文件 application.yml #主配置文件 application-dev.yml #开发环境的配置 application-prod.yml #生产环境的配置 application-test.yml #测试环境的配置步骤2&#xff1a;applicaiton.yml中指定配置 在a…
阅读更多...
H3C BGP 基本配置实验

H3C BGP 基本配置实验

H3C BGP 基本配置实验 实验拓扑 ​​ 实验需求 按照图示配置 IP 地址&#xff0c;R1 和 R5 上使用环回口模拟业务网段&#xff0c;R2&#xff0c;R3&#xff0c;R4 的环回口用于配置 Router-id 和建立 IBGP 邻居AS 200 运行 OSPF 实现内部网络互通R1&#xff0c;R2&#xf…
阅读更多...
Python 中实现 CDF 累积分布图的两种方法

Python 中实现 CDF 累积分布图的两种方法

什么是累积分布 累积分布函数&#xff0c;又叫分布函数&#xff0c;是概率密度函数的积分&#xff0c;能完整描述一个实随机变量X的概率分布。一般以大写“CDF”&#xff08;Cumulative Distribution Function&#xff09;标记。 《百度百科》 累积分布函数&#xff0c;又叫分…
阅读更多...
LeetCode 刷题 [C++] 第300题.最长递增子序列

LeetCode 刷题 [C++] 第300题.最长递增子序列

题目描述 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 题目…
阅读更多...
【Linux】Linux原生异步IO（一）：libaio-介绍

【Linux】Linux原生异步IO（一）：libaio-介绍

1、IO模型 1.1 简述 相信大家在搜索的时候，都会看到下面这张图，IO的使用场景：同步、异步、阻塞、非阻塞，可以组合成四种情况： 同步阻塞I/O: 用户进程进行I/O操作，一直阻塞到I/O操作完成为止。同步非阻塞I/O: 用户程序可以通过设置文件描述符的属性O_NONBLOCK，I/O操作可…
阅读更多...
什么样的项目适合Web自动化测试

什么样的项目适合Web自动化测试

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

共用体union

一、共用体的特性 共用体又叫做联合体&#xff0c;共用体的特性如下&#xff1a; 1.共用体的所有成员共用一段内存空间&#xff0c;且所有成员的起始位置是一致的 2.共用体的值由最后赋值的成员决定 3.共用体的内存大小 共用体的内存必须大于或等于其他成员变量中最大数据类型…
阅读更多...
专题1 - 双指针 - leetcode 15. 三数之和 - 中等难度

专题1 - 双指针 - leetcode 15. 三数之和 - 中等难度

leetcode 15. 三数之和 - 点击直达 leetcode 15. 三数之和 中等难度 双指针1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理3. 时间复杂度 3. 代码实现4. 知识与收获 leetcode 15. 三数之和 中等难度 双指针 1. 题目详情 给你一个整数数组 nums &#…
阅读更多...
SQL 替换某一列中所有数据的特定字符

SQL 替换某一列中所有数据的特定字符

UPDATE product SET spec REPLACE(spec, ,, ) 把product表的spec字段内容中的逗号替换为
阅读更多...
性能问题分析排查思路之机器（3）

性能问题分析排查思路之机器（3）

本文是性能问题分析排查思路的展开内容之一&#xff0c;第2篇&#xff0c;主要分为日志1期&#xff0c;机器4期、环境2期共7篇系列文章&#xff0c;本期是第三篇&#xff0c;讲机器&#xff08;硬件&#xff09;的网络方面的排查方法和最佳实践。 主要内容如图所示&#xff1a…
阅读更多...
Java请求时间耗时长分析

Java请求时间耗时长分析

推断是java.lang.OutOfMemoryError: Metaspace&#xff0c;元空间不够&#xff0c;频繁垃圾收集 这个过程中程序卡住一直不响应&#xff0c;应该是触发FGC有关系。 YGC&#xff1a;451->453 FGC&#xff1a;198->289 FGCT&#xff1a;52.246->76.291 但是堆内存的空间…
阅读更多...
简易网络聊天室：2024/3/7

简易网络聊天室：2024/3/7

思维导图 基于UDP的简易网络聊天室 服务器&#xff1a; #include <myhead.h>#define SER_PORT 8888struct msgTyp //存储消息的结构体 {char type; //消息类型char name[30]; //用户姓名char text[1024]; //消息正文 };//创建链表存储客户端信息 typedef stru…
阅读更多...
【计算机考研】考408，还是不考408性价比高?

【计算机考研】考408，还是不考408性价比高?

首先综合考虑&#xff0c;如果其他科目并不是很优秀&#xff0c;需要我们花一定的时间去复习&#xff0c;408的性价比就不高&#xff0c;各个科目的时间互相挤压&#xff0c;如果备考时间不充裕&#xff0c;考虑其他专业课也未尝不可。 复习408本来就是费力不讨好的事情 不同…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023