黄敢敢i

HTML+CSS+Bootstrap+ECMAScript+DOM

脚本语言：不需要编译，直接就可以被浏览器解析执行

Wed 概念概述

JavaWed：

使用java语言开发基于互联网的项目

软件架构：

1、 C/S ： Client / Server 客户端 / 服务器端

 *    在用户本地有一个客户端程序，在远程有一个服务器端程序
 *    如：QQ、迅雷...
 *    优点：用户体验好
 *    缺点：开发、安装、部署、维护 麻烦

2、 B/S : Browser / Server 浏览器 / 服务器端

只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
优点：开发、安装、部署、维护简单
缺点：1、如果应用过大，用户的体验可能会受到影响

2、对硬件的要求过高

B/S架构详解

资源分类：

1. 静态资源

   使用静态网页开发技术发布的资源。

   	  特点： 所有用户访问，得到/看到的结果是一样的

   				  如：文本、图片、音频、视频、HTML、CSS、JavaScript

   				  如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。

   				  浏览器内置了静态资源的解析引擎，可以展示静态资源

   	  HTML：用于搭建基础网页，展示页面的内容

         CSS   ：用于美化页面，布局页面

   	   JavaScript  ： 控制页面的元素，让页面有一些动态的效果

2. 动态资源

   使用动态网页技术发布的资源。

   	    特点：所有用户访问，得到/看到的结果可能不一样

   				   如：JSP  /   servlet  、PHP  、asp...

   				    如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，

   				    再发送给浏览器 （浏览器只能去解析静态资源）

HTML

概念：最基础的网页开发语言

♥ Hyper Text Markup Language 超文本标记语言

 超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

 标记语言：由标签构成的语言。<标签名称>  如 html  ，xml

标签语言不是编程语言

快速入门：

语法：

♥ html 文档后缀名： .html 或者 .htm

♥ 标签分为：
1. 围堵标签：有开始标签和结束标签。如
2. 自闭和标签：开始标签和结束标签在一起。如换行标签

♥ 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
正确：
♥ 在开始标签中可以定义属性。属性由键值对构成，值需要用引号（单双都可）引起来

最基础的html代码：

<html>
	<head>
		<title>title>
	head>
	<body>
		<font color="blue"> Hello World font><br/>
	body>
html>

Emmet语法

html标签快捷键

VSCode 保存自动格式化代码

标签告知浏览器这是一个 HTML 文档 , 是 HTML 文档中最外层的元素。
标签定义文档的主体 , 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
</code> 标签定义文档的标题 ,一个 HTML 文档中不能有一个以上的 <code><title></code> 元素。 <code><head></code> 头标签，用于指定html 文档的一些属性，引入外部资源。 <h4>文本标签</h4> 和文本有关的标签 <code><h1> <h6></code> 标题标签 <pre><code class="prism language-html"><h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </code></pre> <code></code> 段落标签 <pre><code class="prism language-html"><p>这是一个段落。</p> </code></pre> <code> </code> 换行标签 <pre><code class="prism language-html"><p> 使用 br 元素<br>在文本中<br>换行。 </p> </code></pre> <code><hr></code> 显示为一条水平线。标签定义 HTML 页面中的主题变化（比如话题的转移） <code><hr></code> 的属性 color ：颜色 width ：宽度 size ：高度 align ：对齐方式 ——> center 居中、 left 左对齐 right 右对齐 <pre><code class="prism language-html"><hr color= "red" width="200" size="10" align="left"/> </code></pre> <code></code> 字体加粗 <pre><code class="prism language-html"><p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p> </code></pre> <code></code> 字体斜体 <pre><code class="prism language-html"><p>He named his car <i>The lightning</i>, because it was very fast.</p> </code></pre> <code></code> 字体标签 <pre><code class="prism language-html"><font face="verdana" color="green">这是一些文本!</font> </code></pre> <code></code> 注释 <pre><code class="prism language-html"> </code></pre> <h4>图片标签</h4> <code><img></code> 图片标签 相对路径的表示方法： 以 .开头的路径 * <code>./:</code> 代表当前目录 * <code>../:</code> 代表上一级目录 <img src="http://img.e-com-net.com/image/info8/35da5646954c4a009b53fd6e5da74247.png" alt="图片" width="0" height="0"> <h4>列表标签</h4> <code><ol></code> 定义一个有序列表 <pre><code class="prism language-html"><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </code></pre> <code><ul></code> 定义一个无序列表 <pre><code class="prism language-html"><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </code></pre> <h4>链接标签</h4> <code><a></a></code> 链接标签 href ：指定访问资源的URL（统一资源定位符） target ：指定打开资源的方式 _self :默认值，在当前页面打开 _ blank : 在空白页面打开 <pre><code class="prism language-html"> <a href="https://www.runoob.com">这是一个链接</a>  <a href="https://www.runoob.com" target="_blank">这是一个链接</a>  <a href="./本地标签.html"> 本地标签</a>  </code></pre> <h4>div 和 span</h4> <code><div></code> 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。块级标签 每一个div占满一整行。块级标签 <code></code> 用于对文档中的行内元素进行组合。行内标签，内联标签 文本信息在一行展示 <h4>语义化标签</h4> html5 中为了提高程序的可读性，提供了一些标签。 <code><header></code> 标签定义文档或者文档的一部分区域的页眉。 注释：<code><header></code> 标签不能被放在 <code><footer></code>、<code><address></code> 或者另一个 <code><header></code> 元素内部。 <code><footer></code> 标签定义文档或者文档的一部分区域的页脚。 <h4>表格标签</h4> <code><table></code> 定义表格 <code><tr></code> 定义行 <code><td></code> 定义单元格 colspan : 合并列 rowspan : 合并行 <code><th></code> 定义表头单元格 <img src="http://img.e-com-net.com/image/info8/3dda5af070d24d9fb7aba6b4e161b7bf.jpg" alt="图片" width="0" height="0"> <img src="http://img.e-com-net.com/image/info8/114ec6f352ee4880b902c37b11e1cc80.png" alt="图片" width="0" height="0"> <h4>表单标签</h4> <code><form></code> 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 属性： 1、action : 指定提交数据的URL 2、methon：指定提交方式 分类：一共7种，2种比较常用 get ： 请求参数会在地址栏中显示，会封装到请求行中 请求参数大小/长度是有限制的 不太安全 post : 请求参数不会在地址栏中显示，会封装在请求体中 请求参数的大小/长度没用限制 较为安全 表单项中的数据要想被提交：必须指定其name属性 <pre><code class="prism language-html">* 表单项标签： * input：可以通过type属性值，改变元素展示的样式 * type属性： * text：文本输入框，默认值 * placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息 * password：密码输入框 * radio:单选框 * 注意： 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 * checkbox：复选框 * 注意： 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值 * file：文件选择框 * hidden：隐藏域，用于提交一些信息。 * 按钮： * submit：提交按钮。可以提交表单 * button：普通按钮 * image：图片提交按钮 * src属性指定图片的路径 * label：指定输入项的文字描述信息 * 注意： * label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。 * select: 下拉列表 * 子元素：option，指定列表项 * textarea：文本域 * cols：指定列数，每一行有多少个字符 * rows：默认多少行。 </code></pre> <pre><code class="prism language-html"><form action="#" method="get"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> <input type="submit" `value="提交"/> </form> </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <form action="案例.html" method="get">  <label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br> <label for="password">密码：<input type="password" name="password" placeholder="请输入密码" id="password"><br> 性别：<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <br>  爱好：<input type="checkbox" name="hobby" value="game" > 打游戏 <input type="checkbox" name="hobby" value="plane" > 唱歌 <input type="checkbox" name="hobby" value="code" > 打代码 <br> 图片：<input type="file" name="file" value="图片" /> <br> 隐藏域：<input type="hidden" name="id" value="aaa" /> <br> 拾色器：<input type="color" name="color" value="" /> <br> 生日：<input type="time" name="birthday" ><br> 生日：<input type="datetime-local" name="birthday" ><br> 邮箱：<input type="email" name="email" ><br> 年龄：<input type="number" name="age" ><br> 省份：<select name="province"> <option value="">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option>   </select><br>  自我描述：<textarea rows="5" cols="20" name="自我描述"></textarea><br> <input type="button" value="按钮" > <input type="submit" `value="提交"> </form> </body> </html> </code></pre> <pre><code class="prism language-html">案例： <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册页面</title> </head> <body> <form action="#" method="post"> <table border="1" align="center" width="500"> <tr> <td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username" value="" /></td> </tr> <tr> <td><label for="password">密码</label></td> <td><input type="password" name="password" id="password" value="" /></td> </tr> <tr> <td><label for="eamil">Email</label></td> <td><input type="eamil" name="eamil" id="eamil" value="" /></td> </tr> <tr> <td><label for="name">姓名</label></td> <td><input type="text" name="name" id="name" value="" /></td> </tr> <tr> <td><label for="tel">手机号</label></td> <td><input type="number" name="tel" id="password"></td> </tr> <tr> <td><label for="tel">年龄</label></td> <td><input type="number" name="age" ></td> </tr> <tr> <td><label >性别</label></td> <td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女</td> </tr> <tr> <td><label >出生日期</label></td> <td><input type="date" name="birthday" id="birthday" ></td> </tr> <tr> <td><label for="checkcode" >验证码</label></td> <td><input type="text" name="checkcode" id="checkcode" ></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册" ></td> </tr> </table> </form> </body> </html> </code></pre> <h2>CSS</h2> 参考网站 <h4>概念</h4> Cascading Style Sheets 层叠样式表 <ul> <li>层叠：多个样式可以作用在同一个html的元素上，同时生效</li> </ul> <h4>好处</h4> <ol> <li>功能强大</li> <li>将内容展示和样式控制分离 <ul> <li> 降低耦合度。解耦 </li> <li> 让分工协作更容易 </li> <li> 提高开发效率 </li> </ul> </li> </ol> 三、CSS的使用：CSS与html结合方式 <h4>内联样式</h4> <pre><code class="prism language-html">内联样式 * 在标签内使用style属性指定css代码 * 如：<div style="color:red;">hello css</div> </code></pre> <h4>内部样式</h4> <pre><code class="prism language-html">内部样式 * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： <style> div{ color:blue; } </style> <div>hello css</div> </code></pre> <h4>外部样式</h4> <pre><code class="prism language-html">外部样式 1. 定义css资源文件。 2. 在head标签内，定义link标签，引入外部的资源文件 * 如： * a.css文件： div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div> </code></pre> 注意： <pre><code> * 1,2,3种方式 css作用范围越来越大 * 1方式不常用，后期常用2,3 * 第3种格式可以写为： </code></pre> <pre><code class="prism language-html"> <style> @import "css/a.css"; </style> </code></pre> <h4>css语法</h4> 格式： 选择器 { 属性名1:属性值1; 属性名2:属性值2; … } 选择器:筛选具有相似特征的元素 注意： 每一对属性需要使用；隔开，最后一对属性可以不加；** <h4>选择器</h4> <h5>基础选择器</h5> <pre><code class="prism language-html">五、选择器：筛选具有相似特征的元素 * 分类： 1. 基础选择器 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{} <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #div  { text-align:center; color:red; } </style> </head> <body> <p id="div">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html> </code></pre> <h5>元素选择器</h5> <pre><code class="prism language-html"> 2. 元素选择器：选择具有相同标签名称的元素 * 语法：标签名称{} * 注意：id选择器优先级高于元素选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 <html> <head> <meta charset="utf-8"> <title>随便</title> <style> div{ color:red; } </style> </head> <body> <div>传智播客</div> <div1>黑马程序员</div1> </body> </html> </code></pre> <h5>类选择器</h5> <pre><code class="prism language-html"> 3. 类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} * 注意：类选择器选择器优先级高于元素选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示： <html> <head> <meta charset="utf-8"> <title>随便</title> <style> #div{ color:red; } div{ color: green; } .cls{ color: blue; } </style> </head> <body> <div id="div">传智播客</div> <div1>黑马程序员</div1> <p class="cls">传智学院</p> </body> </html> </code></pre> <h5>扩展选择器</h5> <pre><code class="prism language-html">扩展选择器： 1. 选择所有元素：语法： *{} <html> <head> <style> * { background-color: pink; } </style> </head> <body> <div class="intro"> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> </body> </html> </code></pre> <h5>并集选择器</h5> <pre><code class="prism language-html">2. 并集选择器：选择所有<div>元素和<p>元素 (div,p) 语法 :选择器1,选择器2{} <html> <head> <style> div,p { background-color: pink; }  </style> </head> <body> <div> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div> My best friend is Mickey. </body> </html> </code></pre> <h5>子选择器</h5> <pre><code class="prism language-html">3. 子选择器：选择<div>元素内的所有<p>元素 (div p) 语法：选择器1 选择器2{} <html> <head> <style> div p { background-color: pink; } </style> </head> <body> <div> <p>My name is Donald.</p> I live in Duckburg. </div> My best friend is Mickey. </body> </html> </code></pre> <h5>父选择器</h5> <pre><code class="prism language-html">4. 父选择器：选择所有<p>元素的父级<div>元素 (div>p) 语法：选择器1 > 选择器2{} <html> <head> <style> div>p { background-color: pink; } </style> </head> <body> <div> <p>My name is Donald.</p> I live in Duckburg. </div> My best friend is Mickey. </body> </html> </code></pre> <h5>属性选择器</h5> <pre><code class="prism language-html">5. 属性选择器：选择元素名称，属性名=属性值的元素语法：元素名称[属性名="属性值"]{} <html> <head> <style> input[type='text']{ border:3px solid } </style> </head> <body> <div> <p>My name is Donald.</p> </div> My best friend is Mickey. <br> <input type="password"> <br> <input type="text"> </body> </html> </code></pre> <h5>伪类选择器</h5> <pre><code class="prism language-html">6. 伪类选择器：选择一些元素具有的状态 * 语法：元素:状态{} * 如： <a> * 状态： * link：初始化的状态 * visited：被访问过的状态 * hover：鼠标悬浮状态 * active：正在访问状态 <html> <head> <style> a:link{ /* 初始化的状态 */ color:skyblue; } a:visited{ /* 鼠标悬浮状态 */ color:green; } a:hover{ /* 被访问过的状态 */ color:yellow; } a:active{ /* 正在访问状态 */ color:blue; } </style> </head> <body> <a href="#">相亲吗少年</a> </body> </html> </code></pre> <h5>focus 伪类选择器</h5> ：focus伪类选择器用于选取获得焦点的表单元素 焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表单元素来说 <pre><code class="prism language-css">input:focus{ background-color:yellow; } </code></pre> <h4>属性</h4> <pre><code class="prism language-html">1. 字体、文本 * font-size：字体大小 * color：文本颜色 * text-align：对其方式 * line-height：行高 2. 背景 * background： 3. 边框 * border：设置边框，符合属性 4. 尺寸 * width：宽度 * height：高度 <html> <head> <style> p{ color: #fe9cfd; /*文本颜色*/ font-size: 30px; /*字体大小*/ text-align: center; /*对其方式*/ line-height: 200px; /*行高*/ border: 1px solid red; /*边框*/ } </style> </head> <body> <p>我喜欢你</p> </body> </html> </code></pre> <h5>盒子模型</h5> <pre><code class="prism language-html">5. 盒子模型：控制布局 * margin：外边距 * padding：内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 * float：浮动 * left * right </code></pre> <pre><code class="prism language-html"><html> <head> <style> div{ border: 1px solid red; width:100px } .div1{ width: 100px; height: 100px; } .div2{ width: 200px; height: 200; padding: 50px; box-sizing: border-box; /*设置盒子的属性决定最终大小*/ } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } </style> </head> <body> <div class="div2"> <div class="div1"></div>可恶啊</div> <div class="div3">aaaa</div> <div class="div4">bbbb</div> <div class="div5">cccc</div> </body> </html> </code></pre> <h5>字体属性</h5> CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体、微软雅黑） CSS使用font-family属性定义文本的字体系列 <pre><code class="prism language-css"><head> <style> h2{font-family:'华文彩云';} p{font-family: '微软雅黑'; } </style> </head> <body> <h2>ping老师</h2> 我喜欢你i </body> </code></pre> <ul> <li>各种字体之间必须使用英文状态下的逗号隔开</li> <li>一般情况下，如果有空格隔开的多个单词组成的字体，加引号</li> <li>尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示</li> </ul> <h4>CSS的元素显示模式</h4> <h5>块元素</h5> 常见的块元素有 <h2>~</h2> <h6>、、 <div> 、 <ul> <li> 、 <ol> <li> 、 </li> <li>等，</li> </ol> </li> </ul> </div> </h6> 其中 <div> 标签是最典型的块元素。 块级元素的特点： ①比较霸道，自己独占一行。 </div> ②高度，宽度、外边距以及内边距都可以控制。 ③宽度默认是容器（父级宽度）的100%。 ④是一个容器及盒子，里面可以放行内或者块级元素。 <ul> <li>文字类的元素内不能使用块级元素</li> <li><code></code> 标签主要用于存放文字，因此<code></code>里面不能放块级元素，特别不能放 <code><div></code></li> <li>同理，<code><h1>~<h6></code>等都是文字类块级标签，里面也不能放其他块级元素</li> </ul> <h5>行内元素</h5> 常见的行内元素有、、、、、<del>、<s>、</s></del><ins>、、等，其中 <code></code>标签是<code>最典型的行内元素</code>。有的地方也将行内元素称为==<code>内联元素</code>==。</ins> 行内元素的特点： ①相邻行内元素在一行上，一行可以显示多个。 ②高、宽直接设置是无效的。 ③默认宽度就是它本身内容的宽度。 ④行内元素只能容纳文本或其他行内元素。 注意： <ul> <li>链接里面不能再放链接</li> <li>特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全</li> </ul> <h5>行内块元素</h5> 在行内元素中有几个特殊的标签—、、，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。 行内块元素的特点： ①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。 ②默认完度就是它本身内容的宽度（行内元素特点）。 ③高度，行高、外边距以及内边距都可以控制（块级元素特点）。 <h5>元素显示转换</h5> <pre><code class="prism language-css">转换为块元素：display:block 转换为行内元素：display:inline； 转换为行内块：display:inline-block； </code></pre> <h4>CSS背景</h4> 通过CSS背景属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 <h5>背景颜色</h5> background-color属性定义了元素的背景颜色。 <pre><code class="prism language-css">background-color：颜色值； </code></pre> 一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。 <h5>背景图片</h5> background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景 图片，优点是非常便于控制位置（精灵图也是一种运用场景） <pre><code class="prism language-css">background-image:none | url (url) </code></pre> <table> <thead> <tr> <th>参数值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>none</td> <td>无背景图（默认的）</td> </tr> <tr> <td>url</td> <td>使用绝对或相对地址指定背景图像</td> </tr> </tbody> </table> <h5>背景平铺</h5> 如果需要在HTML页面上对背景图像进行平铺，可以使用<code>background-repeat</code>属性。 <pre><code class="prism language-css">background-repeat:repeat | no-repeat | repeat-x | repeat-y 平铺不平铺沿x轴平铺沿y轴平铺 </code></pre> <table> <thead> <tr> <th>参数值</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>repeat</td> <td>背景图像在纵向和横向上平铺（默认的）</td> </tr> <tr> <td>no-repeat</td> <td>背景图像不平铺</td> </tr> <tr> <td>repeat-x</td> <td>背景图像在横向上平铺</td> </tr> <tr> <td>repeat-y</td> <td>背景图像在纵向平铺</td> </tr> </tbody> </table> <h5>背景图片位置</h5> 利用background-position属性可以改变图片在背景中的位置。 <pre><code class="prism language-css">background-position:x y； </code></pre> 参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位 <table> <thead> <tr> <th>参数值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>length</td> <td>百分数 |由浮点数字和单位标识符组成的长度值</td> </tr> <tr> <td>position</td> <td>top | center | bottom I left | center | right 方位名词</td> </tr> </tbody> </table> 1.参数是方位名词 <ul> <li> 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致 </li> <li> 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐 </li> </ul> 2.参数是精确单位 <ul> <li> 如果参数值是精确坐标，那<code>第一个肯定是x坐标</code>，<code>第二个一定是y坐标</code> </li> <li> 如果只指定一个数值，那该数值<code>一定是x坐标</code>，<code>另一个默认垂直居中</code> </li> </ul> 3.参数是混合单位 <ul> <li>如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标</li> </ul> <h5>背景图像固定</h5> background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。 background-attachment后期可以制作视差滚动的效果。 <pre><code class="prism language-css">background-attachment:scroll | fixed </code></pre> <table> <thead> <tr> <th>参数</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>scroll</td> <td>背景图像是随对象内容滚动</td> </tr> <tr> <td>fixed</td> <td>背景图像固定</td> </tr> </tbody> </table> <h5>背景复合写法</h5> 为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量当使用简 写属性时，没有特定的书写顺序，一般习惯约定顺序为： background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置； <pre><code class="prism language-css">background:transparent url（image.jpg）repeat-y fixed top； </code></pre> <h5>背景颜色半透明</h5> CSS3为我们提供了背景颜色半透明的效果。 <pre><code class="prism language-css">background:rgba（0，0，0，0.3）; </code></pre> <ul> <li>最后一个参数是alpha透明度，取值范围在0~1之间</li> <li>我们习惯把0.3的0省略掉，写为background:rgba（0，0，0，.3）；</li> <li>注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响</li> </ul> <h4>CSS权重</h4> <table> <thead> <tr> <th>选择器</th> <th>选择器权重</th> </tr> </thead> <tbody> <tr> <td>继承或者 *</td> <td>0，0，0，0</td> </tr> <tr> <td>元素选择器</td> <td>0，0，0，1</td> </tr> <tr> <td>类选择器，伪类选择器</td> <td>0，0，1，0</td> </tr> <tr> <td>ID选择器</td> <td>0，1，0，0</td> </tr> <tr> <td>行内样式 style=""</td> <td>1，0，0，0</td> </tr> <tr> <td>!important 重要的</td> <td>无穷大</td> </tr> </tbody> </table> id选择器 > 类选择器 > 元素选择器 > 继承 <h4>盒子模型</h4> <a href="http://img.e-com-net.com/image/info8/c45cc8558d6145d6a427439b58b07009.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c45cc8558d6145d6a427439b58b07009.jpg" alt="HTML+CSS+Bootstrap+ECMAScript+DOM_第3张图片" width="650" height="301" style="border:1px solid black;"></a> <h5>边框</h5> border可以设置元素的边框。 边框有二部分组成：边框宽度（粗细）边框样式边框颜色 语法： <pre><code class="prism language-css">border:border-width || border-style || border-color </code></pre> <table> <thead> <tr> <th>属性</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>border-width</td> <td>定义边框粗细，单位是px</td> </tr> <tr> <td>border-style</td> <td>边框的样式</td> </tr> <tr> <td>border-color</td> <td>边框颜色</td> </tr> </tbody> </table> 参数： none : 　无边框。与任何指定的<code>border-width</code>值无关 hidden : 　隐藏边框。IE不支持 dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 　实线边框 double : 　双线边框。两条单线与其间隔的和等于指定的<code>border-width</code>值 groove : 　根据<code>border-color</code>的值画3D凹槽 ridge : 　根据<code>border-color</code>的值画菱形边框 inset : 　根据<code>border-color</code>的值画3D凹边 outset : 　根据<code>border-color</code>的值画3D凸边 <pre><code class="prism language-css">border：1px solid red；没有顺序 </code></pre> <pre><code class="prism language-css">边框分开写法： border-top：1px solid red；/*只设定上边框，其余同理*/ </code></pre> <h5>表格的细线边框</h5> border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。 语法： <pre><code class="prism language-css">border-collapse:collapse; </code></pre> <ul> <li>collapse单词是合并的意思</li> <li>border-collapse:collapse；表示相邻边框合并在一起</li> </ul> <pre><code class="prism language-css"><style> table { width: 500px; height: 249px; } th { height: 35px; } table, td, th { border: 1px solid pink; /* 合并相邻的边框 */ border-collapse: collapse; font-size: 14px; text-align: center; } </style> </code></pre> <h5>内边距</h5> padding属性用于设置内边距，即边框与内容之间的距离。 <table> <thead> <tr> <th align="left">属性</th> <th align="left">作用</th> </tr> </thead> <tbody> <tr> <td align="left">padding left</td> <td align="left">左内边距</td> </tr> <tr> <td align="left">padding-right</td> <td align="left">右内边距</td> </tr> <tr> <td align="left">padding-top</td> <td align="left">上内边距</td> </tr> <tr> <td align="left">padding-bottom</td> <td align="left">下内边距</td> </tr> </tbody> </table> padding属性（简写属性）可以有一到四个值。 <table> <thead> <tr> <th>值的个数</th> <th>表达意思</th> </tr> </thead> <tbody> <tr> <td>padding：5px；</td> <td>1个值，代表上下左右都有5像素内边距；</td> </tr> <tr> <td>padding：5px 10px；</td> <td>2个值，代表上下内边距是5像素左右内边距是10像素；</td> </tr> <tr> <td>padding：5px 10px20px；</td> <td>3个值，代表上内边距5像素左右内边距10像素下内边距20像素；</td> </tr> <tr> <td>padding：5px 10px20px30px；</td> <td>4个值，上是5像素右10像素下20像素左是30像素顺时针</td> </tr> </tbody> </table> 当我们给盒子指定padding值之后，发生了2件事情： 1.内容和边框有了距离，添加了内边距。 2.padding影响了盒子实际大小。 也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子 如何盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小 <h5>外边距</h5> margin属性用于设置外边距，即控制盒子和盒子之间的距离。 <table> <thead> <tr> <th>属性</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>margin-left</td> <td>左外边距</td> </tr> <tr> <td>margin-right</td> <td>右外边距</td> </tr> <tr> <td>margin-top</td> <td>上外边距</td> </tr> <tr> <td>margin-bottom</td> <td>下外边距</td> </tr> </tbody> </table> 外边距水平居中 外边距可以让块级盒子水平居中，但是必须满足两个条件： ①盒子必须指定了宽度（width） ②盒子左右的外边距都设置为auto <pre><code class="prism language-css">.header{ width：960px；margin：0 auto; } </code></pre> 常见的写法，以下三种都可以： <ul> <li>margin-left:auto； margin-right auto；</li> <li>margin: auto；</li> <li>margin: 0 auto；</li> </ul> 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。 <h5>塌陷问题</h5> 嵌套块元素垂直外边距的塌陷 <a href="http://img.e-com-net.com/image/info8/c584efe53c844194b06eebda8d220f59.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c584efe53c844194b06eebda8d220f59.jpg" alt="HTML+CSS+Bootstrap+ECMAScript+DOM_第4张图片" width="650" height="204" style="border:1px solid black;"></a> <h5>清除内外边距</h5> 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元 素的内外边距。 <pre><code class="prism language-css">*{ padding　: 0; /*清除内边距*/ margin :　0; /*清除外边距*/ } </code></pre> 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元 素就可以了 <h4>浮动</h4> float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 <h5>浮动特性</h5> 设置了浮动（float）的元素最重要特性： 1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标） 2.浮动的盒子不再保留原先的位置 3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。 <a href="http://img.e-com-net.com/image/info8/1fdeac98820248f39c8a7f34ff114cf8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1fdeac98820248f39c8a7f34ff114cf8.jpg" alt="HTML+CSS+Bootstrap+ECMAScript+DOM_第5张图片" width="650" height="107" style="border:1px solid black;"></a> 注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 4.浮动元素会具有行内块元素特性。 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 <ul> <li>如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定</li> <li>浮动的盒子中间是没有缝隙的，是紧挨着一起的</li> <li>行内元素同理</li> </ul> <pre><code class="prism language-css"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>zhao

"l">


    "o">
    "v">

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：

网页布局第一准则

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置、符合网页布局第一准则

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

浮动布局

注意点

1.浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流.

清除浮动

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响· 如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器{clear：属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear:both；

清除浮动的策略是：闭合浮动

清除浮动的方法

1、额外标签法（隔墙法）

2、父级添加 overflow 属性

3、父级添加after伪元素

4、父级添加双伪元素

额外标签法（隔墙法）

额外标签法会在浮动元素未尾添加一个空的标签。

例如

，或者其他标签（如

等）。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

父级添加 overflow 属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

优点：代码简洁
缺点：无法显示溢出的部分

在父级里添加overflow

父级添加after伪元素

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            /* 清除 */
            visibility: hidden;
                }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

父级添加双伪元素

		.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

总结

精灵图

精灵技术目的：

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

Bootstrap

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

Bootstrap本地载入

DOCTYPE html>
<html>
<head>
	<title>个人简历title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="js/jquery-3.2.1.min.js">script>		
	<script src="js/bootstrap.js">script>
head>

<body>
body>
html>

//<link rel="styleheet" href="">
//<script src="">script>

Bootstrap3模版

DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Templatetitle>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js">script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js">script>
       <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
  head>
  <body>
    <h1>你好，世界！h1>
  body>
html>

Bootstrap4模版

doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">script>

    <title>Hello, world!title>
  head>
  <body>
    <h1>Hello, world!h1>

   
   
  body>
html>

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。两边留白
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。每一种设备都是100%宽度

<div class="container">
  <h1>我的第一个 Bootstrap 页面h1>
  <p>这是一些文本。p> 
div>
-----------------------------------------------------------------------------------------------------
<div class="container-fluid">
  <h1>我的第一个 Bootstrap 页面h1>
  <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。p> 
div>

navbar

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

<html>
<head>
 <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js">script>
    <style>
        .navbar-brand>img {
            display: inline;
        }
    style>
head>
<body>

 <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
           
            <div class="navbar-header">
                <a href="" class="navbar-brand" style="width:250px;">
                    <img src="img/icon_1.jpg" style="height:30px;"> STEM教育
                a>
            div>
        div>
    nav>
body>
html>

https://www.cnblogs.com/jipinglong/p/9032640.html

栅格系统

响应式布局

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
步骤
1. 定义行。通过行（row）在水平方向创建一组列（column）
2. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
 - 设备代号：
 1. xs：超小屏幕手机 (<768px)：col-xs-12
 2. sm：小屏幕平板 (≥768px)
 3. md：中等屏幕桌面显示器 (≥992px)
 4. lg：大屏幕大桌面显示器 (≥1200px)
- 注意：
 1. 一行中如果格子数目超过12，则超出部分自动换行。
 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

<div class="container">   
      <h1>Hello World!h1>
      <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。p>
      <div class="row">
        <div class="col" style="background-color:lavender;">JavaScriptdiv>
        <div class="col" style="background-color:orange;">CSSdiv>
        <div class="col" style="background-color:lavender;">HTMLdiv>
      div>
    div>

<div class="container-fluid">

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row">
  <div class="col-md-4">.col-md-4div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4div>
div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div>
div>

按钮

<button type="button" class="btn">基本按钮button>
<button type="button" class="btn btn-primary">主要按钮button>
<button type="button" class="btn btn-secondary">次要按钮button>
<button type="button" class="btn btn-success">成功button>
<button type="button" class="btn btn-info">信息button>
<button type="button" class="btn btn-warning">警告button>
<button type="button" class="btn btn-danger">危险button>
<button type="button" class="btn btn-dark">黑色button>
<button type="button" class="btn btn-light">浅色button>
<button type="button" class="btn btn-link">链接button>

按钮类可用于,

HTML+CSS+Bootstrap+ECMAScript+DOM

Wed 概念概述

JavaWed：

软件架构：

B/S架构详解

HTML

Emmet语法

html标签快捷键

VSCode 保存自动格式化代码

标签

文件标签

浮动布局

清除浮动

清除浮动的方法

额外标签法（隔墙法）

父级添加 overflow 属性

父级添加after伪元素

父级添加双伪元素

精灵图

Bootstrap

Bootstrap本地载入

Bootstrap3模版

Bootstrap4模版

容器类

navbar

栅格系统

响应式布局

偏移列

按钮

按钮设置边框

不同大小的按钮

块级按钮

激活和禁用的按钮

颜色

代表指定意义的文本颜色

文本颜色

图像

圆角图片

椭圆图片

缩略图

图片对齐方式

响应式图片

JavaScript

JAVA的起源故事

5大主流浏览器

JS引擎是单线程

概念

基本语法

使用、输出

innerHTML

document.write()

window.alert()

console.log()

数据类型

Number

字符串

多行字符串

模板字符串

操作字符串

toUpperCase

toLowerCase

indexOf

substring

布尔值

null和undefined

数组

对象

变量

基本对象

Function

标准对象

Date

RegExp

预编译

全局上下文

Global

encodeURI() 、decodeURI()

parseInt()

parseFloat

isNaN()

`proto`