web前端（学习笔记）
入门
html 超文本标记语言 （骨架）
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。
链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
css （外观）
层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
JavaScript （动作）
JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB、Adobe Acrobat 等。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
基本
html的骨架：
标签
标题标签：h1-h6 独占一行，越来越小
段落标签：
换行和水平线标签：
文本格式化标签：加粗、倾斜…
无语义标签：
元素
主根元素
表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其它元素必须是此元素的后代。
文档元数
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如搜索引擎 (en-US)、浏览器 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
<base>
指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。
<head>
包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。
<link>
指定当前文档与外部资源的关系。该元素最常用于链接 CSS，此外也可以被用来创建站点图标（比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标）。
<meta>
表示那些不能由其它 HTML 元相关（meta-related）元素表示的元数据信息。如：<base>、<link>、<script>、<style> 或 <title>。
<style>
包含文档或者文档部分内容的样式信息，它们会被应用于包含此元素的文档。
<title>
定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
分区根元素
<body>
表示文档的内容。文档中只能有一个该的元素。
内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
<address>
表示其中的 HTML 提供了某个人、某些人或某个组织（等等）的联系信息。
<article>
表示文档、页面、应用或网站中的独立结构，旨在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其它独立的内容项目。
<aside>
表示文档的一部分，其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框（call-out box）的形式出现。
<footer>
表示最近的一个父分段内容或分段的根元素的页脚。<footer> 通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header>
表示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其它元素，比如 Logo、搜索框、作者名称和其它元素。
<h1-h6>
表示六个不同的级别的章节标题，<h1> 级别最高，而 <h6> 级别最低。
<main>
呈现了文档正文的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<nav>
表示页面的一部分，其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。
<section>
表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
文本元素
使用 HTML 文本内容元素来组织在开标签 `` 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于无障碍和搜索引擎优化很重要。
<blockquote>
代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。引文来源的 URL 地址可以使用属性 cite 给出，而来源的文本可以使用 <cite> 元素给出。
<dd>
用来指明一个描述列表（<dl>）元素中先前术语（<dt>）的描述、定义或值。
<div>
一个通用型的流式内容容器，在不使用 CSS 的情况下，其对内容或布局没有任何影响，直到通过某种方式设置样式（例如，将样式直接应用于该元素，或将弹性盒子等布局模型应用于其父元素）。
<dl>
一个包含一组术语（使用 <dt> 元素指定）以及描述（由 <dd> 元素提供）的列表。通常用于展示词汇表或者元数据（键—值对列表）。
<dt>
在描述或定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着一个 <dd> 元素；但多个连续出现的 <dt> 元素也将由出现在它们后面的第一个 <dd> 元素定义。
<figcaption>
描述其父元素 <figure> 里其它内容的标题或图例。
<figure>
表示一段独立的内容，可能包含 <figcaption> 元素定义的标题。该插图、标题和其中的内容通常作为一个独立的引用单元。
<hr>
表示段落级元素之间的主题转换：例如，一个故事中的场景的改变，或一个章节的主题的改变。
<li>
表示列表里的条目。它必须包含在一个父元素里：有序列表（<ol>）、无序列表（<ul>）或者菜单（<menu>）。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
<menu>
<ul> 的语意替换，但被浏览器视为（并向无障碍树暴露为）与 <ul> 没有区别。它表示了条目的无序列表（使用 <li> 表示）。
<ol>
表示有序列表，通常渲染为一个带编号的列表。
<p>
表示文本的一个段落。该元素通常表现为通过空行和/或首行缩进与相邻块分隔的文本块。但 HTML 段落可以与任何相关内容（例如，图像或表单字段）构成结构分组。
<pre>
表示预定义格式文本。在该元素中的文本通常按照 HTML 文件中的编排，以非比例或等宽字体的形式展现出来，文本中的空白符都会显示出来。
<ul>
表示一系列无序的列表项目，通常渲染为项目符号列表。
常见的一些元素
<head> HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<title> HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
<body> HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。
<header> HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<footer> HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<article> HTML <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<section> HTML <section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
<p> **HTML <p>**元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
<div> HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
<span> HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素 (en-US).
<img> HTML 元素将一张图像嵌入文档。
<aside> TML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
<audio> <audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
<canvas> <canvas> 元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。
<datalist> HTML <datalist> 元素包含了一组 <option> 元素，这些元素表示其他表单控件可选值。
<details> HTML <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
<embed> HTML <embed> 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。
<nav> HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<output> HTML <output> 标签表示计算或用户操作的结果。
<progress> HTML中的 <progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
<video> HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
<ul> HTML <ul> 元素表示一系列无序的列表项目，通常渲染为项目符号列表。
<ol> HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。
<li> HTML <li> 元素 （或称 HTML 列表条目元素） 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (<ol>)，一个无序列表 (<ul>)，或者一个菜单 (<menu>)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
表格
表格是由行和列组成的结构化数据集（表格数据），它让你快速简单地查找某个表示不同类型数据之间的某种关系的值。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表。
标签说明
<table>：表示表格标签；
<tr>：表示表格行标签；
<td>：表示表格列标签，意即表格的单元格，用来存放表格数据；
<th>：表示表头标签；
<caption>：表示表格标题；
<colgroup>：表示表格列所属的组；
<col>：表示表格列的属性；
<thead>：表示表格的页眉；
<tfoot>：表示表格的页脚；
<tbody>：表示表格的主体；
属性说明
border：表示表格的边框宽度，单位是像素，即px；
rowspan：表示多行合并，可以指定具体要合并的行数；
colspan：表示多列合并，可以指定具体要合并的列数；
cellpadding：表示单元格边缘与其单元格内容之间的空白间距；
cellspacing：表示单元格之间的空白间距；
width：表示表格的宽度；
summary：表示表格的摘要。
表单
HTML表单是一个包含表单元素的区域；表单元素是允许用户在表单中 (比如：文本域、下拉列表、单选框、复选框等等)输入信息的元素；表单使用表单标签 (form)定义。 HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
元素
<form>
定义html表单
<input>
最重要的表单元素
有很多形态，根据不同的type属性
属性
action
包含一个地址，定义表单信息发送到哪里
method
规定在提交表单时所用的方法
可以是GET或POST并定义表单信息的发送方式
name
要正确的被提交，每个输入的字段必须设置一个name属性
fieldset
组合表单数据
css
属性
font 字体属性
background 背景属性
block 区块属性
box 盒子属性
border 边框属性
list-style 列表属性
position 定位属性
选择器
基本选择器
-
- 通配符选择器
-
- 标签选择器（元素选择器）
-
- ID选择器
-
- 类选择器
-
- 群组选择器
包含选择器
复合选择器
属性选择器
个输入的字段必须设置一个name属性
fieldset
组合表单数据
## css
### 属性
font 字体属性
background 背景属性
block 区块属性
box 盒子属性
border 边框属性
list-style 列表属性
position 定位属性
### 选择器
#### 基本选择器
- 1. 通配符选择器
- 2. 标签选择器（元素选择器）
- 3. ID选择器
- 4. 类选择器
- 5. 群组选择器
#### 包含选择器
#### 复合选择器
#### 属性选择器
# 表格
# 表单
扫一扫
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
