web - html

最新推荐文章于 2021-11-11 18:11:11 发布

二师弟&

最新推荐文章于 2021-11-11 18:11:11 发布

阅读量358

点赞数 2

分类专栏： web_html5 文章标签： html5 html css

本文链接：https://blog.csdn.net/zhu_fangyuan/article/details/107725436

版权

web_html5 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

Hbuilder

Hbuilder 是国人开发的一款专门用于编写前端页面的软件。

下载：https://www.dcloud.io

安装：解压缩，双击 Hbuilder.exe

注册和登录：建议去注册一个，不然每次都是以游客身份登录的

项目的创建：rt

文件 -> 新建 -> web项目
给项目起名字，选择项目的存储位置

项目的结构：
css：用于存放 css 文件的目录

img：用于存方法图片的目录

js：用于存放 js 文件的目录
index.html：默认的索引页面

<!DOCTYPE html>

<html>
    
	<head>
        
		<meta charset="utf-8" />
        
		<title></title>
	</head>
    
	<body>
	</body>
</html>
快捷键：

自动补全：标签名后按 tab
生成多个标签：签名后，加上个数，按 tab，可以通过 > 来指定子标签
生成测试文字：lorem后加上个数，按 tab

一，html

1.1 概述

全称：hypertext markup language，超文本标记语言
超文本：除了纯文本之外，还可以放入其他组件，例如：超链接、图片、表格、表单等
标记：html 中组件（元素）都是以标记（标签）的形式出现的
例如：<a>、<img>

1.2 作用

用于绘制页面

1.3 特点

html 是以标签组成的
html 文件的后缀是 .html 或者 .htm
html 由浏览器解释运行
任何一个浏览器都有解析 html 的引擎
解释运行

html 中的标签都是预定义的

1.4 标签

分类：

单标签：只有开始标签
例如：<img>、<br>、<hr>、<input>
双标签：由开始标签和结束标签组成
例如：<a></a>、<p></p>、<div></div>、<ul></ul>、<ol></ol>、<li></li>
注：

无论是单标签还是双标签，标签的属性都必须写在开始标签中

格式：属性名 = " 属性值 "
例如：
1.设置颜色
color=“red”
2.设置点击事件
οnclick="xxx"

1.5 html 页面的组成

头部：head，用于对当前页面进行配置，例如：字符集、刷新等
主体：body，用于承载页面上要显示的内容

1.6 注释

<!-- 注释内容 -->

1.7 常用标签

1.7.1 标题标签

标题标签：h，h1~h6

特点：

标题标签属性块级标签：独占一整行，上下自动换行
自动加粗
h1~h6，逐渐减小

1.7.2 字体标签

字体标签：font

特点：

字体标签属性行内标签：可以与其他行内标签共存于同一行
在没有对其进行样式设置时，字体标签和普通文本一样

属性：

size：设置文本的字号，数值范围是 1 ~ 7，1 最小，7 最大，默认是 3
color：设置文字的颜色
使用颜色的英文单词
使用 rgb，格式：#rrggbb
使用 css 样式，格式：style = " background : 颜色 ; color : 颜色 ; "
使用 style 进行颜色设置时，可以使用 rgb()、rgba()，a 表示透明度，范围是 0 ~ 1，0 表示全透明

1.7.3 图片标签

图片标签：img

属性：

src：设置图片资源的路径

本地图片：将图片资源复制到 img 目录下
网络图片：将图片的网址作为 src 的属性值

width：宽度

height：高度

注：只设置宽（高），图片会等比缩放

title：鼠标悬停在图片上的提示性文字

alt：本地图片无法加载时的提示性文字

1.7.4 超链接

超链接：a

属性：

href：用于指定跳转的目标地址
target：用于明确跳转到的新页面的打开方式，取值：_blank 在新窗口中打开，_self 在当前标签页中打开

跳转：

页面间的跳转
<a href="目标地址">内容</a>
注：跳转到外部资源时需要加上 http://

页面内的跳转
在目标位置上添加 id 属性，明确目标所在标签的唯一标识
在起始位置的 href 中通过 #id 值跳转

注：返回顶部
<a href="#">回到顶部</a>

1.7.5 列表标签

列表标签：ol 有序列表、ul 无序列表

列表项：li

属性：

start：在有序列表中，用于明确列表的序号从几开始
type：在无序列表中，取值有 disc 实心圆（默认）、square 方形、circle 空心圆；在有序列表中，取值有 1、A、a、i、I

列表嵌套：将一个列表作为另一个列表的列表项中的内容

1.7.6 表格标签

表格标签：table

表格行：tr

单元格：td

属性：

border：设置表格边框的粗细
width：宽度
height：高度
cellspacing：单元格的间距
cellpadding：单元格的内边距，单元格中的内容与单元格之间的距离
align：水平方向，取值：center、left、right
valign：垂直方向，取值：center、top、bottom

不规则表格：rowspan 跨行，colspan 跨列

1.7.7 标签的补充

br：换行
hr：水平线
p：段落，块级元素
b：粗体
i：斜体
strong：粗体
sub：下标
sup：上标
pre：根据 html 的书写原样输出

span：没有默认样式效果功能的一种行内元素

div：没有默认样式效果功能的一种块级元素，根据 div + css 的设计标准，可以使用它进行页面布局的设置

1.8 表单标签

概念：用于获取用户信息，提交到服务器

表单标签：form

属性：

action：明确提交到服务器的地址
method：提交方式，
GET：提交的数据会拼接在地址栏上，默认提交方式
POST：提交的数据不会拼接在地址栏上，会进行封装

输入域标签：input

属性：type 取值如下：

text：普通的文本输入框，它是默认值，框中接收数据的类型是字符串
password：密码框，框中接收数据的类型是字符串
radio：单选框，互斥性
checkbox：复选框
button：普通按钮
submit：提交按钮
reset：重置按钮

1.8.1 文本框和密码框

属性：

placeholder：提示性内容
maxlength：最大的字符数
value：框中的内容，同时也是提交服务器上的值
name：用于定义当前 input 提交到服务器时，服务器获取数据所需要的键，它会和接收到的数据形成键值对，以 “ 键1=值1&键2=值2… ” 的方式提交到服务器。

1.8.2 单选框和复选框

属性：

name：用于定义当前 input 提交到服务器时，服务器获取数据所需要的键，它会和接收到的数据形成键值对，以 “ 键1=值1&键2=值2… ” 的方式提交到服务器；在多个单选框中使用同一个 name 值还可以将他们归纳同一个组中，从而形成互斥性。
value：提交服务器上的值
checked：默认选中的状态
checked=“checked”
checked=""
checked

注：可以使用 label 标签将单（复）选框与文字进行关联，达到点击文字就相当于点击了元素的效果
<input type="radio" name="gender" value="2" id="female"/><label for="female">女</label>
label 标签中的 for 属性的值，要与关联元素的 id 相同

1.8.3 按钮

提交按钮 submit：用于将用户的信息，提交到服务器

属性：

value：用于设置按钮上的文字，由于不同浏览器的解析能力不同，解析方式不同，呈现出现文字可能不同，因此建议所有是提交按钮都手动设置 value 来统一。

注：在html5中，button 标签如果出现在表单，它就相当于是一个提交按钮，如果不在表单中，它就是一个普通按钮

重置按钮 reset：用于重置当前表单恢复到默认状态

属性：

value：用于设置按钮上的文字

普通按钮 button：

属性：

value：用于设置按钮上的文字

事件：

onclick：单击
ondblclick：双击
onmouseover：鼠标悬停
onmouseleave：鼠标移开

二，css

2.1 概述

全称是 Cascading Style Sheets，也叫层叠样式表、级联样式表

文件名以 .css 结尾

2.2 作用

用于对页面进行样式的设置，美化页面

由于不同标签具有不同的样式属性，要记忆哪个标签有哪些属性非常麻烦。所以 css 的出现统一了所有标签所有样式的设置方法（规则、语法）

2.3 语法

内联样式：将样式以属性的形式写在开始标签中，只能影响当前标签

格式：
style="样式名1:样式值1;样式名2:样式值2;..."

内部样式表：可以影响到当前页面中所有指定的标签

写法：

在 head 标签中，定义 style 标签
在 style 标签体中，通过选择器找到标签，对其进行样式的设置
<style type="text/css">
    li{
        background: red;
        color: blue;
    }
</style>

外部样式表：可以影响到所有引入了该样式文件的页面

写法：

创建 css 文件，在文件中定义样式，样式的方式同内部样式表
在需要引入该 css 文件的 head 标签中使用 link 标签中的 href 属性来指定 css 文件的路径
<link rel="stylesheet" type="text/css" href="css/test.css"/>

注释：/* 注释内容 */

2.4 选择器

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

2.4.1 元素选择器

根据元素名选择元素

格式：
元素名{
    样式
}

2.4.2 id选择器

根据唯一标识 id 属性选择元素

格式：
#id值{
    样式
}

2.4.3 类选择器

根据 class 属性选择元素

格式：
.class值{
    样式
}

2.4.4 通配符选择器

选择页面中的所有元素

格式：
*{
    样式
}

2.4.5 子代、后代选择器

子代选择器：定位到指定的子代元素

格式：
选择器1 > 选择器2{
    样式
}
后代选择器：定位到指定的后代元素（包括子代）

格式：
选择器1 选择器2{
    样式
}

2.4.6 属性选择器

选择具有指定属性或者具有指定属性和属性值的元素
格式：
选择器[属性名]{
    样式
}
选择器[属性名="属性值"]{
    样式
}
选择器[属性名="属性值"][][]...{
    样式
}
注：属性选择器只会找那些写出了指定属性的元素，而不是具有指定属性的元素

2.4.7 nth-of-type

li:nth-of-type(-3n + 9){
    background: red;
}
该样式只认 n 字母
前面的 xn 表示每隔 x - 1 个元素如果 xn 前是负数，表示从后往前
后面的整数值表示从第几个元素开始，可以是负数
每隔多少个元素，必须写在从第几个元素开始之前

2.4.8 优先级

内联样式 > 内部样式表

内联样式 > 外部样式表

内部样式表和外部样式表，谁后写，听谁的

同为内部样式表或者外部样式表，哪个选择器的范围更精准，听谁的

2.4.9 伪类选择器

格式：

选择器:伪类选择器{
    样式
}

伪类选择器：link、hover、active、visited

a:link{
    text-decoration: none;
}
a:hover{
    color: pink;
}
a:active{
    color: greenyellow;
}
a:visited{
    color: orange;
}

2.5 盒子模型

概念：研究的是盒子中的内容与盒子的间距，盒子与盒子之间的距离，以及边框

2.5.1 边框

格式：
border: 粗细 颜色 样式
注：

粗细：线框的厚度（高度）
颜色：色值，rgb()、颜色单词、#xxxxxx
样式：solid 实线、double 双划线、dashed 虚线、dotted 点划线
粗细、颜色、样式的顺序是任意的
边框可以进行单边设置
border-bottom-color: red;
border-top-width: 4px;
border-left-style: solid;
圆角边框：

格式：
border-radius：n px;
注：

圆角边框的本质是用一个指定半径的圆去内切四个角
圆角可以单角设置
border-bottom-left-radius: 30px;
border-top-right-radius: 200px;

2.5.2 内边距

概念：盒子中的内容到边框的距离，padding

使用方式：

padding：n px；四个方向
padding-left/right/top/bottom：n px；指定某一方向
padding：a px b px；上下内边距为 apx，左右内边距为 bpx
padding：a px b px c px d px；上右下左内边距分别为 apx bpx cpx dpx

注：设置内边距会影响整个盒子的大小

2.5.3 外边距

概念：盒子与盒子之间的距离

使用方式：

margin：n px；四个方向
margin-left/right/top/bottom：n px；指定某一方向
margin：a px b px；上下外边距为 apx，左右外边距为 bpx
margin：a px b px c px d px；上右下左外边距分别为 apx bpx cpx dpx

注：上下外边距会取较大者，左右外边距是两个外边距之和

2.6 定位

概念：确定标签的位置

属性：position

取值：

relative：相对定位，相对于四周的其他标签进行位置的移动
absolute：绝对定位，相对于 body 进行位置的移动，如果元素本身是块级元素，会在绝对定位后变成行内元素；绝对定位后的元素会脱离原始的文档流
static：默认定位
fixed：固定定位：相对于 body 进行位置的移动，位置不会随着页面位置的变化而变化

注：position 只是确定了定位的方式，具有位置需要结合 left、right、top、bottom

2.7 浮动

使用 float 让元素漂浮起来，脱离原始的文档流

float：left / right

清除浮动：在浮动元素的前或者后加上 div 对该 div 设置样式：clear : both

2.8 显示和隐藏

隐藏：

visibility : hidden，仍然占据位置
display : none，不占据位置

对应的显示：

visibility : visible
display : inline(行内) / block(块级)

三，js

3.1 概述

全称：JavaScript

1995年，由网景和SUN公司开发的

它是基于对象和事件驱动的脚本语言

基于对象：js 中提供了很多对象，可以直接调用

事件驱动：js 中提供了很多动态效果的实现

3.2 作用

提高了用户的体验，提供了交互的效果

3.3 特点

交互性：实现了动态交互的效果

安全性：不能直接访问磁盘

跨平台性：任何浏览器都有解析 js 的引擎

js 是弱类型的语言：变量的类型由值决定

3.4 js 与 html 的结合

内嵌式

在 head 标签中，使用 script 标签，在 script 中编写 js 代码

外联式

创建 js 文件，在 js 文件中编写 js 代码，在 head 标签中使用 script 标签的 src 属性引入该 js 文件

注：

两种方式可以同时使用，先写的先执行；如果是在调用同名方法，那么只执行后写的方法
两种方式不要混用

3.5 注释

单行注释：// 注释内容
多行注释：/* 注释内容 */

3.6 js 语法

3.6.1 变量

变量的定义：

使用关键字 var

定义时赋值
var name = "zs";
var age = 20;
先定义后赋值
var height;
height = 180;
注：

关键字 var
变量的类型由值决定
在函数中定义变量时，如果省略了 var ，那么这个变量就是一个全局变量

变量的命名规则：

可以由数字、字母、下划线、美元符组成
数字不能开头
不能与关键字重名
区分大小写

变量的命名规范：

使用驼峰命名
见名知意

3.6.2 数据类型

一般的数据类型：

Boolean：布尔类型，只有 true 和 false
Number：数值类型，表示所有整数和小数
String：字符串类型，用一对单引号或者双引号括起来
Object：对象
Array：数组
RegExp：正则表达式
Function：方法

特殊的数据类型：

Null：只有一个值 null，当定义了一个变量后，这个变量没有任何的指向，那么它就是 null
Undefined：只有一个值 undefined，当定义了一个变量后，没有赋值，那么它就是 undefined
NaN：not a number，不是一个数字

3.6.3 运算符

算术运算符

/
%
++
–

逻辑运算符

&&
||
!
^

关系运算符

" > "
<
" >= "
<=
!=
==：判断数值是否相等
===：判断数值和类型是否都相等

赋值运算符

+=
-=
*=
/=
%=
=
三元运算符

格式：
条件表达式?表达式1:表达式2;
typeof 运算符

用法：
typeof(参数)
用于检测变量的数据类型

字符串类型返回 string

数值类型返回 number

布尔类型返回 boolean

方法返回 function

其他类型返回 object

3.6.4 流程控制

选择结构：

```
if(条件表达式){
}
```
```
if(条件表达式){
}else{ 
}
```

if(条件表达式1){
 }else if(条件表达式2){      
}...
else{
}

分支结构：

switch(表达式){
    case 值1:
        break;
    case 值2:
        break;
    case 值3:
        break;
    ...
    default:
    	break;
}

循环结构：

```
while(条件表达式){
}
```
```
do{  
}while(条件表达式);
```

 for(初始化;条件表达式;步进表达式){
}

3.6.5 函数

被设计用来指定特定功能的代码块

函数的定义
function 函数名(参数列表){
    方法体
}
function：函数必须通过 function 关键字来定义
返回值：js 中的方法没有返回类型，但是可以通过 return 来返回结果
参数列表：与 java 一样，定义时叫形参，调用时叫实参。区别是 js 函数中的形参不能写 var

函数的参数：

参数的使用方式与 java 一致
形式参数不能写 var
当出现同名方法时，后定义的方法会覆盖先定义的方法
调用函数时，实参可以用 this，哪个标签触发了事件，this 就表示哪个标签的对象

3.6.6 匿名函数

匿名函数就是在定义函数时，没有指定函数的名字

格式：
function (参数列表){
    方法体
}
匿名函数的调用方式：
用一个变量来接收匿名函数，本质上这个变量名就匿名函数的函数名
var f = function(a, b){
    alert(a + b);
}
f(3, 4);
使用事件调用
window.onload = function(){
    var btnObj .document.getElementById("btn");
    btnObj.onclick = function(){
        alert();
    }
}

3.6.7 数组

js 中同一个数组中的元素类型可以是任意的
数组的创建
// 1.
var arr = new Array(元素1,元素2,元素3,元素4,...);
                    
// 2.
var arr = new Array(数组的长度);
// var arr = new Array(3);表示创建了一个长度为3，但是没有任何元素值的数组

// 3.
var arr = [元素1,元素2,元素3,元素4,...];
数组的增删改查

增：
push(元素1，元素2，…)：向数组的末尾添加一个或多个元素
splice(下标，0，元素)：向指定位置插入元素
unshift(元素1，元素2，…)：向数组的开头添加一个或多个元素

删：
splice(下标，删除的数量)：从指定位置开始，删除指定数量个元素

改
splice(下标，替换的数量，新值)，将新值替换从指定位置开始指定数量个元素

查：
length：返回数组的长度
数组名[下标]：返回指定位置上的元素

3.6.8 正则表达式

概念：定义字符串规则

创建：

var reg = new RegExp(“正则表达式”)；
var reg = / 正则表达式 /；

方法：

正则对象 . test( 要匹配的字符串 )

注：

只要字符串中包含了匹配正则表达式规则的字符串就会返回 true
^：开始 $：结束

3.6.9 全局（系统）函数

概念：全局函数是每一个 js 中本身就带有函数，无需创建对象，直接调用即可。

parseInt()：将数值形式的字符串转换成整数
parseFloat()：将数值形式的字符串转换成小数
isNaN()：判断参数是否不是一个数值或者数值形式的字符串
eval()：计算算术表达式形式的字符串
encodeURI()：编码
decodeURI()：解码

3.7 事件监听

某个元素被执行了某些操作后，触发了某些功能的执行

3.7.1 点击事件

onclick：单机事件

ondblclick：双击事件

3.7.2 鼠标事件

onmouseover：鼠标移到元素上

onmousemove：鼠标在元素上移动

onmouseleave：鼠标从元素上移开

3.7.3 键盘事件

onkeydown：键盘按下

onkeyup：键盘松开

3.7.4 加载事件

onload：页面加载完毕后自动执行，onload 由 window 调用，window 可以省略

3.7.5 焦点事件

onfocus：获取焦点

onblur：失去焦点

3.7.6 表单事件

onsubmit：由提交按钮触发，事件写在 form 表单中

3.8 DOM

概念：Document Object Model 文档对象模型，研究的是文档中的元素节点

获取 document 对象：

直接使用：document
使用window对象调用：window.document

方法：

获取
getElementById()：通过 id 属性值获取唯一的指定对象
getElementsByClassName()：通过元素的 class 属性值返回一个对象数组
getElementsByTagName()：通过元素的标签名返回一个对象数组
getElementsByName()：通过元素的 name 属性值返回一个对象数组

创建：
createElement(标签名)
createTextNode(文本)

添加：
appendChild(元素对象)
insertBefore(新元素对象，指定元素对象)

删除：
removeChild(元素对象)
remove()

3.9 BOM

概述：Browser Object Model，浏览器对象模型，研究的是浏览器相关对象

window：窗口对象

获取方式

window 对象的功能直接调用即可，window 可以省略

方法：

alter()：显示带有一段文本内容和确认按钮的警告框

confirm()：显示带有一段文本内容，一个确认按钮和一个取消按钮的确认框；点击确认返回 true ，点击取消返回 false

prompt()：显示带有一段文本内容，一个文本输入框，一个确认按钮和一个取消按钮的对话框；点击确认返回输入框中的内容，点击取消返回 null

setTimeout()：在指定的时间到达时执行一次函数

setInterval()：每隔一段时间执行一次函数

注：参数1：函数，参数2：时间（毫秒值）

clearTimeout(参数)：删除指定的定时器

clearInterval(参数)：删除指定的定时器

history：历史对象

获取方式

window.history

方法：

back()：后退一个页面
forward()：前进一个页面
go(参数)：
参数是正数n：表示前进n个页面
参数是负数n：表示后退n个页面

location：地址栏对象

获取方式

window.location

方法

reload()：重新加载当前页面

属性

href：指定跳转目标地址

二师弟&

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web - html

零，HbuilderHbuilder 是国人开发的一款专门用于编写前端页面的软件。下载：https://www.dcloud.io安装：解压缩，双击 Hbuilder.exe注册和登录：建议去注册一个，不然每次都是以游客身份登录的项目的创建：rt文件 -> 新建 -> web项目给项目起名字，选择项目的存储位置项目的结构：css：用于存放 css 文件的目录img：用于存方法图片的目录js：用于存放 js 文件的目录index.html：默认的索引页
复制链接

扫一扫