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.mzph.cn/news/727744.shtml

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

相关文章

docker 部署prometheus+grafana

docker 部署prometheus+grafana

首先进行部署docker 配置阿里云依赖&#xff1a; curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo # 配置centos 7的镜像源 yum install -y yum-utils device-mapper-persistent-data lvm2 # 安装一些后期或需要的的一下依…
阅读更多...
142.乐理基础-音程的构唱练习

142.乐理基础-音程的构唱练习

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;141.乐理基础-男声女声音域、模唱、记谱与实际音高等若干问题说明-CSDN博客 本次内容最好去看视频&#xff1a; https://apphq3npvwg1926.h5.xiaoeknow.com/p/course/column/p_5fdc7b16e4b0231ba88d94f4?l_progra…
阅读更多...
2024年6个最佳WordPress游戏化插件

2024年6个最佳WordPress游戏化插件

在寻找最好的WordPress游戏化插件来提高网站的参与度&#xff1f; WordPress游戏化是将游戏元素应用到WordPress 网站的想法&#xff0c;例如得分、排行榜、奖项、测验结果共享等。 显然&#xff0c;WordPress 的核心并不包含这些类型的功能。借助WordPress游戏化插件&#x…
阅读更多...
Selenium自动化测试-3.元素定位(2)

Selenium自动化测试-3.元素定位(2)

我们发现网站并没有id、name等属性。那么&#xff0c;我们可以用更高级的定位方法——xpath来定位元素。 什么是xpath? xpath是一种在XML文档中定位元素的语言。因为HTML可以看做XML的一种实现&#xff0c;所以selenium用户可以使用这种强大语言在web应用中定位元素&#xf…
阅读更多...
Java定时调度：Timer类和TimerTask类

Java定时调度：Timer类和TimerTask类

Java提供了多种方式来执行定时任务&#xff0c;其中使用Timer类和TimerTask类是一种简单而有效的方法。这篇教程将介绍如何使用Java的Timer类和TimerTask类来实现定时调度。 1. Timer类 Timer类用于安排指定的任务按指定的时间执行。它可以执行一次性任务&#xff0c;也可以按…
阅读更多...
Vue.js+SpringBoot开发衣物搭配系统

Vue.js+SpringBoot开发衣物搭配系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣物收藏模块 三、系统设计3.1 用例设计3.2 E-R图设计3.3 数据库设计3.3.1 衣物档案表3.3.2 衣物搭配表3.3.3 衣物收藏表 四、系统实现4.1 登录页4.2 衣物档案模块4.3 衣物搭配模块4.4…
阅读更多...
掀桌子了！20万左右的混动SUV，千万别乱选

掀桌子了！20万左右的混动SUV，千万别乱选

文 | AUTO芯球 作者 | 雷歌 又掀桌子了&#xff01; 比亚迪秦PLUS掀翻了混动轿车圈的桌子后&#xff0c;又来掀混动SUV的桌子了。 而且掀桌子的还不只一家&#xff0c;比亚迪掀完奇瑞掀。 比亚迪唐DM-i以17.98万起售的价格&#xff0c;掀掉了中型混动SUV的桌子&#xff0c;…
阅读更多...
[数据结构初阶]队列

[数据结构初阶]队列

鼠鼠我呀&#xff0c;今天写一个基于C语言关于队列的博客&#xff0c;如果有兴趣的读者老爷可以抽空看看&#xff0c;很希望的到各位老爷观点和点评捏&#xff01; 在此今日&#xff0c;也祝各位小姐姐女生节快乐啊&#xff0c;愿笑容依旧灿烂如初阳&#xff0c;勇气与童真永不…
阅读更多...
STM32CubeMX学习笔记16--- STM32内部FLASH

STM32CubeMX学习笔记16--- STM32内部FLASH

1. 内部FLASH简介 之前的文章中介绍过STM32F1利用SPI与外部FLASH&#xff08;W25QXX芯片&#xff09;通讯的例程&#xff0c;本例程将介绍STM32F1的内部FLASH&#xff0c;通过内部FLASH实现数据读写操作。 不同型号的STM32&#xff0c;其FLASH容量也有所不同&#xff0c;最小的…
阅读更多...
nexus 简单运维

nexus 简单运维

Nexus介绍 Nexus 是 Sonatype 公司发布的一款仓库&#xff08;Repository&#xff09;管理软件&#xff0c;常用来搭建 Maven 私服&#xff0c;所以也有人将 Nexus 称为“Maven仓库管理器”。 Nexus常用命令 进入安装目录 再进入bin目录 ​ cd /opt/nexus-3.13/nexus-3.13.…
阅读更多...
【java】后序遍历二叉树

【java】后序遍历二叉树

采用递归方式实现 节点类 public class Node {private int value;//父节点private Node fNode;//左节点private Node left;//右节点private Node right;//是否已经打印过private boolean sign false;public Node() {}public boolean isSign() {return sign;}public void setS…
阅读更多...
未来AI发展趋势

未来AI发展趋势

引言 如何实现一个乌托邦式的社会呢&#xff1f;如果直接将人类社会分为两个阵营&#xff0c;一个是以旧人类为首的阵营&#xff0c;一个是以AI抚养的新人类阵营&#xff0c;其中新人类阵营的所有资源皆由旧人类阵营提供&#xff0c;且旧人类阵营的人类都经过了化学阉割无法生…
阅读更多...
14：00面试，15：00就出来了，问的问题过于变态了。。。

14：00面试，15：00就出来了，问的问题过于变态了。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到2月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…
阅读更多...
静态时序分析：典型与非典型时序路径的约束详解（一）

静态时序分析：典型与非典型时序路径的约束详解（一）

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 时序路径是静态时序分析中的一个重要概念&#xff0c;了解时序路径能帮助设计者更好地编写SDC脚本&#xff0c;本文旨在详细介绍时序路径相关内容。 首先给出时序…
阅读更多...
Unity角色动画变成半跪\半蹲\下沉 的问题

Unity角色动画变成半跪\半蹲\下沉 的问题

导入的人物动画发生如图形态 解决方法&#xff1a;找到动画模型&#xff0c;Rig - AnimationType 改为Humanoid &#xff0c;然后Apply一下
阅读更多...
高效加载大文件(pandas+dask)

高效加载大文件(pandas+dask)

一、仅用pd加载大文件(iterator、chunksize) 要使用Pandas进行高效加载超大文件&#xff0c;我们通常会利用其内置的分块&#xff08;chunk&#xff09;处理功能。不过&#xff0c;请注意&#xff0c;Pandas本身并不支持多线程读取文件&#xff1b;它更倾向于单线程中进行块处理…
阅读更多...
千云GPS平台 -在k8s上部署Mysql

千云GPS平台 -在k8s上部署Mysql

构建xtrabackup docker build -t registry.cn-zhangjiakou.aliyuncs.com/qy566/xtrabackup:8.0.34 --rm .部署进度 你可以通过运行以下命令查看启动进度： kubectl get pods -l app=mysql -n mysql-db --watch 测试mysql 发送客户端请求写入数据kubectl run mysql-client --…
阅读更多...
解决cs不能生成Linux木马的问题

解决cs不能生成Linux木马的问题

要解决的问题&#xff1a;众所周知&#xff0c;msf上面的shell或者是其他的shell想反弹给cs默认情况下是只支持windows的&#xff0c;因为cs的监听模块默认没有linux的&#xff0c;但是有些主机就是用linux搭建的&#xff0c;这可怎么办呢。就要用到一个插件CrossC2。 下载插件…
阅读更多...
实操keepalived（高可用）+Nginx（四层代理+七层代理），实现高可用、负载均衡以及动静分离

实操keepalived（高可用）+Nginx（四层代理+七层代理），实现高可用、负载均衡以及动静分离

一 vrrp技术 VRRP 相关术语 VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;i通过配置虚拟路由器的IP地址为默认网关&#xff0c;实现网关的备份。 协议版本: VRRPv2 (常用) 和VRRPv3:0 VRRPv2仅适用于IPv4网络&#xff0c;VRRPv3适用…
阅读更多...
[项目设计] 从零实现的高并发内存池(五)

[项目设计] 从零实现的高并发内存池(五)

&#x1f308; 博客个人主页&#xff1a;Chris在Coding &#x1f3a5; 本文所属专栏&#xff1a;[高并发内存池] ❤️ 前置学习专栏&#xff1a;[Linux学习] ⏰ 我们仍在旅途 ​ 目录 8 使用定长内存池脱离new 9. 释放对象时不传大小 10.性能优化 10.1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023