欢迎来到wjc的博客

习，不知道我几斤几两，不终生学习，被淘汰的就是我。不学

html,css，javaSript

html,css，javaSript

1.认识

  • 结构：对应的是 HTML 语言
  • 表现：对应的是 CSS 语言
  • 行为：对应的是 JavaScript 语言

2.标签

标题：h1-h6

横线效果：hr

字体：font（face，color，size）

换行 br

段落 p

加粗 b

斜体 i

下划线 u

文本居中 center

图片 img（src，height，width）

音频 audio（src，controls）

视频 video（src，controls）

​ 对于height，width

  • 像素：单位是px
  • 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

超链接：a(href，target)

  • href：指定访问资源的URL

  • target：指定打开资源的方式

    • _self：默认值，在当前页面打开
    • _blank：在空白页面打开

列表

​ 有序

		<ol type="A">
			<li></li>
			<li></li>
		</ol>

​ 无序

	<ul type="circle">
		<li></li>
		<li></li>
	</ul>

表格

  • table ：定义表格

    • border：规定表格边框的宽度

    • width ：规定表格的宽度

    • cellspacing：规定单元格之间的空白

  • tr ：定义行

    • align：定义表格行的内容对齐方式

  • td ：定义单元格

    • rowspan:规定单元格可横跨的行数

    • colspan:规定单元格可横跨的列数

  • th：定义表头单元格

div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果

表单：form

​ 表单项 input

​ 下拉表 select

​ 文本域 textarea

 <form action="#" method="post">
        <input type="hidden" name="id" value="123">
 
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"><br>
 
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"><br>
 
        性别：
        <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
        <br>
 
        爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>
 
        头像：
        <input type="file"><br>
 
        城市:
        <select name="city">
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <br>
 
        个人描述：
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">
    </form>

3.css

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>牛马</title>
</head>
<body>
    <font color="red">牛马：wjc</font>
    <h1>我是h1：牛马</h1>
    <h2>我是h2：牛马</h2>
    <h3>我是h3：牛马</h3>
    <h4>我是h4：牛马</h4>
    <h5>我是h5：牛马</h5>
    <h6>我是h6：牛马</h6>
    <font face="宋体" size="5" color="#ff0000">wjc牛马</font>
    <br>
    <font face="楷体" size="5" color="#ff0000">wjc牛马</font>
    <hr>
 
    <p>
        hello world, I am from China.
    </p>
    <p>
        <i>你好， 我来自中国。</i>
        <br>
        <b>你好， 我来自中国。</b>
        <br>
        <u>你好， 我来自中国。</u>
        <br>
        <center>
        <b>
            你好， 我来自中国。
        </b>
    </center>
    </p>
 
 
    <img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width=30% height=30%>
    <img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="300" height="400">
    <audio></audio>
    <video></video>
    <br>
    <a href="https://www.baidu.com/" target="_blank">百度</a>
 
    <ol type="A">
        <li>有序</li>
        <li>有序</li>
    </ol>
    <ul type="circle">
        <li>无序</li>
        <li>无序</li>
    </ul>
 
 
 
    <table border="1" cellspacing="0" width="500">
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
 
        <tr align="center">
            <td>010</td>
            <td><img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="60" height="50"></td>
            <td>三只松鼠</td>
            <td>三只松鼠</td>
        </tr>
 
        <tr align="center">
            <td>009</td>
            <td><img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="60" height="50"></td>
            <td>优衣库</td>
            <td>优衣库</td>
        </tr>
 
        <tr align="center">
            <td>008</td>
            <td><img src="https://img.zcool.cn/community/017c4c55494f0c0000019ae968219a.jpg@2o.jpg" width="60" height="50"></td>
            <td>小米</td>
            <td>小米科技有限公司</td>
        </tr>
    </table>
 
 
    <div id="div1">我是div</div>
    <div >我是div</div>
    <span>我是span</span>
    <span>我是span</span>
 
 
    <form action="#" method="post">
        <input type="text" name="username">
        <input type="submit">
        <br>
        <select>
            <option>
                北京
            </option>
            <option>
                上海
            </option>
            <option>
                南京
            </option>
        </select>
    </form>
 
    <textarea>
        中华
        田园
        犬
    </textarea>
 
 
 
 
 
    <form action="#" method="post">
        <input type="hidden" name="id" value="123">
 
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"><br>
 
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"><br>
 
        性别：
        <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
        <br>
 
        爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>
 
        头像：
        <input type="file"><br>
 
        城市:
        <select name="city">
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <br>
 
        个人描述：
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">
    </form>
 
 
 
</body>
<style>
        div{
            color: red;
        }
        #div1{
            color: blue;
        }
    </style>
</html>

4.javaScript

1.javascript引入方式：内部，外部

内部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<script>
    alert("hello js1");
</script>
</body>
</html>

外部

alert("hello js");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<script src="../js/demo.js"></script>
</body>
</html>

2.打印

窗口，页面，控制台

window.alert("hello js 1");//写入弹窗
document.write("hello js 2");//写入页面
console.log("hello js 3");//写入浏览器的控制台

3.变量

全局变量，可重复定义 var

所在代码块中有效，不允许重复定义 let

只读常量，不允许修改 const

4.数据类型

​ 原始数据类型，引用数据类型，typeof获取数据类型

​ 原始：数字 number（整数，小数，NaN）; String；boolean；null；undefined 默认

  • ==：

    1. 判断类型是否一样，如果不一样，则进行类型转换

    2. 再去比较其值

  • ===：js 中的全等于

    1. 判断类型是否一样，如果不一样，直接返回false
    2. 再去比较其值

流程控制：if， switch，for, while, do while

函数

function 函数名(参数1,参数2..){
    要执行的代码
}
var 函数名 = function (参数列表){
    要执行的代码
}

调用：直接函数名+参数

5.对象

基本对象,Brower对象，DOM对象

对于：Array

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

  • push 函数：给数组添加元素，也就是在数组的末尾添加元素

    参数表示要添加的元素

    		// push:添加方法
    		var arr5 = [1,2,3];
    		arr5.push(10);
    		alert(arr5);  //数组的元素是 {1,2,3,10}

  • splice 函数：删除元素

    参数1：索引。表示从哪个索引位置删除

    参数2：个数。表示删除几个元素

    		// splice:删除元素
    		var arr5 = [1,2,3];
    		arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
    		alert(arr5); // {2,3}

6.JavaScript 中自定义对象

var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }
    };
 
 
alert(person.name);  //zhangsan
alert(person.age); //23
 
person.eat();  //干饭~
posted @   Wang_JC  阅读(20)  评论(0)  编辑  收藏  举报
相关博文：
·  java基础
·  mysql
·  JavaWeb学习笔记-前端部分
·  JavaWeb
·  html总结
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
Title
点击右上角即可分享
微信分享提示
AI IDE Trae