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架构的软件项目对硬件要求不高,只需要使用的操作系统支持浏览器即可。
优点:
对硬件要求低维护成本低,更新时只需要服务端更新即可跨平台性好,只需要操作系统支持浏览器即可
缺点:
对网络要求高用户体验不如客户端程序
相关技术介绍
Web前端
web前端技术主要应用于客户端浏览器,主要技术包含以下三大:
HTML:HyperText Markup Language超文本标记语言CSS:Cacading Style Sheet 层叠样式表JavaScript:脚本语言
网页三剑客(Adobe):
Dreamweaver、Flash、Firework
Web后端
web后端(java)技术也称之为服务端技术,主要包含:
web容器:服务器(tomcat/jetty/jboss/weblogic)动态网页技术JSP/freemark/thymleafServlet
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>
具体解释:
<!--文档类型定义(DTD):用于规范当前HTML文档类型,html5的定义为:<!DOCTYPE html>用于规范当前html文档中能够编写一些标签,属性,以及标签之间的组织结构--><!DOCTYPE html><!--html文档根标签,任何一个HTML文件中有且只能有一对根标签--><html lang="en"><!--head标签用于定义网页头部的配置信息:编码设置缓存配置网页描述收藏图标移动端viewport配置网页标题样式资源引用脚本文件引用--><head><!--配置页面编码--><meta charset="UTF-8"><!--配置网页标题--><title>这是我的第一个HTML页面</title></head><!--body标签用于定义网页中显示的主体内容--><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文本与格式标签
<!--一级标题:尽量保证一个html文档中只出现一个一级标题,便于SEO--><h1>文本和格式标签</h1><h2>文本标签</h2><!--emmet快捷html代码生成命令--><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6><!--段落标签--><p>床前明月光</p><p>疑似地上霜</p><p>举头望明月</p><p>低头思故乡</p><!--行内文本标签 bold italic underline delete--><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{列表嵌套}+hr+ul>li{菜单项$$}*3>ul>li{子菜单}*2--><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:设置图片的地址(绝对路径或者相对路径)alt:当图片不能正常显示时,使用alt中的文本代替width/height:分别设置图片宽高,建议只用一个属性,可以保持图片的横纵比--><img src="/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""><img src="imgs/girl.jpg" alt="这是一幅美女图片" width="200px"><!--audio标签:音频标签src:设置音乐资源路径autoplay:设置自动播放音乐文件controls:设置显示播放控制界面loop:音乐播放的循环次数(-1无限循环)--><audio src="mp3/周杰伦-晴天.mp3" autoplay controls loop="-1"></audio><!--audio标签:视频标签src:设置视频资源地址支持的文件格式包含: ogg,webm,mp4--><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:设置表单提交的之后的跳转目标method:设置表单的提交方式(get(默认)/post)enctype:设置表单数据提交的编码模式application/x-www-form-urlencoded 默认值,以表单数据提交,数组使用名值对(name=admin&pwd=XXX)结构提交multipart/form-data 将数据以二进制流提交,一般用于文件上传input元素常用属性:type:设置输入组件的类型(text,password,hidden,radio,checkbox,file,date,number,tel,email,button,reset,submit)name:为表单控件设置控件名,一般后台获取数据时根据控件名获取,控件名可以重复value:用于设置控件的默认值readonly:设置控件为只读,无法修改disabled:将控件失效,失效之后,后台无法根据控件名获取该控件的值placeholder:主要针对于输入框组件,用于显示水印提示信息,当用户输入内容之后自动隐藏--><form action="login.html" method="post" enctype="application/x-www-form-urlencoded"><!--username=softeem-->文本框:<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><!--普通按钮默认点击无效果,需要通过javascript进行事件绑定--><!--<input type="button" value="普通按钮">--><button type="button">普通按钮</button><!--重置表单中已填写的内容--><!--<input type="reset" value="重置按钮">--><button type="reset">重置按钮</button><!--提交按钮,点击之后可以将表单中填写的数据提交到form标签中action属性所指定的位置(一般为后台映射地址)--><!--<input type="submit" value="提交表单">--><button type="submit">提交表单</button></form></body></html>
html5新增表单标签
<form action="login.html" id="myform"></form><!--日期选择控件-->日期选择:<input type="date" name="birth" form="myform" value="-01-01"><br><!--时间选择-->时间选择:<input type="time" name="time" form="myform"><br><!--周数选择-->周数选择:<input type="week" name="week" form="myform"><br><!--日期时间选择控件-->日期时间:<input type="datetime-local" name="now" form="myform"><br><!--月份选择-->月份选择:<input type="month" name="month" form="myform"><br>数值输入:<input type="number" name="total" min="100" max="10000" form="myform"><br>范围选择:<input type="range" name="progress" min="0" max="100" form="myform"><br>颜色选择:<input type="color" name="bgcolor" form="myform" onchange="document.body.bgColor=this.value"><br><!--在移动设备中根据type弹出不同的虚拟键盘-->邮箱输入:<input type="email" name="mail" form="myform"><br>网址输入:<input type="url" name="mail" form="myform"><br>联系电话:<input type="tel" name="tel" form="myform"><br>下拉列表:<input type="text" name="car" list="cars" form="myform"><datalist id="cars"><option>宝马</option><option>奔驰</option><option>奥迪</option></datalist><br><button type="submit" form="myform">提交数据</button>
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><!--<link rel="stylesheet" href="css/page7.css">--><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组成部分
ECMAScriptDOMBOMJS基础语法
Javascript入门案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个javascript程序</title></head><body><h1 id="h1">这是第一个JavaScript页面</h1><!--推荐js编写位置,在body结束标签前--><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]);}
函数与事件
函数
javascript中的函数类似于Java中方法
函数的声明语法:
function 函数名(参数名列表){//执行体}
事件
javascript是一门基于事件驱动的语言,当html页面中的元素触发一些动作时,可以执行相关的js代码,常见的事件主要包含:
文档事件鼠标事件键盘事件