前端HTML笔记整理

做了一年多得SpringBoot全家桶，纯接口开发，完全实现了前后端分离了，但是项目上又来个项目不是前后端分离得，重新整理下之前得前端知识。

1.骨架

vscode直接！加tab快速生成骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

注释的写法

<!-- 注释内容 --!>
1

现在我们对骨架进行注释

<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta 描述性标签，表示用来描述网站的一些信息-->
    <!--一般用来做SEO（搜索）-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--网站标题-->
    <title>Document</title>
</head>
<!--body代表主体-->
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.网页基本标签

2.1 标题标签

    <!--标题标签-->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
1
2
3
4
5
6

2.2 段落标签

    <!--段落标签-->
    <p>段落1</p>
    <p>段落2</p>
1
2
3

2.3 换行标签

换行1 <br/>      <!--换行标签-->
换行2 <br/>
<!--换行标签比较紧凑，段落标签有明显段间距-->
1
2
3

2.4水平线标签

<hr/>   <!--水平线标签-->
1

2.5 粗体或者斜体

    <!--粗体 斜体-->
    <h1>字体样式标签</h1>
    粗体：<strong>I love you </strong><br />
    斜体：<em>I love you </em><br />

1
2
3
4
5

2.6 空格

&nbsp;  空格
1

3.图像标签和链接标签

3.1图像标签

alt图片未加载 title鼠标悬停

<img src="../xxx.jpg" alt="!图像不见了" title="图片">
1

3.2 链接标签

 <a href="https://www.baidu.com">百度一下你就知道</a>
1

4.块元素和行内元素

块元素：独占一行

…

行内元素：不换行

5.列表标签

5.1 有序列表

每个前面有序号的意思，1.one 2two 3 three

    <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
1
2
3
4
5

5.2 无序列表

但是前面有个黑色大圈圈

    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
1
2
3
4
5

5.3 自定义列表

前面啥也没得没得1 2 3 也没得黑色大圈圈

    <dl>
        <dd>11</dd>
        <dd>22</dd>
        <dd>33</dd>
    </dl>
1
2
3
4
5

6.表格

6.1 基本表格标签

    <table>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12

6.2 表格样式

    <table  border="1px">
        <tr>
            <td colspan="2">1-1</td>
            
            <td>1-3</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
           <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

7 视频和音频

src：资源路径
controls:控制条
autoplay:自动播放

    <video src="D:dy1.mp4" controls autoplay></video>
    <!--音频-->
    <audio src="xxx/xxx/xxx" controls autoplay></audio>
1
2
3

8 页面结构

    <!--页面头部-->
    <header>
        <h2>网页头部</h2>
    </header>
    <section>
        <h2>网页主体</h2>
    </section>
    <footer>
        <h2>网页脚部</h2>
    </footer>
1
2
3
4
5
6
7
8
9
10

9 iframe内联框架

<iframe src="test.html" name="mainFrame" ></iframe>

1
2

10 表单语法

10.1 表单基本

    <form action="xxx/xxx" method="get">
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">
        密码：<input type="password" name="password" placeholder="请输入密码" required="required">
        <input type="submit">
    </form>
1
2
3
4
5

10.2 输入框

<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">
1

10.3 密码框

<input type="password" name="password" placeholder="请输入密码" required="required">
1

10.4 按钮

 <input type="button" name="btn1" value="按钮上文字"><
1

10.5 下拉框

    <select name="location">
        <option value="china">中国</option>
        <option value="us" selected>美国</option>
        <option value="japan">日本</option>
    </select>
1
2
3
4
5

10.6 单选框

性别：<input type="radio" value="boy" name="sex"/>
    <input type="radio" value="girl" name="sex"/>
1
2

10.7 多选框

  爱好：
    <input type="checkbox" value="b" name="hobby" checked >打篮球
    <input type="checkbox" value="s" name="hobby">唱rap
    <input type="checkbox" value="d" name="hobby">跳舞
1
2
3
4

10.8 文本框

反馈：
    <textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
1
2

10.8 文件框

    <input type="file" name="files">
    <input type="button" name="upload" value="上传">
1
2

10.8 表单验证

10.8.1 邮箱验证

    <!-- 邮箱验证-->
    <input type="email" name="email">
1
2

10.8.2 URL验证

    <!-- URL验证-->
    <input type="url" name="url">
1
2

10.8.3 邮箱验证

 <!-- 邮箱验证-->
    <input type="email" name="email">
1
2

10.8.4 数字验证

    <!-- 数字验证 min为最小值 max为最大值 step为每次增加或减小的数值大小-->
    <input type="number" min="20" max="1000" step="10">
1
2

10.8.5 滑块

    <!-- 滑块-->
    <input type="range" name="voice" min="0" max="100" step="3">
1
2

10.8.6 搜索框

    <!--搜索框-->
    <input type="search" name="search">
1
2

相关阅读:
CVPR 2022上人脸识别相关的论文分类整理
41_ue4进阶末日生存游戏开发[判断左右键点击]
电脑在开机时出现了bootmenu
数据挖掘-支持向量机(SVM)+代码实现
链表（1）
创建百科词条烘托人物形象提升形象力
云计算面试题【后期】
【RNN从入门到实战】GRU入门到实战——使用GRU预测股票。
Matlab：在多行上延续长语句
SpringBoot-Web开发-异常处理

原文地址：https://blog.csdn.net/weixin_44480609/article/details/124948830