第三章前端知识

前端知识

目标：

掌握常见的HTML标签

能够知道CSS的作用和语法规则

掌握常见CSS选择器的语法规则

能够知道JS的定义和作用

掌握JS的基本用法

一、web前端三大核心技术

目标：

　　能够说出web前端三大核心技术的作用

1、web前端三大核心技术

HTML：负责网页的架构
CSS：负责网页的样式、美化
JS：负责网页的行为

二、HTML基础

目标：

能够知道HTML是什么

能够知道什么是HTML标签

能够知道什么是HTML标签属性

能够说出HTML骨架标签的含义

能够说出HTML标题标签

能够说出HTML段落标签

能够说出HTML超链接标签

能掌握HTML图片标签写法

能够掌握空格和回车的语法规则

能掌握布局标签写法

1、HTML简介

1.1、什么是HTML？

　HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言(Hyper Text Markup Language)
HTML不是编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
HTML使用标签来描述网页

HTML文档又被称为网页：浏览器的作用就是读取HTML文档，并以网页的形式显示他们。

1.2、HTML标签

HTML标签是尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，比如<b>和<b/>
标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML单标签和双标签：

单标签书写规则：<单标签名称/> 　　例如<br/>
双标签书写规则：<双标签名称>xxxxxx</双标签名称>　　例如：<a>xxxxxx<a/>

1.3、HTML属性

HTML属性指的是标签属性
HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息
属性总是以名称/值对的形式出现，比如：name="value"
属性总是在HTML元素的开始标签中规定，比如:<a href="http://www.baidu.com">百度</a>

2、HTML标签骨架

HTML最基本的就是骨架标签

 1 !<DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>传智播客黑马程序员</title>
 6     </head>
 7     <body>
 8         传智播客黑马程序员
 9     </body>
10 </html>

2.1、HTML骨架标签详解

<!DOCTYPE html>:用来声明当前的文档类型是html
html：是网页当中最大的标签，我们称之为跟标签
head：称之为网页的头部，它里面的内容主要是用来定义网页标签及给浏览器查看的一些信息
<meta charset="UTF-8">:用来定义网页的编码标准，国际编码
title：称之为网页的标题标签，它里面的内容会显示在浏览器的标签页上
body：称之为网页主题标签，他里面的内容都会显示在浏览器的白色窗口区域【网页里展示的内容都会写在body标签里】

3、基本的HTML标签

3.1、HTML标题

HTML标题是通过<h1>-<h6>等标签进行定义的

实例：

1 <h1>一号标题</h1>
2 <h2>二号标题</h2>
3 <h3>三号标题</h3>

3.2、HTML段落

HTML段落是通过<p>标签进行定义的

实例：

1 <p>第一段落</p>
2 <p>另外一个段落</p>

3.3、HTML超链接

HTML超链接是通过<a>标签进行定义的，在href属性中指定链接的地址

实例：

1 <a href="http://www.baidu.com">百度</a>

3.4、HTML图片

网页中插入图片就要使用图片标签,HTML图片是通过<img>标签进行定义的。

实例：

1 <img src="logo.jpg" title="传智播客" alt="logo" width="104" height="142" />

属性说明：

src：用来指定当前想要引入的图片位置，也叫路径
title：用来定义当鼠标悬停到图片上方时的提示文字
alt：当图片由于某些原因无法正常加载显示的时候，才会显示alt里的文字
width：用来定义图片的宽度
height：用来定义图片的高度
如果只设置宽度或高度中的一个，另外一个就会按照原图的比例自动缩放

3.5、HTML空格和回车

在HTML代码中，手动输入回车、换行和空格在浏览器上的显示效果是有问题的，必须使用代码才能很好的实现。

空格：&nbsp；
回车：<br />

提示：HTML版本的发展决定了这门语言比较松散，写法比较随意

3.6、布局标签

布局标签没有语义，专门负责布局的标签，在页面中较为常见。

div:块级元素；独占一行
span：是内联元素，可用作文本的元素，该元素也没有特定的含义；可以一行放置多个

HTML内联元素在显示时通常不会以新行开始

实例：

1 <div>大盒子，独占一行</div>
2 <span>小盒子、一行可以放置多个</span>
3 <span>另一个小盒子</span>

三、HTML编辑器

目标

能掌握HBuilder工具的基本使用

　　工欲善其事必先利其器，，有一个好的写代码工具，可以提升效率

1、HBuilder使用

1.点击启动图标，点击暂不登录

2.第一次进入可以选择一个合适自己电脑的视觉方案

3.可以根据自己喜好，设置字体大小(建议20号左右)：工具--视觉主题设置--字体--更改

四、HTML文字标签

目标

能掌握加粗标签写法

能掌握倾斜标签写法

能掌握删除线标签写法

1、文字加粗标签

b和strong都可以实现加粗效果，后者有特别强调语义

实例：

1 <b>加粗</b>
2 <strong>加粗、特别强调</strong>

2、文字倾斜标签

i和em都可以实现倾斜效果，后者有一般强调语义

实例：

1 <i>倾斜</i>
2 <em>倾斜、一般强调</em>

3、文字删除线标签

s和del都可以实现删除线效果，前者即将被后者替代

实例：

1 <s>删除线</s>
2 <del>删除线、今后主流</del>

五、HTML表单标签

目标：

能掌握常用表单标签语法

1、HTML表单标签

表单就是在web网页上用来收集用户输入的数据，并将数据提交到后台的一个HTML代码段
表单可以包含许多不同类型的表单元素，比如：输入框、单选框、复选框、提交按钮等等

1.1、form标签

所有的表单元素都必须要放在一个form标签中

1 <form action="/user/login.jsp" method="get">\
2 </form>

属性说明：

action：表单数据提交的服务器地址(URL)
method：提交表单时所用的HTTP请求方式(默认：Get)

1.2、文本输入框

文本输入框提供文本输入功能，并且是单行输入

1 <input type="text">

1.3、密码输入框

密码输入框中输入的内容会被做掩码处理，一般显示为星号或者实心圆

1 <input type="password">

1.4、单选按钮

在一组单选按钮中，同时只能选中其中的一个；name的属性值相同，即为一组元素
checked="checked"：使用checked属性设置默认选中状态

1 <form>
2     <input type="radio" name="sex" value="male" checked="checked">男
3     <input type="radio" name="sex" value="female">女
4 </form>

1.5、复选框

复选框又称多选框
复选框允许用户在有限数量的选项中选择零个或多个选项
checked="checked"：使用checked属性设置默认选择状态

1 <form>
2     <input type="checkbox" name="bobby" value="1">吃饭
3     <input type="checkbox" name="bobby" value="2">睡觉
4     <input type="checkbox" name="bobby" value="3" checked="checked">打豆豆
5 </form>

1.6、下拉框

<select>元素定义下拉列表
<option>元素定义下拉列表的选项
列表通常会把首个选项显示为被选选项
通过添加selected属性来定义预定义选项

1 <select name="city" id="city">
2     <option value="bj">北京</option>
3     <option value="sh">上海</option>
4     <option value="gz">广州</option>
5     <option value="sz" selected="selected">深圳</option>
6 </select>

1.7、文本域

文本域可以输入多行文本内容

1 <textarea name="message" rows="10" cols="30">
2 The cat was playing in the garden.
3 </textarea>

1.8、按钮

普通按钮
- 必须配合js才能实现其他效果
重置按钮
- 恢复表单数据到初始化状态
提交按钮

提交表单数据到服务器

1 普通按钮：<input type="button" value="我是普通按钮">
2 重置按钮：<input type="reset" value="我是重置按钮">
3 提交按钮：<input type="submit" value="我是提交按钮">

2、示例代码

 1 <!DOCTYPE html> 
 2 <html lang="zh"> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>表单</title> 
 6 </head> 
 7 <body> 
 8 <form action="reg.html" method="get"> 
 9     用户名：<input type="text" name="username" placeholder="请输入用户名"/><br/> 
10     密码框：<input type="password" name="password"/><br/> 
11     性别： 
12     <input type="radio" name="sex" id="nan"/> 
13     <label for="nan">男</label> <input type="radio" name="sex" id="nv" checked="checked"/> 
14     <label for="nv">女</label> 
15     <br/> 
16     你的爱好： 
17     <input type="checkbox" id="cs" checked="checked"/> 
18     <label for="cs">测试 </label> 
19     <input type="checkbox" id="cf"/> 
20     <label for="cf">吃饭</label> 
21     <input type="checkbox" checked="checked"/>睡觉 
22     <input type="checkbox"/>打豆豆 
23     <br/> 
24     你来自哪里： 
25     <select name="city" id="city"> 
26         <option value="bj">北京</option> 
27         <option value="sh">上海</option> 
28         <option value="wz">广州</option> 
29         <option value="sz" selected="selected">深圳</option> 
30     </select> 
31     <br/> 

32     建议：<textarea name="message" cols="30" rows="3" placeholder="请填写建议"></textarea> 
33     <br/> 
34     <input type="button" value="普通按钮"/> 
35 <input type="reset" value="重置按钮"/> 
36 <input type="submit" value="提交按钮"/> 
37 </form> 
38 </body> 
39 </html>

六、CSS基础

目标

能够知道CSS的作用

掌握CSS语法规则

1、CSS简介

CSS：(Cascading Style Sheets)指层叠样式表
作用：用来定义如何显示HTML元素(定义HTML元素的样式)，就像HTML中的字体标签和颜色属性所起的作用那样
样式通常保存在外部的.css文件中，我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观

2、CSS语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器：是用来指定要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性代表要设置的样式属性，每个属性有一个值，属性和值被冒号分开
CSS声明总是以分号；结束，声明总以大括号{}括起来
在HTML文档中，可以把样式定义在<style></style>标签中

示例：

 1 <!DOCTYPE html> 
 2 <html lang="zh"> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>CSS</title>
 6     <style>
 7         p{color:red;text-align:center;}
 8     </style>
 9 </head> 
10 <body> 
11     <p>Hello World</p>
12 </body> 
13 </html>

2.1、CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它

CSS注释以/*开始，以*/结束

示例：

1 <style>
2     /*这是个注释*/
3     p{
4         text-align:center;
5         /*这是另一个注释*/
6         color:black;
7         font-family:arial;
8     }
9 </style>

七、CSS选择器

目标

掌握id选择器的语法

掌握class选择器的语法

掌握标签选择器的语法

掌握属性选择器的语法

掌握后代选择器的语法

掌握子元素选择器的语法

1、CSS选择器介绍

在CSS中，选择器是一种模式，用于选择需要添加样式的元素，常用的CSS选择器有：

id选择器
class选择器
标签选择器
属性选择器
后代选择器
子元素选择器

2、id选择器

id选择器是通过元素的id属性来选择元素
使用id选择器时，要求元素必须有id属性
CSS中id选择器以"#"来定义，比如：#test01

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>CSS</title> 
 6     <style> 
 7         #test01 {color:red; text-align:center;} 
 8     </style> 
 9 </head> 
10 <body>
11     <p id="test01">Hello World!</p> 
12 </body> 
13 </html>

2.1、id属性的命名规范和唯一性

命名规范：

不要以数字开头
不能使用中划线和下划线以外的符号
不推荐使用中文
尽量做到见名知意：见到名字知道意思

唯一性：

在整个HTML文档中id属性必须是唯一的
注意：HTML文档不会严格校验id属性是否唯一，在不规范的HTML文档中会出现id重复的情况！！！

3、class选择器

class选择器是通过元素的class属性来选择元素，又称类选择器
使用class选择器时，要求元素必须有class属性
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
CSS中class选择器以"."来定义，比如：.center

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>CSS</title> 
 6     <style> 
 7         .center {text-align:center;} 
 8     </style> 
 9 </head> 
10 <body>
11     <h1 class="center">标题居中</h1> 
12     <p class="center">第一段文字</p> 
13     <p class="center">第二段文字</p> 
14 </body> 
15 </html>

提示：class属性的第一个字符不能使用数字

4、标签选择器

标签选择器是通过元素的标签名称来选择元素，又称元素选择器

CSS中标签选择器直接使用标签名称来定义，比如：p、input

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>CSS</title> 
 6     <style> 
 7         h1 {text-align:center;} 
 8         p {color:red;} 
 9     </style> 
10 </head> 
11 <body>
12     <h1>标题居中</h1> 
13     <p>第一段文字</p> 
14     <p>第二段文字</p>
15  </body> 
16  </html>

5、属性选择器

属性选择器可以根据元素的属性和属性值来选择元素
属性选择器可以使用HTML元素的任意属性，而不仅限于id和class属性
简单属性选择：

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器；

- 格式：[属性名]　　
根据具体属性值选择：
- 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素；
- 格式：[属性名="属性值"]

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>CSS</title> 
 6     <style> 
 7         [href]{color: red;} 
 8         [title="古诗标题"] {color:blue;} 
 9         [id="first"] {color:green;} 
10         [class="second"] {color:yellow;} 
11     </style> 
12 </head> 
13 <body>
14     <a href="https://www.itheima.com">黑马程序员</a> 
15     <h1 title="古诗标题">静夜思</h1> 
16     <p id="first">床前明月光，疑似地上霜。</p> 
17     <p class="second">举头望明月，低头思故乡。</p> 
18 </body> 
19 </html>

6、后代选择器

后代选择器可以选择作为某元素后代的元素，后代元素包含(儿子、孙子、重孙子)
语法规则：多个选择器用空格分隔，例如：p span{color:red;}

 1 <!DOCTYPE html> 
 2 <html>
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>CSS</title> 
 6     <style> 
 7         /*p span{color: red;}*/ 
 8         div span{color: red;} 
 9     </style> 
10 </head> 
11 <body>
12     <div>
13         <span>我是span</span> 
14         <p> 
15             <span>我也是span</span> 
16             <br/> 
17             <span>我也是span</span> 
18         </p> 
19     </div> 
20 </body> 
21 </html>

7、子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
语法规则：多个选择器用大于号 > 分隔，例如：div > span{color:red;}

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>CSS</title> 
 6     <style> 
 7         div>span{color: red;} 
 8     </style> 
 9 </head> 
10 <body>
11     <div>
12         <span>我是span</span> 
13         <p> 
14             <span>我也是span</span> 
15             <br/> 
16             <span>我也是span</span> 
17         </p> 
18     </div> 
19 </body> 
20 </html>

八、JS基础

目标

能够知道JS的定义和作用

掌握JS的基本用法

1、JavaScript简介

JavaScript是一种轻量级的编程语言，一种脚本语言
JavaScript是可插入HTML页面的编程代码
JavaScript可以控制HTML页面的结构和样式

JavaScript的本来应该叫livescript，但在发布前夕，想搭上媒体超热java的顺风车，临时把名字改为了Javascript。(也就是说js跟java没有关系，当时的只是想借助java的名气)

2、JavaScript用法

JS脚本的书写位置包含三种：

JS内嵌式
JS外链式
JS行内式

2.1、JS内嵌式

JS内嵌式就是把JS脚本写在HTML文档中，并且JS脚本必须位于<script>与</script>标签之间
JS脚本可被放置在HTML页面的<body>和<head>部分中

 1 <!DOCTYPE html> 
 2 <html>
 3     <head>
 4         <meta charset="UTF-8"> 
 5         <title>JS</title> 
 6         <script> 
 7             alert("弹弹弹...弹走鱼尾纹"); 
 8         </script> 
 9     </head> 
10     <body>
11         Hello World！ 
12     </body> 
13 </html>

2.2、JS外链式

脚本可放置与外部文件中，专门用来存储JS脚本的文件，文件后缀名为.js
外部脚本很实用，相同的脚本可以被许多不同的网页引用，
外部脚本需要在<script>标签的src属性中设置

创建JS文件myScript.js

1 alert("hello");

 1 <!DOCTYPE html> 
 2 <html>
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>JS</title> 
 6     <script src="myScript.js"></script> 
 7 </head> 
 8 <body>
 9     Hello World！ 
10 </body> 
11 </html>

2.3、JS行内式

JS行内式就是把JS脚本写到HTML标签上
不推荐使用！不方便修改，没有实现代码的分离

 1 <!DOCTYPE html> 
 2 <html>
 3     <head>
 4         <meta charset="UTF-8"> 
 5         <title>JS</title> 
 6     </head> 
 7     <body>
 8         <input type="button" value="点我呀~" onclick="alert('弹一弹...')" /> 
 9     </body> 
10 </html>

3、操作HTML元素

使用JavaScript获取某个HTML元素，可以使用document.getElementById(id)方法
使用innerHTML来获取或插入元素内容

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>JS</title> 
 6 </head> 
 7 <body>
 8     <h1>我的第一个 Web 页面</h1> 
 9     <p id="demo">第一段内容</p> 
10     <script> 
11         document.getElementById("demo").innerHTML = "段落已被修改！"; 
12     </script> 
13 </body> 
14 </html>

九、JS变量

目标

掌握JS变量的概念

掌握JS变量的命名规范

掌握如何创建JavaScript变量

1、JS变量

变量是用于存储信息的"容器"
与代数一样，JavaScript变量可用于存放值(比如 x=5 )和表达式( 比如 z=x+y)

1.1、JS变量的命名规范

变量名称应该由字母、数字、下划线、$构成，不建议使用中文
变量名称不能以数字开头
变量名称对大小写敏感(y 和 Y是不同的变量)

1 var pi = 3.14
2 var name = "张三"

1.2、创建JavaScript变量

在JavaScript中创建变量通常称为"声明"变量
使用var关键词来声明变量：var username；
变量声明之后，该变量是空的(它没有值)
为变量赋值需要使用等号：username = "张三"；

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>JS</title> 
 6 </head> 
 7 <body>
 8     <h1>我的第一个 Web 页面</h1> 
 9     <p id="demo">第一段内容</p>
10     
11     <script> 
12         var message = "今天天气不错，心情很美丽！"; 
13         document.getElementById("demo").innerHTML = message; 
14     </script> 
15 </body> 
16 </html>

十、JS函数和事件

目标

掌握如何定义JS函数

掌握JS事件语法规则

1、JS函数

函数就是被调用时可重复使用的代码块

1.1、JS函数语法

使用function关键字来定义
代码块放到大括号中
通过使用函数名() 来调用函数
当函数被调用时，会执行函数内的代码

1 function functionName() 
2 { 
3     // 执行代码 
4 }

示例：

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>JS</title> 
 6 </head> 
 7 <body>
 8     <h1>我的第一个 Web 页面</h1> 
 9     <p id="demo">第一段内容</p> 
10     
11     <script> 
12         function update() { 
13             var message = "今天天气不错，心情很美丽！"; 
14             alert(message); 
15             document.getElementById("demo").innerHTML = message; 
16         }
17         // 调用函数 
18         update(); 
19     </script> 
20 </body> 
21 </html>

2、JS事件

HTML事件是发生在HTML元素上的事情
HTML事件可以是浏览器行为，也可以是用户行为

2.1、常见的HTML事件

下面是一些常见的HTML事件的列表：

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

2.2、如何为元素绑定事件

通过元素属性绑定

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head>
 4     <meta charset="UTF-8"> 
 5     <title>JS</title> 
 6     <script> 
 7     function changeUsername() { 
 8         alert("用户名改变了！"); 
 9     } 
10     </script> 
11 </head> 
12 <body>
13     <h1>JS事件</h1> 
14     <p id="demo">这里显示时间</p> 
15     <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> 
16     <br/> 
17     <input type="text" id="username" value="admin" onchange="changeUsername()"> 
18 </body> 
19 </html>

通过JS脚本绑定

事件三要素：事件源.事件类型 = function(){触发后执行的代码}

<!DOCTYPE html> 
<html lang="zh"> 
    <head>
        <meta charset="UTF-8"> 
        <title>JS</title> 
    </head>
    <body>
        <input id="btn" type="button" value="按钮" /> 
    </body> 
</html> 
<script>
    //document 代表当前页面文档 
    //getElementById 通过id来进行查找 
    //onclick 鼠标单击事件类型 
    //function(){要执行的命令} 
    document.getElementById('btn').onclick=function(){ 
        alert("被点击了！"); 
    } 
</script>

posted @ 2021-10-12 11:09 L遇上J 阅读(66) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

第三章 前端知识