HTML基础
日期： 2018-05-08 分类： 个人收藏 378次阅读
本博客是在MDN的知识基础上，结合了自己的开发经验所做出的总结
MDN地址：https://developer.mozilla.org/zh-CN/
-
- 基础知识
- Head元素
- 基本规则与基础元素
- 调试HTML代码
- HTML书写规范
- 多媒体和嵌入
- 表单元素
- 什么是表单？
- form
- fieldset与legend
- label
- 表单元素的通用属性
- input(单行文本域)
- textarea(多行文本域)
- select(下拉菜单)
- datalist(自动补全列表)
- checkbox(复选框)和radio(单选框)
- button(按钮)
- input[type=file](文件上传)
- input[type=hidden](隐藏的表单)
- input[type=image](将图片作为提交按钮)
- input[type=number](数字)
- input[type=range](滑块)
- input[type=date](日期时间选择器)
- input[type=color](拾色器)
- progress(进度条)和meter(仪表)
- 表单校验
- 自定义表单
- 表格
基础知识
什么是HTML?
HTML，它的英文全称是HyperText Markup Language，翻译为中文就是超文本标记语言。如同名字所表示的含义，HTML并不是一种编程语言，而是一种标记语言，它在页面中的作用是搭建出页面的树状结构，在该结构上的每一个节点就是一个标记。
HTML的基本结构
HTML的基本组成包括：开始标签（Opening tag）、结束标签（Closing tag）和内容（Content），内容可以是空的。这三者结合在一起组成了一个完整的标签，或被称为元素（Element）。
空元素
一般的元素都包含了开始标签和结束标签和内容，但是有一类元素不需要包含任何内容，所以他们仅使用一个单独的标签来表示，我们将这类元素称为空元素（Empty elements）或单元素（void elements）。
元素的类别
我们习惯将元素分为三种类型：块级元素、内联元素、内联块元素。他们在页面上的表现各有不同，拥有不同的display属性。
| 元素类别 | 特性 |
|---|---|
| 块级元素 | 独自占据一行的空间;可以给宽高赋值；支持四个方向的padding/margin； |
| 内联元素 | 仅占据内容占用的空间;不支持宽高的赋值;支持左右方向的padding/margin； |
| 内联块元素 | 仅占据内容占用的空间;支持宽高赋值;支持四个方向的padding/margin； |
元素的嵌套
我们可以将一个元素放在另一个元素中，这种结构被称作嵌套。
<p>My cat is <strong>very</strong> grumpy.</p>元素的嵌套应遵循一定的规则：
- 块元素可以嵌套所有的元素，但是p元素仅可以嵌套内联元素
- 内联元素可以嵌套其他的内联元素，不可以嵌套自己
- a元素可以嵌套所有元素，但是不可以嵌套自己
属性（Arrtibute）
一个基本的属性有三个部分组成：
- 在元素和属性之间有个空格space (如果有一个或多个已存在的属性，就与前一个属性之间有一个空格)
- 属性后面紧跟着一个“=”符号
- 有一个属性值,由一对引号“ ”引起来
有一类特殊的属性，叫做布尔属性，布尔属性拥有默认的值true，可以在书写的时候省略赋值
<input type="text" disabled>HTML中的特殊字符
在HTML中，字符 <, >,”,’ 和 & 是特殊字符. 它们是HTML语法自身的一部分, 在使用这些特殊的字符时，我们需要使用字符引用。
| Literal character | Character reference equivalent |
|---|---|
| < | < |
| > | > |
| “ | " |
| ‘ | ' |
| & | & |
| 空格 | |
字符引用如下方代码所示：
<p>In HTML, you define a paragraph using the <p> element.</p>HTML中的注释
为了将一段HTML中的内容置为注释，你需要将其用特殊的记号 包括起来， 比如：
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->HTML文件的基础结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>如上方代码所示，一个HTML文件的基础结构包含四个部分：doctype、html元素、head元素、body元素，他们在结构中的作用如下表
| 元素 | 作用 |
|---|---|
| doctype | 声明文档的类型; |
| html | 文档的根元素; |
| head | 包含了页面中不需要展示给用户的元数据; |
| body | 包含了页面中展示给用户的全部内容; |
Head元素
什么是Head标签?
head元素的内容不会显示在浏览器中，它的作用是包含一些页面的元数据，在大型的页面中，head中可能会包含很多的元数据。head元素中主要嵌套的元素如下表：
| 元素 | 作用 |
|---|---|
| title | 表示页面的标题; |
| meta | 可以包含多种信息，类似于一个页面的配置参数; |
| link | 引用文件，可以引用css文件，或为页面的标题增加图标; |
| style | 在style标签中可以书写页面的css样式，这种书写css的方式被称为内联样式表; |
| script | 可以引用js文件，或在script中书写js代码; |
元数据：meta元素
元数据就是描述数据的数据,meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
例如下方代码，为文档指定了字符编码。
<meta charset="utf-8">许多<meta> 元素包含了name 和 content属性:
name属性指定了meta元素的类型; 说明该元素包含了什么类型的信息content指定了实际的元数据内容
例如下方代码，说明了文档的作者，为文档增加了描述。
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">菜鸟教程中整理了一些常用的meta元素
http://www.runoob.com/w3cnote/meta.html
为页面的标题增加图标
将以下行添加到HTML <head>中以引用它，将favicon.ico替换为自己的文件即可
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">为页面指定语言
在制作一个新页面时，我们应该在根元素上为页面指定语言，指定语言使用lang属性，如下：
<html lang="zh-cmn-Hans">为页面设置语言，有两个用处：
- 方便搜索引擎对页面进行有效的索引
- 方便视力有障碍的人士使用屏幕阅读器来浏览页面
lang是一个通用的属性，如果页面中的局部使用了其他的语言，可以在该处单独设置语言的类型，如下：
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>关于语言的设置规定，可以在该网站上查找： 除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
标签：前端_核心
精华推荐