html，css和js-Toy模板网

这篇具有很好参考价值的文章主要介绍了html，css和js。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

HTML

注释标签

标题标签

段落标签

换行标签

加粗

倾斜

删除线

下划线

图片标签

超链接

表格标签

列表标签

表单标签

from标签：进行前后端交互，功能是构造一个HTTP请求

input标签

多行编辑框

块级元素

行内元素

案例

CSS

css的引入方式

内部样式

内联样式

外部样式

css选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

后代选择器

子选择器

伪类选择器

常见属性

字体

文本颜色

对齐

文本装饰

文本缩进

行高

背景

圆角矩形

元素的显示模式

盒子模型

弹性布局

输入输出

变量的使用

基本数据类型

number：数字，不区分整数和小数

boolean：true真，false假

string：字符串类型

undefined：只有唯一的值undefined，表示未定义的值

null：只有唯一的值null，表示空值

数组

数组的使用

数组新增/删除元素

函数（方法）

创建函数/函数声明/函数定义

函数的调用

函数表达式

js对象

WebApi-DOM

获取元素

事件

操作元素

案例

前言

项目的制作，离不开前端页面的设计，本篇博客我们主要学习一些前端知识！

HTML

描述页面的结构

html的最顶层标签，就是html，需要有一个head和body，head放一些属性信息，body放页面显示的内容

1、html是由一些标签构成的

2、每个标签都有开始标签和结束标签，也有部分标签，只有开始标签，没有结束标签

3、标签之间可以嵌套

注释标签

标题标签

h1 h2 h3 h4 h5 h6 数字越小，字体越大越粗

段落标签

<p></p> 段落标签之间会有换行，并且有明显的段落间距

换行标签

<br>是一个单标签

加粗<strong></strong> <b></b>

倾斜<em></em> <i></i>

删除线<del></del> <s></s>

下划线<ins></ins> <u></u>

图片标签

img 单标签

img必须要带有一个src属性，通过这个属性来指定你要显示的图片的路径，这个路径可以写绝对路径，也可以是相对路径（基准目录就是当前html所在的目录）

超链接

<a href=" "></a> 通过链接可以找到另外一个资源

表格标签

table：表示整个表格

tr：表示表格的一行

td：表示一个单元格

th：表示表头单元格，会居中加粗

thead：表格的头部区域（注意要和th区分，范围是比th要大）

tbody：表格的主体区域

列表标签

有序列表 ol

无序列表 ul

列表项 li

表单标签

from标签：进行前后端交互，功能是构造一个HTTP请求

input标签

文本框

密码框

单选框

单选框之间必须具备相同的name属性，才能实现多选一效果

复选框

<input type="checkbox" name="action">吃饭

<input type="checkbox" name="action" checked="checked">睡觉

普通按钮

提交按钮

文件选择框

select下拉菜单

</select>

多行编辑框

自己实现滚动条

块级元素

<div> 默认是独占一行的块级元素

行内元素

<span> 默认是不独占一行的行内元素

案例

展示简历信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我的简历</h1>
    <h2>基本信息</h2>
    <img src="./logo.png" alt="" width="400px" height="250px">
    <p>姓名:抽抽</p>
    <p>求职意向:测试开发工程师</p>
    <p>电话:15114813882</p>
    <p>邮箱:1975688561@qq.com</p>
    <p><a href="">我的博客</a></p>
    <p><a href="">我的github</a></p>

    <h2>教育背景</h2>
    <ol>
        <li>xxx 小学</li>
        <li>xxx 初中</li>
        <li>xxx 高中</li>
        <li>xxx 大学</li>
    </ol>

    <h2>专业技能</h2>
    <ul>
        <li>熟练掌握Java的基础语法,熟悉面向对象程序设计的基本思想</li></li>
        <li>熟悉常见数据结构，比如顺序表，链表，二叉树，栈，队列，哈希表</li>
        <li>熟悉 MysQL数据库,能够使用SQL完成基本的增删改查</li>
        <li>熟悉多线程编程，理解线程安全的含义，并且能够写出多线程安全的代码</li>
        <li>熟悉网络编程和网络原理,理解Socket api 的使用，熟悉 UDP,TCP,IP等常见协议的原理</li>
    </ul>

    <h2>我的项目</h2>
    <ol>
        <li>
            <h4>留言墙</h4>
            <p>开发时间:xxx</p>
            <div>功能介绍</div>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </li>
        <li>
            <h4>学习小助手</h4>
            <p>开发时间:xxx</p>
            <div>功能介绍</div>
            <ul>
                <li>支持错题本功能</li>
                <li>支持知识回顾功能</li>
            </ul>
        </li>
    </ol>

    <h2>个人评价</h2>
    <div>
        学习成绩优异,多次获得奖学金
    </div>
</body>
</html>

CSS

描述页面的样式

css可以嵌入到html页面中编写，就需要有一个style <style></style>

css具体设置的属性键值对，若干个属性都在一个{ }里，属性之间用；来分割，键和值之间使用：来分割

css的引入方式

内部样式

<style>
        div{
            color: brown;
            text-indent: 2em;
            background-color: aqua;
        }
</style>

内联样式

使用style属性（每个标签都可以用style属性，里边可以直接写css）

外部样式

把css写到一个单独的.css文件中，通过link标签引入到html里面

css选择器

描述了你要选中页面中的哪个/哪些元素，{ }的样式就是针对这些元素生效的

标签选择器

写个标签名字，标签名就表示针对当前页面中所有的指定标签，都要被选中

类选择器

可以让样式差异化效果

在html中使用class属性，引用对应的css类名，从而使对应的样式针对指定元素生效

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

<ul class="one">
        <li>
            <div>咬人猫</div>
        </li>
        <li>咬人猫</li>
        <li>咬人猫</li>
</ul>

id选择器

每个元素都有一个id属性，值在页面是唯一的，使用id选择器来选中到对应的元素

#开头表示是id选择器

        #the-id{
            color: aqua;
            font-size: 20px;
        }

通配符选择器

}

选中页面中的所有元素，通常用于干掉浏览器的默认样式

复合选择器

后代选择器

元素1 元素2{ }

子选择器

和后代选择器类似，只是选择了子标签

        ul>li{
            color: aqua;
            font-size: 20px;
        }

并集选择器

        div，p{
            color: aqua;
            font-size: 20px;
        }

伪类选择器

选择元素的不同状态

：hover 鼠标放上去

：active 鼠标按下去

常见属性

字体

font-family设置字体

font-weight设置字体的粗细，值是100-900整数，数字越大字体越粗

文本颜色

1、直接写单词

2、写成rgb/rgba形式

3、写成#十六进制数字

对齐

text-align

文本装饰

text-decoration给文字加上下划线（underline），上划线（overline），删除线（line-through）

文本缩进

text-indent 能够控制一段话的首行，自由缩进（2em就是两个字）

行高

line-height=文字大小+行间距

行高=顶线到顶线的距离=底线到底线的距离=中线到中线的距离=基线到基线的距离

背景

背景颜色background-col

背景图片background-image，默认是平铺的

background-repeat 控制背景图的平铺

background-position 设置背景图的位置

background-size 设置背景图片的大小

圆角矩形

border-radius

元素的显示模式

使用display属性针对行内/块级元素相互转换

盒子模型

内边距-padding

边框-border

外边距-margin

弹性布局

用来描述元素之间的关系（相对位置关系）

display：flex

justify-content 设置水平方向的排列方式

align-items 设置垂直方向的排列方式

JS

描述页面的动态交互

js有多种方式与html结合执行：

1、内嵌式，把js代码写到script标签中

2、内联式，把js代码放到标签的特殊属性中

3、外部式，把js代码写到单独的.js文件中，在html中引入这个js文件，使用script标签引入

输入输出

输入：prompt 弹出一个输入框

输出：alert 弹出一个警示对话框，输出结果

输出：console.log 在控制台打印一个日志

变量的使用

创建变量（变量定义/变量声明/变量初始化）

let a=10;

基本数据类型

number：数字，不区分整数和小数

boolean：true真，false假

string：字符串类型

1、求字符串长度

console.log（name.length）

2、字符串的拼接

使用+来进行拼接

3、字符串比较

比较两个字符串内容是否相同，直接使用==

undefined：只有唯一的值undefined，表示未定义的值

访问某个变量。没有被定义

null：只有唯一的值null，表示空值

访问的变量值是存在的，只不过变量的值，是空值

数组

js的数组长度是可以动态变化的，而且允许里边存在不同类型的元素

数组的使用

访问数组元素时，通过取下标的方式来进行操作，下表从0开始进行计数

数组新增/删除元素

使用push方法进行尾插，使用pop方法进行尾删

splice既可以进行中间位置的插入，也可以进行中间位置的删除，还可以进行元素的替换

函数（方法）

创建函数/函数声明/函数定义

创建函数/函数声明/函数定义

function 函数名（形参列表）{

函数体

return 返回值；

}

函数的调用

函数名（实参列表） //不考虑返回值

返回值=函数名（实参列表） //考虑返回值

同一个函数允许传不同的类型

函数表达式

         let add=function(){
             let ret=0;
             for(let i=0;i<arguments.length;i++){
                 ret+=arguments[i];
             }
             return ret;
         }

先定义一个变量，给变量赋值，赋的值是一个function，add的类型也就是函数

js对象

js中的对象，是使用{ }来表示的，对象里可以有属性，也可以有方法

        let idol={
            name:'边伯贤',
            age:30,
            gender:'male',
            sing: function(){
                console.log('candy');
            },
            dance: function(){
                console.log('帅气逼人');
            }
        }
        console.log(idol.name)
        idol.sing();
        idol.dance();

js中没有类的概念，所以针对多个对象问题，需要创建一个构造函数来解决

        function Student(name,age,gender,singMsg,danceMsg){
            this.name=name;
            this.age=age;
            this.gender=gender;
            this.sing=function(){
                console.log(singMsg);
            };
            this.dance=function(){
                console.log(danceMsg);
            };
        }

        let student1=new Student('边伯贤',30,'male','candy','啵啵虎');
        let student2=new Student('都暻秀',29,'male','呐喊','抽抽嘟');
        console.log(student1);
        console.log(student2);

WebApi-DOM

就是把html页面上的每个标签，都对应成js中的一个对象，通过这个对象就能获取/修改标签的内容和属性

获取元素

let div=document.querySelector('div');

获取多个元素

let div=document.querySelectorAll('div');

事件

三个核心要素：

1、事件源：事件是从哪个元素发出来的

2、事件类型：点击，移动，按下键盘，调整窗口

3、事件处理程序：通过哪个函数/代码来进行操作

操作元素

获取/修改元素的内容

innerHTML

修改元素时，不仅能够赋值文本，还可以赋值一个html片段

获取/修改元素的属性

修改的就是开始标签里面的键值对

针对表单元素，通过input.value来获取到输入框里面的值

获取/ 修改样式属性

行内样式：通过style属性，嵌入到html里面的样式，通过css class指定的样式

新增节点

1、先创建出一个元素；2、把新元素加入到dom树上

        childDiv=document.createElement('div');
        childDiv.innerHTML='44';
        div.appendChild(childDiv);

删除节点

removeChild

案例

显示密码，通过修改type属性

        let input=document.querySelector('input');
        let button=document.querySelector('button');
        button.onclick=function(){
            if(input.type=='password'){
                input.type='text';
                button.innerHTML='隐藏密码';
            }else if(input.type=='text'){
                input.type='password';
                button.innerHTML='显示密码';
            }else{
                alert('type错误');
            }
        }

点击计数

        let input=document.querySelector('input');
        let addBtn=document.querySelector('#add');
        let minusBtn=document.querySelector('#minus');

        addBtn.onclick=function(){
            let oldValue=parseInt(input.value);
            oldValue+=1;
            input.value=oldValue;
        }

        minusBtn.onclick=function(){
            let oldValue=input.value;
            oldValue-=1;
            input.value=oldValue;
        }

猜数字文章来源地址https://www.toymoban.com/news/detail-425191.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <h3>请输入要猜的数字:</h3>
    <input type="text">
    <div>
        已经猜的次数: <span id="guessCount">0</span>
    </div>
    <div>
        结果: <span id="result"></span>
    </div>
    <button>猜</button>

    <script>
        //0.获取到需要的元素
        let input=document.querySelector('input');
        let button=document.querySelector('button');
        let guessCount=document.querySelector('#guessCount');
        let result=document.querySelector('#result');

        //1.在页面加载的时候,要生成1-100之间随机的整数
        let toGuess=parseInt(Math.random()*100)+1;
        console.log(toGuess)

        //2.给猜这个按钮加个点击事件
        button.onclick=function(){
            //获取到输入框里的值
            let value=parseInt(input.value);
            //和当前生成的数字进行对比
            if(toGuess>value){
                result.innerHTML='低了';
            }else if(toGuess==value){
                result.innerHTML='猜对了';
            }else{
                result.innerHTML='高了';
            }
            //没点一次提交,猜的次数+1
            let guessCountValue=parseInt(guessCount.innerHTML);
            guessCount.innerHTML=guessCountValue+1;
        }
    </script>
</body>
</html>

到了这里，关于html，css和js的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

html，css和js

前言

HTML

注释标签

标题标签

段落标签

换行标签

加粗<strong></strong> <b></b>

倾斜<em></em> <i></i>

删除线<del></del> <s></s>

下划线<ins></ins> <u></u>

图片标签

超链接

表格标签

列表标签

表单标签

from标签：进行前后端交互，功能是构造一个HTTP请求

input标签

多行编辑框

块级元素

行内元素

案例

CSS

css的引入方式

内部样式

内联样式

外部样式

css选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

后代选择器

子选择器

伪类选择器

常见属性

字体

文本颜色

对齐

文本装饰

文本缩进

行高

背景

圆角矩形

元素的显示模式

盒子模型

弹性布局

JS

输入输出

变量的使用

基本数据类型

number：数字，不区分整数和小数

boolean：true真，false假

string：字符串类型

undefined：只有唯一的值undefined，表示未定义的值

null：只有唯一的值null，表示空值

数组

数组的使用

数组新增/删除元素

函数（方法）

创建函数/函数声明/函数定义

函数的调用

函数表达式

js对象

WebApi-DOM

获取元素

事件

操作元素

案例

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2