HTML基础知识 · 虫师de江湖

[TOC] # HTML基础知识 ## 什么是HTML(超文本标记语言) 看似很简单的问题，却又很难给出定义。 `HTML` 是一种使用标签元素来构建Web页面的语言，通过提供了`style`样式可以美化元素显示效果，通过`Event`事件丰富标签元素的行为表现。每个标签元素都包含一些属性信息，通过属性信息来命名、样式等个性化信息，例如 <a> 的 `href`属性可以提供`链接地址`信息。`<img>`标签元素的`src`属性标记出显示的`图片路径`信息。 1. 通过`标签元素`的布局来定义要展示页面的大致布局结构 2. 再通过`CSS样式`及标签属性丰富页面显示效果，让页面看起来更加美观 3. 再通过`JavaScript`脚本和`标签事件`动作的配合，让页面看起来是动态的和相互关联的。 ## HTML结构 HTML基本结构如下： ```sh <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> ``` ![](https://img.kancloud.cn/99/cc/99cc1aea52f6888a5ea04d22e755d6a5_1275x536.png) ### Doctype声明 `<!DOCTYPE html>` ：这是文档类型声明，`HTML`文档必须要添加的，这个是`HTML5`的声明，以前的声明还有如下： HTML 4.01 : ```sh <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ``` XHTML 1.1 : ```sh <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ``` 关于不同`DocType`支持的标签也是不同的，详细参考连接 [Valid HTML Elements in Different DOCTYPES](https://www.w3schools.com/tags/ref_html_dtd.asp) ### head头标签 > 页面标题、样式链接、脚本链接、元数据等信息都包含在`<head>`标签中， `<head>`标签中可以包含标签： - `<title> (required in every HTML document)` - `<style>` - `<base>` - `<link>` - `<meta>` ：元数据描述了页面相关的关键词、作者信息、修改时间及字符集等信息，帮助搜索引擎标记Web页面搜索关键词。 - `<script>` - `<noscript>` #### `<meta>`元数据标签属性 |属性|值|描述| |:---|:-----------|:----------| |content(必选属性)|some_text|定义与 http-equiv 或 name 属性相关的元信息| |http-equiv | content-type , expires, refresh, set-cookie| 把 content 属性关联到 HTTP 头部。| |name |author,description,keywords,generator,revised,others| 把 content 属性关联到一个名称。| |scheme|some_text|定义用于翻译 content 属性值的格式。| 关于`<meta>`元数据的示例： ```sh <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <meta name="keywords" content="HTML, CSS, XML" /> <meta http-equiv="charset" content="utf-8"> ``` 其中`http-equiv`属性为`key-value`对提供了命名的名称。当浏览器请求服务器数据头部时会返回信息如下： ```sh content-type: text/html description: Free Web tutorials on HTML, CSS, XML keywords: HTML, CSS, XML charset:utf-8 ``` ### body实体标签 > 要显示的内容就包含在`<body>`标签中，也就是我们要描述页面布局的位置，我们需要展示什么样的布局，什么内容，都是在这里进行描述的。 `<body>`实体标签内部可以包含很多标签，具体的标签可参考 [标签元素名称列表](HTML标签元素列表.md) ### style设置CSS样式 > 仅仅使用标签描述文档结构是不够美观的，我们还需要通过`CSS`样式来控制标签显示的更加丰富多彩。下面是一个简单的定义颜色显示： ```sh <head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head> ``` 如果需要外部链接到`CSS`样式文件，需要使用`<link>`标签： ```sh <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> ``` ### HTML事件属性 > 在浏览器中，HTML的事件属性可以触发一些执行动作，比如当点击一个标签元素时可以执行`onclick`事件设置的`JavaScript`方法动作。关于`JavaScript`的方法实现就不在这里介绍，这里只是列举一下有哪些事件类型。 - Window 事件属性：针对 window 对象触发的事件（应用到 <body> 标签） - Form表单事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中） - Keyboard 事件：键盘事件`onkeydown`按下按键、`onkeypress`敲击按键、`onkeyup`释放按键 - Mouse 事件: 鼠标或类似用户动作触发的事件，如：左键按下、左键释放、滚动、点击、拖放等动作。 - Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）具体事件属性名和含义参考 [HTML事件属性列表](HTML事件属性列表.md) ---