01_初识HTML

最新推荐文章于 2024-10-10 11:00:45 发布
最新推荐文章于 2024-10-10 11:00:45 发布
阅读量711 收藏 20
点赞数 11
分类专栏： HTML 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73966534/article/details/141873047
版权

HTML元素剖析

<code>content</code> 

元素是一种用来向浏览器说明文档内容的工具, 其效果体现在内容之上, 不同的元素具有不同的确切含义

注意: 元素名不缺分大小写, 但是我们应该认定某种格式并且贯彻始终, 通常使用小写的格式

浏览器不会显示元素的标签, 它的任务是解读HTML文档, 然后向用户呈现一个体现HTML元素作用的视图, 将内容与呈现分开

有些HTML元素会对呈现的形式产生影响, 例如code元素, 浏览器遇到该元素的时候, 会用等宽字体显示元素的内容

但是用HTML控制内容呈现形式的做法如今收到强烈的反对, 现在的灌顶是应该使用HTML元素,说明文档内容的结构和含义, 使用CSS控制内容呈现给用户的形式

会影响呈现形式的那些元素通常产生于HTML的早期版本, 当时将内容与呈现形式区分开这个理念未像如今一样严格实施, 这些元素在浏览器中呈现的时有默认的呈现形式, 不过可以使用CSS来改变其默认的样式

元素的表现形式

双标签

成对出现的标签

空元素

元素的开始标签和结束标签之间不一定要有内容, 没有内容的元素称之为空元素, 有些元素为空的时候并没有意义, 即便如此, 它也是有效的HTML代码

自闭和标签

空元素可以使用更简洁的使用一个标签来表示, 通常用来表示是结束标签开始的斜杠符号在次被放置到标签的尾部, 自闭和标签其含义和空元素是等价的

虚元素

有些元素只能使用一个标签表示, 在其中放置任何内容都不符合HTML规范, 这类元素称之为虚元素(void Element), hr就是一个这样的元素, 它是一种组织性的元素, 用来表示内容中段落级别的终止, 虚元素可以使用可以使用斜杠结束也可以不使用, 浏览器知道hr是一个虚元素, 所以不会等待其结束标签出现, 但是加上斜杠更具有可读性, hr元素是一个具有呈现形式含义的元素, 它会显示未一条横线

用不用非强制使用的开始和结束标签

许多的HTML5元素在某些条件下可以省略其中一个标签, 例如html元素的结束标签在此情况下可以省略: "该元素后面没有紧跟着一条注释, 且该元素中包含一个绯红或者其开始标签未曾省略的body元素", 这一段引文出自一份正式的HTML5规范文档

标记语言能有这种灵活性很不错, 不过这也会把人弄糊涂, 而且会给维护工作带来麻烦, HTML文档并非只由浏览器处理, 你的同时和未来的你也会阅读它们, 浏览器也许能明白某个标签为什么会被省略, 但是你的同时未必能懂, 就算是你回头再看也可能搞不明白

元素属性

元素可以用属性(attribute)进行配置, href属性是应用在a标签上一个属性, 这个元素用来生成一个超链接, 点击链接就会加载另一个HTML文档

属性只能用在开始标签或者单个元素上, 不能用作结束标签上, 属性具有属性名称和属性值两个部分组成

有一些属性可用于所有的HTML元素上, 还有一些应用在特定元素上的专有属性

一个元素可以应用多个属性, 这些属性之间以一个或者多个空格分隔即可

属性的顺序没有要求

布尔属性

有些属性属于布尔属性, 这种属性不需要设定一个值, 只需要将属性名添加到元素中即可

自定义属性

用户可以自定义属性, 这种属性必须以data-开头

这种属性的恰当名称是作者定义属性, 有时候也被称之为拓展属性

自定义属性是对HTML4中"浏览器应当忽略不认识的属性"这种广泛应用的技巧的正式规定, 在这类属性名称之前添加前缀data-是为了避免与未来的HTML版本中可能添加的属性名冲突, 自定义属性与CSS和JavaScript结合起来很有用

创建HTML文档

元素和属性不会孤立存在, 它们是用来标记HTML文档内容的, 要创建一个HTML文档, 最简单的方式是创建一个文本文件, 将其拓展名更改为.html, 这个文件可以直接从磁盘载入浏览器, 也可以从Web服务器载入

浏览器和用户代理

HTML文档最常见的使用方式也是用浏览器查看, 但是还有一些其他情况需要考虑, 用于处理HTML文档的各种软件都有一个共同的名称叫做用户代理(user agent), 浏览器是最流行的用户代理, 但不是唯一一种

非浏览器的用户代理现在还很少, 以后可能会多起来, 在HTML5中更加强调将内容与呈现形式分开, 正式因为认识到HTML内容并不总是会被显示给用户来看, 但是你要记住: 你的HTML文档有可能会给别的一些软件处理

HTML与XHTML对比

符合HTML语法的文档不一定符合XML语法, 因此用标准的XML解析程序处理HTML可能会遇到问题

为了解决这个问题, 可以使用XHTML, 它是HTML的XML序列化形式(这就是说, 以符合XML规范的方式来表达文档的内容以及HTML元素和属性, 以便XML解析程序处理), 此外, 也可以创建即是有效的HTML文档也是有效的XML文档, 不过这要求使用HTML语法的一个子集

外层结构

HTML文档的外层结构有两个元素确定: DOCTYPE和html

DOCTYPE元素让浏览器明白其处理的是HTML文档

紧跟着DOCTYPE元素的是html元素的开始标签, 它告诉浏览器: 字词直到html结束标签, 所有元素内容都应该作为HTML处理, 用了DOCTYPE元素之后又接着使用html元素看起来有些奇怪, 其实早在HTML标准的初露锋芒的时候, 具有同等地位的还有一些别的标记语言, 文档中可能会混合使用多种标记语言

如何HTML已成为占决定优势的标记语言, 即是在文档中省略DOCTYPE和html元素, 绝大多数浏览器仍会假定自己处理的是HTML文档, 不过这并不意味着不必再用这两个元素, 这是因为它们有着重要的用途, 切以来浏览器的默认行为就像轻信陌生人一样不靠谱

元数据

HTML文档中的元数据部分可以用来向浏览器提供文档的一些信息, 元数据包含在head元素内部

head元素还能用来规定文档与外部资源(如CSS样式表)的关系, 定义内嵌CSS样式, 放置和载入脚本程序

内容

文档内容, 放在body元素之中

body元素告诉浏览器该向用户显示文档的那个部分

父元素, 子元素, 后代元素和兄弟元素

HTML文档之间有明确的关系, 包含另一个元素的元素是被包含元素的父元素,被包含元素是其子元素, 一个元素可以拥有多个子元素, 但是多个子元素之间只能有一个父元素

包含在其他元素之间的元素也可以包含别的元素, 其是顶级元素的后代元素

元素之间的关系在HTML中随处可见, 一个元素能以什么样的元素为父元素或者子元素是有限制的, 这些限制通过元素类型表现处理

元素类型

HTML5规范将元素分为三大类: 元数据元素(metadata element), 流元素(flow element), 短语元素(phrasing element)

元数据元素用来构建HTML文档的基本结构, 以及就如何处理文档向浏览器提供信息和指示

另外两种元素略有不同, 它们的用途是确定一个元素合法的父元素和子元素范围, 短语元素是HTML的基本组成部分, 流元素是短语元素的超级, 所有短语元素都是流元素, 但并非所有流元素都是短语元素

有些元素无法归入上述三种类型, 这些元素要么没有什么特别的意义, 要么只能用在一些非常有限的情况下, li元素就是有限元素的一个例子, 他只能是ol和ul和menu元素的子元素

HTML实体

HTML中有些字符具有特殊含义, 比较明显的就是大于号和小于号, 有时候我们需要在文档中使用这些字符, 但是不想让他们被当成HTML来处理, 这个时候应该使用HTML实体(entity), 实体其实是浏览器用来代替特殊字符的一种代码, 每个特殊字符都有一个实体编号, 可以用来在文档内容中代表该字符,比如&的实体编号是&#38, 特别常用的特殊字符还有对应的实体名称, &名称为&amp, 编号和其名称是一回事

HTML5全局属性

每种元素都能规定自己的属性, 这种属性称之为局部属性(local attribute), 每一个局部属性都可以用来控制元素独有行为的某个方面

属性还有另外一种类型: 全局属性(global attribute), 它们用来配置所有元素公有行为, 全局属性可以用在任何一个元素身上, 不过这不一定会带来有意义或者有用的行为改变

accesskey属性

使用accesskey属性可以设定一个或者几个用来选择页面上的元素的快捷键

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      Name: <input type="text" name="name" accesskey="n" /> Password:
      <input type="password" name="password" accesskey="p" /> Name:
      <input type="submit" name="submit" accesskey="s" />
    </form>
  </body>
</html>
​

这个例子为三个input元素元素添加了accesskey属性, 其目的是让网页或者网站的熟客可以使用快捷键访问经常用到的元素, 用来触发accesskey机制的按键组合因平台而异

WindowsLinuxMac
FirefoxAlt + Shift + keyOn Firefox 57 or newer, Control + Option + key -OR- Control + Alt + key On Firefox 14 or newer, Control + Alt + key On Firefox 13 or older, Control + key
Internet ExplorerAlt + keyN/A
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/AControl + Alt + key
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key

class属性

class属性用来将元素归类, 这样做通常是为了能够找出文档中的某一类元素或者为某一类元素应用样式

一个元素可以被归入多个类别, 为此class属性值中提供多个用空格分隔的类名即可, 类名可以随便取, 但是最好取名的时候带有实际意义, class属性本身无任何意义

contenteditable

contenteditable是HTML5中新增加的属性, 其用途是让用户能够修改页面上的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p contenteditable>我是原始内容</p>
  </body>
</html>

我们将元素上的contenteditable属性设置为true时用户就可以编辑元素内容, 设置为false就是进制编辑, 如果没有设置值, 那么元素就会从父元素哪里继承该属性的值

contextmenu

contextmenu属性用来为元素设定快捷菜单, 这种菜单会在受到触发的时候, (例如windows用户用鼠标右击)弹出来

dir

dir属性用来规定元素中文字的方向, 其有效值有两个: ltr(用于从左边到右的文字)和rtl(用于从右到左的文字)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p dir="ltr">左到右</p>
    <p dir="rtl">右到左</p>
  </body>
</html>

draggable

draggable属性是HTML5支持拖放操作的方式之一, 用来表示元素是否可被拖放

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p draggable="true">可被拖放</p>
  </body>
</html>

dropzone

dropzone属性是HTML5支持拖放操作的方式之一, 与上述的draggable属性搭配使用

hidden

hidden是个布尔属性, 表示相关元素当前无需关注, 浏览器对他的处理方式是隐藏相关元素

id

id属性用来给元素分配一个唯一的标识符, 这种标识符通常用来将样式应用到元素上或者JavaScript程序中来选择元素, id属性也可应用与锚点

lang

lang属性用于说明元素内容使用的语言

lang属性值必须必须是有效的ISO语言代码

使用lang属性的目的是让浏览器调整其表达元素内容的方式, 比如说改变使用的引号, 在使用文字朗读器的情况下正确发音

lang属性还可以用来指定语言的内容, 以便值显示用户所选语言的内容或对其应用样式

spellcheck

spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查, 这个属性只有在用户可以编辑的元素上才有意义

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="" cols="30" rows="30" spellcheck></textarea>
  </body>
</html>

spellcheck属性是布尔属性, 至于拼写检查的实现方式因浏览器而异

style

style属性用来直接在元素身上定义CSS样式

tabIndex

HTML页面上的键盘焦点可以通过按Tab键在各种元素之间切换, 用tabIndex属性可以改变默认转移顺序

tabIndex值小的元素会被第一个选中, 用户在按就会以此类推

tabIndex值为负数的不会被选中

title

title属性提供了元素的额外信息, 浏览器通常用这些东西显示工具提示

总结

  • 元素剖析

  • 元素的表现形式

    • 双标签 / 单标签 / 空元素 / 虚元素

  • HTML结构

    • DOCTYPE html: 文档声明

    • head: 元数据

    • body: 呈现的内容

  • 全局属性

    • accesskey

    • contenteditable

    • contextmenu

    • dir

    • draggable

    • dropzone

    • hidden

    • id

    • class

    • style

    • spellcheck

    • tabIndex

    • title

小倪的博客
关注
专栏目录
HTML＜var＞ 标签
玄链教育
09-12 1283
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。定义变量。您可以将此标签与 及 标签配合使用。
关于js中var关键字的作用
tongxinmiao的专栏
09-27 1112
最近刚刚接触js，感觉这种语言并不十分强调语法规范的重要性，例如变量的声明，使用关键字var来声明变量，变量可以是数字，字符等等。在var关键字的使用上面出现了一个问题，现在记录于此。   出现错误的代码如下： JS基础 function maximum(var x1,x2){ if(x1>x2){ return x1; }else{
CH01_初识JavaScript
IT技术类博客
07-02 1031
js组成，js语法，js注释
Js基础_初识JavaScript
qq_45578388的博客
11-08 6726
文章目录一、JavaScript是什么？二、Js作用三、浏览器执行Js 一、JavaScript是什么？ 是一种运行在客户端的脚本语言（不需要编译，运行过程中由解释器逐行来进行解释执行） Node.js可以进行服务端编程 二、Js作用 1.表单动态校验（密码强度检测） 2.网页特效 3.服务端开发（Node.js） 4.左面程序（Electron） 5.App/小程序（Cordova） 6.控制硬件-物联网（Ruff） 7.游戏开发（cocos2d-js） 三、浏览器执行Js 浏览器分为两个部分 渲染引擎
Flask狼书笔记 | 01_初识Flask，02_Flask与HTTP
成长之路
08-12 1974
以前对网站开发萌生了想法，又有些急于求成，在B站照着视频敲了一个基于flask的博客系统。但对于程序的代码难免有些囫囵吞枣，存在许多模糊或不太理解的地方，只会照葫芦画瓢。而当自己想开发一个什么网站的时，就如同摸着石头过河，常在许多小问题上卡住，不知怎么实现，也不知道需要去学习什么才能实现。例如，要做一个聊天室程序，我却不知道在一方发出消息时，如何在另一方实时地显示出来，思虑许久而终归于放弃。学习系统且详细的知识有其好处，它可以冲退我那种徒手在黑暗中摸索的感觉。
初识python评课稿_初识python
weixin_39656686的博客
12-23 1012
在开始本次课的学习之前同学们需要搭建好python3的开发环境(下载python3到自己电脑上本地开发或者在云端在线开发均可)，搭建完环境后需要自己建立一个py文件(python程序的后缀名是py)，运行该文件输出"Hello world"。不会安装的同学请利用百度经验：https://jingyan.baidu.com/article/5d368d1ea2e51f3f60c057ce.html。...
入门学习JavaScript_初识JavaScript
10-24 8952
JavaScript概述 JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页上，大多数的交互逻辑几乎都是由JavaScript实现的。 语言 作用 及说明 HTML 结构_决定网页的结构和内容，相当于人的身体 CSS 样式-_决定网页呈现给用户的模样，相当于给人穿衣服，化妆 JavaScript 行为_实现业务逻辑和页面控制，相当于人的各种动作 ...
初识HTML（详细版）
wrrtx的博客
07-24 1604
尽可能讲述html的基本知识以及演示代码
初识HTML _20220907
晓倩要加油的博客
09-16 251
web前端HTML详细知识点
pg_basebackup初识
liuzhilong的博客
08-09 2332
什么是pg_basebackup？ 1.pg_basebackup是pg自带的备份工具，它用来做pg的基础备份。pg_basebackup可以用作PITR，也可以用来构造log-shipping standby和stream standby 2.pg_basebackup总是备份整个pg，不能做单独的database备份。如果要单独备份某个database或者schema，应该用pg_dump。 3.pg_basebackup会备份除了临时文件的所有文件，包括data目录下的所有数据文件，配置文件等等
Flask从入门到精通_01_初识Flask
06-21
首先，创建一个名为`templates`的目录，在其中创建一个`index.html`文件： ```html <!DOCTYPE html> <html> <title>Flask示例 <h1>{{ greeting }}，{{ user }}! </html> ``` 然后修改`app.py`，引入模板： ...
《初识HTML5—当当网图书分类页面》上机作业.rar_html作业当当_当当htmlcss_当当网_当当网html_当当网图书
07-15
这是一个当当网主页的HTML+CSS代码实现，希望对大家有用
01vue初识_vue_principle9nn_
10-03
"01vue初识_vue_principle9nn_" 涉及的是Vue的基础应用部分，这通常包括Vue的核心概念、安装、基本结构以及一些基础的指令和API。 1. **Vue核心概念**： - **数据绑定**：Vue的核心特性之一是双向数据绑定，通过`v...
HTML·第五章CSS盒子模型
最新发布
MortalTom的博客
10-10 560
盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。2.内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。
XHTML 简介
wjs2024的博客
10-04 670
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
HTML 常用的块级元素和行内元素
u010194271的博客
10-09 419
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
初识HTML：创建个人网页的基础教程
制作自己的第一个网页-HTML网页设计教程旨在引导初学者入门网页开发。该教程将分步骤进行，以记事本程序为基础，演示如何书写HTML文档的基本结构。HTML（Hypertext Markup Language）被比喻为浏览器的“母语”，由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值