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

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

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

相关文章

安卓手机如何使用JuiceSSH实现公网远程连接本地Linux服务器

安卓手机如何使用JuiceSSH实现公网远程连接本地Linux服务器

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …
阅读更多...
torch-xla在多GPU下NCCL ncclUniqueId的生成过程

torch-xla在多GPU下NCCL ncclUniqueId的生成过程

本文基于torch-xla2.0&#xff0c;结论如下&#xff1a; ncclUniqueId就是当前主机的IP和端口号&#xff1b;在一个通信组内&#xff0c;每个rank使用相同的ncclUniqueId&#xff1b;多个通信组时&#xff0c;各个通信组内ncclUniqueId相同&#xff0c;每个通信组的ncclUnique…
阅读更多...
GIT 卸载干净（图文详解）

GIT 卸载干净（图文详解）

一、控制面板卸载 右击卸载 等待卸载过程 二、在环境变量&#xff0c;把相关信息删除干净
阅读更多...
【Spring云原生系列】Spring Cloud Stream：消息驱动架构（MDA）解析，实现异步处理与解耦合！

【Spring云原生系列】Spring Cloud Stream：消息驱动架构（MDA）解析，实现异步处理与解耦合！

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…
阅读更多...
第三百八十八回

第三百八十八回

文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了DateRangePickerDialog Widget相关的内容,本章回中将介绍Radio Widget.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在这里说的Radio Widget是指单选按钮&#xff0c;没有选中时是圆形边框&#x…
阅读更多...
【重要！！退税！退税！】一年一度个人所得税综合年度汇算开始了！

【重要！！退税！退税！】一年一度个人所得税综合年度汇算开始了！

目录标题 如何退税&#xff1f;2023年度个人所得税综合所得汇算清缴操作指南汇算准备标准申报 退税骗局&#xff1f;1.“您有一笔退税待领取”骗局2.“专业人员帮你多退税”骗局3.“诱导填报虚假个税信息”骗局4.“税务稽查人员联系你”骗局 如何退税&#xff1f; 2023年度个人…
阅读更多...
论文模型笔记——RCNN系列

论文模型笔记——RCNN系列

RCNN系列模型主要包括以下几种&#xff0c;按发布时间排序&#xff1a; 1. **RCNN**&#xff08;2014年&#xff09;&#xff1a;首次将CNN引入目标检测&#xff0c;主要是特征提取阶段使用CNN&#xff08;AlexNet)。 2. **Fast RCNN**&#xff08;2015年&#xff09;&#xff…
阅读更多...
文心一言眼中的ChatGPT是什么样的

文心一言眼中的ChatGPT是什么样的

Q: 你好文心一言&#xff0c;请说一说你眼中的chatgpt A: 在我眼中&#xff0c;ChatGPT是一种非常先进和强大的自然语言处理模型&#xff0c;它展示了人工智能技术的显著进步。ChatGPT拥有出色的语言理解和生成能力&#xff0c;能够与用户进行流畅、自然的对话&#xff0c;并尝…
阅读更多...
图书馆管理系统（2）

图书馆管理系统（2）

接下来实现系统的子菜单&#xff0c;在写一个子模块的时候&#xff0c;其他子模块先屏蔽起来&#xff0c;因为没实现&#xff0c;代码运行就通不过 屏蔽起来写上todo&#xff0c;后面(Ctrl键F)搜索&#xff0c;找todo来实现 先来实现图书管理模块 第一步&#xff0c;先要把图…
阅读更多...
代码随想录训练营第39天 | LeetCode 62.不同路径、​​​​​​LeetCode 63. 不同路径 II

代码随想录训练营第39天 | LeetCode 62.不同路径、​​​​​​LeetCode 63. 不同路径 II

LeetCode 62.不同路径 文章讲解&#xff1a;代码随想录(programmercarl.com) 视频讲解&#xff1a;动态规划中如何初始化很重要&#xff01;| LeetCode&#xff1a;62.不同路径_哔哩哔哩_bilibili 思路 代码如下&#xff1a; ​​​​​​LeetCode 63. 不同路径 II 文章讲解…
阅读更多...
智能化管理新趋势：连锁餐饮管理APP开发实战指南

智能化管理新趋势：连锁餐饮管理APP开发实战指南

时下&#xff0c;如何提高效率、降低成本、提升服务质量成为了每家连锁餐饮企业迫切需要解决的问题。而开发一款适用于连锁餐饮管理的智能化APP&#xff0c;成为了解决这些问题的重要途径之一。 一、​理解连锁餐饮行业的痛点和需求 连锁餐饮企业通常面临着分店多、人员流动大…
阅读更多...
12 OpenCv阈值处理

12 OpenCv阈值处理

文章目录 Halcon阈值处理概念阈值二值化阈值反二值化截断阈值取零阈值反取零算子示例 Halcon阈值处理 halcon 阈值处理 概念 阈值又叫临界值&#xff0c;是指一个效应能够产生的最低值或最高值。实际上是基于图片亮度的一个黑白分界值&#xff0c;默认值是50%中性灰&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023