第七周 web前端基础(html+css)

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

文章目录

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

Web开发技术概述

CS架构与BS架构

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

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

CS

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

优点:

  1. 响应速度快
  2. 对网络速度要求低
  3. 用户体验好
  4. 使用稳定

缺点:

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

BS

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

优点:

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

缺点:

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

相关技术介绍

Web前端

web前端技术主要应用于客户端浏览器,主要技术包含以下三大:

  1. HTML:HyperText Markup Language超文本标记语言
  2. CSS:Cacading Style Sheet 层叠样式表
  3. JavaScript:脚本语言

网页三剑客(Adobe):

Dreamweaver、Flash、Firework

Web后端

web后端(java)技术也称之为服务端技术,主要包含:

  • web容器:服务器(tomcat/jetty/jboss/weblogic)
  • 动态网页技术JSP/freemark/thymleaf
  • Servlet

HTML概述

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

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

开发工具

文本编辑器

  • 记事本
  • Editplus
  • Notpad++
  • Atom
  • SublimeText
  • VSCode

集成开发环境

  • Webstome
  • HBuiler/HubilderX(Eclipse)

第一个HTML页面


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
        Hello Html!!!
    body>
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="http://www.softeem.com">软帝信息a>
    <a href="http://www.ruandy.com">软帝联合a>
    <a href="http://www.guaqivip.com">呱奇编程a>
div>
标签(Tag)

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

例如:

<div>div>
<a>a>

单标签
<br/>
<hr/>
<img/>
<video/>
<audio/>
<input/>
属性(Attibute)

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

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

以上属性有:

  • href
  • target
  • title

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>2sup>b>
<b>x<sub>2sub>b>

<cite>引用方式的文本cite>
<em>强调的文本em>
<strong>加重的文本,一般为黑体加粗体strong>

<font size="20px" face="华文行楷" color="#0f0">过时的文本font>
<h2>格式标签h2>

<hr/>
<p>hello<br/>worldp>
<p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长的文本,<nobr>这段内容不能换行nobr>p>

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

<pre>
        这是预处理文本,一般用于显示代码块
    pre>

行级元素和块级元素

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

行级元素(inline)

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

  • b
  • i
  • strong
  • img
  • a
  • span

块级元素(block)

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

  • h1~h6
  • p
  • div

列表标签

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

  1. 无序列表
  2. 有序列表
  3. 普通列表

具体使用如下:

<h1>列表标签h1>
<h2>无序列表h2>
<hr>
<ul>
    <li>菜单项01li>
    <li>菜单项02li>
    <li>菜单项03li>
    <li>菜单项04li>
    <li>菜单项05li>
ul>

<h2>有序列表h2>
<hr>
<ol>
    <li>注意事项li>
    <li>注意事项li>
    <li>注意事项li>
    <li>注意事项li>
    <li>注意事项li>
ol>

<h2>普通列表h2>
<hr>
<dl>
    <dt>HTMLdt>
    <dd>HyperText Markup Languagedd>
    <dd>超文本标记语言dd>
    <dt>CSSdt>
    <dd>Cascading Style Sheetsdd>
    <dd>层叠样式表dd>
    <dt>JSdt>
    <dd>JavaScriptdd>
dl>


<h2>列表嵌套h2>
<hr>
<ul>
    <li>菜单项01
        <ul>
            <li>子菜单1-1li>
            <li>子菜单1-2li>
        ul>
    li>
    <li>菜单项02
        <ul>
            <li>子菜单2-1
                <ul>
                    <li>子菜单2-1-1li>
                    <li>子菜单2-1-2li>
                    <li>子菜单2-1-3li>
                ul>
            li>
            <li>子菜单2-2li>
        ul>
    li>
    <li>菜单项03
        <ul>
            <li>子菜单3-1li>
            <li>子菜单3-2li>
        ul>
    li>
ul>

超链接和iframe标签

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

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

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

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

    • 网页地址
    • 当前项目其他资源文件路径
    • 邮箱地址(如 href=“mailto:softeem@softeem.com”)
    • 设置js的函数(如 href=“javascript:void(0)”)
    • 设置为“#”
  • target:用于设置跳转的方式以及目标

    • 四个固定的取值

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

      <ul>
      <li><a href="page1.html" target="content">page1.htmla>li>
      <li><a href="page2.html" target="content">page2.htmla>li>
      <li><a href="page3.html" target="content">page3.htmla>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受到支持,其余全部标记过时:

  • framespacing
  • frameborder
  • scrolling
  • width
  • height

锚链接

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中部分标签标记为过时,比如bgsoundembed ,html5中主要支持的媒体标签包含以下:

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

<img src="https://www.baidu.com/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>

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

表单标签


<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新增表单标签

<form action="login.html" id="myform">form>


日期选择:<input type="date" name="birth" form="myform" value="2020-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>


邮箱输入:<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追加显示。

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,主要包含以下:

  • 标记定义一篇文章
  • 标记定义一个页面或一个区域的头部
  • 标记定义一个区域
  • 标记定义文件中一个区块的相关信息
  • 标记定义一组媒体内容以及它们的标题
  • 标签定义 figure 元素的标题。
  • 标记定义一个页面或一个区域的底部
  • 标记定义一个对话框(会话框)类似微信

CSS入门

概述

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

​ 要实现以上需求,我们就必须要学习CSS相关技术;

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

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

基本单位

尺寸

常见尺寸单位:

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

颜色

常见的颜色表示方式:

  • 颜色名称
    • 比如:red、green、blue、lightblue,gray,black,white,pink
  • 16进制颜色编码
    • 比如 #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语法:
选择器{
    属性名:属性值;
    ...
}

入门案例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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中的方式包含三种

  1. 内联样式

    <div style="font-size:20px;color:red;">Hello CSSdiv>
    
  2. 内部样式表

    参考以上入门案例

  3. 外部样式文件

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

    关于外部样式文件的引入,除了可以通过link标签实现外,还可以使用css样式提供的@import指令导入样式文件。

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        
        <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{

}

案例:


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

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

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

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

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

    属性 版本 继承性 描述
    margin CSS1 检索或设置对象四边的外延边距
    margin-top CSS1 检索或设置对象顶边的外延边距
    margin-right CSS1 检索或设置对象右边的外延边距
    margin-bottom CSS1 检索或设置对象底边的外延边距
    margin-left CSS1 检索或设置对象左边的外延边距

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

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

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

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

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

    属性 版本 继承性 简介
    padding CSS1 检索或设置对象四边的内部边距
    padding-top CSS1 检索或设置对象顶边的内部边距
    padding-right CSS1 检索或设置对象右边的内部边距
    padding-bottom CSS1 检索或设置对象底边的内部边距
    padding-left CSS1 检索或设置对象左边的内部边距

盒子模型

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

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

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

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

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

例如针对以下的代码:


<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:\带班资料\2020\j2003\线下\part4-web前端\20200813\笔记\assets\1597281041959.png)]

最后实际大小为:510X310

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKMC3Ykm-1597582850127)(D:\带班资料\2020\j2003\线下\part4-web前端\20200813\笔记\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组成部分

  • ECMAScript
  • DOM
  • BOM

JS基础语法

Javascript入门案例


<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页面中使用三种方式

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

  2. 通过链接外部js文件引入

    
    <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文件

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

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

数据类型

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

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

分支与循环

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

分支语句

javascript支持的分支包含:

  1. if…else…

  2. switch

    // javascript中的注释分为单行(//)和多行(/* */)
    // 条件分支
    // 判断一个变量age是否大于等于18
    var 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的循环分为四种类型:

  1. for循环
  2. while循环
  3. do…while循环
  4. 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代码,常见的事件主要包含:

  1. 文档事件
  2. 鼠标事件
  3. 键盘事件

你可能感兴趣的