截至11.20 培训笔记

11.6.2023

一．网页开发准备

HTML 超文本标记语言

HTTP/HTTPS 超文本传输协议

HTML5+CSS3

网页制作编写工具

HbuilderX

二．网页标签

html: 网页的声明

head:网页的头部

title: 网页的名称

body: 网页的主体部分

• 网页标签

3.1 标题标签

<h1>我是标题</h1>

<h2>我是标题</h2>

<h3>我是标题</h3>

<h4>我是标题</h4>

<h5>我是标题</h5>

<h6>我是标题</h6>

3.2水平标签

<hr/> 单标签

3.3换行标签

<br/>

3.4 段落标签

<p></p>

3.5文本标签

<em></em>      倾斜

<strong> </strong>加粗

<span> </span>   正常

3.6超链接

快捷键a

3.7图片标签

3.8列表标签

无序列表<ul> <li> </li> <li> </li> <li> </li> </ul>

有序列表:<li></li><li></i><li></li><li></li></ol

定义列表：<dl><dt>一级列表项</dt><dd>二级列表项</dd></dl>

ctrl+k 格式化代码

3.9 表格标签

Table表格

tr 行

td 单元格（列）

th 表头单元格 默认加粗居中

border:表格的属性

cellpadding: 内填充，值越大，内容距离单元格越远

cellspacing: 外边距，单元格距离表格边框的距离，一般设0

Colspan  合并列

Rowspan  合并行

align="center"居中

Input 快捷出  

text账号

password密码

Checkbox 多次选择

Radio 单项选择

Select  写地址时的选择结构

Textarea 多行文本框

按钮

css 层叠式样式表

html标签  负责轮廓布局

css样式      负责表现

avascript脚本，负责行为，动态

鸟

html: 一只扒光羽毛的死鸟

css:鸟的羽毛

javascript: 活的，行为，飞，叫

一．网页中引入css的三种方式

1.1内部样式

<style>

P{

color: red;

}

</style>

在head之间，在title之下，定义的。

1.2 外部样式

引入外部的样式<link rel="stylesheet" href="css/index.css"/>

1.3 行内样式

直接插入到标签之间的

<p style="color: yellow;"> </p>

三种方式的优先级行内样式>(外部样式,内部样式，取决于先后顺序)

二·css样式选择器

2.1 标签选择器

p,span,h1

2.2 类选择器定义的名称为

title的类样式

.titlel {

color: red

}

使用:

<h1 class="title">巴以冲突</h1>

2.3 ID选择器

定义的名称为：title的ID样式

#title {

color: red;

}

使用:<h1 id="title">巴以冲突</h1>

选择器优先级ID选择器>类选择器>标签选择器

2.4 其他选择器后代选择器:

后代选择器:

.title span{

color: red;

}

• 字体样式

3.1字体样式

font-size：10px;  字体大小为10像素

font-family:””; 字体类型为："微软雅黑"

font-weight: bold;字体加粗

font-weight: normal;去除字体加粗

font-style: italic;字体倾斜

font-style: normal;字体正常不倾斜

3.2文本样式

color: cadetblue;文本的颜色值

line-height: 50px; 段落文本行高

text-align:left/right/center ;  文本对齐方式：左，右，中

text-decoration: underline; 文本装饰: 下划线 none 去掉下划线

text-indent:2 em; 首行缩进2字符

第一行 边框圆润

第二行 间距变大

11.9.2023

• 盒子模型

里面可以装内容的各种标签容器都可以称作为盒子。width:300px;  宽度

height: 300px；高度

border: 1px solid red; 盒子的边框线，1个像素 实线 红色

标签的分类:

1. 块级元素

<P>,div,ul,li,h1~h6

特征: 独占一行，可以自定义宽度和高度

1. 行内元素

<span>,em,strong,a

特征: 不独占一行，不可以自定义宽度和高度，根据内容而定

1. 行内块元素

Img,input

特征：不独占一行，可以自定义宽带 高度

块级元素与行内元素的转换

块级元素转为行内元素: display: inline;

行内元素转为块级元素: display: block;

标签的嵌套规则:

1. 块级元素可以嵌套任意的元素,p标签除外，p标签只能嵌套行内元素及行内块元素

2、行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素

快速生成列表的快捷键: ul>li*8 ＋tab

• 超链接样式

Link 原始链接

hover划过

六、颜色值的表示形式

6.1 单词

red

6.2 十六进制

#ff0000

二进制 01十进制

十六进制 012 3 4 5 678 9 A B C D E F

6.3 RGB

color: rgb(red,green, blue); 取值: 0-255

   空格符号

七·外边距

Margin(外边距)

Left   左

Top   上

Right  右

Bottom 下

Margin:0;上下左右都为0

Margin：50px,40px,30px,20px;   代表  上 右 下 左 顺时针

*{

Margin ：0

}

*是通配符，匹配所有的网页标签

八·内边距

内容距离盒子的距离，通俗点说就是填充。

填充可以清除，也可以自定义设置。

九·边框

十·背景颜色和背景图片

10.1背景颜色

Background-color：red；

10.2背景图片

background-image:ur1(img/a.png);背景图片

background-repeat: no-repeat; 背景不重复

boackground-position:135px 120px;背景图片的位置

boackground-size: 25px; 背景图片的位置大小

• 浮动

float:left; 把元素设置为浮动元素，向左浮动

特征: 加上浮动后，元素就脱离了标准文档流

Clear:both;在此元素的两侧清除浮动元素

一个盒子要 在其父级容器中居中显示，则使用margin:0 auto;

• 定位

12.1 相对定位

position: relative；

left:50px;从左往右位移50像素

相对定位的元素没有脱离标准文档流，虽然位移走了，但之前的文档位置还存在

12.2 绝对定位

position: absolute

添加了绝对定位的元素会脱离标准文档流

绝对定位的元素的偏移，如果父级盒子为定位元素（position:relative），则会参考父级盒子的位置做偏移如果父级盒子不是定位元素，则会参考body做偏移。

opacity: 0.7; 透明度，取值为0-1

cursor: pointer; 小手

12.3 固定定位

position: fixed;

脱离了标准文档流

vertical-align: middle; 垂直位置保持居中

text-indent:10px;一般用于p标记中，用于首行缩进

块级元素在父级盒子中居中显示一般可以使用margin:0 auto;行内元素或行内块元素在父级盒子中居中显示一般设置text-align:center; 即可

outline:none;除去多余线条

Javascript

定义: 简称js，它是基于对象的，事件驱动的，具有安全性能的脚本语言。

引擎:会自动解释执行脚本语言，执行的顺序是自上而下，按照顺序执行，边解释边执行。document 文档对象

一、网页引入js的三种方式

1.1 内部

<script>

document.write("我要好好学习javascript!");</script>

1.2 外部

<script src="js/index.js"> </script>

1.3 行内

<input type="button”οnclick="javascript:alert('ok')" value="点击我” />

二．声明变量

var num=10；

var name="张三"；

js是一种弱类型的语言

• 数据类型

Js的基本数据类型右5种

3.1 number 数值类型

3.2string 字符类型

3.3boolean 布尔类型

3.4 object或者 null 类型

3.5 undefined 类型，代表着变量没有赋值

查看变量类型

• 运算符

4.1算术运算符

+ - * / % ++ --

4.2比较运算符

> >= < <= == != ===(全等于，比较的是变量的数据类型和值，如果两个都一致则为true)

4.3逻辑运算符

&& 与

|| 或

！非

• 选择结构

if..else.

switch

• 循环结构

6.1while

6.2 do ..while

6.3 for

• document对象

document.getElementByld("title"):

得到id为title的节点对象

//获取节点的文本内容

Var node=document.getElementByld("title")

var title=node.innerText;

alert(title)

//设置节点的文本内容

document.getElementByld("title").innerText="我爱玩游戏

innerHTML与 的区别:

innerHTML可以获取节点下的标签及文本内容

innerText只可以获取节点下的文本内容

七、自定义函数

onelick 单击事件

• js中的事件

onclick 单击事件

display: none;元素的显示状态为不显示

var node=document.getElementByld("info"):

节点对象.style.样式名称="属性值”

node.style.display="block".

onmouseover 鼠标移入

onmouseout 鼠标移出

• js中的事件

onclick 单击事件

onmouseover 鼠标移入

onmouseout 鼠标移出

display: none;

元素的显示状态为不显示

var node=document.getElementByld("info")

节点对象.style.样式名称="属性值”node.style.display="block"

九、计算器

内置函数eval()

可以计算一个表达式，转成算术运算，并计算结果字符串对象的方法: slice(0,-1)把字符串的最后一位截取，拿到截取后的字符串

按alt+小键盘41420

平方根的内置函数: Math.sqrt(title);

overflow:hidden; 内容溢出盒子后做隐藏处理