100字范文 > 第七周 web前端基础（html+css）

第七周 web前端基础（html+css）

时间：2022-03-24 11:32:45

Web开发之Web前端基础(HTML)开发技术概述

文章目录

Web开发之Web前端基础(HTML)开发技术概述Web开发技术概述CS架构与BS架构CSBS 相关技术介绍Web前端Web后端 HTML概述开发工具文本编辑器集成开发环境第一个HTML页面基础语法元素(Element)标签(Tag)属性(Attibute) HTML实体色彩使用 HTML文本与格式标签行级元素和块级元素行级元素（inline）块级元素（block）列表标签超链接和iframe标签iframe锚链接媒体标签表格标签\表单标签\html5新增表单标签 span&divspandiv HTML5语义化标签CSS入门概述基本单位尺寸颜色基础语法样式引入html中的方式包含三种 CSS选择器**通配选择（*）****id选择器（#id）****类选择器（.class）****元素选择器（标签选择器）**子选择器（P > S ）层级选择器（E E2）分组选择器（s1,s2,s3...）伪类和伪对象选择器 CSS选择器补充选择器优先级 CSS常用属性尺寸边框与背景字体与文本列表与表格定位与盒模型定位 DIV+CSS布局盒子模型Margin和Padding盒子模型 DIV+CSS布局案例 JavaScriptJS入门概述JS和java的区别Javascript组成部分 JS基础语法Javascript入门案例JavaScript在html页面中使用三种方式数据类型分支与循环分支语句循环语句函数与事件函数事件

Web开发技术概述

CS架构与BS架构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXwI5vs2-1597582850112)(D:\带班资料\\j\线下\part4-web前端\\笔记\assets\1597025283914.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PYOG5mNc-1597582850114)(D:\带班资料\\j\线下\part4-web前端\\笔记\assets\1597055386802.png)]

CS

Client/Server；客户端/服务器模式，在以前网络传输效率比较底下的时候，是CS架构软件盛行的时代，在这个时代，所有的软件使用都离不开客户端程序，即需要先从远程下载一个客户端安装包，在本地安装，然后才能够正常使用，对本机硬件要求较高。

优点：

响应速度快对网络速度要求低用户体验好使用稳定

缺点：

对客户端硬件要求高维护成本高，更新需要所有客户端都更新跨平台性不好，针对不同的操作系统需要不同的客户端

BS

Browser/Server;浏览器/服务器模式，在当今高速网络带宽的时代，很多以往需要下载客户端才能正常使用的软件，只需要打开浏览器，绝大部分都可以实现；BS架构的软件项目对硬件要求不高，只需要使用的操作系统支持浏览器即可。

优点：

对硬件要求低维护成本低，更新时只需要服务端更新即可跨平台性好，只需要操作系统支持浏览器即可

缺点:

对网络要求高用户体验不如客户端程序

HTML概述

HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；HTML不是一门程序设计语言，严格来说HTML是一种标记型语言，学习成本很低。

HTML目前主流的版本是HTML5,不是基于SGML的子集（html4.01和xml一样都是基于SGML）。HTML5的出现不是由W3C组织提出，而是由浏览器的厂商联盟(WHATWG)

开发工具

文本编辑器

记事本EditplusNotpad++AtomSublimeTextVSCode

集成开发环境

WebstomeHBuiler/HubilderX(Eclipse)

第一个HTML页面

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body>Hello Html!!!</body></html>

具体解释:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>这是我的第一个HTML页面</title></head><body>Hello Html!!!</body></html>

基础语法

元素(Element)

元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。

例如:

<p>这是一个段落</p><div><a href="">软帝信息</a><a href="">软帝联合</a><a href="">呱奇编程</a></div>

标签(Tag)

标签（tag）指示元素的起始与结束。所有标签都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。一般说来，有两种标签——首标签（start tag）（如<html>）和尾标签（end tag）（如</html>）。它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。

例如:

<div></div><a></a>单标签<br/><hr/><img/><video/><audio/><input/>

属性(Attibute)

一般为开始标签之内，用于设置当前标签的相关的属性配置，通常由属性名以及属性值构成或者只有属性名，属性值使用双引号包裹，一个标签中可以包含多个属性，具体如下:

<a href="" target="_blank" title="百度一下，你就知道">百度</a>

以上属性有:
hreftargettitle

HTML实体

HTML中除了元素，标签和属性等元素构成外，另外还包含一些特殊的字符串(html实体)，比如：需要在页面上显示一个版权符号可以使用©

显示结果描述实体名称实体编号空格  <小于号<<>大于号>>&和号&&"引号""'撇号 ' (IE不支持)'￠分（cent）¢¢£镑（pound）££¥元（yen）¥¥€欧元（euro）€€§小节§§©版权（copyright）©©®注册商标®®™商标™™×乘号××÷除号÷÷

色彩使用

HTML中支持以下颜色表示方式

16进制颜色编码颜色英文单词rgb值

HTML文本与格式标签

<h1>文本和格式标签</h1><h2>文本标签</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6><p>床前明月光</p><p>疑似地上霜</p><p>举头望明月</p><p>低头思故乡</p><b>这是一段加粗的文本</b><i>这是一段斜体文本</i><u>下划线文本</u><del>删除线文本</del><b>x<sup>2</sup></b><b>x<sub>2</sub></b><cite>引用方式的文本</cite><em>强调的文本</em><strong>加重的文本，一般为黑体加粗体</strong><font size="20px" face="华文行楷" color="#0f0">过时的文本</font><h2>格式标签</h2><hr/><p>hello<br/>world</p><p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长的文本，<nobr>这段内容不能换行</nobr></p><blockquote>HTML（HyperText Markup Language）超文本标记语言，主要应用于浏览器(网页的母语)，作为一个网页的结构设计语言；HTML不是一门程序设计语言，严格来说HTML是一种标记型语言，学习成本很低。</blockquote><pre>这是预处理文本，一般用于显示代码块</pre>

行级元素和块级元素

html中的标签根据显示效果的不同划分为行级元素和块级元素

行级元素（inline）

行级元素也称之行内元素，即元素中的内容所占据的宽度由内容决定，后面跟随的行内元素会紧邻之前的元素显示。常见的行级元素：

bistrongimgaspan

块级元素（block）

块级元素不论元素中内容的宽度是多少，始终会占满整个一行

h1~h6pdiv

列表标签

在网页中经常会看到一些列表信息，比如菜单，数据列表等，html中的列表主要包含以下几类:

无序列表有序列表普通列表

具体使用如下:

<h1>列表标签</h1><h2>无序列表</h2><hr><ul><li>菜单项01</li><li>菜单项02</li><li>菜单项03</li><li>菜单项04</li><li>菜单项05</li></ul><h2>有序列表</h2><hr><ol><li>注意事项</li><li>注意事项</li><li>注意事项</li><li>注意事项</li><li>注意事项</li></ol><h2>普通列表</h2><hr><dl><dt>HTML</dt><dd>HyperText Markup Language</dd><dd>超文本标记语言</dd><dt>CSS</dt><dd>Cascading Style Sheets</dd><dd>层叠样式表</dd><dt>JS</dt><dd>JavaScript</dd></dl><h2>列表嵌套</h2><hr><ul><li>菜单项01<ul><li>子菜单1-1</li><li>子菜单1-2</li></ul></li><li>菜单项02<ul><li>子菜单2-1<ul><li>子菜单2-1-1</li><li>子菜单2-1-2</li><li>子菜单2-1-3</li></ul></li><li>子菜单2-2</li></ul></li><li>菜单项03<ul><li>子菜单3-1</li><li>子菜单3-2</li></ul></li></ul>

超链接和iframe标签

html中使用a标签作为一个超链接标签，通过对a标签中的href设置关联的超文本资源可以实现页面跳转，另外也可以通过设置锚链接的方式实现页面内跳转，如:

<a href="">软帝信息</a><a href="page1.html" target="_blank">首页</a><a href="javascript:alert('你真乖，叫你点就点')">点我试试</a><a href="mailto:softeem123@">发送邮件</a><a href="tel:110">拨打电话</a><a href="#">当前页面</a><a href="#part1">第一章无名小子初出茅庐</a>

a标签中包含以下几个常见的属性：

href：用于设置需要跳转的目标位置，包含如下一些内容

网页地址当前项目其他资源文件路径邮箱地址(如 href=“mailto:softeem@”)设置js的函数(如 href=“javascript:void(0)”)设置为“#”

target：用于设置跳转的方式以及目标

四个固定的取值

_blank:在新的标签页打开链接_self(默认):在本页中打开链接_parent:在父页面中打开链接（一般常见于框架页面内部）_top:在顶层页面中打开链接(一般用于多层框架嵌套内部)

自定义name

<ul><li><a href="page1.html" target="content">page1.html</a></li><li><a href="page2.html" target="content">page2.html</a></li><li><a href="page3.html" target="content">page3.html</a></li></ul><iframe src="" name="content" frameborder="1" width="100%" height="400px"></iframe>

iframe

iframe是一个内嵌框架标签，在html5之前浏览器支持一系列的框架标签（frameset/frame/iframe），用于将网页结构划分为几个子页面构成；但是由于框架标签对于SEO不太友好，因此html5之后除了iframe之外，其余的全部被淘汰.

对于iframe的使用：

<iframe src="" name="content"></iframe>

注意事项：
html5之后i’frame中的所有属性仅剩src受到支持，其余全部标记过时：
framespacingframeborderscrollingwidthheight

锚链接

a标签除了可以实现其他页面跳转之外，还能有支持页面内设置锚点，进行页面内跳转，具体使用方式如下:

<a href="#part1">第一章无名小子初出茅庐</a><br><a href="#part2">第二章少年小有所成</a><br><a href="#part3">第三章大侠大杀四方</a><br><a href="#part4">第四章英雄迟暮，魂归故里</a><br><h2><a id="part1">第一章无名小子初出茅庐</a></h2>...<h2><a id="part2">第二章。。。</a></h2>...<h2><a id="part3">第三章。。。</a></h2>...<h2><a id="part4">第四章。。。</a></h2>...

媒体标签

HTML5中新增了很多媒体标签，同时也将4.01中部分标签标记为过时，比如bgsound，embed,html5中主要支持的媒体标签包含以下：

img 图片标签audio 音频标签video 视频标签canvas 画布元素svg 矢量图

<img src="/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""><img src="imgs/girl.jpg" alt="这是一幅美女图片" width="200px"><audio src="mp3/周杰伦-晴天.mp3" autoplay controls loop="-1"></audio><video autoplay controls width="1000px"><source src="video/4KHD_VP9TestFootage.webm"><source src="video/ogg-19M.ogg"><source src="video/test.mp4"><source src="video/Psy%20-%20Gentleman.mkv"></video>

表格标签<table>

<table></table>定义表格包含属性：border,bgcolor,bordercolor,width,height,cellspacing,cellpadding<caption></caption>(非必须)定义表格名称，必须跟在table标签之后表格通常分为三部分：thead、tbody、tfoot；这个三个字标签为非必须，不写时默认全部位于tbody中，具体如下：<thead></thead>(非必须) 表示表格头部区域<tbody></tbody>(非必须) 表示表格内容区域<tfoot></tfoot>(非必须) 表示表格底部区域<tr></tr>定义行，属性：align,valign,bgcolor…<td></td>定义列，属性：width,height,align,valign.colspan,rowspan,…<th></th>定义表头

表单标签<form>

<form action="login.html" method="post" enctype="application/x-www-form-urlencoded">文本框:<input type="text" name="username" placeholder="请输入账号" value="softeem"><br>密码框:<input type="password" name="password"><br>单选框:<input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 <br>复选框:<input type="checkbox" name="lang" value="java" checked>Java<input type="checkbox" name="lang" value="c++">C++<input type="checkbox" name="lang" value="javascript">JavaScript <br>文件框:<input type="file" name="myfile" multiple> <br>列表框:<select name="city" multiple><option value="wh">武汉</option><option value="bj" selected>北京</option><option value="sh">上海</option><option value="hz">杭州</option><option value="sz">深圳</option></select><br>文本域:<textarea name="mark" cols="50" rows="5" placeholder="请输入个性签名" style="resize: none;"></textarea><br><fieldset><legend>用户登录</legend><input type="text" name="uname"><br><input type="password" name="pwd"><br><button>登录</button></fieldset><button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交表单</button></form></body></html>

html5新增表单标签

span&div

在html页面进行布局设置时，span和div是两个最为常见的分区标签，不同于其他标签的作用，其他标签大多数都具备特定样式效果，比如按钮button，链接a，图片img；span和div不具备任何的固有样式，仅仅用作于对页面结构进行分区，所以在进行网页布局是span和div是首选。

span

<span>是一个行内元素，元素在界面中遵循正常的文档流（从左往右，从上往下），根据内部包裹的内容占据内容固有的宽度，后续的元素紧邻span追加显示。

div

<div>是一个典型的块元素，在使用时无论内部包含多少内容，始终独占一行，从上往下布局。可以通过css代码结合div元素对网页结构进行布局以及美化。

table布局和div+css布局区别？

HTML5语义化标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-khIkBQ57-1597582850118)(C:/Users/admin/Desktop/assets/1597127144681.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GoRjZ5Hr-1597582850121)(C:/Users/admin/Desktop/assets/1597127158254.png)]

由于DIV标签可以表示任何的布局，因此指代性比较弱，不够语义化，在SEO方面存在一些收录的困难问题，因此html5中新增了一些更为语义化的div标签，这些标签名称不叫div，但是作用等同于div，主要包含以下:

<article> 标记定义一篇文章<header> 标记定义一个页面或一个区域的头部<nav> 标记定义导航链接<section> 标记定义一个区域<aside> 标记定义页面内容部分的侧边栏<hgroup> 标记定义文件中一个区块的相关信息<figure> 标记定义一组媒体内容以及它们的标题<figcaption> 标签定义 figure 元素的标题。<footer> 标记定义一个页面或一个区域的底部<dialog> 标记定义一个对话框(会话框)类似微信

CSS入门

概述

通过对html的学习，我们可以了解到，html主要用作于对于网页的结构进行设计，类似于一个人的骨骼，或者一栋大楼内部结构；只有html不能够形成一个完整的网页；因此，我们需要对网页结构进行美化以及样式的改造才能成为一个漂亮的网页；

要实现以上需求，我们就必须要学习CSS相关技术；

CSS(Cascading Style Sheets),层叠样式表，CSS通过一系列的选择器对html页面中的元素选中，并结合css提供的一些属性对这些元素进行改造以及美化。

html是人体骨骼，css就是人体肉体外貌

基本单位

尺寸

常见尺寸单位：

绝对单位px：像素，表示屏幕上的一个点pt：磅，1/72英寸cm：厘米mm：毫米相对单位%：百分比（以父元素为参考）em：用于设置字体，以浏览器默认字体16px为例，1em=16pxrem：相对em，以设备默认字体为参考，一般用于移动设备vw：viewport width ，视口宽度，以当前设备为参考从0-100之间vh：viewport height，视口高度，以当前设备为参考从0-100之间

颜色

常见的颜色表示方式：

颜色名称比如:red、green、blue、lightblue，gray，black，white，pink16进制颜色编码比如 #000000（#000）、#FFFFFF（#FFF）、#FF0000(#f00)、#00FF00(#0f0)、#0000FF(#00f)rgb值：红绿蓝三原色的0~255之间比如 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) rgba值：红绿蓝以及透明度比如:rgba(0,0,0,.5) 半透明黑色

基础语法

css语法：选择器{属性名:属性值;...}

入门案例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{margin-top:10px;width:400px;height:80px;background-color:#0f0;font-size:1.5em;color:#fff;text-align:center;line-height: 80px;}</style></head><body><div>hello css!!!</div><div>hello css!!!</div></body>

样式引入html中的方式包含三种

内联样式

<div style="font-size:20px;color:red;">Hello CSS</div>

内部样式表

参考以上入门案例

外部样式文件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/page7.css"></head><body><div>hello css!!!</div><div>hello css!!!</div></body></html>

关于外部样式文件的引入，除了可以通过link标签实现外，还可以使用css样式提供的@import指令导入样式文件。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>@import url("css/page7.css");</style></head><body><div>hello css!!!</div><div>hello css!!!</div></body></html>

CSS选择器

如果需要对html中的元素进行样式设置，第一步需要先获取到该元素，即选中；因此，需要通过特定的选择器来实现选中，CSS中包含以下常见的选择器:

**通配选择（*）**

通配选择器“*”，用于选中所有的元素进行统一的样式控制，一般用于页面中标签的默认样式重置，比如:body的内外边距，浏览器自带的外边线效果，样式标签的边框

<style>/*重置样式*/*{margin:0;padding:0;outline: none;}</style>

id选择器（#id）

id在一个html文件中一般用于表示元素的唯一性，因此，html中一般不建议出现多个重复的id，css提供了id选择器用于选中指定id的元素，语法：

#id{}

案例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>通配选择</title><style>/*选中id为menu2的元素*/#menu2{background: darkgreen;}</style></head><body><ul><li>菜单项1</li><li>菜单项2</li><li>菜单项3</li></ul><ul id="menu2"><li>菜单项1</li><li>菜单项2</li><li>菜单项3</li></ul></body></html>

类选择器（.class）

类选择器是根据html元素的class属性，进行元素的选择，在html中可以为多个元素设置相同的class,因此class可以对需要进行样式统一控制的元素分类

语法:

标签名.类名称{属性名:属性值;...}

多数时候类选择器可以省略标签名，直接使用".类名"的方式选中元素
.m{color:red;}

元素选择器（标签选择器）

直接根据标签名称，选中符合名称的标签

/*选中所有的div标签*/div{margin-top:10px; /*与顶部元素外边距*/width:400px;height:80px;background-color:#0f0;font-size:1.5em;color:#fff;text-align:center;line-height: 80px; /*行高*/}

子选择器（P > S ）

选中指定元素下的一级子元素，比如：

<div class="main"><p>这是一个段落<div><p>这是一个子段落</p></div></p></div>

对以上html中，使用如下选择器

.main>p{color:#00ff00;}

被选中的元素为：

<p>这是一个段落<div><p>这是一个子段落</p></div></p>

层级选择器（E E2）

在子选择器中只能选中指定元素第一级子元素，如果需要选中某个元素下的所有子元素（不论级别），则可以使用层级选择器实现:

.main p{color:#0f0;}

以上代码将会选中所有class名称为“main”下面的所有p元素

分组选择器（s1,s2,s3…）

分组选择器允许将多个选择器组合选择，使用方式如下:

h4,h5,h6,input{color:#00f;}

伪类和伪对象选择器

/*选中a元素设置默认效果*/a{color:#000;text-decoration: none;}/*伪类选择器，当鼠标悬停到元素上时以下样式生效*/a:hover{color:#f00;text-decoration: underline;}/*当a元素被激活时（被点击），使用以下样式*/a:active{color:#0f0;text-decoration: none;}/*选中class为menu下的最后一个li*/.menu li:last-child{border:1px solid #000;}/*选中class为menu下的第一个li*/.menu li:first-child{border:1px solid #f00;}/*选中class为menu下的第指定顺序个li*/.menu li:nth-child(3){border:1px solid #ff0;}/*选中所有class为menu2下面的所有的除了最后一个之外的li*/.menu2 li:not(:last-child){border-bottom:1px solid #000;}table{width: 800px;/*设置选中元素边框样式：线条宽度，线条的样式(实线，虚线，双线，点线),线条颜色*/border:1px solid #0000ff;/*合并相邻的边框*/border-collapse:collapse;}td{border:1px solid #0000ff;}/*选中所有偶数行*/table tr:nth-child(2n){background-color: rgba(0,0,0,0.1);}/*去除所有ul和ol元素自带的列表样式*/ul,ol{list-style:none;}.contact li{height: 50px;line-height: 50px;}/*伪对象选择器*/.contact li::before{content:url("imgs/1.gif");}.contact li::after{content:url("imgs/12.gif");}

CSS

选择器补充

选择器优先级

选择器的优先级遵循以下规律:

!important>ID选择器>属性选择器>类选择器>子选择=层级选择>元素选择>通配选择

CSS常用属性

尺寸

边框与背景

字体与文本

列表与表格

定位与盒模型

定位

html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放，文档流即从左往右（行内元素），从上往下（块元素）；但是在css中可以通过定位的方式将元素脱离正常的文档流，css中定位主要包含以下属性：

position：设置定位方式 relative:相对定位(不会导致元素脱离文档流)absolute:绝对定位(元素会脱离正常的文档流)fiexd:固定定位(脱离正常文档流)static(默认值) z-index：层叠顺序（必须配合绝对定位一起使用，数值越大越置顶）left：元素与父容器左边的距离right：元素与父容器右边的距离top：元素与父容器上边的距离bottom：元素与父容器下边的距离

DIV+CSS布局

盒子模型

Margin和Padding

Margin：用于设置元素和相邻元素之间的外边距，margin可以设置1~4个属性值:

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

padding：用于设置元素和内部内容之间的距离，padding取值也是1~4个值:

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

盒子模型

在HTML中任何的一元素都可以看作为一个盒子,默认情况下一个元素的实际大小由设置的宽高，边框宽度，内边距三个值之和组成：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xih0zEv4-1597582850125)(D:\带班资料\\j\线下\part4-web前端\\笔记\assets\1597280652711.png)]

即当设置了内边距（padding）和border之后，会导致定义的宽高被撑开，从而实际大小和样式中定义的大小不一致：

实际大小=边框宽度+内边距+height

如果需要将边框宽度和内边距包含在定义的宽高之内，可以使用box-sizing:border-box实现

例如针对以下的代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>盒子模型</title><style>#app{margin: 20px;padding:50px;height: 200px;width: 400px;background: #0f0;border:5px solid #f00;}.container{height: 30px;}</style></head><body><div id="app"><div class="container">快使用双截棍哼哼哈嘿！！！</div></div></body>

默认显示的效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zKb1nYaU-1597582850126)(D:\带班资料\\j\线下\part4-web前端\\笔记\assets\1597281041959.png)]

最后实际大小为：510X310

在为div#app设置box-sizing:border-box之后，计算规则如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKMC3Ykm-1597582850127)(D:\带班资料\\j\线下\part4-web前端\\笔记\assets\1597281015009.png)]

最后的实际大小为:400X200

content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

DIV+CSS布局案例

在网页设计的发展史中关于布局包含很多解决方案，早期可以使用table实现页面布局，但是由于table布局结构性太强，不能够灵活控制，不支持响应式，因此table布局已经淘汰；目前比较流行的布局方式是基于DIV+CSS实现，其子集也包含目前互联网中流行响应式布局，弹性布局，移动端布局等。

JavaScript

JS入门

概述

JavaScript（简称JS），由netscape(网景)公司研发的一门客户端(浏览器)脚本语句，所谓脚本语言即需要嵌入到其他语言中运行，而无法独立运行(在NodeJS中可以直接运行javascript);javascript是基于事件驱动的，是一门弱类型语言，javascript不需要编译，是一门直译型语言。

强类型语言:在进行变量声明时，需要显示的指定该变量的数据类型，并且运行期间无法修改数据类型。
int i = 10;String s = "hello";i = "world"; // 编译错误
弱类型语言:在使用变量前不需要声明任何的数据类型，并且在运行期间可以任意的改变其数据类型(动态语句)
i = 10;var s = "hello";i = "world";//正常执行
直译型语言:程序编写完成之后无需编译，直接解释，常见的直译型语言包含：Javascript,python

JS和java的区别

java是强类型，js是弱类型java是编译解释型，js是直译型Java是服务端语言，js是客户端语言java可以独立运行，js需要嵌入到客户端浏览器运行

Javascript组成部分

ECMAScriptDOMBOM

JS基础语法

Javascript入门案例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个javascript程序</title></head><body><h1 id="h1">这是第一个JavaScript页面</h1><script>window.alert("hellojs1")document.write("hellojs2")console.log("hellojs3")</script></body></html>

JavaScript在html页面中使用三种方式

直接在html中使用script标签包裹js代码,参考以上入门案例

通过链接外部js文件引入

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个javascript程序</title></head><body><h1 id="h1">这是第一个JavaScript页面</h1><script src="js/javascript01.js"></script></body></html>

src和href区别:
<link rel="stylesheets" href="css/index.css"><script src="js/index.js"></script>
href:表示的是关联外部的样式文件，在外部样式文件中对其他资源的访问参考位置是样式文件所在位置
src：替换当前位置的代码为js文件中的代码，在js中访问其他资源的时候参考的目标是当前的html文件

直接在内部html中使用js脚本

<button onclick="alert('对不起，看不到片')">点我看片</button>

数据类型

JavaScript包含的数据类型主要分为以下：

number(整数类型和浮点类型)string(字符和字符串类型)boolean(布尔类型)undefined(未定义)object(对象类型) null数组普通对象

分支与循环

javascript中的基础语法和其他语言(java,c,c++)非常类似，也包含分支和循环等特点

分支语句

javascript支持的分支包含:

if…else…

switch

// javascript中的注释分为单行(//)和多行(/* */)// 条件分支// 判断一个变量age是否大于等于18var age = '18';if(age >= 18){alert('小帅哥，来玩啊啊!')}else{alert('小屁孩一边去。。。')}if(age){alert(age);}else{alert('age=0');}/*== 和 === 区别== 用于判断运算符左右的的值是否一致，忽略数据类型=== 恒等于，除了判断运算数是否一致外还判断类型是否一致** */if(age === 18){alert('是一个正确的年龄:'+age);}else{alert('不是一个正确的年龄');}//判断一个月份是属于哪一个季节var m = 10;switch(m){case 3:case 4:case 5:console.log('Spring...');break;case 6:case 7:case 8:console.log('Summer...');break;case 9:case 10:case 11:console.log('Autumn...');break;case 1:case 2:case 12:console.log('Winter...');break;}// 实现一个购物结算功能，根据购买的数量进行相应折扣，输出最终的价格// 商品单价￥10// 购买1件不打折// 购买2~5件打9折// 购买5件以上打8折//单价var price = 10;//购买数var count = 5;if(count == 1){console.log(price);}else if(count>=2 && count < 5){console.log(count * price * 0.9);}else{console.log(count * price * 0.8);}

循环语句

js的循环分为四种类型:

for循环while循环do…while循环for…in循环

for(var i = 1;i <= 10; i++){console.log(i);}console.log("====================")var i = 1;while(i <= 10){console.log(i);i++;}console.log("------------------");do {i--;console.log(i);}while(i>0);console.log("+++++++++++++++++++++")var arr = [10,20,30,40,50];//for...in...for(var a in arr){console.log(arr[a]);}