HTML CSS JS 学习笔记

一、HTML

1、标签

(1) 表格 table
<table><!-- 表格 -->
    <thead><!-- 标题 -->
        <tr><!-- 行 -->
            <th>name</th><!-- 列标题 -->
            <th align="center">age</th><!-- 居中 -->
            <th>height</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="right">Tom</td><!-- 靠右 -->
            <td rowspan="2">18</td><!-- 合并单元格 同一列 -->
            <td>185</td>
        </tr>
        <tr>
            <td>Jim</td>
            <!-- <td>19</td> -->
            <td>180</td>
        </tr>
        <tr>
            <td colspan="3">total</td><!-- 合并单元格 同一行 -->
        </tr>
    </tbody>
</table>

运行结果1：

name age height
Tom 18 185
Jim 19 180
运行合并结果2：
name age height
Tom 18 185
Jim 180
total
(2) 表单 form

下拉框

<select>
	<option>北京</option>
	<option selected>甘肃</option>
</select>

运行结果：

按钮（提交、重置、普通按钮）

<input type="submit" />
<input type="reset" />
<input type="button" value="button" />

单选按钮

<input type="radio" name='gender' value='male' checked/>男
<input type="radio" name='gender' value='female' checked/>女

复选按钮

<input type="checkbox" name="hobby" value="music" checked/>音乐
<input type="checkbox" name="hobby" value="book"/>读书
<input type="checkbox" name="hobby" value="learn"/>学习

文本框

<input type="text" required placeholder="请输入用户名"/>

数字

<input type="number"/>

密码

<input type="password"/>

日期

<input type="date"/>

邮箱

<input type="email"/>

文件

<input type="file"/>

网址

<input type="url"/>

文本域

<textarea rows="5" cols="50">文本域</textarea>

文字格式

<p>这是<strong>加粗</strong>；这是<em>斜体</em></p>

这是加粗；这是斜体

按钮

<button>
    按钮
</button>

(3) 列表

无序列表

<ul type="circle">
    <li>苹果</li>
    <li>香蕉</li>
    <li>鸭梨</li>
</ul>
  • 苹果
  • 香蕉
  • 鸭梨

有序列表

<ol type="I">
    <li>中国</li>
    <li>俄罗斯</li>
    <li>德国</li>
</ol>
  1. 中国
  2. 俄罗斯
  3. 德国

定义列表

<dl>
    <dt>食谱</dt>
    <dd>水煮鱼</dd>
    <dd>糖醋里脊</dd>
</dl>
食谱
水煮鱼
糖醋里脊
(4) 链接

target 参数 _blank:新建标签页打开

<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="/user/find" target="_blank">Flask</a>
<a href="#dibu">本页</a>

百度一下
Flask
本页

(5) 盒子
<div class="div_border" style="height: 100px;width: 100px;border: red thin solid">
    <h4>这是盒子</h4>
</div>

这是盒子

(6) 内联框架
<a name="dibu" href="https://www.bilibili.com" target="my">底部</a>
<iframe name="my" width="100%" height="900px"></iframe>
特殊符号
空格： &nbsp;
版权符号： &copy;
<:  &lt;
>:  &gt;
":  &quot;
块状元素

独占一行

<h1>标题1</h1>
<h2>标题2</h2>
<p>111</p>
<hr/>
<div style="border: red thin solid"; width:200px; height:200px;></div>

标题1

标题2

111

内联标签

不独占一行

<span>中国</span>
<img src="1.png"/>
<a href="#">百度</a>

中国

百度

二、CSS

1、选择

  • 标签选择器
h1 {
    color: blue;
}
  • ID选择器
#isspan{
    background-color: bisque;
}
  • 类选择器
.table_stu{
    border-collapse: collapse;
}
  • 后代选择器：空格隔开
.table_stu td{
    width: 100px;
}

  • 交集选择器：标签.类/ID

  • 并集选择器：用 ',' 隔开

.table_stu th, .table_stu td{
    border: 1px solid black;
}

级别：ID>类>标签

2、属性

超链接 a
a:link{color: #267f26;} /* 访问前 */
a:visited{color: darkgray;} /* 访问后 */
a:hover{color: rebeccapurple;} /* 鼠标放置 */
a:active{color: burlywood;} /* 鼠标点击 */
字体 font
#font{
    font-family: "隶书", sans-serif; /* 字体，应该设置多个，名称超过1个字用"" */
    font-weight: bold; /* 宽度 */
    font-size: 10pt; /* 尺寸，像素px，1em=16px，*/
    font-style: italic; /* 字体样式，italic斜体，normal正常，oblique倾斜 */
    font: italic bold 36px "隶书";
}
文本
p {
    color:red; /* 颜色，名称:red，十六进制:#FF0000，RGB值:RGB(255,0,0) */
    text-align:justify; /* 水平对齐方式，justify：两端对齐，center：居中，left左对齐，right右对齐 */
    text-decoration:none; /* 修饰，overline:上划线，line-through:删除线,underline:下划线 */
    text-transform:uppercase; /* 文本转换，uppercase:大写，lowercase:小写，capitalize:首字母大写 */
    text-indent:50px; /* 首行缩进 */
    letter-spacing:30px; /* 字符间距，中英文适用 */
    word-spacing:30px; /* 单词间距，英文适用 */
}
列表
ul.a {
    list-style-type: circle; /* square none*/
    list-style-image: url('sqpurple.gif'); /* 图片 */
    list-style: square url("sqpurple.gif");
}
ol.c {
    list-style-type: upper-roman; /* 大写罗马，lower-alpha:小写字母 */
}
表格
table{
    border-collapse:collapse; /* 单边框 */
    width:100%; /* 宽度 */
}
table, th, td{
    border: 1px solid black;
    
}
td{
    height:50px; /* 高度 */
    vertical-align:bottom; /* 垂直属性 */
    padding:15px;
}
边框 border
.div_border{
    border: cadetblue thin solid; /*复合设置*/
    border-width: 20px; /* 上下左右20px */
    border-width: 10px 20px; /* 上下10px，左右20px */
    border-width: 5px 10px 15px; /* 上5，下10，左右15 */
    border-width: 5px 10px 15px 20px; /* 上5，下10，左15，右20 */
    margin: 60px; /* 外边距 */
    padding: 10px; /* 内边距 */
}
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}/* 虚线 */
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}/* 3D凹槽 */
p.ridge {border-style:ridge;}/* 3D脊 */
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}

无边框

点线边框

虚线边框

实线边框

双边框

凹槽边框

垄状边框

嵌入边框

外凸边框

隐藏边框

混合边框

显示 display
h1 {
    display: inline; /* 内联 */
    display: none; /* 隐藏 */
}
a {
    display: block; /* 块级 */
}
溢出 overflow
  • visible: 默认值，不会修剪
  • hidden: 溢出内容隐藏
  • scroll: 内容出现滚动条
  • auto: 溢出内容出现滚动条
div {
    overflow: auto;
}

3、定位

浮动 float

  • left
  • right
div {
    float: left;
}

如果都浮动，父级添加

div {
    overflow: hidden;
}

相对定位 relative

相对于原位置，做移动，对浮动元素与未浮动元素都生效，位置存在。

  • top
  • right
  • left
  • bottom
div {
    position: relative;
    top: 10px;
}

绝对定位 absolute

相对于已经定位的父级标签的位置。父级未定位以浏览器窗口为准。元素移动，位置无。

div {
    position: absolute;
    top: 0px;
    right: 0px;
}
z-index属性

定位元素重叠的上下位置，设置position才有效。

div {
    position: relative;
    z-index: 200;
}

三、JS

1、数据结构

（1）变量

  • var: 全局变量
  • let: 块级变量，作用域为{}内
  • const: 常量
var name = '张三'
console.log(name) // 张三
let age = 18
console.log(age) // 18
const PI = 3.14
console.log(PI) // 3.14

（2）数据类型

  • number: 整数、浮点数
  • string: 字符串
  • boolean: 布尔型
  • object: 对象（数组、null）
  • undefined: 未定义
let num = 10
let float = 10.5
let str = "I'm learning."
let bool = false
let value = null

console.log(typeof num)

（3）数组

三种定义方法

let nums = [100,200,300]
let prices = new Array(5)
let names = []

console.log(prices.length) // 5
prices[5] = 30 // 不报错，长度是动态的

增加用push()方法

nums.push(900)
console.log(nums) // [100, 200, 300, 900]

数组的遍历

let name_s = ['Tom', 'Jim', 'Rose']
// method 1
for (let i = 0; i < name_s.length; i++) {
    console.log(name_s[i]);
}
// Tom Jim Rose
// method 2
for (let name of name_s){
    console.log(name);
}

2、流程控制

（1）判断语句

if else
let score = 90
if(score>90){
    console.log("成绩优秀")
}else if(score>80){
    console.log("成绩良好")
}else{
    console.log("继续努力")
} // 成绩良好
switch case
let status = 2;
switch (status) {
    case 0:
        console.log("open the led.")
        break;
    case 1:
        console.log("close the led.")
        break;
    case 2:
        console.log("fix the led.")
        break;
    default:
        console.log("Can't understand.")
        break;
} // fix the led.

（2）循环语句

for
for(let i=0; i<100; i++)
{
    console.log("Print No." + (i+1) + " document.")
} // Print No.1~100 document.
while

break 和 continue

let i = 0
while(i<10){
    console.log(i);
    i++;
} // 0~9
do while

无论是否满足条件，至少执行一次

let i = 0;
do{
    console.log(i);
    i++;
}while(i<10); // 0~9

3、函数

// 无参数无返回值
function method01(){
    console.log("Learning makes me happy.")
}
// 有参数无返回值
function method02(num01, num02){
    console.log(num01+num02);
}
// 无参数有返回值
function method03(){
    return "Hello World!"
}

method01(); // Learning makes me happy.
method02(1,2); // 3
console.log(method03()); // Hello World!
简易计算器
/**
 * 简易计算器
 * @param num01 第一个值
 * @param num02 第二个值
 * @param signal 运算符
 * @returns {number} 计算结果
 */
function jisuanqi(num01,num02,signal){
    let result = 0;
    switch(signal){
        case '+':
            result = num01 + num02;
            break;
        case '-':
            result = num01 - num02;
            break;
        case '*':
            result = num01 * num02;
            break;
        case '/':
            result = num01 / num02;
            break;
        case '%':
            result = num01 % num02;
            break;
        default:
            console.log("Error")
    }
    return result;
}

console.log(jisuanqi(2,5,'*')) // 10

4、数据处理

let result_data2 = {
    code:200,
    msg:'Select Successfully',
    data:[
        {
        user_id:100,
        user_name:'Tom',
        user_sex:'male'
    },
        {
        user_id:101,
        user_name:'Jim',
        user_sex: 'female'
    }
    ]
}

if(result_data2.code===200){
    console.log(result_data2.msg)
    for(let item of result_data2.data){
        console.log("name:" + item.user_name + " sex:" + item.user_sex);
    }
}
// Select Successfully
// name:Tom sex:male
// name:Jim sex:female
posted @ 2026-03-18 11:04  愛摸鱼的猫  阅读(13)  评论(0)    收藏  举报