HTML超详细简介

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属性：定义了鼠标经过时的提示文字

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

b站小土堆pytorch学习记录—— P25-P26 网络模型的使用和修改、保存和读取

b站小土堆pytorch学习记录—— P25-P26 网络模型的使用和修改、保存和读取

文章目录 一、修改1.方法2.代码 二、保存和读取1.方法2.代码&#xff08;1&#xff09;保存&#xff08;2&#xff09;加载 3.陷阱 一、修改 1.方法 add_module(name: str, module: Module) -> None name 是要添加的子模块的名称。 module 是要添加的子模块。 调用 add_m…
阅读更多...
部署SpringBoot项目

部署SpringBoot项目

方案一&#xff1a;纯手工部署 1&#xff0c;购买一台云服务器 这里我使用腾讯云&#xff0c;推荐Centos8/Centos7.6 2&#xff0c;安装springBoot项目所需要的环境 1&#xff0c;数据库单独安装在另一台服务器上&#xff0c;只需要修改IP地址即可 2&#xff0c;安装jdk yum…
阅读更多...
泛型 --java学习笔记

泛型 --java学习笔记

什么是泛型 定义类、接口、方法时&#xff0c;同时声明了一个或者多个类型变量&#xff08;如&#xff1a;<E>&#xff09;&#xff0c;称为泛型类、泛型接口&#xff0c;泛型方法、它们统称为泛型 可以理解为扑克牌中的癞子&#xff0c;给它什么类型它就是什么类型 如…
阅读更多...
如何将中科方德桌面操作系统加入Windows域

如何将中科方德桌面操作系统加入Windows域

往期文章&#xff1a;自定义SSH客户端连接时的显示信息 | 统信UOS | 麒麟KYLINOS Hello&#xff0c;大家好啊&#xff0c;今天我非常高兴地给大家带来一篇关于如何将中科方德桌面操作系统加入Windows域的教程文章。对于使用中科方德桌面操作系统的用户来说&#xff0c;将其加入…
阅读更多...
TSINGSEE配电房/配电站/变电站远程视频智能监管、无人值守方案

TSINGSEE配电房/配电站/变电站远程视频智能监管、无人值守方案

一、背景需求分析 随着社会的快速发展和科技进步&#xff0c;电力作为现代社会的核心驱动力&#xff0c;其稳定运行与安全管理变得愈发重要。特别是在配电房这一关键环节中&#xff0c;实施高效的远程视频智能监管方案&#xff0c;不仅能够有效提升电力供应的可靠性&#xff0…
阅读更多...
模拟实现std::string类（包含完整、分文件程序）

模拟实现std::string类（包含完整、分文件程序）

std库中的string是一个类&#xff0c;对string的模拟实现&#xff0c;既可以复习类的特性&#xff0c;也可以加深对std::string的理解。 &#x1f308;一、搭建框架 ☀️1.新命名空间 本质上string是一个储存在库std里面的类&#xff0c;现在需要模拟实现一个string类&#…
阅读更多...
Linux：kubernetes（k8s）探针ReadinessProbe的使用（9）

Linux：kubernetes（k8s）探针ReadinessProbe的使用（9）

本章yaml文件是根据之前文章迭代修改过来的 先将之前的pod删除&#xff0c;然后使用下面这个yaml进行生成pod apiVersion: v1 # api文档版本 kind: Pod # 资源对象类型 metadata: # pod相关的元数据&#xff0c;用于描述pod的数据name: nginx-po # pod名称labels: # pod的标…
阅读更多...
好物周刊#46：在线工具箱

好物周刊#46：在线工具箱

https://github.com/cunyu1943 村雨遥的好物周刊&#xff0c;记录每周看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;每周五发布。 一、项目 1. twelvet 一款基于 Spring Cloud Alibaba 的权限管理系统&#xff0c;集成市面上流行库&#xff0c;可以作用为快…
阅读更多...
【电路笔记】-NPN晶体管

【电路笔记】-NPN晶体管

NPN晶体管 文章目录 NPN晶体管1、概述2、双极NPN晶体管配置3、NPN晶体管中的α和β关系4、示例5、共发射极配置1、概述 NPN 晶体管是三端三层器件，可用作放大器或电子开关。 在前面的文章中，我们看到标准双极晶体管或 BJT 有两种基本形式。 NPN（负-正-负）配置和PNP（正-负…
阅读更多...
稀碎从零算法笔记Day11-LeetCode:有效的字母异位词

稀碎从零算法笔记Day11-LeetCode:有效的字母异位词

题型&#xff1a;字符串、哈希表、排序 链接&#xff1a;242. 有效的字母异位词 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 …
阅读更多...
电子签名签章：重塑企业办公方式，开启智能合约新时代！

电子签名签章：重塑企业办公方式，开启智能合约新时代！

在现代社会&#xff0c;随着科技的发展&#xff0c;纸质文件逐渐被电子文件所取代&#xff0c;传统的签名方式也面临着数字化的转型。电子签名签章云服务就是在这样的背景下应运而生的一种新型技术服务&#xff0c;它结合了云计算、大数据、人工智能等前沿技术&#xff0c;为用…
阅读更多...
尤雨溪：Vue 未来展望新的一轮

尤雨溪：Vue 未来展望新的一轮

十年&#xff0c;一个既漫长又短暂的时光跨度&#xff0c;对于技术世界来说&#xff0c;更是沧海桑田的瞬间。在这十年里&#xff0c;Vue.js 从无到有&#xff0c;从默默无闻到蜚声全球&#xff0c;不仅改变了前端开发的面貌&#xff0c;更成为了无数开发者手中的得力工具。 在…
阅读更多...
程序逻辑控制

程序逻辑控制

1.java的三大结构 可以说java的这三大结构包括其中的语句跟c语言上的基本上都是一样的。现在就当重新复习一遍吧&#xff01; 1.顺序结构 2.分支结构 if语句 跟c语言的语法一模一样。就直接看文案了。 switch语句 java中的switch语句跟c语言中的switch几乎相同&#xff0c;…
阅读更多...
2024【问题解决】Github 2024无法克隆git clone自从签了2F2安全协议之后

2024【问题解决】Github 2024无法克隆git clone自从签了2F2安全协议之后

项目场景：ping通Github但没法clone–502 问题描述 提示：ping通Github但没法clone--502： 例如：git clone https://gitclone.com/l.git/*** $ git clone https://github.com/darrenpig/Yocto Cloning into Yocto_tutorial... fatal: unable to access https://gitclone.co…
阅读更多...
mysql数据库入门到精通-Windows版本mysql安装（1）

mysql数据库入门到精通-Windows版本mysql安装（1）

文章目录 一、数据库介绍1.1、数据库概念1.2、为什么要使用数据库1.3、关系型数据库与非关系型数据库1.4、数据库术语1.5、mysql下载及地址 二、安装mysql数据库三、mysql的管理工具3.1、mysql command line client使用 四、SQL结构化查询语言4.1、SQL概述4.2、SQL发展4.3、SQL…
阅读更多...
【CSP试题回顾】201503-3-节日

【CSP试题回顾】201503-3-节日

CSP-201503-3-节日 关键点&#xff1a;格式化输出 在C中&#xff0c;格式化输出通常利用iostream库中的功能&#xff0c;特别是iomanip头文件提供的一系列操作符。这些操作符用于控制输出格式&#xff0c;如宽度、填充、对齐方式等。在你提供的代码中&#xff0c;用于格式化输…
阅读更多...
飞桨AI框架安装和使用示例

飞桨AI框架安装和使用示例

飞桨AI框架安装和使用示例 飞桨PaddlePaddle是非常流行的国产AI框架&#xff0c;让我们一起来动手实践吧&#xff01; 安装 飞桨安装参考页面&#xff1a;https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/pip/linux-pip.html 在这个安…
阅读更多...
乌鸡的身高

乌鸡的身高

解法&#xff1a; 只需要看身高最高的乌鸡个数是否>2.若满足则除去当前这只乌鸡的最高身高都是最高身高。 若不满足则只需要看最高的和第二高的乌鸡。 #include<iostream> #include<vector> #include<algorithm> #include<cmath> using namespac…
阅读更多...
leetcode 热题 100_滑动窗口最大值

leetcode 热题 100_滑动窗口最大值

题解一&#xff1a; 双端队列&#xff1a;滑动窗口的本质是在窗口末尾添加一个元素&#xff0c;并移除头部的一个元素。对于添加的元素&#xff0c;直接和当前最大值比较即可&#xff0c;但对于移除的元素&#xff0c;如果移除的是原先的最大值&#xff0c;则需要重新遍历窗口寻…
阅读更多...
支小蜜校园防欺凌系统如何有效应对学生霸凌？

支小蜜校园防欺凌系统如何有效应对学生霸凌？

学生霸凌不仅直接伤害到被霸凌者的身心健康&#xff0c;也对整个校园的和谐氛围构成了威胁。为了应对这一问题&#xff0c;校园防欺凌系统应运而生&#xff0c;成为维护校园安全、保护学生权益的重要工具。那么当校园防欺凌系统面对学生霸凌时&#xff0c;该如何有效应对呢&…
阅读更多...
最新文章

Copyright @ 2022~2023