【无标题】

一、网页开发准备

HTML 超文本标记语言

HTTP/HTTPS 超文本传输协议

HTML5+CSS3

网页制作编写工具：

HbuilderX，网址：https://dcloud.io/

谷歌浏览器网址：https://www.google.cn/chrome/

二 、网页标签

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 href="">政策"真金白银"加力稳就业</a>

href="" 链接的目标网址路径

href="https://www.baidu.com/" 站外链接

href="index4.html" 站内链接

href="#" 空链接

target="_blank" 新开一个窗口

3.7 图片标签

<img src="" alt="" width="1000" height="50"/>

src ：图片的路径

alt  :  图片的名称

width：宽度

height：高度

一般来说，网页的图片只需要设置宽度即可，高度会随着宽度进行等比缩放

图片的类别:  jpg(jpeg)，png（透明背景）,  gif(动画)，webp，bmp

3.8 列表标签

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

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

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

3.9 表格标签

table 表格

tr  行

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

td 单元格

border : 表格的属性

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

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

colspan="2"   合并列

rowspan="2"  合并行

align="center" 居中

3.10 表单标签

form：表单标签

text:   普通文本框

password：密码框

radio：单选

checkbox：复选

select 下拉列表 option 下拉列表项

textarea 多行文本框

<input type="submit" value="提交" />

<input type="button" value="普通按钮"/>

<input type="reset"  value="重置" />

========================

ctrl+k 格式化代码

css 层叠式样式表

html标签，        负责布局，轮廓

css样式，           负责表现

javascript脚本，负责行为，动态

鸟

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的类样式

.title{

     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;

}

三、CSS样式

3.1 字体样式（常用的）

font-size: 20px;  字体大小为20个像素

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

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

font-style: italic|normal; 字体为斜体字 倾斜|正常

3.2 文本样式

color: cadetblue; 文本的颜色值

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

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

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

css 层叠式样式表

html标签，        负责布局，轮廓

css样式，           负责表现

javascript脚本，负责行为，动态

鸟

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的类样式

.title{

     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;

}

三、CSS样式

3.1 字体样式（常用的）

font-size: 20px;  字体大小为20个像素

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

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

font-style: italic|normal; 字体为斜体字 倾斜|正常

3.2 文本样式

color: cadetblue; 文本的颜色值

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

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

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

四、盒子模型

里面可以装内容的各种标签容器都可以称作为盒子。

width: 300px;  宽度

height: 300px; 高度

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

标签的分类：

1、块级元素

p、div、ul、li、h1-h6

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

2、行内元素

span、em、strong、a

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

3、行内块元素

img、input

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

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

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

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

标签的嵌套规则：

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

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

快速生成列表的快捷键：ul>li*8

五、超链接的样式（伪类）

a:link{

   color: black;

   text-decoration: none;

}

a:hover{

   color: red;

  text-decoration: underline;

}

a:visited{

    color: blueviolet;  /* 访问过的状态 */

}

a:active{

   color: darkcyan; /* 鼠标单击未释放时的状态 */

}

六、颜色值的表示形式

6.1 单词

red

6.2 十六进制

#ff0000;

二进制  0 1

十进制  

十六进制  0 1 2 3 4 5 6 7 8 9 A B C D E F

6.3 RGB

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

颜色值在线转换工具：

https://www.sioe.cn/yingyong/yanse-rgb-16/

  空格

七、外边距

margin：在网页里面，盒子距离盒子的距离就叫做外边距

left 左

top 上

right 右

bottom 下

*{

     margin: 0;       所有网页标签上的外边距统统 清除

}

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

margin: 0;                              上下左右

margin: 20px 30px;               上下     左右

margin: 20px  50px 100px;   上     左右    下

margin: 50px 30px 20px 0;   上    右     下   左      顺时针

八、内边距

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

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

padding

padding: 0;                              上下左右

padding: 20px 30px;               上下     左右

padding: 20px  50px 100px;   上     左右    下

padding: 50px 30px 20px 0;   上    右     下   左      顺时针

九、边框

border

border-left: 1px solid #ff0000;

border-top: 1px solid #ff0000;

border-right: 1px solid #ff0000;

border-bottom: 1px solid #ff0000;

border-right-color: #ff0000;

border-right-width: 1px;

border-right-style: solid;

十、背景颜色和背景图片

10.1 背景颜色

background-color: #ff0000;

10.2 背景图片

background-image: url(img/b.png); 背景图片

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

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

background-size: 25px;  背景图片的大小

十一、浮动

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

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

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

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

十二、定位

12.1 相对定位

position: relative;

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

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

12.2 绝对定位

position: absolute;

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

绝对定位的元素的偏移，如果父级盒子为定位元素，则会参考父级盒子的位置做偏移。                                       

如果父级盒子不是定位元素，则会参考body做偏移。                      

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

cursor: pointer;  鼠标变为小手      

12.3 固定定位

position: fixed;

脱离了标准文档流

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是一种弱类型的语言    

typeof(num)

                

三、数据类型

js的基本数据类型有五种：                                                        

3.1 number 数值类型            

3.2 string 字符类型   

3.3 boolean 布尔类型

3.4 object或者null类型

3.5 undefined类型，代表着变量未赋值，未定义

引用数据类型

对象，数组..

四、运算符

4.1 算术运算符

+   -     *     /     %    ++     --

4.2  比较运算符

>  >=  < <=  ==（比较的是值是否一样）  !==    

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

!===

4.3  逻辑运算符

&&   与

||       或

！     非      

五、选择结构

5.1 if..else..

5.2 switch

六、循环结构   

6.1   while

6.2   do ..while

6.3   for     

六、document对象

document.getElementById("title");  得到id为title的节点对象

//获取节点的文本内容        

var node=document.getElementById("title");

var title=node.innerText;

alert(title)

//设置节点的文本内容

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

innerHTMLinnerText与 的区别：

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

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

七、自定义函数

function sum(num1,num2){

      document.write(num1+num2)

}

八、js中的事件

onclick 单击事件

onmouseover 鼠标移入

onmouseout 鼠标移出

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

var node=document.getElementById("info");

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

node.style.display="block";

九、计算器

内置函数eval()

可以计算一个表达式，转成算术运算，并计算结果

字符串对象的方法：slice(0,-1)把字符串的最后一位截取，拿到截取后的字符串

按alt+小键盘41420

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

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