HTML的秘密(1)基础知识总结

传达室老大爷
502 阅读8分钟

相声是一种语言艺术, 讲究说学逗唱, 而HTML是一种标记语言, 讲究兼容并包.

HTML: hyper text markup language 超文本标记语言. 它真的不是编程语言!

What is HTML?

解释一下? 什么叫TMD的超文本:

就是含有超链接的文本, 你可以指向其他位置，该位置可以在当前的文档中、局域网中的其他文档，也可以在因特网上的任何位置的文档中。这些文档组成了一个杂乱的信息网。

什么叫标记语言?

这是一种描述文档结构的标签系统，不含有任何操纵机器行为的语义(无法计算1+1)，只是便于浏览器或其他程序了解文本的结构，以便对要操作的部分进行定位。典型的标记语言有HTML 和 XML.

那HTML是什么?

HTML 文档 = 网页 HTML使用尖括号<HTML>标签来描述网页结构和内容. web浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是按照标签的标识来显示页面的内容. HTML文档的后缀名是.html或.htm

下面就是一个HTML文档 image.png

而它在浏览器中显示的网页是:

image.png

HTML的基本构成

HTML标签

作为组成HTML文档的基本元素, HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如<b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签, 但也有一些标签是"自闭"的, 比如
换行,<img/>插入图像,<hr/>分割线等等

HTML元素

HTML文件是由不同的元素构成的, HTML 元素以开始标签起始, 以结束标签截止. 元素的内容是开始标签与结束标签之间的内容

下面的例子包含三个 HTML 元素:

<html>           //<html> 元素定义了整个 HTML 文档。开始标签 <html>，结束标签 </html>。内容是body 元素。
<body>                          //<body> 元素定义了 HTML 文档的主体。开始标签 <body>，结束标签 </body>。元素内容是p 元素。
<p>This is my first paragraph.</p>   //这个 <p> 元素定义了 HTML 文档中的一个段落。开始标签 <p>，结束标签 </p>。元素内容是：This is my first paragraph。
</body>
</html>

某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束）

HTML属性

属性为 HTML 元素提供附加信息。比如<img src="xxx" weight="300" height="300"/> 为图片元素赋予了尺寸的属性. 它有一些基础规则:

  • 属性总是在HTML元素的开始标签中规定。

  • 属性总是以名称/值对的形式出现，比如：name="value"。

  • 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

      name='Bill "HelloWorld" Gates'
  <h1 align="center">This is a heading</h1> //添加居中对齐的附加属性
  <body bgcolor="#f5deb3">  //添加页面背景色

HTML版本声明

是我们HTML文件中的第一行, 它不是标签, 它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML5.0的版本声明是: <!DOCTYPE html>

提示： 声明对大小写不敏感。

HTML <head>

在版本声明之下, 就是头部定义了, 用<head>标签包裹。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。 可用于<head>元素内的元素有: <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>, <command>

我们来一个个看看这些元素标签:

<title> 标签 定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。 title 元素能够：优化你的SEO, 定义浏览器工具栏中的标题 提供页面被添加到收藏夹时显示的标题 显示在搜索引擎结果中的页面标题,

<base> 标签 为页面上的所有链接规定默认地址或默认目标（target）, 并可指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个<base>元素。如果指定了多个<base> 元素，只会使用第一个 href 和 target 值, 其余都会被忽略。

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
<a href>http://www.w3school.com.cn</a>     //href为空, 跳转默认链接

需要注意的是: 使用<base>处理页内锚会有问题, 例如：

给定 <base href="https://example.com">

以及此链接 <a href="#anchor">Anker</a>

链接指向 example.com/#anchor 这样的话是有问题的, 正常的页内锚格式应该是example.com#anchor

<link> 标签 定义文档与外部资源之间的关系。比如引入外部样式文件.css:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

<style>标签定义HTML样式

HTML有三类Style: 内置型, 行内型, 以及外联型

  1. 先说外联型, 这个目前是最流行的, 将外部样式文件(.css)和HTML文档进行解耦, 通过<link>标签来关联独立的css文件.比如: 在一个 index.html 文档里引用一个外部样式表文件, 需要在 index.html 代码的头部header 即放在标签 和标签 之间创建一个指向外部样式表文件的链接:

<link rel="stylesheet" type="text/css" herf="css/default.css"/>

  1. 内置型就是在<head>文档头部通过标签<style>来设置, 并可以在<body>中进行通过class或id进行引用.

     <style>
     h1 {color: blue}
     p {background: yellow}
 </style>

  2. 行内型就是在标记元素时赋予样式, 比如:

<h1 style="color: blue">我自己写的页面</h1>

如果一个元素同时存在这三种样式定义, 那么行内型的优先级是最高的.

<meta>元数据标签

<meta> 标签提供关于 HTML 文档的元数据。元数据（metadata）是关于数据的信息。元数据不会显示在页面上，但是对于机器是可读的。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者等元数据。针对搜索引擎的关键词 一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面:

name 和 content 属性的作用是描述页面的内容:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

meta 元素定义的元数据的类型包括以下几种：

  • 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。

  • 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。

  • 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

  • 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。注意: 全局属性 name 在 <meta> 元素中具有特殊的语义；另外，在同一个<meta> 标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。

     内容文档类型及字体
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 秒内被重定向到新的地址: 
  <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

<script> 标签 用于定义客户端脚本（JavaScript）。

<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。 如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。

在指定位置, 点击按钮插入文本:
<p id="js1">daijiaoben</p>
<button type="button" onclick="jsfunction()"> click </button>
<script>
function jsfunction(){
document.getElementById('js1').innerHTML='test'
}
</script>

把方法写道函数里, 然后通过onclick事件来调用函数:
<button type="button" onclick="myFunction()">点击我！</button>
<p id="demo">这是一个演示。</p>
<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello JavaScript!";          
}
</script>

<noscript> 标签 定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：

<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

HTML字符实体

在 HTML 中，某些字符是预留的, 比如我们不能直接使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：&entity_name 或 &#entity_number; 如需显示小于号，我们必须这样写：< 或 < 或 <

不间断空格（non-breaking space） HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。比如在文本中写 10 个空格，当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。如需在页面中增加空格的数量，就需要使用  字符实体。比如:

<p>space &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;space</p>

显示结果是:

image.png

HTML 文件路径

绝对文件路径 绝对文件路径是指向一个因特网文件的完整 URL：

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径 相对路径指向了相对于当前页面的文件。

image.png

HTML推荐的书写规范

使用 HTML5 元素来统一语义： 通过 HTML5 元素，比如<header> <footer> <nav> <section> <article>，来设置页面元素的样式, 浏览器便可以识别正确的网页内容。 避免使用个人喜爱的属性名：header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

请使用小写元素名 虽然HTML5允许在元素名中使用混合大小写字母。但推荐使用小写元素名. 混合大小写名称并不好 小写更起来更纯净 小写更易书写

<section> 
  <p>This is a paragraph.</p>
</section>

关闭所有 HTML 元素 有始有终是个好习惯, <p></p> 关闭空的 HTML 元素 <meta charset="utf-8" />

使用小写属性名：<div class="menu"> 并在属性值加加引号 <table class="table striped">

样式定义

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 开括号与选择器位于同一行
  • 在开括号之前用一个空格
  • 使用两个字符的缩进
  • 在每个属性与其值之间使用冒号加一个空格
  • 在每个逗号或分号之后使用空格
  • 在每个属性值对（包括最后一个）之后使用分号
  • 只在值包含空格时使用引号来包围值
  • 把闭括号放在新的一行，之前不用空格
  • 避免每行超过 80 个字符

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感： 不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感： 能够以 london.jpg 或 London.jpg 访问 London.jpg。 为了避免文件名上的问题，请始终使用小写文件名。

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。

请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。 请勿毫无理由地增加空行。

为了提高可读性，请增加空行来分隔大型或逻辑代码块, 请勿使用 TAB。

不要省略 <html> <body> <title> 标签。

以上就是HTML的基础知识， 编程是门手艺，基础很重要， 基础牢了， 之后的东西才可靠!










感谢阅读, 如有不准确和错误地方请留言指正, 我会及时修正, 拜谢!

总结不易, 请勿私自转载, 否则别怪老大爷不客气

欢迎喜欢研究技术的小伙伴儿和我交流, WX:1296386616

参考资料:

www.runoob.com/html 菜鸟教程

developer.mozilla.org/zh-CN/docs/… MDN Web docs

www.w3school.com.cn/html/index.… W3School

avatar
文章
阅读
粉丝