HTML学习随笔1-简介

HTML : HyperText Markup Language(超文本标记语言) 

它在Web平台规范栈中占了很大的部分。

HTML is the World Wide Web's core markup language. Originally, HTML was primarily(最初地) designed as a language for semantically(语义上) describing scientific documents. Its general design, however, has enabled it to be adapted, over the subsequent(后来的) years, to describe a number of other types of documents and even applications.

HTML是一种标记语言,最初被设计为一种用于语义描述科学文档的语言。后续渐渐扩宽了描述对象。

HTML has a wide array of extensibility(可扩展性的) mechanisms(机制) that can be used for adding semantics in a safe manner:

  • Authors can use the class attribute to extend elements, effectively creating their own elements, while using the most applicable(可应用的) existing(现有的) "real" HTML element, so that browsers(浏览器) and other tools that don't know of the extension can still support it somewhat well. This is the tack used by microformats(微格式), for example.

  • Authors can include data for inline client-side scripts(脚本) or server-side site-wide scripts to process using the data-*=" " attributes. These are guaranteed(保障) to never be touched by browsers, and allow scripts to include data on HTML elements that scripts can then look for and process.

  • Authors can use the <meta name=" " content=" "> mechanism to include page-wide metadata(元数据).

  • Authors can use the rel=" " mechanism to annotate(注释) links with specific meanings by registering extensions to the predefined(预定义的) set of link types. This is also used by microformats.

  • Authors can embed(嵌入) raw data using the <script type=" "> mechanism with a custom type, for further handling by inline or server-side scripts.

  • Authors can create plugins and invoke them using the embed element. This is how Flash works.

  • Authors can extend APIs using the JavaScript prototyping(原型开发设计) mechanism. This is widely used by script libraries, for instance.

  • Authors can use the microdata feature (the itemscope=" " and itemprop=" " attributes) to embed nested(嵌套的) name-value pairs of data to be shared with other applications and sites.

HTML具有广泛的可扩展性机制:

  • 使用class属性扩展元素
  • 使用data-*=" "处理内联客户端脚本或服务器端站点范围脚本的数据
  • 使用<meta name=" " content=" "> 概括整个页面的元数据
  • 使rel=" "注释具有特定含义的链接
  • 使用<script type=" ">自定义类型地嵌入原始数据
  • 使用embed元素调用脚本
  • 使用JavaScript原型机制来扩展API
  • 使用微数据功能(itemscope=" "和itemprop=" "属性)嵌入嵌套的名称/值对数据,方便用来与其他应用程序和站点共享

microformats(微格式),是结构化数据的开放标准,是包含数据的结构化的XHTML代码块的定义格式。

由于是XHTML代码块,所以很适合人类阅读。又因为是结构化的,又很容易被机器处理。所以很容易和外部进行数据通信。

特点:

  • 为特殊应用而制定的特殊格式
  • 可以插入网页或XML元数据中,被收割和索引
  • 数据可被重用、与具体应用无关,也可自定义,完全取决于应用

参考资料:

https://baike.baidu.com/item/%E5%BE%AE%E6%A0%BC%E5%BC%8F/2914984


元数据(Metadata),又称中介数据、中继数据,为了描述数据的数据。

主要是描述数据属性的信息,用来支持如指示存储位置、历史数据、资源查找、文件记录等功能。

元数据算是一种电子式目录,为了达到编制目录的目的,必须描述并收藏数据的内容或特色,进而达成协助数据检索的目的。 

特点:

  • 元数据是关于数据的结构化的数据,它不一定是数字形式的,可来自不同的资源。 
  • 元数据是与对象相关的数据,此数据使其潜在的用户不必先具备对这些对象的存在和特征的完整认识。 
  • 元数据是对信息包裹(Information Package)的编码的描述。
  • 元数据包含用于描述信息对象的内容和位置的数据元素集,促进了网络环境中信息对象的发现和检索。
  • 元数据不仅对信息对象进行描述,还能够描述资源的使用环境、管理、加工、保存和使用等方面的情况。
  • 在信息对象或系统的生命周期中自然增加元数据。
  • 元数据常规定义中的“数据”是表示事务性质的符号,是进行各种统计、计算、科学研究、技术涉及所依据的数值,或是说数字化、公式化、代码化、图表化的信息。

参考资料:

https://baike.baidu.com/item/%E5%85%83%E6%95%B0%E6%8D%AE/1946090


A basic HTML document looks like this: 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

基础的HTML格式如上。 

  1. HTML文档由元素和文本树组成。
  2. 源中的每个元素都由一个开始标记(例如“ <body>”)和一个结束标记(例如“ </body>”)表示。
  3. 标签必须嵌套,不能重叠。
  4. 元素可以具有控制元素如何工作的属性(例如“<a href="demo.html">simple</a>”)。
  5. 属性放置在开始标记内,由名称和值组成,并以“=”字符分隔。
  6. 如果属性值不包含ADCII空格或任何“" ' ` = >”,则可以不加引号。否则,必须使用单引号或双引号将其引起来。
  7. 如果属性值为空字符串,则可以将其连同引号字符一起完全省略。
  8. DOM树是文档的内存表示形式。
  9. DOM树包含几种类型的节点,特别是一个DocumentType节点,多个Element 节点,多个Text节点,Comment某些节点,在某些情况下还包括 ProcessingInstruction节点。

  10. 脚本是小型程序,通常才JavaScript中,可以使用script元素进行嵌入。

  11. HTML文档可以呈现在屏幕上,为了准确表现这种渲染的方式,可以使用样式语言,例如CSS。

When HTML is used to create interactive(交互式) sites, care needs to be taken to avoid introducing vulnerabilities(脆弱性) through which attackers(进攻者) can compromise the integrity(保全) of the site itself or of the site's users.

A comprehensive(综合的) study of this matter is beyond the scope of this document, and authors are strongly encouraged to study the matter in more detail. However, this section attempts to provide a quick introduction to some common pitfalls(陷阱) in HTML application development.

The security model of the web is based on the concept(概念) of "origins", and correspondingly(相应地) many of the potential attacks on the web involve(涉及) cross-origin actions. 

当使用HTML创建交互式网站时,需要注意避免引入漏洞,攻击者通过这些漏洞可以损害网站本身或网站用户的完整性。

下面介绍HTML应用程序开发中的一些常见陷阱。

Web上的许多潜在攻击都涉及跨域动作。

  • Not validating user input 不验证用户输入

  • Cross-site scripting (XSS) 跨站点脚本
  • SQL injection SQL注入
  • Cross-site request forgery (CSRF) 跨站点伪造请求
  • Clickjacking 点击劫持

另外,对如何指定元素和属性设置了限制的一些例子:

  1. 不允许将section元素嵌套在元kbd素内。
  2. 对ul元素的内容模型存在的限制,仅允许li元素子级。根据定义,列表仅包含零个或多个列表项。
  3. div元素呈现为block boxes,span元素呈现为inline boxes。将block box放入inline box中会造成混乱。
  4. 一个button元素不能包含一个textarea元素。
  5. 不允许将disabled属性设置为值“false”。
  6. area元素的shape属性尽管实际上接受circ和circle值都作为同义词,但不允许使用该circ值。
  7. 两个id属性具有相同值是不合格的,重复的ID会导致选择错误的元素。

参考资料:

https://www.w3.org/html/

https://html.spec.whatwg.org/multipage/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值