前端HTML+CSS+JavaScript基础篇

初学HTML+CSS+JS

三者基本分工

HTML：加入基本的元素到网页中间（建一座毛坯房）

CSS：美化网页元素、控件等（对毛坯房进行装修）

JS：一种轻量级的编程语言 语法相对随意（添加一下关门，开门等动作）

HTML 超文本标记语言

基本的结构

文档的申明

html标签 包含整个页面

head 头部 存不可见内容 ej：字符的编码、title 标题 网页导航位置所显示的内容等

body 主体 其内部的内容会在网页显示

---

主要 常用的HTML标签

一、 常用的布局标签

1. 标题

   <h1></h1> 标题可以从 h1 到 h6

2. 段落 p 可以分行， 增加行距

3. 块标签 div 分行 主用于页面的布局

4. 有序、无序列表

   ol 有序列 ul无序列（使用如图）
   

   一个 无序列在网页的使用实例

   <ul id="nav">
       <li><a href="">读书</a><span>|</span></li>
       <li><a href="">国学</a><span>|</span></li>
       <li><a href="">美食</a><span>|</span></li>
       <li><a href="">酒业</a><span>|</span></li>
       <li><a href="">旅游</a><span>|</span></li>
       <li><a href="">公益</a><span>|</span></li>
       <li><a href="">教育</a><span>|</span></li>
       <li><a href="">健康</a><span>|</span></li>
       <li><a href="">5G</a></li>
   </ul>
   
   css样式
   #nav a{
       color: black;
   }
   #nav a:hover{
       color: red;
   }
   #nav li{
       float: left;
       width: 60px;
       height: 20px;
       color: black;
       font-size: 15px;
       text-align: center;
   }
   

结果展示：

5. 超链接

   a{ 
       text-decoration-line: none; // 去除原有的文本样式 列入超链接的下划线
       target: new; // 在新的页面打开连接
   }
   

   <a target="_blank" 此处的属性是 连接在新界面打开  href="连接">name</a>
   

6. 图片

   img 关键字

   <img src="imgs/location.jfif" 文件的路径 width="300" height="200" 大小的调整>
   

7. 表格

   table 关键字

   <table border="1px 网格线宽" width = "表款">
       tr td控制行列
       <tr>
           <td colspan="4 占三列  rowspan 占几行" align="center 内容居中">
           </td>
       </tr>
   

二、表单

<form action="" method="提交方式 get 速度快不安全 post 速度慢 加密安全" onsubmit="绑定函数">

两种提交方式：get post的区别见上

常用的表单元素

元素	对应词
密码框	password
单选按钮	radio
复选框	checkbox
文件域	file
隐藏域	hidden
普通按钮	button
提交按钮	submit
重置按钮	reset
单行文本框	text

具体用法

<input type="表单元素名" name="自己给他起的名字" id="id唯一标识 方便绑定js" placeholder="页面提示" onblur=" 绑定的js方法">
ej：
<input type="text" name="username" id="username" placeholder="请输入账号" onblur="checkUsername()">

三、 下拉菜单

基本的使用

<select name="operator" id="operator">
    <option value="">请选择一种运算</option>
    <option value="add">加法</option>
    <option value="sub">减法</option>
    <option value="mul">乘法</option>
    <option value="div">除法</option>
</select>

js读取下拉框结果的方法 其中一种

var myselect = document.getElementById("operator"）//获取对应id的下拉控件
var str = myselect.value;//获取具体的 下拉选项的内容
// 进行具体的操作
if(str == "add"){
    add();
}else if(str == "sub"){
    sub();
}else if(str == "mul"){
    mul();
}else if (str == "div"){
    div();
}

四、多行文本框

<textarea name="" id=""   行列控制cols="30" rows="13" >具体内容</textarea>

---

CSS的使用

css的基本语法

在html中是语法

css选择器的介绍

一、标签选择器

针对 HTML 中的所有标签有效

span{
    margin-left: 3px;
    color: darkgray;
}

a{
    text-decoration-line: none;
    target: new;
}

二、类选择器

.类名{
    属性：值
    color: #03acff;
}
调用
 <div style="类名"></div>

三、Id选择器

每个标签可以设置唯一的ID，ID选择器可以为唯一标签设置样式

定义

#ID名{
	...
}

使用

<标签 id="id名">

优先级： ID > 类 > 标签

四、通用选择器

作用于页面中的所有标签

*{
	....
}

五、并列选择器

同时为多个选择器设置样式

选择器1,选择器2{
	..
}

六、子类选择器

分为父子选择器，子选择器作用的范围在父选择器中

父选择器 子选择器{
	...
}

七、伪类选择器

可以根据标签状态选择不同的样式

选择器:伪类{
	...
}

伪类：

1. hover	鼠标悬停
2. active    点下
3. link        默认
4. visited   已访问

ej：鼠标悬停 a 标签文字 颜色变红

#bonav a:hover{
    color: red;
}

css的存放位置

外部样式：可以在HTML文件本页中

内部样式：也可在.css文件中 调用方法

<link href="css文件路径" type="text/css" rel="stylesheet">

行内样式： 在对应的标签内部 通过style 关键字实现

<table style="background: cadetblue;margin: 0px auto"> 

---

*重点 css的样式

基本使用方法

样式：值  

注：部分样式在各个标签都是可以用的

width 宽度
height 高度
值  像素 px 百分比 %
background-color 背景颜色
background-image 背景图片
background-repeat 图片填充重复控制
background 背景颜色和背景图片通用
background：图片  +   图片填充重复控制

针对文字

color 颜色     十六进制格式 #rrggbb 红绿蓝  值 00-ff
font-size: 文字大小
font-family: 字体
font-style: 字形 italic 斜体**
font-weight: 加粗 bold**
text-align: 水平对齐  left center right
line-height: 行高 	垂直对齐 设置为和容器的height一样
text-decoraction: 文字描述   none没有修饰  underline下划线 line-through 中划线

针对列表

list-style: 列表样式 none 去圆点
float: 浮动 left 左浮动 right 右浮动   注： 针对别的标签也可以用

padding 填充

内容和边框的距离

四个方向：

padding-top	上填充
padding-left 左填充
padding-right 右填充
padding-bottom 下填充

简化
padding: 值  四个方向相同
padding: 上 右 下 左

margin 外边距

盒子之间的距离

四个方向：

margin -top	上边距
margin -left左边距
margin -right 右边距
margin -bottom 下边距

简化
margin : 值  四个方向相同
margin : 上 右 下 左
页面的居中对齐:   margin: 上 auto;

border 边框

border-width: 边框的宽度
border-color: 边框的颜色
border-style: 边框的样式 solid实心 dashed 虚心
border: 边框的宽度 边框的颜色 边框的样式
border-radius: 边框的半径

---

javascript

js是一种嵌入到浏览器中的语言

可以用来 表单验证、网页特效、游戏开发、服务器开发node.js

js的使用

一些值的类型不同 需要转换的地方：

ej；做一个简易 计算器

num1 = document.getElementById("num1").value
num2 = document.getElementById("num2").value

此时 + 为字符串的连接符
若 num1、2 分别为  4和6 
num1 + num2 = “46”    

此时可以使用类型的转换函数

parserInt(要转换的字符值) 转换为整型

parserFolat(要转换的字符值) 转换为浮点型

var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
document.getElementById("result").value = String(num1 + num2);
此时 + 做算术运算 不是 连接符
结果就是 对应的数字之和

js基本语法

1、 变量的定义：

var 变量 = 值;var age = 20;var name = '张三';

2、 值的类型有：

• 字符串 “aaa” 、‘bbb’
• 数值 200 2.5
• 布尔 true false
• 对象 JSON
• 空值 undefined

3、 基本的控制语句

类同java 。操作符、以及一些分支语句、循环语句、判断等基本相同

4、 JavaScript的函数

函数的定义

function 函数名(){
   函数内容；
   可选择 return 一个值；
}

函数的调用

<input type="button" value="计算" onclick="justHaoDo()"> 
  ”函数名（参数）“

JavaScript的事件

一些基本的事件

事件	含义
Onclick	点击事件
ondoubleclick	双击事件
onfocus	得到焦点
onblur	失去焦点
onmouseenter	鼠标进入
onmouseleave	鼠标离开
onkeydown	键盘按下
onsubmit	表单提交

onsubmit = “return 函数（）” 其中return的作用是将返回值返回给表单， true提交， false不提交

ej：
给按钮绑定一个点击事件
<input type="button" value="计算" onclick="justHaoDo()">

事件 = "函数（）"

js对表单内容的读取

读取指定id控件的值

document.getElementById("表单元素ID").value;

设置指定id空间的值

document.getElementById("表单元素ID").value = 新值

获取下拉框元素的值

// 定义一个下拉框 读取到对应的控件
var myselect = document.getElementById("operator")
// 获取该下拉框所选择的具体的值
var str = myselect.value;

js实例结合表单实现表单值的获取

实例一 简易计算器

JavaScript部分

<script>
    // js部分 实现具体的计算 并 实现读取返回结果
    // 对下拉框值的读取 及 判断
    function justHaoDo() {
        var myselect = document.getElementById("operator")
        var str = myselect.value;
        if(str == "add"){
            document.getElementById("result").value =
                String(parseFloat(document.getElementById("num1").value) + parseFloat(document.getElementById("num2").value));
        }else if(str == "sub"){
            document.getElementById("result").value =
                String(parseFloat(document.getElementById("num1").value) - parseFloat(document.getElementById("num2").value));
        }else if(str == "mul"){
            document.getElementById("result").value =
                String(parseFloat(document.getElementById("num1").value) * parseFloat(document.getElementById("num2").value));
        }else if (str == "div"){
            document.getElementById("result").value =
                String(parseFloat(document.getElementById("num1").value) / parseFloat(document.getElementById("num2").value));
        }
    }
</script>

HTML部分

<body>
    <div style=" background: bisque;width: 700px;height: 600px;margin: 0px auto">
        <!--定义基本页面结构 -->
        <!--表单提交及相关方法绑定-->
        <form action="" method="get">
            <div style="padding-top: 200px; background: bisque">
                <table border="1px" style=" background: #03acff;margin: 0px auto">
                    <tr>
                        <td colspan="2" style = "text-align: center">简易计算器</td>
                    </tr>
                    <tr>
                        <td>输入数字1</td>
                        <td><input type="text" name="number1" id="num1" placeholder="请输入一个数字" οnblur=""></td>
                    </tr>
                    <tr>
                        <td>输入数字2</td>
                        <td><input type="text" name="number2" id="num2" placeholder="请输入一个数字" οnblur=""></td>
                    </tr>
                    <tr align="center">
                        <td>
                            <select name="operator" id="operator">
                                <option value="">请选择一种运算</option>
                                <option value="add">加法</option>
                                <option value="sub">减法</option>
                                <option value="mul">乘法</option>
                                <option value="div">除法</option>
                            </select>
                        </td>
                        <td>
                            <input type="reset" value="重置">
                            <input type="button" value="计算" οnclick="justHaoDo()">
                        </td>
                    </tr>
                    <tr>
                        <td>计算结果</td>
                        <td>
                            <input type="text" name="result" id="result" value="">
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</body>

结果展示：

路漫漫其道修远，吾将上下而求索。