Web开发之Web前端基础

于 2020-08-16 21:28:52 发布
阅读量850 收藏
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Superzhaoy/article/details/108044285
版权

day1 - Web开发之Web前端基础(HTML)

文章目录

Web开发技术概述

CS架构与BS架构

在这里插入图片描述

!![](https://img-blog.csdnimg.cn/20200816212612354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1cGVyemhhb3k=,size_16,color_FFFFFF,t_70#pic_center)

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页面
<!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="http://www.softeem.com">软帝信息</a>
    <a href="http://www.ruandy.com">软帝联合</a>
    <a href="http://www.guaqivip.com">呱奇编程</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>

以上属性有:

  • href
  • target
  • title
HTML实体

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

显示结果	描述	实体名称	实体编号
 		空格		&nbsp;	&#160;
<		小于号		&lt;	&#60;
>		大于号		&gt;	&#62;
&		和号		&amp;	&#38;
"		引号		&quot;	&#34;
'		撇号 		&apos; (IE不支持)	&#39;
￠		分（cent）	&cent;	&#162;
£		镑（pound）	&pound;	&#163;
¥		元（yen）	&yen;	&#165;
€		欧元（euro）	&euro;	&#8364;
§		小节		&sect;	&#167;
©		版权（copyright）	&copy;	&#169;
®		注册商标	&reg;	&#174;
™		商标		&trade;	&#8482;
×		乘号		&times;	&#215;
÷		除号		&divide;	&#247;
色彩使用

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）

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

  • b
  • i
  • strong
  • img
  • a
  • span
块级元素（block）

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

  • h1~h6
  • p
  • div

列表标签

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

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

具体使用如下:

<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="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.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受到支持，其余全部标记过时：

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

  • img 图片标签
  • audio 音频标签
  • video 视频标签
  • canvas 画布元素
  • svg 矢量图
<!--
img标签:图片标签
src:设置图片的地址(绝对路径或者相对路径)
alt:当图片不能正常显示时，使用alt中的文本代替
width/height:分别设置图片宽高，建议只用一个属性，可以保持图片的横纵比
-->
<img src="https://www.baidu.com/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>

day2 - HTML（二）

表格标签<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="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>

<!--在移动设备中根据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语义化标签

​在这里插入图片描述

在这里插入图片描述

由于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=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语法：
选择器{
    属性名:属性值;
    ...
}

入门案例:

<!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中的方式包含三种

  1. 内联样式

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

  2. 内部样式表

    参考以上入门案例

  3. 外部样式文件

    <!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");
}

day3 - CSS（二）

选择器补充

选择器优先级

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

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

CSS常用属性

尺寸

属性版本继承性描述
widthCSS1无检索或设置对象的宽度
min-widthCSS2无设置或检索对象的最小宽度
max-widthCSS2无设置或检索对象的最大宽度
heightCSS1无检索或设置对象的高度
min-heightCSS2无设置或检索对象的最小高度
max-heightCSS2无设置或检索对象的最大高度

边框与背景

背景
属性版本继承性描述
backgroundCSS1/3无复合属性。设置或检索对象的背景特性
background-colorCSS1无设置或检索对象的背景颜色
background-imageCSS1/3无设置或检索对象的背景图像
background-repeatCSS1/3无设置或检索对象的背景图像如何铺排填充
background-attachmentCSS1/3无设置或检索对象的背景图像是随对象内容滚动还是固定的
background-positionCSS1/3无设置或检索对象的背景图像位置
边框
属性版本继承性描述
borderCSS1无复合属性。设置对象边框的特性
border-widthCSS1无设置或检索对象边框宽度
border-styleCSS1无设置或检索对象边框样式
border-colorCSS1无设置或检索对象边框颜色
border-topCSS1无复合属性。设置对象顶边的特性
border-top-widthCSS1无设置或检索对象顶边宽度
border-top-styleCSS1无设置或检索对象顶边样式
border-top-colorCSS1无设置或检索对象顶边颜色
border-rightCSS1无复合属性。设置对象右边的特性
border-right-widthCSS1无设置或检索对象右边宽度
border-right-styleCSS1无设置或检索对象右边样式
border-right-colorCSS1无设置或检索对象右边颜色
border-bottomCSS1无复合属性。设置对象底边的特性
border-bottom-widthCSS1无设置或检索对象底边宽度
border-bottom-styleCSS1无设置或检索对象底边样式
border-bottom-colorCSS1无设置或检索对象底边颜色
border-leftCSS1无复合属性。置对象左边的特性
border-left-widthCSS1无设置或检索对象左边宽度
border-left-styleCSS1无设置或检索对象左边样式
border-left-colorCSS1无设置或检索对象左边颜色
border-radiusCSS3无设置或检索对象使用圆角边框
border-top-left-radiusCSS3无设置或检索对象左上角圆角边框
border-top-right-radiusCSS3无设置或检索对象右上角圆角边框
border-bottom-right-radiusCSS3无设置或检索对象右下角圆角边框
border-bottom-left-radiusCSS3无设置或检索对象左下角圆角边框
box-shadowCSS3无设置或检索对象阴影

字体与文本

字体
属性版本继承性描述
fontCSS1/2有复合属性。设置或检索对象中的文本特性
font-styleCSS1有设置或检索对象中的字体样式
font-variantCSS1有设置或检索对象中的文本是否为小型的大写字母
font-weightCSS1有设置或检索对象中的文本字体的粗细
font-sizeCSS1有设置或检索对象中的字体尺寸
font-familyCSS1有设置或检索用于对象中文本的字体名称序列
文本
属性版本继承性描述
text-transformCSS1/3有检索或设置对象中的文本的大小写
white-spaceCSS1有设置或检索对象内空格的处理方式
tab-sizeCSS3有检索或设置对象中的制表符的长度
word-wrapCSS3有设置或检索当内容超过指定容器的边界时是否断行
word-breakCSS3有设置或检索对象内文本的字内换行行为
text-alignCSS1/3有设置或检索对象中内容的水平对齐方式
text-align-lastCSS3有设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
text-justifyCSS3有设置或检索对象内调整文本使用的对齐方式
word-spacingCSS1/3有检索或设置对象中的单词之间的最小，最大和最佳间隙
letter-spacingCSS1/3有检索或设置对象中的字符之间的最小，最大和最佳间隙
text-indentCSS1/3有检索或设置对象中的文本的缩进
vertical-alignCSS1/2无设置或检索对象内容的垂直对其方式
line-heightCSS1有检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

列表与表格

列表
属性版本继承性描述
list-styleCSS1有复合属性。设置列表项目相关内容
list-style-imageCSS1有设置或检索作为对象的列表项标记的图像
list-style-positionCSS1有设置或检索作为对象的列表项标记如何根据文本排列
list-style-typeCSS1/2有设置或检索对象的列表项所使用的预设标记
表格
属性版本继承性描述
table-layoutCSS2无设置或检索表格的布局算法
border-collapseCSS2有设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacingCSS2有设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
caption-sideCSS2有设置或检索表格的caption对象是在表格的那一边
empty-cellsCSS2有设置或检索当表格的单元格无内容时，是否显示该单元格的边框

定位

属性版本继承性描述
positionCSS2/3无检索对象的定位方式
z-indexCSS2无检索或设置对象的层叠顺序
topCSS2无检索或设置对象参照相对物顶边界向下偏移位置。
rightCSS2无检索或设置对象参照相对物右边界向左偏移位置。
bottomCSS2无检索或设置对象参照相对物底边界向上偏移位置。
leftCSS2无检索或设置对象参照相对物左边界向右偏移位置。
定位

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

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

day5 - 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入门案例

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

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

  2. 通过链接外部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文件

  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代码，常见的事件主要包含:

  • 浏览器窗体事件

    事件名描述
    onload当窗体内容被加载时触发
    onunload当窗体中内容卸载时触发
    onbeforeunload当窗体内容被卸载之前触发
    onresize当窗体大小被改变时出发

  • 鼠标事件

    事件名描述
    onclick当鼠标单击时触发
    ondblclick当鼠标双击时触发
    onmouseover当鼠标悬停到元素上时触发
    onmouseout当输入从元素中移出时触发
    onmouseenter当鼠标进入时触发
    onmouseleave当鼠标离开时触发
    onmousedown当鼠标按下时触发
    onmouseup当鼠标抬起时触发

  • 键盘事件

    事件名描述
    onkeydown当键盘按键被按下时触发
    onkeyup当键盘按键抬起触发
    onkeypress当键盘按键被按压时触发

  • 表单事件

    事件名描述
    onchange当控件内容改变时触发
    onselect当控件内容被选中时触发
    onblur当控件失去焦点时触发
    onfocus当控件获得焦点时触发
    onreset表单重置时触发
    onsubmit表单提交时触发

5.png)]

赵恶龙
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值