1. 初始HTML

1.1 HTML介绍

  • HTML - HyperTextMarkupLanguage（超文本标记语言）
  • HTML5:
    • 提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
  • 优势：
    • 世界知名浏览器厂商对对HTML5的支持
    • 市场的需求
    • 跨平台

1.2 W3C

  • World Wide Web Consortium (万维网联盟)

    • 成立与1994年，Web技术领域最具权威和影响力的国际中立性技术标准机构

  • W3C标准内容

    • ==结构==化标准语言（HTML，XML)
    • ==表现==标准语言(CSS)
    • ==行为==标准语言（DOM,ECMAScript)

1.3 常见IDE

  • 记事本
  • DreamWeaver
  • IDEA
  • WebStorm
  • ……

1.4 HTML基本介绍

HTML基本介绍

  • \、\</body>等成对的标签，分别==开放标签==和==闭合标签==
  • 单独呈现的标签（空元素），如\
    ;意为用/来关闭空元素

1.5 IDEA使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<!--这是一个注释-->
<!--DOCTYPE: 浏览器使用规范-->
<html lang="en">

<!-- head：网页头部 -->
<head>
    <!-- meta：元数据-描述性质标签，描述网站的信息 -->
    <!-- meta-一般用来做SEO   -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Bayyys">
    <meta name="description" content="Bayyys的第一个网页">

    <!--  title：网页标题  -->
    <title>First Web</title>
</head>

<!-- body：网页主体 -->
<body>

hello world！

</body>
</html>

2. 网页基本标签

2.1 标题标签

<h1>一级标签</h1>

2.2 段落标签

<p></p>

2.3 换行标签

<br/> (<br>)

2.4 字体样式标签

2.4.1 粗体

  • <strong> </strong>
  • <b> </b>

2.4.2 斜体

  • <em> </em>
  • <i> </i>

2.5 注释和特殊符号

  • &特殊符号;
  • 空格：&nbsp;
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>这是一个  段落标签

  还没有结束
</p>

<!--换行标签-->
test<br/>

<!--水平线标签-->
<hr>
<!--建议加上自闭合/-->
<hr/>

<!--注释标签-->
<!--这是一个注释标签-->

<!--加粗标签-->
<b>这是一个加粗标签</b>
<strong>这是一个加粗标签</strong>

<!--斜体标签-->
<i>这是一个斜体标签</i>
<em>这是一个斜体标签</em>

<br/>
<!--下划线标签-->
<u>这是一个下划线标签</u>

<!--删除线标签-->
<del>这是一个删除线标签</del>

<br/>
<!--上标标签-->
<sup>这是一个上标标签</sup>

<!--下标标签-->
<sub>这是一个下标标签</sub>

<br/>
<!--特殊符号-->
<b>空格：</b> 这是一堆空格&nbsp;&nbsp;空格结束<br/>
<b>小于号：</b> &lt;<br/>
<b>大于号：</b> &gt;<br/>
<b>引号：</b> &quot;<br/>
<b>单引号：</b> &apos;<br/>
<b>版权符号：</b> &copy;<br/>
<b>注册商标：</b> &reg;<br/>
<b>商标符号：</b> &trade;<br/>
<b>欧元符号：</b> &euro;<br/>

</body>
</html>

2.6 列表标签

2.6.1 有序标签(ol)

1
2
3
4
5
6
<ol>
	<li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
    ...
</ol>

2.6.2 无序标签(ul)

1
2
3
4
5
6
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
  ...
</ul>

2.6.3 自定义标签(dl)

1
2
3
4
5
6
7
8
9
10
11
<dl>
    <dt>自定义列表1</dt>
    <dd>自定义列表1的元素1</dd>
    <dd>自定义列表1的元素2</dd>
    <dd>自定义列表1的元素3</dd>

    <dt>自定义列表2</dt>
    <dd>自定义列表2的元素1</dd>
    <dd>自定义列表2的元素2</dd>
    <dd>自定义列表2的元素3</dd>
</dl>

2.7 表格标签

2.7.1 基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

2.7.2 基本表格标签

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!-- table: 表格 -->
<!-- border: 表格边框 -->
<!-- cellspacing: 单元格间距 -->
<!-- cellpadding: 单元格内边距 -->
<!-- width: 表格宽度 -->
<!-- height: 表格高度 -->
<!-- align: 表格对齐方式 -->
<!-- bgcolor: 表格背景颜色 -->
<!-- bordercolor: 表格边框颜色 -->
<!-- background: 表格背景图片 -->
<!-- valign: 表格垂直对齐方式 -->
<!-- halign: 表格水平对齐方式 -->
<!-- nowrap: 单元格内容不换行 -->
<table border="2px" cellpadding="10px" cellspacing="5px">
    <!-- caption: 表格标题 -->
    <caption>学生成绩表</caption>

    <!-- tr: 表行 -->
    <tr>
        <!-- th: 表头 -->
        <!-- colspan: 跨列 -->
        <th colspan="3">学生成绩</th>
    </tr>

    <tr>
        <!-- rowspan: 跨行 -->
        <td rowspan="2">Bayyy</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">dnnner</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

2.8 图像标签

  • 常见图片格式
    • JPG
    • GIF
    • PNG
    • BMP
  • <img src="path" alt="图像的替代文字" title="悬停文字" width="300" height="100">
1
2
3
4
5
6
7
<!-- img标签的使用
src: 图片的路径
alt: 图片的描述-路径出错时该位置的替代文字
width: 图片的宽度
height: 图片的高度
-->
<img src="../resources/image/campus.jpg" alt="这是图片的注释" title="悬停文字" width="300" height="100">

2.9 链接标签

2.9.1 文本超链接

1
2
3
<a href="3.图像标签.html" target="_blank">点击跳转到图像标签</a>
<a href="https://www.baidu.com" target="_parent">点击跳转到百度</a>
<a href="5.链接标签.html" target="_blank">点击重复打开</a>

2.9.2 图像超链接

1
2
3
4
<!-- 图像链接 -->
<a href="https://www.baidu.com">
    <img src="../resources/image/campus.jpg" alt="这是图片的注释" title="悬停文字" width="300" height="100">
</a>

2.9.3 超链接

  • 页面间超链接
    • 从一个页面链接到另一个页面

1. 锚链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 锚点链接 -->
<p>
    <a id="top">全局顶部</a>
</p>
<a href="#bottom">回到底部</a>
<br>

<a href="#top">回到顶部</a>

<!-- 更多内容 -->

<p>
    <a id="bottom">全局顶部</a>
</p>

<!-- 页面间跳转 -->
<a href="5.链接标签.html#bottom">跳转到链接标签的底部</a>

2. 功能性链接

1
2
3
4
5
6
7
8
9
<!-- 功能性链接
    mailto: 发送邮件
    tel: 拨打电话
	拓展：QQ推广
-->
<a href="mailto:22271096@zju.edu.cn">邮件链接</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=475417309&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:475417309:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

3. 网页框架标签

3.1 行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • (p、h1-h6…)
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排在一行
    • (a.strong.em…)

3.2 媒体元素

  • 元素内容

    • 视频元素：vedio

      • ```html 
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13

            

        - 音频元素：audio

          - ```html
            <!--audio
            src: 音频的路径
            controls: 显示控制条
            autoplay: 自动播放
            loop: 循环播放
            -->
            <audio src="../resources/audio/en.mp3" controls autoplay loop></audio>

3.3 网页基本框架

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容

3.4 iframe内联框架

image-20230513150140209

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
<!-- iframe 内联框架
src: 内联框架的路径
name: 内联框架的名称
scrolling: 是否显示滚动条
border: 是否显示边框
frameborder: 是否显示边框
framespacing: 内联框架与边框之间的间距
allowfullscreen: 是否允许全屏播放
-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"> </iframe>
<br>

<iframe src="https://www.bilibili.com" frameborder="0" width="1000px" height="800px"></iframe>
<br>

<iframe src="https://www.bilibili.com/video/BV1x4411V75C/?p=11&spm_id_from=pageDriver&vd_source=2228fbb3090a9774de8d595d37290e9e" name="wait" frameborder="0" width="1000px" height="800px"></iframe>
<!-- target: 指定链接的打开方式 -->
<!-- target 与 name="wait" 相对应
点击跳转到指定的内联框架
-->
<a href="https://www.bilibili.com" target="wait">点击跳转</a>

3.5 表单用法

3.5.1 表单语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- form标签的使用
method: 提交方式
    post: 提交数据不会显示在地址栏中, 安全, 低效, 传输数据量大
    get: 提交数据会显示在地址栏中, 不安全, 高效, 传输数据量小
action: 提交的地址, 一般是服务器的地址, 也可以是请求处理地址
-->
<form method="get" action="3.图像标签.html">
    <p> 名字：<input name="name" type="text"></p>
    <p> 密码：<input name="pass" type="password"></p>
    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reset" name="Reset" value="重新填写">
    </p>
</form>

3.5.2 表单元素属性

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初识宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，表单元素以像素为单位
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否默认被选中

3.5.3 基本表单内容

1. 账号密码

1
2
3
4
5
6
<p> 名字：
    <input name="name" type="text" value="test" maxlength="8" size="30"></p>

<p> 
        密码：<input name="pass" type="password">
</p>

2. 单选框

1
2
3
4
5
6
7
8
9
<!-- 单选框
     type: radio
     name: 单选框的组名, 用于区分不同的单选框
     value: 单选框的值, 用于区分不同的单选框
     -->
    <p> 性别：
        <input type="radio" name="sex" value="boy" checked/>男
        <input type="radio" name="sex" value="girl"/>女
    </p>

3. 多选框

1
2
3
4
5
6
7
8
9
10
<!-- 多选框
type: checkbox
name: 多选框的组名, 用于区分不同的多选框
value: 多选框的值, 用于区分不同的多选框
-->
<p>
    <input type="checkbox" name="hobby" value="sleep"/>睡觉
    <input type="checkbox" name="hobby" value="eat"/>吃饭
    <input type="checkbox" name="hobby" value="play" checked/>玩耍
</p>

4. 按钮

1
2
3
4
5
6
7
8
9
10
11
<!-- 按钮
type: button
type: image
type: submit
type: reset
-->
<p>
    <input type="button" name="btn1" value="点击！！！">
    <br>
    <input type="image" src="../resources/image/campus.jpg" name="btn2" value="图片点击！！">
</p>

5. 下拉列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 下拉列表
name: 下拉列表的组名, 用于区分不同的下拉列表
size: 下拉列表的显示行数
multiple: 是否允许多选
-->
<p>下拉框：
    <select name="select" size="1">
        <option value="0" selected>默认值</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
    </select>
</p>

6. 文本域

1
2
3
4
5
6
7
8
<!-- 文本域
name: 文本域的组名, 用于区分不同的文本域
cols: 文本域的列数
rows: 文本域的行数
-->
<p>反馈：
    <textarea name="textarea" cols="30" rows="10">这是文本域的默认值</textarea>
</p>

7. 隐藏域

1
2
3
4
5
6
7
<!-- 隐藏域: 用于传递数据, 不会显示在页面上
name: 隐藏域的组名, 用于区分不同的隐藏域
value: 隐藏域的值
-->
<p>
    <input type="hidden" name="hidden" value="这是隐藏域的默认值">
</p>

8. 文件域

1
2
3
4
5
6
7
8
<!-- 文件域
name: 文件域的组名, 用于区分不同的文件域
accept: 文件域接受的文件类型
-->
<p>
    <input type="file" name="file" accept="image/*">
    <input type="button" value="上传" name="upload">
</p>

3.5.4 带验证表单内容

1. 内容验证

  • 邮件
  • 网址
  • 数字
1
2
3
4
5
6
7
8
9
10
<!-- 需要验证的表单
email: 邮件, 用于区分不同的邮件(需要附带一个@符号)
url: 网址(需要附带一个http://或者https://)
number: 数字(需要附带一个数字)
-->
<p>
    邮件：<input type="email" name="email">
    网址：<input type="url" name="url">
    数量：<input type="number" name="number" max="10" min="0" step="1">
</p>

2. 滑块

1
2
3
4
5
6
7
8
<!-- 滑块
max: 滑块的最大值
min: 滑块的最小值
step: 滑块的步长
-->
<p>
    音量：<input type="range" name="voice" max="10" min="0" step="1">
</p>

3. 搜索框

1
2
3
4
5
6
<!-- 搜索框
placeholder: 搜索框的提示信息
-->
<p>
    <input type="search" name="search" placeholder="请输入搜索内容">
</p>

3.5.5 表单的应用

  • readonly：只读

  • disabled：禁用

  • hidden：隐藏

  • 增强鼠标操作

    • ```html 

      <label for="point_test">文本框：</label>
<input type="text" name="txt" id="point_test" autofocus autocomplete="on">
      </p>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

      # 4. 表单初级验证

      ## 4.1 基本方式

      - placeholder：提示性消息

        - ```html
          <p>
              <input type="search" name="search" placeholder="请输入搜索内容">
          </p>

  • required：非空判断

  • pattern：正则表达式判断