HTML学习

HTML学习笔记（狂神说Java）

狂神说B站视频：https://www.bilibili.com/video/BV1x4411V75C?p=1

W3School：https://www.w3school.com.cn/html/index.asp

一、初识HTML

什么是HTML

Hyper Text Markup Language(超文本标记语言)

HTML发展史

20200516202636255

HTML5 + CSS

HTML的优势

  • 各个浏览器厂商对HTML5的支持

  • 市场需求

  • 跨平台

W3C标准

World Wide Web Consortium(万维网联盟)

  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM（文档对象模型）、ECMAScript)

常见软件

  • 记事本
  • IDEA
  • Hbuilds

网页基本结构

20200516202636208

注释

快捷键：ctrl+/

1
<!-- 我是注释 -->

Doctype

告诉浏览器使用规范！

1
<!DOCTYPE html>

HTML

总标签

1
<html lang="en">

代表网页头部

body

代表网页主题

title

网页标题

image-20210213154931293

meta

描述性标签，用来存放描述网站的一些信息

meta一般用来做SEO

image-20210213155238818

image-20210213160036487

二、网页基本标签

标题标签

image-20210213160731950

段落标签

1
<p></pp>

快捷键：p+tab

image-20210213161110453

换行标签

1
<br>

image-20210213161310803

水平线标签

1
<hr/>

image-20210213161449148

字体样式标签

粗体、斜体

1
2
粗体：<strong></strong>
斜体：<em></em>

image-20210213161648832

注释和特殊符号

ctrl + / : 注释快捷键

多行注释

1
2
3
4
5
6
<!--多行注释-->
<!--
aaa
bbb
ccc
-->

空格

1
空格：&nbsp;

image-20210213162109155

大于、小于、版权所有

1
2
3
大于：&gt;
小于：&lt;
版权：&copy;

image-20210213162553458

三、图像标签

1
2
3
4
5
6
7
8
9
<!--img学习
src : 图片地址(必填项)
        相对地址
        绝对地址
        ../ --上一级
alt : 图片不能显示时的文字
title : 悬停文字
-->
<img src="resources\01.jpg" alt="我也不知道是个啥" title="悬停文字" width="100" height="100">

image-20210213164506250

四、超链接标签

页面间链接

1
2
3
4
5
6
7
8
9
10
11
12
<!--a标签
href : 必填项，表示要跳往哪个页面
target : 表示窗口从哪里打开
    _blank:在新标签页打开
    _self:在本网页打开(默认)
-->
<a name="top" href="demo01.html" target="_blank">点击我进入第一个标签</a>
<a href="https://baixf.tk" target="_self">点击我进入白小飞的主页</a>
<!--图像超链接-->
<a href="https://blog.baixf.tk">
    <img src="resources/01.png" alt="呜呜" height="300" width="500">
</a>

锚链接

1
2
3
4
5
6
7
<a name="top"></a>
<!--锚链接:可用于本网页内跳转，也可以切换网页跳转
1.需要一个锚标记
2.跳转到标记
3.#表示
-->
<a href="#top">回到顶部</a>

功能性链接

1
<a href="mailto:[email protected]">邮我</a>
1
2
3
4
<!--QQ推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="qwq" title="qwq"/>
</a>

五、拓展

行内元素

无论内容多少，该元素独占一行

1
2
<p></p>
<h1></h1h1>

块元素

内容撑开宽度，左右都是行内元素的可以排在一行

1
2
3
<a></a>
<strong></strong>
<em></em>

六、列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷的获取相应的信息。

列表的分类

  • 无序列表
  • 有序列表
  • 定义列表
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
<ol>
    <li>java</li>
    <li>python</li>
    <li>linux</li>
    <li>c</li>
</ol>
<hr>
<ul>
    <li>java</li>
    <li>linux</li>
    <li>python</li>
</ul>
<hr>
<dl>
    <dt>课程
        <dd>java</dd>
        <dd>python</dd>
        <dd>c++</dd>
    </dt>

    <dt>日子
        <dd>周一</dd>
        <dd>周五</dd>
        <dd>周末</dd>
    </dt>

image-20210213172757267

七、表格

为什么要使用表格

  • 简单通用
  • 结构稳定

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
1
2
3
表格table
行 ：tr
列 ：td
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

image-20210213173823142

跨行跨列实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--表格table
行 ：tr
列 ：td
-->

<table border="1px">
    <tr>
<!--        colspan ：跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--        roespan : 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

image-20210213174404186

八、媒体元素

视频元素

  • video

音频元素

  • audio
1
2
3
4
5
6
7
8
<!--音频和视频
src : 资源路径
controls ： 控制条
autoplay : 自动播放
-->
<video src="../resources/a.mp4" controls autoplay></video>

<audio src="../resources/a.mp3" controls autoplay></audio>

九、页面结构分析

image-20210213181104244

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>网页主体</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

十、iframe内联框架

1
<iframe src="path" name=""></iframe>
1
2
3
4
5
6
7
8
9
10
11
12
<!--
iframe内联框架
src : 地址
w-h : 宽度高度
-->
<iframe name="hello" src="https://www.baidu.com" frameborder="0" width="800px" height="450px"></iframe>

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

<a href="https://blog.baixf.tk" target="hello">点击跳转</a>

十一、表单post和get请求

表单语法

1
2
3
4
<form method="post" action="result.html">
    <!--name一般都得有，name是上传提交的键值对-键值-->
    <input type="" name="">
</form>

image-20210213205847156

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--表单form
action : 表单提交的位置，可以是网站，也可以是一个请求处理地址
method : post; get 提交方式
    get方式提交 ： 在url看到提交的信息，不安全，高效
    post方式提交 ： 比较安全 ， 传输大文件-->
<form action="demo01.html" method="post">

<!--    文本输入框 ： input typr = "text"-->
    <p>名字： <input type="text" name="username"></p>
<!--    密码框 ： -->
    <p>密码： <input type="password" name="password"></p>

    <p>
    <input type="submit">
    <input type="reset">
    </p>
</form>

image-20210213212505349

image-20210213212538833

image-20210213212734864

表单元素格式

image-20210213213621240

1
2
3
4
5
6
7
8
9
<form action="demo01.html" method="get">

<!--    文本输入框 ： input type = "text"
value = "baixf-xyz" 默认初始值
maxlength="10"  最长写几个字符
size="30"  文本框的宽度
-->
    <p>名字： <input type="text" name="username" value="baixf-xyz" maxlength="10" size="30"></p>
</form>

image-20210213215355847

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="demo01.html" method="get">
<!--    单选框标签
input type : "radio"
value : 单选框的值
name : 标志组
-->
    <p>性别：
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
    </p>

    <p>
    <input type="submit">
    <input type="reset">
    </p>
</form>
1
username=baixf-xyz&password=000&sex=boy
1
2
3
4
5
6
7
8
9
10
<form action="demo01.html" method="get">
<!--    多选框
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="study" name="hobby">学习
    <input type="checkbox" value="fish" name="hobby">摸鱼
</p>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="demo01.html" method="get">
<!--    按钮
button : 普通按钮
image : 图像按钮
submit : 提交按钮
reset : 重置按钮(清空表单)
-->
    <p>
        <input type="button" value="点击试试">
        <input type="image" src="resources/01.png" width="20%">
    </p>

    <p>
    <input type="submit">
    <input type="reset" value="清空">
    </p>
</form>
1
hobby=sleep&hobby=code&hobby=study&hobby=fish

image-20210213220655172

1
2
3
4
5
6
7
8
9
10
11
<form action="demo01.html" method="get">
<!--下拉框 列表框-->
    <p>下拉框：
        <select name="国家">
        <option value="us">美国</option>
        <option value="india">印度</option>
        <option value="china" selected>中国</option>
        <option value="en">英国</option>
        </select>
    </p>
<form>

image-20210213221858416

1
2
3
4
5
<form action="demo01.html" method="get">
<p>文本域:
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>
</form>

image-20210213222220130

1
2
3
4
5
6
<form action="demo01.html" method="get">
    <p>文件域：
        <input type="file" name="files">
        <input type="submit">
    </p>
</form>

image-20210213222524736

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="demo01.html" method="get">
<p>邮箱：
    <!--    邮箱验证-->
    <input type="email" name="email">
    </p>
    <p>url:
    <!--    url-->
    <input type="url" name="url">
    </p>
    <p>数字：
    <!--    数字-->
    <input type="number" name="num" max="100" min="10" step="10">
    </p>

    <p>滑块：
        <input type="range" min="10" max="100" name="voice" step="2">
    </p>

    <p>搜索：
        <input type="search" name="search">
    </p>
</form>

image-20210213224027449

表单的应用

  • 隐藏域

hidden:传递默认值

  • 只读

readonly:只读标签

  • 禁用

disable:禁用，不可选

增强鼠标可用性

1
2
3
4
5
6
7
<form action="demo01.html" method="get">
<!--    增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试！</label>
        <input type="text" id="mark">
    </p>
</form>

image-20210213224822940

十二、表单初级验证

为什么需要表单验证

  • 减轻服务器压力
  • 保证数据安全性

常用方式

  • placeholder（提示信息，用于输入框中）

image-20210213225133867

  • required（非空判断,不能为空）

image-20210213225409063

  • pattern（正则表达式）

十三、小结

20200516202636178

参考文章

  1. 狂神说B站视频 ↩
  2. W3School教程 ↩
  3. 最全的常用正则表达式大全 ↩
学习 > 网站运维
#狂神 #HTML #表单
HTML学习
https://blog.baixf.shop/2021/02/13/网站运维/HTML学习/
作者
白小飞
发布于
2021年2月13日
许可协议