前端(HTML + CSS + JS)

文章目录

  • 一、HTML
    • 1. 概念
      • (1)HTML 文件基本结构
      • (2)HTML代码框架
    • 2. 、HTML常见标签
  • 二、CSS
    • 1. CSS基本语法规范
    • 2. 用法
    • (1) 引用方式
    • (2)选择器
    • (3)常用元素属性
    • (4)元素的显示方式
    • 3. 盒模型
  • 三、JavaScript
    • 1. 概念
    • 2. 使用

一、HTML

1. 概念

HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。

(1)HTML 文件基本结构

<html>
    <head>
        <title>title>
    head>
    <body>
       
    body>
html>
    • html 标签是整个 html 文件的根标签(最顶层标签)
    • head 标签中写页面的属性
    • body 标签中写的是页面上显示的内容
    • title 标签中写的是页面的标题
  1. 标签是有层次关系的 ------ 父子关系 / 兄弟关系。比如head和body是html的子标签,head和body是兄弟关系。这种关系构成了一个DOM树

  2. 每一个标签都相当于是一个对象,可以对对象进行增删查改操作

(2)HTML代码框架

可以通过!+ 回车的方式快速生成代码框架

DOCTYPE html>     
<html lang="en">   
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Documenttitle>
head>
<body>
    
body>
html>

2. 、HTML常见标签

(1) 注释标签

ctrl + / 快捷键可以快速进行注释/取消注释


(2)标题标签: h1-h6

有六个,从h1到h6,数字越大,字体越小,也越细。会换行且每个标题之间是有空格,这两个样式是自带的。

<h1>helloh1>
<h2>helloh2>
<h3>helloh3>
<h4>helloh4>
<h5>helloh5>
<h6>helloh6>

(3)段落标签: p

<p>这是一个段落p>
  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
  • 自动根据浏览器宽度来决定排版.
  • html 内容首尾处的换行, 空格均无效.
  • 在 html 中文字之间输入的多个空格只相当于一个空格.
  • html 中直接输入换行不会真的换行, 而是相当于一个空格

(4)换行标签: br

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙. 
<br/> 是规范写法. 不建议写成 <br>

(5)格式化标签

  1. 加粗: strong 标签 和 b 标签
  2. 倾斜: em 标签 和 i 标签
  3. 删除线: del 标签 和 s 标签
  4. 下划线: ins 标签 和 u 标签

前者有强调的作用,可以方便爬虫的获取

<strong>strong 加粗strong>
<b>b 加粗b>
<em>倾斜em>
<i>倾斜i>
<del>删除线del>
<s>删除线s>
<ins>下划线ins>
<u>下划线u>

(6)图片标签: img

<img src="rose.jpg">      
  • 路径

    • 绝对路径:图片路径(最好使⽤ / , 不要使⽤ \) 、网络上的图片资源(复制粘贴)
    • 相对路径:以 html 所在位置为基准, 找到图⽚的位置
      • ./xxx.png ----------- >在该文件夹下有该图片
      • ./img/xxx.png ----------- >在上一层目录下的文件夹下有该图片
      • …/xxx.png ----------- >在上上层目录上有该图片
  • img 标签的其他属性

    • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字
    • title: 提示文本. 鼠标放到图片上, 就会有提示
    • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放,否则就会图片失衡
    • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"border="5px">

注意

  1. 属性可以有多个, 不能写到标签之前
  2. 属性之间用空格分割, 可以是多个空格, 也可以是换行
  3. 属性之间不分先后顺序
  4. 属性使用 “键值对” 的格式来表示.

(7)超链接标签: a

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self(在当前界面打开新的页面),如果是 _blank 则用新的标签页打开

链接的几种形式

  • 外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com">百度a>
  • 内部链接: 网站内部页面之间的链接. 写相对路径即可
<a href="1.html">点我跳转到 1.htmla>
  • 空链接: 使用 # 在 href 中占位,不作任何改动,a表示刷新
<a href="#">空链接a>
  • 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.zip">下载文件a>
  • 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
a>

禁止 a 标签跳转: 或者

  • 锚点链接: 可以快速定位到页面中的某个位置
<a href="#one">第一集a>
<a href="#two">第二集a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
p>

(8)表格标签

  • 1. 基本使用

    • table 标签: 表示整个表格,Chrome浏览器表格不写的话,默认是零像素
    • tr: 表示表格的一行,快速拷贝:shitf + alt + ↓
    • td: 表示一个单元格,默认单元格有间隙,间隙是2
    • th: 表示表头单元格. 会居中加粗
    • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的),里面的内容居中+加粗展示
    • tbody: 表格得到主体区域
  • 2. 其他属性

    • 表格标签有一些属性, 可以用于设置大小边框等,但是一般使用 CSS 方式来设置,这些属性都要放到 table 标签中
    • align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
    • border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框
    • cellpadding: 内容距离边框的距离, 默认 1 像素
    • cellspacing: 单元格之间的距离. 默认为 2 像素
    • width / height: 设置尺寸.
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名td>
        <td>性别td>
        <td>年龄td>
    tr>
    <tr>
        <td>张三td>
        <td>td>
        <td>10td>
    tr>
    <tr>
        <td>李四td>
        <td>td>
        <td>11td>
    tr>
table>
  • 3. 合并单元格
    跨行合并: rowspan=“n”
    跨列合并: colspan=“n”

(9)列表标签

(1)无序列表[重要] ul li , .
(2)有序列表[用的不多] ol li
(3)自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明)
(4)快速生成列表的快捷键:eg.ul>li*3

  • 无序列表:小黑点是浏览器默认展现出来的一种形式,可以通过不同的type设置形式
    • disc:实心圆
    • square:实心方格
    • circle:空心圆
  • 有序列表:默认是数字,也可以通过不同的type改变样式
    • a:表示小写英文字母编号
    • A:表示大写英文字母编号
    • i:表示小写罗马数字编号
    • I:表示大写罗马数字编号
    • 1:表示数字编号(默认)
    • 可以通过start规定从几开始

(10)表单标签

表单是让用户输入信息的重要途径

  • 分类:

    • 表单域: 包含表单元素的区域. 重点是 form 标签
      • form是用来完成与服务器的交互的,把要执行的操作提交给服务器,action表示的就是服务器的地址,默认是0
    • 表单控件: 输入框, 提交按钮等. 重点是 input 标签。input是个表单控件,需要搭配表单域来实现
  • input标签

    • type(必须有), 取值种类很多多, button, checkbox, text, file, image,password,radio 等
    • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一,都写的话,浏览器自己选择默认是哪一个
    • value: 按钮里面的字
    • checked: 默认被选中. (用于单选按钮和多选按钮)
    • maxlength: 设定最大长度

<input type="text">


<input type="password">



<input type="radio" name="sex"><input type="radio" name="sex" checked="checked">
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏


<input type="button" value="我是个按钮">



<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
form>


<input type="file">

(11)无语义标签: div(分割) & span(跨度)

无语义没有固定的用途,干什么都行,像是两个盒子,用于网页布局

  • div 是独占一行的, 是一个大盒子
  • span 不独占一行, 是一个小盒子

(12)textarea 标签


<textarea rows="3" cols="50">
    
textarea>

(13)select标签:下拉菜单


<select>
    <option>北京option>
    <option selected="selected">上海option>
select>

(14)label 标签

  • 搭配 input 使用,点击 label 也能选中对应的单选/复选框, 能够提升用户体验
    • for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

(15)HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 例如:

  1. 空格: [& nbsp;]
  2. 小于号: <
  3. 大于号: >
  4. 按位与: &

二、CSS

1. CSS基本语法规范

前言:CSS可以控制页面的展示效果,HTML决定页面结构

CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)

规范

  • 样式大小写
    虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟
  • 空格规范
    冒号后⾯带空格
    选择器和 { 之间也有⼀个空格

2. 用法

(1) 引用方式

【1】内部样式表

  1. 概念:写在 style 标签中. 嵌入到 html 内部,虽然从理论上来说,style 放到 html 的哪里都行,但是一般都是放到 head 标签中

  2. 优点: 这样做能够让样式和页面结构分离.

  3. 缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

【2】行内样式表

  1. 概念:通过 style 属性, 来指定某个标签的样式,只适合于写简单样式. 只针对某个标签生效
  2. 缺点:
    • 不能写太复杂的样式.
    • 这种写法优先级较高, 会覆盖其他的样式
<style>
    div {
        color: red;    
   }
style>
<div style="color:green">绿色div>

【3】外部样式

实际开发中最常用的方式

  1. 创建一个 css 文件
  2. 使用 link 标签引入 css
<link rel="stylesheet" href="[CSS文件路径]">

优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效

关于缓存:
这是计算机中一种常见的提升性能的技术手段.
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站,那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件

(2)选择器

【1】标签选择器

  • 特点
    (1)能快速为同一类型的标签都选择出来.
    (2)但是不能差异化选择
<style>
p {
    color: red;
}
div {
    color: green;
}
style>

<p>猫猫p>
<div>狗狗div>

【2】类选择器

  • 特点:
    (1)差异化表示不同的标签
    (2)可以让多个标签的都使用同一个标签
<style>
    .blue {
        color: blue;
   }
 .box {
        width: 200px;
        height: 150px;
   }
    .green {
        background-color: green;
   }
style>

<div class="blue">猫猫1div>
<div>猫猫2div、

 class="box green">div>
  • 语法细节
    (1)类名用 . 开头的
    (2)下方的标签使用 class 属性来调用
    (3)一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
    (4)如果是长的类名, 可以使用 - 分割
    (5)不要使用纯数字, 或者中文, 以及标签名来命名类名

【3】id 选择器

  • CSS 中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
<style>
    #ha {
        color: red;
   }
style>
<div id="ha">蛤蛤蛤div>

【4】通配符选择器

使用 * 的定义, 选取所有的标签,页面的所有内容都会被改成 红色,不需要被页面结构调用,主要用来消除边距

* {
 color: red;
}

【5】复合选择器(选学)

(1) 后代选择器 / 包含选择器.

  • 元素 1 和 元素 2 要使用空格分割
    元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

元素1 元素2 {样式声明}


<ul>
    <li>aaali>
    <li>bbbli>
    <li>cccli>
ul>
<ol>
    <li>dddli>
    <li>eeeli>
    <li>fffli>
ol>


ol li {
    color: red;
}

<ul>
    <li>aaali>
    <li>bbbli>
    <li><a href="#">ccca>li>
ul>

ul li a {
    color: yellow;
}
或者
ul a {
    color: yellow;
}

(3)伪类选择器

I. 链接伪类选择器

  1. a:link 选择未被访问过的链接
  2. a:visited 选择已经被访问过的链接
  3. a:hover 选择鼠标指针悬停上的链接
  4. a:active 选择活动链接(鼠标按下了但是未弹起)
<a href="#">小猫a>

a:link {
    color: black;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
}
a:visited {
    color: green;
}
a:hover {
    color: red;
}
a:active {
    color: blue;
}

注意事项
(1)按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 “绿化”
(2)浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
(3)实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多

a {
    color: black;
}
a:hover {
    color: red;
}

II. :focuse 伪类选择器

(3)常用元素属性

【1】字体属性

设置字体

  • 字体名称可以用中文, 但是不建议
  • 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体)
  • 如果字体名有空格, 使用引号包裹
  • 建议使用常见字体, 否则兼容性不好
<style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
   }
    .font-family .two {
        font-family: '宋体';
   }
style>
<div class="font-family">
    <div class="one">
       这是微软雅黑
    div>
    <div class="two">
       这是宋体
    div>
div>

大小

  • 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
  • 可以给 body 标签使用 font-size
  • 要注意单位 px 不要忘记,如果写错了,浏览器会进行容错处理,以默认的字体大小展示
  • 标题标签需要单独指定大小

p {
    font-size: 20px;
}

粗细

  • 可以使用数字表示粗细.
  • 700 == bold, 400 是不变粗, == normal取值范围是 100 -> 900
p {
 font-weight: bold;
    font-weight: 700;
}

文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

【2】文本属性

(1) 文本颜色

设置文本颜色

color: red;
color: #ff0000; ------ 十六进制形式,全部两两相同,可以简写
color: rgb(255, 0, 0); ------ 红、绿、蓝,数值越大,饱和度越高

<style>
    .color {
        color: red;
        /* color: rgb(255, 0, 0); */
        /* color: #ff0000; */
   }
style>
<div class="color">这是一段话div>

(2) 文本对齐

控制文字水平方向的对齐,不光能控制文本对齐, 也能控制图片等元素居中或者靠右

text-align: [值];

取值

  • center: 居中对齐
  • left: 左对齐
  • right: 右对齐

(3)文本装饰

text-decoration: [值];

常用取值:

  • underline 下划线. [常用]
  • none 啥都没有. 可以给 a 标签去掉下划线.
  • overline 上划线. [不常用]
  • line-through 删除线 [不常用]

(4)文本缩进

text-indent: [值];

控制段落的 首行 缩进 (其他行不影响)

  • 单位可以使用 px 或者 em.
  • 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小
  • 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

(5)行高

line-height: [值];

【3】背景属性

(1)背景颜色


background-color: [指定颜色]
<style>
    body {
        background-color: #f3f3f3;
   }
    .bgc .one {
        background-color: red;
   }
    .bgc .two {
        background-color: #0f0;
   }
    .bgc .three {
        /* 背景透明 */
        background-color: transparent;
   }
style>
<div class="bgc">
    <div class="one">红色背景div>
    <div class="two">绿色背景div>
    <div class="three">透明背景div>
div>

(2)背景图片

比 image 更方便控制位置(图片在盒子中的位置)
background-image: url(…);

注意:

  1. url 不要遗漏.
  2. url 可以是绝对路径, 也可以是相对路径
  3. url 上可以加引号, 也可以不加
<style>
    .bgi .one {
        background-image: url(rose.jpg);
        height: 300px;
   }
style>
<div class="bgi">
    <div class="one">背景图片div>
div>

(3)背景平铺

background-repeat: [平铺方式]

  • 默认是 repeat.
  • 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

重要取值:

  • repeat: 平铺
  • no-repeat: 不平铺
  • repeat-x: 水平平铺
  • repeat-y: 垂直平铺
<style>
    .bgr .one {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: no-repeat;
   }
    .bgr .two {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: repeat-x;
   }
    .bgr .three {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: repeat-y;
   }
style>

<div class="bgr">
    <div class="one">不平铺div>
    <div class="two">水平平铺div>
    <div class="three">垂直平铺div>
div>

(4)背景位置

background-position: x y;
修改图片的位置

参数有三种风格:

  1. 方位名词: (top, left, right, bottom)
  2. 精确单位: 坐标或者百分比(以左上角为原点)
  3. 混合单位: 同时包含方位名词和精确单位
<style>
    .bgp .one {
        background-image: url(rose.jpg);
        height: 500px;
        background-repeat: no-repeat;
        background-color: purple;
        background-position: center;
   }
style>
<div class="bgp">
    <div class="one">背景居中div>
div>

注意:

  • 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
  • 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
  • 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
  • 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中
  • 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

(5)背景大小

background-size: length|percentage|cover|contain;

  • 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
  • 也可以填百分比: 按照父元素的尺寸设置
  • cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
  • 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
<style>
    .bgs .one {
        width: 500px;
        height: 300px;
        background-image: url(rose.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
   }
style>
<div class="bgs">
    <div class="one">背景尺寸div>
div>

【5】圆角矩形

通过 border-radius 使边框带圆角效果

基本用法

border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈

生成圆形


div {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    border-radius: 100px;
    /* 或者用 50% 表示宽度的一半 */
    border-radius: 50%;
}

生成圆角矩形


div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50px;
}

展开写法
border-radius 是一个复合写法. 实际上可以针对四个角分别设置

border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;
等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

(4)元素的显示方式

【1】块级元素

常见的元素:h1 - h6、p、div、ul、ol、li …

  1. 特点:
    • 独占一行
    • 高度, 宽度, 内外边距, 行高都可以控制.
    • 宽度默认是父级元素宽度的 100% (和父元素一样宽)
    • 是一个容器(盒子), 里面可以放行内和块级元素.
<style>
    .demo1 .parent {
        width: 500px;
        height: 500px;
        background-color: green;
   }
    .demo1 .child {
        /* 不写 width, 默认和父元素一样宽 */
        /* 不写 height, 默认为 0 (看不到了) */
        height: 200px;
        background-color: red;
   }
style>

<div class="demo1">
    <div class="parent">
        <div class="child">
           child1
        div>
        <div class="child">
           child2
        div>
    div>
div>
  1. 注意:
    • 文字类的元素内不能使用块级元素
    • p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

【2】行内元素/内联元素

常见的元素:a、strong、b、em、i、del、s、ins、u、span …

  1. 特点:

    • 不独占一行, 一行可以显示多个
    • 设置高度, 宽度, 行高无效
    • 左右外边距有效(上下无效). 内边距有效.
    • 默认宽度就是本身的内容
    • 行内元素只能容纳文本和其他行内元素, 不能放块级元素
  2. 注意:

    • a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做)
    • a 标签里可以-放块级元素, 但是更建议先把 a 转换成块级元素

【3】行内元素和块级元素的区别

(1)块级元素独占一行, 行内元素不独占一行
(2)块级元素可以设置宽高, 行内元素不能设置宽高.
(3)块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

【4】改变显示模式

使用 display 属性可以修改元素的显示模式,可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素

(1)display: block 改成块级元素 [常用]
(2)display: inline 改成行内元素 [很少用]
(3)display: inline-block 改成行内块元素

3. 盒模型

【1】概述

每一个 HTML 元素就相当于是一个矩形的 “盒子”

这个盒子由这几个部分构成:边框 border、内容 content、内边距 padding、外边距 margin

前端(HTML + CSS + JS)_第2张图片

【2】边框

1. 基础属性

  • 粗细: border-width
  • 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
  • 颜色: border-color
div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green;
}

border: 1px solid red;		

border-top/bottom/left/right		

2. 边框会撑大盒子

相当于使用面积,套用面积的区别

  • 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
 
* {
    box-sizing: border-box;
}

【3】内边距

padding 设置内容和边框之间的距离

基础写法

默认内容是顶着边框来放置的. 用 padding 来控制这个距离可以给四个方向都加上边距

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

注意:

  • 整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒子).
  • 使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)

复合写法
可以把多个方向的 padding 合并到一起

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

【4】外边距

1. 基础写法

控制盒子和盒子之间的距离,可以给四个方向都加上边距

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

2. 复合写法

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

3. 块级元素水平居中

  • 前提:
    (1)指定宽度(如果不指定宽度, 默认和父元素一致)
    (2)把水平 margin 设为 auto

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

  • 注意
    (1)这个水平居中的方式和 text-align 不一样.
    (2)margin: auto 是给块级元素用得到.
    (3)text-align: center 是让行内元素或者行内块元素居中的
    (4)对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式

【5】去除浏览器默认样式

  • 浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别
  • 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式
  • 使用通配符选择器即可完成这件事情.
* {
    marign: 0;
    padding: 0;
}

三、JavaScript

1. 概念

【1】JavaScript 是什么

JavaScript (简称 JS), 是⼀个脚本语言, 解释型或即时编译型的编程语言. 虽然它是作为开发Web页面的脚本语言而出名,但是它也被⽤到了很多非浏览器环境中

虽然 Java 和 JavaScript 名字很像,但其实他们之间的语法风格相差许多

【2】HTML-CSS-JS

HTML:网页的结构(骨)
CSS:网页的表现(皮)
JavaScript:网页的行为(魂)

2. 使用

【1】引入方式

引入方式 语法描述 示例
行内样式 直接嵌入到html元素内部 < input type="button" value="点我⼀下" οnclick="alert('haha')">
内部样式 定义< scrip> 标签,写到scrip标签中 < script> alert("haha"); < /script>
外部样式 定义< scrip> 标签,通过src属性引到外部 js 文件 < script src="hello.js">< /script>

对比
(1)内部样式会出现大量的代码冗余, 不方便后期的维护,所以不常用
(2)行内样式, 只适合于写简单样式. 只针对某个标签生效. 缺点是不能写太复杂的jS
(3)外部样式,html和js实现了完全的分离, 企业开发常用方式

【2】基础语法

1. 变量

变量有三种声明方式

关键词 解释 示例
var 早期JS中声明变量的关键字, 作用域在该语句的函数内 var name = 'zhangsan';
les ES6 中新增的声明变量的关键字, 作用域为该语句所在的代码块 内 les name = 'zhangsan';
const 声明常量的,声明后不能修改 const name = 'zhangsan';

注意
(1)JavaScript 是⼀门动态弱类型语言,变量可以存放不同类型的值(动态),随着程序的运⾏, 变量的类型可能会发生改变

var name = 'zhangsan';
var age = 20;
var a = 10; // 数字
a = "hehe"; // 字符串

Java是静态强类型语⾔, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发生变化

变量名命名规则
(1)组成字符可以是任何字⺟、数字、下划线(_)或美元符号($)
(2)数字不能开头
(3)建议使用驼峰命名

2. 数据类型

虽然js是弱数据类型的语⾔,但是js中也存在数据类型,js中的数据类型分为 原始类型和引用类型

数据类型 描述
number 数字. 不区分整数和小数
string 字符串字面值需要使用引号引起来, 单引号双引号均可
boolean 布尔类型. true 真, false 假
undefined 表示变量未初始化,只有唯⼀的值 undefined

3. 运算符

JavaScript 中的运算符和 Java ⽤法基本相同

【3】JS对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象
每个对象中包含若干的属性和方法
• 属性: 事物的特征
• 方法: 事物的行为

1. 数组

注意: JS 的数组不要求元素是相同类型

创建数组

  1. 使用new 关键字创建
// Array 的 A 要⼤写
var arr = new Array();
  1. 使用字面量方式创建 [常用]
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为“元素”

数组操作

读: 使用下标的方式访问数组元素(从 0 开始)
增: 通过下标新增, 或者使用 push 进行追加元素
改: 通过下标修改
删: 使用 splice 方法删除元素

注意
(1)如果下标超出范围读取元素, 则结果为 undefined
(2)不要给数组名直接赋值, 此时数组中的所有元素都没了,相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了

2. 函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
          函数体
           return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

  • 函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)

关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配

  1. 如果实参个数比形参个数多, 则多出的参数不参与函数运算

sum(10, 20, 30); // 30

  1. 如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined

sum(10); // NaN, 相当于 num2 为 undefined

函数表达式

var add = function() {
	 var sum = 0;
	 for (var i = 0; i < arguments.length; i++) {
	 sum += arguments[i];
	 }
	 return sum;
}

console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function

3. 对象

创建对象

  1. 使用字面量 创建对象 [常用] ----- 使⽤ { } 创建对象
//属性和⽅法使⽤键值对的形式来组织
//键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆
//键和值之间使⽤ : 分割
//⽅法的值是⼀个匿名函数

var a = {}; // 创建了⼀个空的对象
var student = {
	name: '小红',
	height: 175,
	weight: 170,    
	sayHello: function() {
	console.log("hello");
	}
};
  1. 使用 new Object 创建对象
var student = new Object(); // 和创建数组类似
student.name = "小红";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
	console.log("hello");
}

console.log(student.name);
console.log(student['weight']);
student.sayHello();
  1. 使用 构造函数 创建对象
//构造函数的函数名⾸字⺟⼀般是⼤写的
//构造函数不需要 return
function 构造函数名(形参) {
 this.属性 =;
 this.⽅法 = function...
}
var obj = new 构造函数名(实参);

使用对象的属性和方法

// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 () 
student.sayHello();

【4】JQuery

虽然原生的JavaScript提供的API可以操作页面,但是代码十分复杂,所以我们使用jQuery。
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,它封装了JavaScript常用的功能代码, 提供了简洁而强大的选择器和DOM操作方法

1. 引入依赖

使用JQuery需要先引⼊对应的库
在使用jQuery CDN时,只需要在HTML⽂档中加入如下代码

< script src=“https://code.jquery.com/jquery-3.7.1.min.js”>

这个URL是CDN(内容分发网络)服务提供商为jQuery库提供的⼀个统一资源定位符,也可以使⽤其他公司提供的CDN地址

2. JQuery 语法

jQuery 语法是选取 HTML 元素后对其操作

基础语法

$(selector).action()
  • $() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
  • Selector 选择器, ⽤来"查询"和"查找" HTML 元素
  • action 操作, 执行对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document:整个文档对象, ⼀个页面就是⼀个文档对象, 使用document表示

这是为了防止文档在完全加载(就绪)之前运行jQuery 代码,即在文档加载完成后才可以对 页面进行操作。如果在文档没有完全加载之前就运⾏函数,操作可能失败

$(document).ready(function(){
 // jQuery functions go here
});

3. JQuery 选择器

语法 描述
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p") 所有 < p> 元素
$("p:first") 选取第⼀个

元素

$("p:last") 最后⼀个 < p> 元素
$(".box") 所有 class="box" 的元素
$("#box") id="box" 的元素
$(".intro .demo") 所有 class="intro" 且 class="demo" 的元素
$("p.intro") 选取 class 为 intro 的 < p> 元素
$("ul li:first") 选取第⼀个 < ul> 元素的第⼀个 < li> 元素
$(":input") 所有 元素
$(":text") 所有 type="text" 的 元素
$(":checkbox") 所有 type="checkbox" 的 元素

4. JQuery 事件

概念

JS 要构建动态页面, 就需要感知到用户的行为,
用户对于页面的⼀些操作(点击, 选择, 修改等) 操作都会在浏览器中产生⼀个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

事件由三部分组成

  1. 事件源: 哪个元素触发的
  2. 事件类型: 是点击, 选中, 还是修改?
  3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数

常见的事件

事件 代码
文档就绪事件(完成加载) $(document).ready(function)
点击事件 $(selector).click(function)
$双击事件 $(selector).dblclick(function)
元素的值发生改变 $(selector).change(function)
鼠标悬停事件 $(selector).mouseover(function)

5. 操作元素

获取/设置元素内容

有参数时, 就进⾏元素的值设置, 没有参数时, 就进行元素内容的获取

JQuery方法 说明
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括 HTML 标签)
val() 设置或返回表单字段的值

获取/设置元素属性

JQuery attr() 方法用于获取属性值

获取/返回css属性

css() 方法设置或返回被选元素的⼀个或多个样式属性

添加元素

  • 添加 HTML 内容
    1. append() : 在被选元素的结尾插⼊内容
    2. prepend() : 在被选元素的开头插⼊内容
    3. after() : 在被选元素之后插⼊内容
    4. before() : 在被选元素之前插⼊内容

删除元素

删除元素和内容,⼀般使用以下两个 jQuery 方法:

  1. remove() : 删除被选元素(及其子元素)
  2. empty() : 删除被选元素的子元素

你可能感兴趣的:(前端,html,css,javascript)