【前端】HTML、CSS、JavaScript

目录

三者区别:

1.HTML

1.1.HTML语言特点:

1.2.HTML常用标签

2.CSS

2.1css简介、主要功能

2.2.css选择器

2.2.1.css选择器的引入方式:

2.2.2.选择器类型

2.3css常用属性

3.JavaScript

3.1.JavaScript的组成

3.2基本语法

3.2.1.变量

3.2.2.数据类型(ECMAScript)

3.2.3.基本操作

3.3.DOM

3.3.1dom对象:

3.3.2dom属性:

3.4.BOM

3.4.1.BOM对象:

3.4.2.BOM事件:


三者区别:

HTML代码:⽤于搭建基础⽹⻚,展示⻚⾯的内容、需要显示的数据。

CSS代码:⽤于美化⻚⾯,布局⻚⾯,使显示的数据更加好看。

JavaScript代码:控制⻚⾯的元素,让⻚⾯有⼀些动态的效果。

1.HTML

1.1.HTML语言特点:

HTML⽂件不需要编译,直接使⽤浏览器阅读即可

HTML⽂件的扩展名是: *.html 或 *.htm

HTML结构都是由标签组成

1.标签名预先定义好的,我们只需要了解其功能即可。

2.标签名不区分⼤⼩写,建议使⽤⼩写。

3.围堵标签:通常情况下标签由开始标签和结束标签组成。例如:<a></a>

4.⾃闭和标签:如果没有结束标签,建议以/结尾。例如:<img/>

5.标签可以嵌套。

6.在开始标签中可以定义属性。属性是由键值对构成,值需要⽤引号(单双都可)引起来。

HTML结构包括两部分:头head和体body

1.2.HTML常用标签

<h></h>:标题标签 1~6

<hr/>:水平线

<p></p>:段落

<br/>:换行

<img/>:图片

<a>:超链接

<ul>\<ol>:列表,其中<li>用来定义列表项。是<ul>\<ol>的子标签

<table>:表格标签:html表格由<table>以及一个或多个<tr>、<th>或<td>标签组成。        <table>是⽗标签,相当于整个表格的容器。        <tr>标签⽤于定义⾏        <td>标签⽤于定义表格的单元格(⼀个列        )<th>标签⽤于定义表头。单元格内的内容默认居中、加粗,        <caption>:表格标题,        <thead>表示表格的头部分        <tbody>表示表格的体部分        <tfoot>表示表格的脚部分

<frameset>:框架标签:是多个窗⼝⻚⾯整合在⼀起的⼀个集合(框架集)。每⼀个⻚⾯(框架)都是单独 ⽂档,需要使⽤⼦标签来确定⻚⾯的位置。<frame>:框架⼦标签

<form>:表单标签

<input>:表单项标签,⽤于获得⽤户输⼊信息。可以通过type属性值,改变元素展示的样式。

<span>:⽂本信息在⼀⾏展示,⾏内标签、内联标签。

<div>:每⼀个div占满⼀整⾏。块级标签。

2.CSS

2.1css简介、主要功能

css(Cascading Style Sheets)层叠样式表,主要⽤于设置HTML⻚⾯中的⽂本

内容(字体、⼤⼩、对⻬⽅式 等)、图⽚的外形(宽⾼、边框样式、边距等)以及版⾯的布局等外观显示样式。CSS可以使HTML⻚⾯更好看,CSS⾊系的搭配可以让⽤户更舒服,CSS+DIV布局更加灵活,更容易绘制出⽤户需要的结构。

2.2.css选择器

“选择器”⽤于指定CSS样式作⽤的HTML对象,花括号内是对该对象设置的具体样式。

选择器{属性1:属性值; 属性2:属性值; …}

例:

<style>
 h2 {
 color: red;
 font-size: 100px;
 }
</style>

2.2.1.css选择器的引入方式:

1.⾏内样式:通过标签的style属性来设置元素的样式。

<!--
 ⽅式1:⾏内样式
 color:表示字体颜⾊
 font-size:表示字体⼤⼩
-->
<a style="color: #F00; font-size: 30px;">hello css</a>

2.内部样式:⼜称为内嵌式,是将CSS代码集中写在HTML⽂档的<head>头部标签体中,并且使 ⽤<style>标签定义。

<!--
 ⽅式2:内部样式
 background-color:表示背景⾊
-->
<style type="text/css">
 body {
 background-color: #ddd;
 }
</style>

3.外部样式:⼜称为链⼊式,是将所有的样式放在⼀个或多个以 .css 为扩展名的外部样式表⽂件中,通过<link>标签将样式连接到HTML⽂档中。

<link rel="stylesheet" type="text/css" href="style.css"/>

2.2.2.选择器类型

1.元素选择器

⽤HTML标签名称作为选择器,按标签名称分类,为⻚⾯中某⼀类标签指定统⼀的CSS 样式。优点是能快速位⻚⾯中同类型的标记统⼀样式

h1 {
 color: #F00;
 font-size: 50px;
}
<h1>hello</h1>

2.id选择器

选择具体的id属性值的元素。id名即为HTML元素的id属性值,⼤多数HTML元素都可以定义id属性,元素的id值是唯⼀ 的,只能对应于⽂档中某⼀个具体的元素。 id选择器优先级⾼于元素选择器

#demo1 {
 color: #0f0;
}
<h1 id="demo1">hello css</h1>

 3.类选择器

类名即为HTML元素的class属性值,⼤多数HTML元素都可以定义class属性。类选择器最 ⼤的优势是可以为元素对象定义单独或相同的样式。

.myClass {
 font-size: 25px;
}
<h1 class="myClass">hello</h1>

还有属性选择器、后代选择器等

2.3css常用属性

详见w3school:https://www.w3school.com.cn/

3.JavaScript

3.1.JavaScript的组成

1.核心(ECMAScript) :语法、语句

2.文档对象模型(DOM): 浏览器对象

3.浏览器对象模型(BOM): Document Object Mode,操作⽂档中的元素和内容

js的引入:

1. 内嵌式,在HTML⽂档中,通过<script>标签引入

<script type="text/javascript">
 // 此处为JavaScript代码
</script>

2.外联式,在HTML⽂档中,通过<script src="">标签引入.js文件

<script src="1.js" type="text/javascript" charset="UTF-8"></script>

3.2基本语法

3.2.1.变量

在使⽤JavaScript时,需要遵循以下命名规范:

1.必须以字⺟或下划线开头,中间可以是数字、字符或下划线 2.变量名不能包含空格等符号 3.不能使⽤JavaScript关键字作为变量名,如:function 4.JavaScript严格区分⼤⼩写

3.2.2.数据类型(ECMAScript)

一.基本类型

1.Undefined,Undefined类型只有⼀个值,即undefined。当声明的变量未初始化时,该变 量的默认值是undefined。

2.Null,只有⼀个专⽤值null,表示空,⼀个占位符。值undefined实际上是从值null派⽣来 的,因此ECMAScript把他们定义为相等的。

3.Boolean,有两个值true和false

4.Number,表示任意数字

5.String,字符串由双引号(")或单引号(')声明的。JavaScript没有字符类型

二.引⽤类型

1.引⽤类型通常叫做类(class),也就是说,遇到引⽤值,所处理的就是对象。

2.JavaScript是基于对象⽽不是⾯向对象。对象类型的默认值是null。

3.JavaScript提供众多预定义引⽤类型(内置对象)。

3.2.3.基本操作

1.alert():向⻚⾯中弹出⼀个提示框

2.innerHTML:向⻚⾯的某个元素中写⼀段内容,将原有的东⻄覆盖

3.document.write():向⻚⾯中写内容

4.window.setInterval(code, millisec) :按照指定的周期(间隔)来执⾏函数或代码⽚段。clearInterval() :取消由setInterval() 设置的timeout。

5.setTimeout(code, millisec) :在指定的毫秒数后调⽤函数或执⾏代码⽚段。clearTimeout() :取消由setTimeout() 设置的timeout。

3.3.DOM

3.3.1dom对象:

img

input

button

form
document.getElementById(id)
document.getElementsByClassName(class)

3.3.2dom属性:

 src  value  innerHTML  innerText  style.cssXX

 Document    文档
    获得  getElementById(id)
         getElementsByClassName(class值)
         getElementsByTagName(标签名)
         getElementsByName(name属性的值)
    创建  createElement(标签名)     
    
  Element   标签
    追加  父节点.appendChild(子节点)
         子节点.insertBefore(另一个子节点)
    属性  innerText  innerHTML
    属性     标签自带属性  src style href value checked....
    操作属性     setAttribute(属性名, 属性值)
                       getAttribute(属性名)
 

3.4.BOM

3.4.1.BOM对象:

    window
    alert()
    setInterval() clearInterval()
    setTimeout() clearTimeout()

3.4.2.BOM事件:

onclick  onmouseover  onmouseout  onsubmit  onblur...

 弹窗
        alert()    显示带有一段消息和一个确认按钮的警告框。
        confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
        prompt()    显示可提示用户输入的对话框。
    

 计时器    
        setInterval()    按照指定的周期(以毫秒计)来调用函数或计算表达式。
        setTimeout()    在指定的毫秒数后调用函数或计算表达式。
        clearInterval()    取消由 setInterval() 设置的 timeout。
        clearTimeout()    取消由 setTimeout() 方法设置的 timeout。
    
 窗口开关    
        open()    打开一个新的浏览器窗口或查找一个已命名的窗口。
        close()    关闭浏览器窗口。

事件对象
    preventDefault()    通知浏览器不要执行与事件关联的默认动作。
    stopPropagation()    不再派发事件。
    
全局函数
    decodeURI()    解码某个编码的 URI。
    encodeURI()    把字符串编码为 URI。
    
    eval()    计算 JavaScript 字符串,并把它作为脚本代码来执行。
    
    isNaN()    检查某个值是否是数字。
    
    parseFloat()    解析一个字符串并返回一个浮点数。
    parseInt()    解析一个字符串并返回一个整数。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值