HTML+CSS+JS 学习笔记———HTML(上)
Posted 大寄一场.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JS 学习笔记———HTML(上)相关的知识，希望对你有一定的参考价值。
目录
代码开发工具
俗话说：“工欲善其事,必先利其器”。前端开发也是一样我们需要在Web编辑器的帮助下提高我们的开发效率。
在这里推荐给大家几个主流的编辑器：
- VScode 当今最流行的免费开源现代化轻量级代码编辑器,可以通过安装各种插件支持几乎所有主流的开发语言及框架。官方地址
- HBuilder 一款支持 html5 的 Web 开发编辑器:官方地址 HBuilderX:下载地址
概念
HTML 是 HyperText Markup Language (超文本标记语言)的缩写，是一款描述网页的标记语言(结构语言)。
它包括一系列标签，通过这些标签不仅可以说明文字文本还可以说明图形、动画、声音、表格、链接等。
注意：HTML这种结构语言并不是编程语言（不具备编程语言功能）
HTML模板
<!-- Ctrl + / 生成HTML注释标签 -->
<!-- HTML 的版本声明： H5版本 -->
<!DOCTYPE html>
<!-- HTML根标签，其他标签都包含在这个标签内 -->
<html>
<!-- 头部标签，包含页面编码；标题信息 等页面需要提前设置的信息 -->
<head>
<!-- 页面编码 -->
<meta charset="utf-8">
<!-- 页面的标题 -->
<title>自定义标题</title>
</head>
<!-- 页面体根标签，其他需要直接显示到页面的标签，包含在 body 中 -->
<body>
<h1>内容标题1</h1>
<p>自定义段落内容。</p>
</body>
</html>
上面的代码就是一个很基本的HTML结构了，我们来简单的讲解下上面文档中每个标签以及他们的功能：
| 标签名 | 描述 | 功能 |
| < ! doctype html> | 文档类型标 记 | 声明html版本 |
| <html> | 根控制标记 | 此元素可告知浏览器其自身是一个 HTML 文档<html> 与 </html> |
| <head> | 头控制标记 | 用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 |
| <title> | 文件标题声明标记 | 用于定义文档的标题 |
| <meta> | 文档元数据声明标记 | 元素可提供有关页面的元信息 (meta-information)，比如针对搜索引擎和更新频度的描述和关键词 |
| <body> | 文档主体标记 | 元素包含文档的所有浏览器可视区域内容 (比如文本、超链接、图像、表格和列表等等 |
通过上面对HTML结构的简单讲解相信同学们，对HTML语法有了一定的认识： 我们通过一个HTML中基础p标签元素对HTML标签语法进行进一步的讲解：
上面这个元素的主要部分有： 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段 落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。 内容（Content）：元素的内容，本例中就是所输入的文本本身。 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。 当然有些元素是可以设置元素属性的，什么是元素属性我亲看下面的例子：
属性应该包含：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。
- 由引号所包围的属性值。
body元素的常用属性
| 属性 | 概述 |
| text | 设定网页文字的颜色 |
| bgcolor | 设定网页的背景颜色 |
| background | 设定网页的背景图像 |
| bgproperties | 设定网页的背景图像为固定，不随网页的滚动而滚动 |
| link | 设定网页默认的链接颜色 |
| alink | 设定鼠标指针指向的链接颜色 |
| vlink | 设定访问过的链接颜色 |
| topmargin | 设定网页的上边距 |
| leftmargin | 设定网页的左边距 |
HTML 控制标记（标签）的类型
在HTML中控制标记一共分为四类：
1. 无属性单一型标记。格式：<标记名称> 如：<br>
2. 有属性单一型标记。格式：<标记名称 属性="属性值"> 如：<hr width="80号">
3. 无属性对称型标记。格式： <标记名称>...</标记名称> 如：<title>...</title>
4. 有属性对称型标记。格式：<标记名称 属性="属性值">...</标记名称> 如：<html lang="en">...</html>
HTML语法规范
良好的代码风格会让项目更清晰，利于维护。在企业中良好的代码风格也是作为it开发人员必要标准。
- 标签声明
1. HTML标签名、类名、标签属性和大部分属性值统一用小写。
2. 对称型标签结束标记中必须包含结束符号"/"。例：<html></html>
- 元素注释
作用：我们开发一段html代码,为了以后便于理解以及他人能读懂你代码特殊意义,我们可以使用 HTML 注释来帮忙。注释的功 能就是用来说明、注解、备注。
1. HTML 统一使用 <!-- 注释内容 --> (ctrl+/)方法在文档中进行注释，并且规定注释内容与注释符号两端间隔一个空格。
2. 注释位于要注释代码的上面，单独占一行
标签嵌套
1. HTML允许元素嵌套，并且HTML标签存在嵌套规则这个我们会在今后的课程中讲解
2. 若元素间存在嵌套关系，称嵌套元素为父元素，称被嵌套元素为子元素。同一个父元素元素中的同级子元素被称为兄弟元素。例：
<html>
<head></head>
<body></body>
</html>上面的代码中 html 标签包含 head 与 body 标签，所以 html 为 head 与 body 的父元素 而 head 与 body 是同级关系（两者拥有同一个直接父元素html）所以 head 与 body 是兄弟元素
HTML常用标签
| 标签名 | 描述 |
| <h1> </h1>....<h6> </h6>(没有h7) | 定义标题，用于修饰文本，块级标签 |
| <a ></a> | 超链接用于页面之间或页面内部的跳转 |
| <p></p> | 定义段落，用于修饰文本，块级标签。 |
| <div></div> | 定义一个块级元素，div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且 不使用任何格式与其关联。 |
| <span></span> | 标签被用来组合文档中的行内元素。以便通过样式来格式化它们。 |
| <pre></pre> | 修饰文本，保留换行符和空格，一般用于展示代码，块级标签。 |
| <em></em> | 把文本定义为强调的内容。 |
| <strong></strong> | 用于修饰加粗文本，行内标签。 |
| <br> | 定义换行，块级标签，该标签没有语义性 |
| <i></i> | 用于修饰斜体文本，行内标签，该标签没有语义性 |
| <b></b> | 用于修饰加粗文本，行内标签，该标签没有语义性 |
标题的对齐方式
在默认情况下，标题文字是左对齐的。而在网页制作过程中，可以实现标题文字的编排设置。最常用的就是关于对齐方式的设置，可以为标题标签添加 align属性进行设置其语法格式如下:
<hl align=”对齐方式">文本内容 </h1>
对其方式属性值
| 属性值 | 含 义 |
| left | 文字左对齐 |
| center | 文字居中对齐 |
| right | 文字右对齐 |
文字
除了标题文字，在网页中普通的文字信息也不可缺少，而多种多样的文字装饰效果可以让用户眼前一亮，记忆深刻。在网页的编码中，可以直接在 <body> 标签和</body>标签之间输入文字，这些文字可以显示在网页中，同时可以为这些文字添加装饰效果的标签，如斜体、下画线等。下面详细讲解这些文字装饰标签。
在浏览网页时，常常可以看到一些特殊效果的文字，如斜体字、带下画线的文字和带删除线的文字，这些文字效果可以通过设置 HTML 的标签来实现，其语法格式如下:
<em>斜体内容</em>
<u>带下面线的文字</u>
<strike> 带删除线的文字</strike>
以上这几种文字装饰效果的语法类似，只是标签不同。其中，斜体字也可以使用标签<i>或 <cite>来实现。
文字的上标与下标
除了设置常见的文字装饰效果，有时还需要为文字设置一种特殊的装饰效果，即上标和下标。上标或下标经常会在数学公式或方程式中出现，其语法格式如下:
<sup> 上标标签内容 </sup>
<sub>下标标签内容 </sub>
在该语法中，上标标签和下标标签的使用方法基本相同，只需将文字放在标签中间即可。
js-权威指南学习笔记15
第十五章 脚本化文档
1、文档对象模型DOM是表示和操作HTML和XML文档内容的基础API。
2、Document、Element、Text是Node的子类。
3、查询文档的一个或多个元素有如下方法：用指定的id属性、用指定的name属性、用指定的标签名字、用指定的css类、匹配指定的css选择器。
4、HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该属性的值。
5、name属性只在少数HTML元素中有效，包括表单、表单元素、iframe和img元素。
6、getElementsByName（）只针对HTML文档可用，返回一个NodeList对象。行为类似包含若干个Element对象的只读数组。
7、为form、img、iframe、applet、embed、object元素设置name属性，即在Document对象中创建以此name属性值为名字的属性。
8、如果给定的名字只有一个元素，自动创建的文档属性对应的该值是元素本身，如果有多个元素，该文档属性的值是一个NodeList对象，它表现为一个包含这些元素的数组。为若干命名iframe元素所创建的文档属性比较特殊：它们指代这些框架的Window对象而不是Element对象。
9、HTMLDocument类定义一些快捷属性来访问各种各样的节点，比如images、forms、links指向img、form、a（带有href属性的）。HTMLCollection对象。
10、Document类的documentElement属性指代文档的根元素。在HTML文档中，它总是指代html元素。
11、Document方法querySelectorAll（），接受包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。这个NodeList对象不是实时的。
12、querySelector（）返回第一个匹配的元素。
13、Node的属性nodeType表示该节点的类型。9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。
14、Element对象的children属性，类似ChildNodes，也是一个NodeList对象，但不同的是children列表只包含Element对象。
15、Text和Comment节点没有children属性，意味着Node.parentNode属性不能返回Text或Comment节点。
16、任何HTML元素的style属性值是CSSStyleDeclaration对象，而不是字符串。
17、Element类型还定义了getAttribute（）和setAttribute（）方法来查询和设置非标准的HTML属性。hasAttribute（）和removeAttribute（）它们用来检测命名属性是否存在和完全删除属性。
18、HTML5文档中，任意以data-为前缀的小写的属性名字都是合法的。HTML5还在Element对象上定义了dataset属性，指代一个对象，它的各个属性对应于去掉前缀的data-属性。
19、dataset属性是data-属性的实时、双向接口。设置或删除dataset的一个属性就等于移除对应元素的data-属性。
20、对于Element对象，attributes属性是只读的类数组对象，他代表元素的所有属性，类似NodeList。
以上是关于HTML+CSS+JS 学习笔记———HTML(上)的主要内容，如果未能解决你的问题，请参考以下文章