3小时前端入门教程（HTML+CSS+JS） 学习笔记

https://www.bilibili.com/video/BV1BT4y1W7Aw/?spm_id_from=333.1387.homepage.video_card.click&vd_source=fe62f83600e718859059db051a44844c

https://docs.geeksman.com/front-end/1.front-end-html.html#区块

4.常用文本标签

html 通过一系列标签来定义东西。

双标签：开始标签+结束标签

标题标签

<h1></h1>
<h2></h2>

段落标签

<p></p>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 练习</title>
</head>
<body>
    <h1>你好12</h1>
    <p>hi:<b>字体加粗</b></p>
    <p>qwq:<strong>qaq</strong></p>
    <p><i>斜体</i> <u>下划线</u><s>删除线</s></p>

    <ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
    </ul>

    <ol>
        <li>val1</li>
        <li>val2</li>
    </ol>
    <h1>table row</h1>
    <h1>table data</h1>
    <h1>table header</h1>
    <table border=""1>
        <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
        </tr>
        <tr>
            <td>val1</td>
            <td>val2</td>
            <td>val3</td>
        </tr>
        <tr>
            <td>ovo1</td>
            <td>ovo2</td>
        </tr>
    </table>
</body>
</html>

5.HTML标签属性

基本语法（结束标签是一样的，只在开始标签中加入）

<开始标签 属性名="属性值">

超链接

鼠标放在 target 上可以看属性值对应的可选的东西。

<a href="https://www.baidu.com" target="_top">这是一个超链接</a>

图片

src 可以是图片的链接，也可以是图片的绝对路径，甚至你把图片和代码放在同一个文件夹中，可以使用相对路径。

alt 是图片无法打开后显示的文字

width 宽度

height 高度

<img src="https://img1.baidu.com/it/u=721668752,3489317202&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1079" alt="无法显示" width="100" height="300">

换行

<br> 直接换行
<hr> 有水平分割线

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_top">这是一个超链接</a>
    <hr>
    <a href="https://www.baidu.com" target="_top">这是一个超链接</a>
    <hr>
    <img src="https://img1.baidu.com/it/u=721668752,3489317202&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1079" alt="无法显示" width="100" height="300">
</body>
</html>

6.块元素与行内元素

区块

当涉及到 HTML 元素时，可以将它们分为两个主要类别：行内元素 和 块级元素。这些不同类型的元素在 HTML 文档中的呈现和布局方面有很大的不同。下面是关于这两种类型的元素的详细说明：

  • 块级元素（block）：（其实就是单独占据一行） 块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。可以包含其他块级元素和行内元素。常见的块级元素包括 <div>, <p>, <h1> 到 <h6>, <ul>, <ol>, <li>, <table>, <form>等。

  • 行内元素（inline）：（不自动换行，不单独占据一行） 行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。行内元素通常在同一行内呈现，不会独占一行。它们只占据其内容所需的宽度，而不是整行的宽度。行内元素不能包含块级元素，但可以包含其他行内元素。常见的行内元素包括 <span>, <a>, <strong>, <em>, <img>, <br>, <input> 等。

div

是一个块级标签，来分割区域，导航，内容，这些。

<div class="nav"></div> nav 是 navigator 导航
<div class="content"></div> content 内容

span

因为 p 是会块级元素，会换行。

当我们不想这样，却还要显示文本的时候，可以用 span（跨度；跨越）。

同时也可以与行内元素 a 一起用，补充文字说明。

<span>请点击 <a href="https://www.baidu.com">这里</a></span>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="ovo">链接1</a>
        <a href="ovo">链接1</a>
        <a href="ovo">链接1</a>
        <a href="ovo">链接1</a>

        <p>你好</p>
    </div>
    <div class="content">
        <h1>标题</h1>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <span>你好 这是span</span><span>你好 这是span</span><span>你好 这是span</span>
        <hr>
        <span>请点击 <a href="https://www.baidu.com">这里</a></span>
    </div>
</body>
</html>

HTML表单

用 span 来添加文字辅助。

form

所有表单的东西都要丢在 form 之中。

<form action="#" ></form> 提交到 action 给的链接

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" >
        <span>姓名</span>
        <input type="text" id="qwq" placeholder="请输入">
        <br><br>
        <span>电话 </span>
        <input type="password" value="123">
        <br><br>
        <span>选择题</span>
        <input type="radio" name="xuanze">A
        <input type="radio" name="xuanze">B
        <input type="radio" name="xuanze">C
        <br><br>
        <span>多选 </span>
        <input type="checkbox" name="duoxuan">A
        <input type="checkbox" name="duoxuan">B
        <input type="checkbox" name="duoxuan">C
        <br><br>
        <input type="submit" value="ovo">
    </form>
</body>
</html>
posted @ 2025-06-18 16:57  FxorG  阅读(69)  评论(0)    收藏  举报