跳转至

HTML/CSS/JS 基础语法

课程链接

HTML —— Hypertext Markup Language（超文本标记语言）

HTML是通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。 标签通常成对出现，包括开始标签和结束标签，内容位于这两个标签之间，例如： 

<p>这是一个段落</p>
<h1>这是一个标题</h1>
<a href="#">这是一个链接。</a>
除了双标签，也存在单标签，如： 
<input type="text">
<br>
<hr>
区别：单标签用于没有内容的元素，双标签用于有内容的元素

HTML文件结构

<!DOCTYPE html>
<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
    </body>
</html>

标题 段落 文本格式

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <p>这是一个段落标签</p>
    <p>更改文本样式：<b>加粗文本</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p>

更改字体大小需要学习CSS

无序列表 有序列表

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

表格

: table row : table data : table header 

<table border="1">
    <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
    </tr>
    <tr>
        <td>元素1</td> 
        <td>元素2</td>
        <td>元素3</td>
    </tr>
</table>

HTML属性

基本语法： 

<开始标签 属性名="属性值">
每个HTML元素可以具有不同的属性 属性名称不区分大小写，属性值大小写敏感 常见属性：

属性 描述
class 为HTML元素定义一个或多个类名（类名从样式文件引入
id 定义元素唯一的id
style 规定元素的行内样式

链接 

<a href="网址" target="_self/_blank/_parent/_top">这是一个链接</a>
图片 
<img src="path or 网址" alt="该图片无法显示" width="100" height="100">

如果图片无法显示，则用alt中的文字替代

HTML区块-块元素与行内元素

是学习CSS的前置知识

块元素
  • 块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
  • 可以包含其他块级元素和行内元素。
  • 常见的块级元素包括<div>，<p>，<h1>到<h6>,<ul>,<ol>,<li>,<table>,<form>等

表单

<form>
    <label for="username">用户名：</label>
    <input id="username" type="text" placeholder="请输入用户名"><br><br>
    <label for="password">密码：  </label>
    <input id="password" type="password" placeholder="请输入密码"><br><br>

    <label>性别：</label>
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 其他
    <br><br>
    <label>爱好：</label>
    <input type="checkbox" name="hobby"> 唱
    <input type="checkbox" name="hobby"> 跳
    <input type="checkbox" name="hobby"> RAP
    <input type="checkbox" name="hobby"> 篮球
    <br><br>
    <input type="submit" value="上传">
</form>

CSS

CSS : Cascading Style Sheets, 层叠样式表

用于定义网页样式和布局的样式表语言

通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精准的页面设计

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，一遍同时应用多个样式 

选择器 {
    属性1:属性值1;
    属性2:属性值2;
}
1. 选择器的声明中可以写无数条属性 2. 声明的每一条属性，都需要以英文分号结尾; 3. 声明中的所有属性和值都以键值对的形式出现 示例：p标签选择器 
p {
    color: blue;
    font-size: 16px;
}

三种 CSS 导入方式

  1. 内联样式
  2. 内部样式表
  3. 外部样式表

三种导入方式的优先级：内联样式 > 内部样式表 > 外部样式表

选择器

选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式 - 元素选择器 - 类选择器 - ID选择器 - 通用选择器 - 子元素选择器 - 后代选择器（包含选择器） - 并集选择器（兄弟选择器） - 伪类选择器

子代选择器、后代选择器

子代选择器，只对子代有用，对子代的子代无用

但后代选择器对子代有用 

<head>
    <style>
        /*子元素选择器*/
        .father > .son {
            color: cadetblue;
        }
        /*后代选择器*/
        .father .grandson {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
    </div>
</body>

相邻元素选择器

如下例，只对满足这样相邻条件的产生效果 

<head>
    <style>
        /*相邻元素选择器*/
        h3 + p {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>这是一个普通的 p 标签</p>
    <h3>这是一个相邻兄弟选择器示例</h3>
    <p>这是另一个p标签</p>
</body>

CSS 常用属性介绍

讲了可以把块元素转化成行内元素

盒子模型

盒子模型相关属性 |属性名|说明| |:------------:|:----------:| |内容 content| 盒子包含的实际内容| |内边距 padding|围绕在内容的内部，是内容与边框之间的空间| |边框 border|围绕在内边距的外部，是盒子的边界| |外边距 margin|围绕在边框的外部，是盒子与其他元素之间的空间|

浮动

传统网页布局方式 传统网页布局方式有以下5种：标准流、浮动、定位、Flexbox、Grid

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即 可使得元素进行浮动。

语法： 

选择器 {
    float: left/right/none;
}

注意：浮动是相对于父元素浮动，只会在父元素的内部移动

浮动三大特性： - 脱离标准流 - 多个浮动，一行显示，顶部对齐 - 具备行内快元素的特性

定位

定位方式： - 相对定位 - 绝对定位 - 固定定位：不随滚动发生移动

JavaScript

Js使得网站不再是静态的，而是可以根据用户的操作动态变化的 JavaScript的作用 - 客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互 - 网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性 - 后端开发：使用Node.js，JavaScript也可以在服务器端运行，实现服务器端应用的开发

三种打印方式

  1. Header 最快
  2. 外联样式
  3. 内联样式

JS基本语法

数据类型 

<script>
    var x;
    let y = 5;
    const PI = 3.14;
    console.log(x, y, PI);
    let name = '如花';
    console.log(name);
    let emptyvalue = null;
    console.log(emptyvalue)
</script>
条件语句 同C

循环语句 for while, 同C😂

break continue

函数 使用 function关键字 

function 函数名(..,..,...) {
    return ...;
}

事件

事件 描述
onClick 点击事件
onMouseOver 鼠标经过
onMouseOut 鼠标移出
onChange 文本内容改变享
onSelect 文本框选中
onFocus 光标聚集
onBlur 移开光标

事件绑定 1. HTML属性 2. DOM属性 3. addEventListener方法

DOM

DOM节点树图片