html基础知识

html

第一个实例

转载自：HTML 教程 | 菜鸟教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 声明为html5文档  -->
<!DOCTYPE html>
<!-- 第一个网页实例 source:https://www.runoob.com/html/html-tutorial.html-->
<!-- html主体 -->
<html>

<!-- html 头描述 -->

<head>
    <!-- 标记编码格式 -->
    <meta charset="utf-8">
    <!-- html标题(展示在标签页的名称) -->
    <title>菜鸟教程(runoob.com)</title>
</head>

<!-- html主体内容(可见画面内容) -->

<body>
    <h1>第一个标题</h1>
    <p>第一个段落</p>
</body>

</html>

image-20241102162503846

基本概念

转载自：HTML 简介 | 菜鸟教程

  • html标签
    由一对尖括号包围的关键词，通常成对出现，包括开始标签[<html>]和结束标签[</html>]

    • 属性
      尖括号中以{xxx=”xxx”}格式的内容，用于表示标签的附加属性

      1
      2
      3
      e.g.
      <a href="https://www.runoob.com">这是一个链接</a>
      # herf属性使得html链接标签a 链接到了https://www.runoob.com中

      一般用在开始标签

      属性的值要始终使用双引号包围在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号

      属性中的id对于一个元素而言是唯一的，而class，一个元素可以有多个class

    • 种类
      HTML 区块 | 菜鸟教程

      • 区块元素
        大多数 HTML 元素被定义为块级元素或内联元素。

        块级元素在浏览器显示时，通常会以新行来开始（和结束）。

        实例: <h1>, <p>, <ul>, <table>

      • 内联元素
        内联元素在显示时通常不会以新行开始。

        实例: <b>, <td>, <a>, <img>

      • 常用的区块元素

        1
        2
        3
        4
        5
        <div>
        1. 和css一起使用，可用于对大的内容块设置样式属性
        2. 用于文档布局，取代了使用表格定义布局的老式方法
        <span>
        1. 和css一起使用时，可以用于为部分文本设置样式属性

  • html元素

    被html标签包围的内容(包括标签)[<h1>这是一级标题</h1>]

CSS

HTML CSS | 菜鸟教程

CSS 教程 | 菜鸟教程

用于渲染html元素标签的样式

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

使用方法

内联样式

在html元素中使用”style”属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 内联样式 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>
    <div>
        <!-- 这里使用内联样式stylt属性设置链接的颜色和不显示下划线 -->
        <a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
    </div>

</body>

</html>

访问 www.baidu.com!

内部样式表

在html文档头部<head>区域使用<style>元素来包含CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>

<head>
    <title>内部样式表</title>
    <style>
        h1 {
            color: blue;
            font-size: 30px;
            text-align: center;
        }

        p {
            color: red;
            font-size: 20px;
            text-align: justify;
        }
    </style>
</head>

<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>

</html>

image-20241102191451919

外部引用

使用外部CSS文件

1
2
3
4
5
6
7
8
9
10
11
h1 {
    color: blue;
    font-size: 30px;
    text-align: center;
}

p {
    color: red;
    font-size: 20px;
    text-align: justify;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>

<body>
    <h1>我使用了外部样式文件来格式化文本 </h1>
    <p>我也是!</p>
</body>

</html>

image-20241102192246081

选择器

CSS Id 和 Class选择器 | 菜鸟教程

CSS 选择器 | 菜鸟教程

id选择器(#)[IS，ID selector]

通过id识别不同的html元素，使用#作为css中的识别符

1
2
3
4
5
6
7
<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

类选择器(.)[CS，Class selector]

通过类(class)识别不同的html元素

1
2
3
4
5
6
7
<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

元素(标签)选择器[ES，Element selector]

通过标签识别不同的html元素

1
2
3
4
5
6
7
<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

包含选择器[PS，Package selector]

*通过元素的特定位置识别不同元素指定目标选择器必须处在某个选择器对应的元素内部，语法格式：**A B{…}*（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

1
2
3
4
5
6
7
8
9
10
11
12
<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

ADD

包含选择器除了有 A B{…} 的形式外（A和B都是标签），还可以有这种形式：.A B{…}* 的形式（A是类名，B是标签）。

作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。*

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

子选择器[SS，Sub-Selector]

*类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许”子标签”甚至”孙子标签”及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式**：A>B{…}*（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
/*如果这里改为【div p】，那么td中的p标签也会是红色的*/
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

ADD

子选择器除了有 A >B{…} 的形式外（A和B都是标签），还可以有这种形式：.A >B{…}* 的形式（A是类名，B是标签）。*

作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.first>span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容不是红色</span></li>
  <li><span>内容不是红色</span></li>
</ol></p>

</body>

兄弟选择器[BS，Brother selector]

*BS是CSS3.0新增的一个选择器，语法格式：**A~B{…}*（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式[A不匹配]）,特定位置

1
2
3
4
5
6
7
8
9
10
<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div> A
  <p>red text</p><!--文字是红色的--> B
</div>

通用选择器

语法形式为：**{属性：属性值}*。它的作用是匹配 html 中的所有元素标签。

1
2
3
4
5
6
7
8
9
<!--使用html中任意标签元素字体颜色全部设置为红色：-->
<style>
*{color:red;}
</style>

<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>

总结

一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
补充一下标点符号的含义，主要是经常出现的逗号我看大家都没有写

css 中逗号，空格，冒号，点号的含义

一：#a,b{…………｝

二：#a b{…………｝

三：#a:b{…………｝

四：#a.b{…………｝

这是四个分别代表着什么含义呢？

一、一个id叫a和一个标签是b的样式

二、一个id叫a下面的一个标签是b的样式

三、一个id叫a的伪类b，例如：a:hover

四、一个id叫a的下面的class叫b的样式

二

1
2
3
4
5
6
7
8
9
10
11
标签选择器       说明：选中指定标签，也叫元素选择器
id选择器 #           说明：选中id属性
class选择器 .       说明：选中class属性
属性选择器   []       说明：这样写"a[id]"，选中指定规则的属性，所在标签。
包含选择器 （空格）   说明：选中所有儿子，孙子等....
子选择器  >       说明：选中所有儿子，不选孙子等...
兄弟选择器  ~      说明：选中后面一个或多个兄弟
相邻选择器  +       说明：选中后面一个兄弟
伪类选择器   :      说明：主要根据用户动作，标签位置，标签状态来选中
伪元素选择器 ::     说明：主要选中一段文本的一行，首字，或前后添加样式
各种选择器都涉及优先级和兼容性，这里就不总结了。

JavaScript

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都可以使用 JavaScript。

js函数和事件

如果是<script>标签中的js脚本，将会在页面加载时执行

通常我们需要在某个事件发生时执行代码，此时需要把js代码封装成函数，放在同一位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>

<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
        }
    </script>
</head>

<body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
</body>

</html>

js运行脚本

vscode

JavaScript VScode | 菜鸟教程

html直接使用

image-20241102212418800

可以通过浏览器查看效果

javascript需要使用nodejs工具进行运行编译

1
console.log("Hello, World");

chrome

Chrome 浏览器中执行 JavaScript | 菜鸟教程

js输出

显示数据

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

常用标签

多栏

1
2
3
4
5
6
7
8
{% tabs tutorial %}
<!-- tab html语句-->

<!-- endtab -->
<!-- tab 实际效果-->

<!-- endtab -->
{% endtabs %}