时间: 2021-05-21 17:45:21
html基础知识：
1. 浏览器概念
<html lang="en" dir="ltr"></html>
注意点
html 标签是HTML页面的根元素，其中的lang属性可用于标记网页或部分网页的语言
en定义语言为英语,zh-CN定义语言为中文
lang这个属性不仅仅可以用在html标签上
作用：
根据根据lang属性来设定不同语言的css样式，或者字体。
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
当搜索引擎或者浏览器拿到语言标签后，有可能做一些针对指定语言的辅助操作等等
dir是国际化属性中的一员，dir属性定义了文字在浏览器中的排列方向.
如果定义整个HTML文档的排列方向应该在html标签中定义dir属性,
其它HTML标签也可以定义dir属性.
默认值：ltr – 代表左到右的排列方式 rtl – 代表右到左的排列方式
<head></head>
定义和用法
head 标签用于定义文档的头部，它是所有头部元素的容器。
head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：base, link , meta , script , style , 以及 title 。
title 定义文档的标题，它是 head 部分中唯一必需的元素
搜索引擎优化（seo）；
定义页面使用语言；
自动刷新并指向新的页面；
实现网页转换时的动态效果；
控制页面缓冲；
网页定级评价；
控制网页显示的窗口等！
<!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- http-equiv属性 --> <meta http-equiv="参数" content="参数变量值"> <!--Expires(期限)--设定网页到期时间，一旦网页过期，必须到服务器上重新传输--必须使用GMT的时间格式。--> <meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT"> <!-- Pragma(cache模式)--禁止浏览器从本地计算机的缓存中访问页面内容--这样设定，访问者将无法脱机浏览--> <meta http-equiv="Pragma" content="no-cache"> <!-- Refresh(刷新)--自动刷新并指向新页面--其中的2是指停留2秒钟后自动刷新到URL网址--> <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <!-- Set-Cookie(cookie设定)--如果网页过期，那么存盘的cookie将被删除--必须使用GMT的时间格式--> <meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/"> <!-- Window-target(显示窗口的设定)--强制页面在当前窗口以独立页面显示--用来防止别人在框架里调用自己的页面--> <meta http-equiv="Window-target" content="_top"> <!-- content-Type(显示字符集的设定)--设定页面使用的字符集--meta标签的charset的信息参数如GB2312时， 代表说明网站是采用的编码是简体中文；meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；--> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <!-- content-Language（显示语言的设定）--> <meta http-equiv="Content-Language" content="zh-cn"/> <!-- imagetoolbar--指定是否显示图片工具栏，当为false代表不显示，当为true代表显示--> <meta http-equiv="imagetoolbar" content="false"/> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!--name属性--> <meta name="参数" content="具体的参数值"> <!-- 页面关键词 --> <meta name="keywords" content=""/> <!-- 页面描述 --> <meta name="description" content="不超过150个字符"/> <!-- robots(机器人向导)--robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引 --content的参数有all,none,index,noindex,follow,nofollow。默认是all --> <!--all：文件将被检索，且页面上的链接可以被查询--> <!--none：文件将不被检索，且页面上的链接不可以被查询--> <!--index：文件将被检索--> <!--follow：页面上的链接可以被查询--> <!--noindex：文件将不被检索，但页面上的链接可以被查询--> <!--nofollow：文件将被检索，但页面上的链接不可以被查询--> <meta name="robots" content="all"> <!-- 网页作者 --> <meta name="author" content="name, email@gmail.com"/> <!-- generator的信息参数，代表说明网站的采用的什么软件制作 --> <meta name="generator" content="信息参数"/> <!-- copyright的信息参数，代表说明网站版权信息 --> <meta name="copyright" content="信息参数"> <!-- revisit-after代表网站重访,7days代表7天，依此类推 --> <meta name="revisit-after" content="7days">
link 标签定义文档与外部资源的关系。
link 标签最常见的用途是链接样式表。
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
<title>文档标题</title>
定义和用法
title 元素可定义文档的标题。
浏览器会以特殊方式来使用标题，并通常把它放置在浏览器窗口的标题栏或状态栏上。
文档加入用户的链接列表或收藏夹或书签列表时，标题将成为该文档链接的默认名称。
提示： title 标签是 head 标签中唯一要求包含的东西。
dir–(rtl/ltr)–规定元素中内容的文本方向;
lang–(language_code)–规定元素中内容的语言代码;
<body>文档内容</body>
定义和用法
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>定义和用法
style 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
如需链接外部样式表，请使用 link 标签。
style 标签支持 HTML 中的全局属性。 style 标签支持 HTML 中的事件属性
<body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body>
定义和用法
h1 - h6 标签可定义标题。 h1 定义最大的标题。 h6 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。
因此，请不要利用标题标签来改变同一行中的字体大小。
相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
<body> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </body>
定义和用法
p 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定
<body> //文本换行 <br> //文本加粗 <b>加粗内容</b> <strong>加粗内容</strong> //文本倾斜 <em></em> <i></i> //水平线 <hr />空标记 //删除线样式 <s>内容</s> </body>
<body> <a href="http://www.runoob.com">这是一个链接使用了 href 属性</a> </body>
定义和用法
a 标签定义超链接，用于从一张页面链接到另一张页面。
a 元素最重要的属性是 href 属性，它指示链接的目标。
所有浏览器中，链接默认外观：下划线蓝色(未访问)–下划线紫色(已被访问)–下划线红色(活动链接)
可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式
提示和注释
如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target
以及 type 属性。
被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
请使用 CSS 来设置链接的样式。
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
<body> 1. 使用 “ <a href="#id名"> 链接文本 </a> ” 创建链接文本； 2. 使用相应的 id 名标注跳转目标的位置。 </body>
<body> <img src="https://img-blog.csdnimg.cn/20190401220956175.png" alt="some_text"> </body>
定义和用法
从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像。
img 标签创建的是被引用图像的占位空间。
img 标签有两个必需的属性：src 属性 和 alt 属性。
img 标签支持 HTML 中的全局属性。
img 标签支持 HTML 中的事件属性。
在HTML中还有一种特殊的标签——注释标签。
如要在HTML文档中添些便于阅读理解但又不显示在页面中的注释文字，就需使用注释标签。
注释内容不显示在浏览器窗口，但作为HTML文档内容一部分，也会被下载到用户计算机上，查看源代码时就可以看到。
其基本语法格式如下
<body> <!-- 注释语句 --> ctrl + / 或者 ctrl +shift + / </body>
<body> 标签 描述 <ul> 定义无序列表。 <ol> 定义有序列表。 <li> 定义列表的项目。 <dir> 定义目录列表。不赞成使用。 <dl> 定义定义列表。 <dt> 定义定义列表中的项目。 <dd> 定义定义列表中项目的描述。 <menu> 定义命令的菜单/列表。 <menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。 <command> 定义命令按钮。 </body>
注意：
1.无序列表默认实心黑色圆点，type属性可改变，共三个值：
disc（默认）,circle（空心圆点）,square（实心黑色方块）
2.有序列表默认数字排序，type属性可以改变，有好几个值：1（数字）, a（字母）等等；shart属性可以改变排序从第几个开始，比如数字排序，start=“2”,排序第一个就不再是 1 ，而是 2 。
3.ul ol dl 之间是可以相互嵌套的
<body> 标签 描述 <table> 定义表格 <caption> 定义表格标题。 <th> 定义表格中的表头单元格。 <tr> 定义表格中的行。 <td> 定义表格中的单元。 <thead> 定义表格中的表头内容。 <tbody> 定义表格中的主体内容。 <tfoot> 定义表格中的表注内容（脚注）。 <col> 定义表格中一个或多个列的属性值。 <colgroup> 定义表格中供格式化的列组。 </body>
<body> 标签 描述 <form> 定义供用户输入的 HTML 表单。 <input> 定义输入控件。 <input type="text"> --- 文本输入 <input type="radio"> --- 定义单选按钮 <input type="submit"> --- 提交按钮 <textarea> 定义多行的文本输入控件。 <button> 定义按钮。 <select> 定义选择列表（下拉列表）。 <optgroup> 定义选择列表中相关选项的组合。 <option> 定义选择列表中的选项。 <label> 定义 input 元素的标注。 <fieldset> 定义围绕表单中元素的边框。 <legend> 定义 fieldset 元素的标题。 <isindex> 不赞成使用。定义与文档相关的可搜索索引。 <datalist> 定义下拉列表。 <keygen> 定义生成密钥。 <output> 定义输出的一些类型。 </body>
<body> <form accept-charset="UTF-8"> --- accept-charset 属性 --- 规定在被提交表单中使用的字符集（默认：页面字符集） <form action="action_page.php"> --- action 属性 --- 定义在提交表单时执行的动作 注意：如果省略 action 属性，则 action 会被设置为当前页面 <form autocomplete="off"> --- autocomplete 属性 --- 规定浏览器应该自动完成表单（默认：开启） <form ectype="application/x-www-form-urlencoded"> --- enctype 属性 --- 规定被提交数据的编码（默认：url-encoded） <form method="GET/POST"> --- method 属性 --- 规定在提交表单时所用的 HTTP 方法（GET 或 POST） 1. 使用 GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。 注意：GET 最适合少量数据的提交。浏览器会设定容量限制。 2. 使用 POST：表单正在更新数据，或者包含敏感信息（例如密码）。 注意：POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。 <form name="firstname"> --- name 属性 --- 规定识别表单的名称（对于 DOM 使用：document.forms.name） <form novalidate> --- novalidate 属性 --- 规定浏览器不验证表单 <form target="_blank"> --- target 属性 --- 规定 action 属性中地址的目标（默认：_self） </body>
<body> <input>元素及输入类型 <input type="text"> --- 文本输入 <input type="password"> 定义密码字段 <input type="radio"> --- 定义单选按钮 <input type="checkbox"> --- 定义复选框 <input type="submit"> --- 提交按钮 <input type="number"> --- 用于应该包含数字值的输入字段 <input type="date"> --- 用于应该包含日期的输入字段 <input type="color"> --- 用于应该包含颜色的输入字段 <input type="range"> --- 用于应该包含一定范围内的值的输入字段 <input type="month"> --- 允许用户选择月份和年份。 <input type="week"> --- 允许用户选择周和年。 <input type="time"> --- 允许用户选择时间（无时区）。 <input type="datetime"> --- 允许用户选择日期和时间（有时区）。 <input type="datetime-local"> --- 允许用户选择日期和时间（无时区）。 <input type="email"> --- 用于应该包含电子邮件地址的输入字段。 <input type="search"> --- 用于搜索字段（搜索字段的表现类似常规文本字段）。 <input type="tel"> --- 用于应该包含电话号码的输入字段。 <input type="url"> --- 用于应该包含 URL 地址的输入字段。 <select> 元素（下拉列表） <option> 元素定义待选择的选项 注意：列表通常会把首个选项显示为被选选项。我们能够通过添加 selected 属性来定义预定义选项 <textarea> 元素定义多行输入字段（文本域） <button> 元素定义可点击的按钮 </body>
<video src=""> </video>
<video> <source src="" type=""></source> <source src="" type=""></source> </video>
src: 告诉video标签需要播放的视频地址
autoplay: 告诉video标签是否需要自动播放视频
controls: 告诉video标签是否需要显示控制条
poster: 告诉video标签视频没有播放之前显示的占位图片
loop: 告诉video标签循环播放视频. 一般用于做广告视频
preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:告诉video标签视频静音
width/height: 和img标签中的一模一样
<audio src=""> </audio> <audio> <source src="" type=""> </audio>
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster
CSS支持更丰富的文档外观
CSS可以为任何元素的文本和背景设置颜色
允许在任何元素外围设置边框
允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
...
}
</style>style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性其实可以不用写, 默认就是type="text/css"
设置样式时必须按照固定的格式来设置key: value;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
值的不同写法和单位
如果值为若干单词，则要给值加引号
如果要定义不止一个声明，则需要用分号将每个声明分开
空格和大小写不影响CSS样式
用逗号将需要分组的选择器分开，被分组的选择器可以分享相同的声明
子元素从父元素继承属性
文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，
比如 p、h1、甚至可以是 html 本身。
<style>
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>该选择器可以与任何元素匹配，就像是一个通配符。
* {color:red;}通过分组，创作者可将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
可以将任意多个选择器分组在一起，对此没有任何限制。
h2, p {color:gray;}对声明分组，一定要在各声明的最后使用分号，因为浏览器会忽略样式表中的空白符。
与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，
也更易维护。
h1 {
font: 28px Verdana;
color: blue;
background: red;
}通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
li strong {
font-style: italic;
font-weight: normal;
}id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
id 属性只能在每个 HTML 文档中出现一次。
在现代布局中，id 选择器常常用于建立派生选择器。
id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用
<p id="intro">This is a paragraph of introduction.</p>
#intro{background:silver;}类选择器与id选择器的区别
只能在文档中使用一次：在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
不能使用 ID 词列表：ID 选择器不能结合用，因为 ID 属性不许有以空格分隔的词列表。
ID 能包含更多含义：可以独立于元素来选择 ID。
区分大小写：类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。
把两个类选择器链接在一起，仅可选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。
<p class="important warning">
This paragraph is a very important warning.
</p>
.important.warning {background:silver;}对带有指定属性的 HTML 元素设置样式。
只有在规定 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。
在 IE6 及更低的版本中，不支持属性选择。
属性选择器在 XML 文档中很有用，因为 XML 语言针对元素和属性的用途
指定元素名和属性名。
1. 简单属性选择
例：
a[href][title] {color:red;}
2. 根据具体属性值选择
注意：
这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表，匹配就可能出问题。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
3. 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
如果忽略了波浪号，则说明需要完成完全值匹配。
p[class~="important"] {color: red;}
4. 特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
后代选择器可以选择作为某元素后代的元素。
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
h1 em {color:red;}
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。子元素选择器只能选择作为某元素子元素的元素。
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong {color:red;}
选择作为 h1 元素子元素的所有 strong 元素相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
伪类没看：.......................
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head><p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
如果某些属性在不同的样式表中被同样的选择器定义，
那么属性值将从更具体的样式表中被继承过来。
1. 背景属性
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
css3 新背景属性
CSS 文本属性可定义文本的外观
CSS 字体属性定义文本的字体系列
我们能够以不同的方法为链接设置样式。
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
CSS 表格属性可以帮助您极大地改善表格的外观。
CSS Table 属性
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
1. 继承性
作用：
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
示例代码：
<style>
div{
color: red;
}
</style>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<!--p会变成红色-->注意点:
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
<a>标签的文字颜色和下划线是不能继承的
<h>标签的文字大小是不能继承的
CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
作用:
层叠性就是CSS处理冲突的一种能力
示例代码：
<style>
p{
color: red;
}
.para{
color: blue;
}
</style>
<p id="identity" class="para">我是段落</p>
<!-- 最终显示蓝色, 因为红色被覆盖掉了 -->注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
作用:
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式
间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
<style>
li{
color: blue;
}
ul{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示蓝色 -->相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
<style>
p{
color: blue;
}
p{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示红色 -->不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
<style>
#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示紫色 -->
1. 权重的计算规则
首先先计算选择器中有多少个id, id多的选择器优先级最高
如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
注意点:
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
2. !important
作用:
用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
<style>
#identity{
color: purple;
font-size: 50px;
}
.para{
color: pink ;
}
p{
color: green !important;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
<!-- 最终显示绿色 -->注意点:
!important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值得分号前面
!important前面的感叹号不能省略
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。
还有四点没看完.......
基本思想：
允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、
另一个元素甚至浏览器窗口本身的位置。
可以使用 display 属性改变生成的框的类型.
(将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样)
(把 display 设置为 none，让生成元素没有框, 该框及内容不再显示，不占用文档空间。)
(把文本添到块级元素（比如 div）开头。即使没把文本定义为段落，它也当作段落对待)
几个定位........
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
一个浮动元素尽量向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止。
浮动元素之前的元素将不会受到影响。浮动元素之后的元素将围绕它。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
假如一行上只有极少空间可供浮动元素,这元素会跳至下一行,这过程持续到某一行有足够空间为止。
背景不显示：
由于浮动产生，如果父级设置CSS背景颜色或图片,父级不能被撑开,导致背景不能显示
边框不撑开:
如果父级设置CSS边框属性,由于子级使用float属性,产生浮动,父级不被撑开,
导致边框不随内容被撑开.
margin padding设置值没正确显示:
浮动导致父级子级之间设置css padding, margin属性值不正确
特别是上下边的padding和margin不能正确显示。
1. 对父级设置适合CSS高度
2. clear:both清除浮动：
新建样式选择器CSS命名为“.clear”,对应选择器样式为“clear:both”
在父级“”结束前加此div引入“class=“clear””样式
3. 父级div定义 overflow:hidden:
因为overflow:hidden属性相当于是让父级紧贴内容，
这样即可紧贴其对象内内容（包括使用float的div盒子），
从而实现了清除浮动。
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。
优点是可以很少CSS代码即可解决浮动产生。
1. 使用 margin 属性来水平居中对齐
可通过将左和右外边距设置为 “auto”，来对齐块元素。
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素2. 文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
.center {
text-align: center;
border: 3px solid green;
}3. 图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中
img {
display: block;
margin: auto;
width: 40%;
}4. 使用 position 属性进行左和右对齐
绝对定位元素会被从正常流中删除，并且能够交叠元素。
当使用 position 属性时，请始终设置 !DOCTYPE 声明
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}5. 使用 float 属性来进行左和右对齐
当使用 float 属性时，请始终设置 !DOCTYPE 声明
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}6. 使用 padding 垂直居中对齐
.center {
padding: 70px 0;
border: 3px solid green;
}7. 使用 line-height 垂直居中对齐
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}8. 使用 position 和 transform 垂直居中对齐
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
其他还没看........
JavaScript（缩写：JS） 是互联网上最流行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
脚本语言
JavaScript 是一种解释型的脚本语言, C、C++等语言先编译后执行,而JavaScript 是在程序的运行过程中逐行进行解释。
基于对象
JavaScript 是一种基于对象的脚本语言,不仅可以创建对象, 也能用现有对象
内置大量现成对象，编写少量程序可以完成目标
简单
JavaScript 语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求, 是基于 Java 基本语句和控制的脚本语言,其设计简单紧凑
可以使用任何文本编辑工具编写
只需要浏览器就可以执行程序
动态性
JavaScript 是一种采用事件驱动的脚本语言,它不需要经过 Web 服务器就可以对用户的输入做出响应。
跨平台性
JavaScript 脚本语言不依赖于操作系统,仅需要浏览器的支持。
HTML 页面是静态的，而 JavaScript 可以弥补 HTML 语言的缺陷，实现 Web 页面客户端的动态效果。
JavaScript 可以输出字符、数字、以及 HTML。
JavaScript 作用：
动态改变 HTML 内容，属性，样式
动态显示或隐藏 HTML 元素
验证表单数据
响应事件
1. ECMAScript
JavaScript的语法标准
ECMA是一个组织，即欧洲计算机制造商协会
ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
2. DOM
JavaScript操作网页上的元素的API
3. BOM
JavaScript操作浏览器的部分功能的API
网页特效
动态数据处理
移动端开发（RN，Weex）
服务端开发（Node.js）
命令行工具（Node.js）
物联网与人工智能（Ruff）
游戏开发（cocos2d-js）
1. 行内式
虽然可以写在标签的属性中，但是结构与行为耦合，不方便维护，不推荐使用
方式一：
<button onclick="alert('今天天气很好!');">今天天气?</button>
方式二：
<a href="javascript:alert('你点疼我了！！');">点我</a>2. 页内式
<script></script>标签中的js代码一般写在文档的尾部
网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素)
HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。
所以如果把js代码如果写在<head>中, 那么js代码执行完毕之前后续网页无法被加载
方法一：文档尾部
<body>
......
<script type="text/javascript">
alert("今天天气很好！");
</script>
</body>
方法二：文档头部
<head>
<meta charset="utf-8">
<script>
console.log("hello world")
</script>
</head>3. 外链式
在 HTML 中从外部引入 JavaScript，通过调用.js 为后缀的文件来引入
从外部引入 JS 文件放在 body 的结尾处，因为网页加载是从上到下加载
如果在 开头引入 JS 文件，有些代码不能正确执行
外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="index.js">
alert("今天天气很好！"); // 不会被执行
</script>由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度
<script type="text/javascript" src="01-js书写格式.js"></script>
在外部文件中放置脚本有如下优势：
分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据。
1. 使用弹出警告框
通过 alert()方法输出数据。控制浏览器弹出一个警告框
<script>
window.alert("我是警告框。");
</script>2. 使用弹出输入框
在网页中弹出输入框，一般用于接收用户输入的信息
prompt("Hello, World！");3. 使用弹出提示框
在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用
confirm("Hello，JavaScript！");4. 直接写入HTML文档
通过 document.write()方法来输出想要显示的内容。
如果在文档已完成加载 后执行 document.write，整个 HTML 页面将被覆盖。
<script>
document.write("这是输入内容，输入到HTML中")
</script>5. 写到控制台
通过 console.log()将数据写入到控制台，数据只在控制台中显示，并不显示在网页中。
通过 console.log()方法写入到控制台中，页面是没有我们输入的这个数据。
通常 console.log()被用来检查错误。
<script>
console.log("Hello World!");
console.warn("警告输出！");
console.error("错误输出！");
</script>6. 使用 innerHTML
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
5. JavaScript 标识符
1. 标识符格式
标识符中可以含有字母、数字、_、$
标识符不能以数字开头
标识符不能是ES中的关键字或保留字
在 JavaScript 中预定义的运算符如：+、-、*、/、%不可以用于定义标识符
标识符一般都采用驼峰命名法
在JS底层保存的标识符采用的是Unicode编码，所以UTF-8中所有的字符都可以作为标识符
2. Smalltalk 法则
每个标识符可以有若干个单词左右连接而成
常量标识符应该全部使用大写字母来表示区别
一般标识符应该全部使用小写字母以示区别
特殊常量标识符应该以大写字母开头以示区别
函数的标识符应该以小写字母开头以示区别
不要使用JavaScript 中预定义保留的关键字
JavaScript 严格区分大小写字母
6. JavaScript 注释
JavaScript 注释可用于提高代码的可读性。 注释不会被执行。
注释常用来调试程序，因为注释掉的代码并不会被执行。
在写代码的时候，注释是很有必要的，提高了代码的可读性。要养成写注释的习惯。
注意点
单行注释可以嵌套单行注释、多行注释
多行注释可以嵌套单行注释
多行注释不能嵌套多行注释
<script> 1. 单行注释：以 // 开头。 2. 多行注释：以 /* 开始，以 */ 结尾。 </script>
1. JavaScript 关键字
感谢您的阅读，希望对您有帮助。