JavaWeb_02_HTML

JavaWeb
发布日期:   2021-12-16
更新日期:   2021-12-28
文章字数:   4k
阅读时长:   16 分
阅读次数:  

本文介绍Web前端中的HTML相关知识。

1. HTML概述

HTML全称为Hyper Text Markup Language（超文本标记语言），由大量的标签组成，每一个标签都有开始标签和结束标签，结束标签就是开始标签加斜杠组成（当然也有一些单独的标签，称为独目标签）。例如：

1
2
3
4
5
<标签>
    <标签>
        <标签 属性名="属性值" 属性名="属性值">内容</标签>
    </标签>
</标签>

超文本指的是：流媒体、图片、声音、音频等等。

HTML开发的时候使用普通的文本编辑器就行，创建的文本扩展名是.html或者.htm。直接采用浏览器打开HTML文件就是运行。

HTML是W3C组织（世界万维网联盟）制定的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。HTML规范目前最高版本是HTML5.0。无论哪个版本，其基础语法是一样的。所谓的w3school和w3cschool都和W3C组织没有任何关系，只是为了方便国内web前端程序员的开发，提供了大量的帮助文档。

2. 简单例子

简单例子如下所示：

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主题内容，欢迎学习HTML！
    </body>
</html>

<!-- 这是html的注释 -->

以.html或者.htm扩展名格式保存，然后用浏览器打开即可显示生成的网页。第一行的doctype标签表示这是html5，没有则表示html4。

注意，html标签不区分大小写，语法松散不严格。建议按照标准来。

3. 结构

由上面的例子可以看到，HTML的基本框架主要由三个标签组成：

  • 根标签：<html></html>
  • 头标签：<head></head>
  • 身体标签：<body></body>

其中根标签在最外层，头标签和身体标签嵌套在根标签里面，头标签和身体标签是平级关系。除此之外，还有一些附加的标签。

4. HTML的基本标签

标签名 描述
<p></p> 段落标签，标签包含的内容形成一个段落。
<h1></h1> 标题字，即对包含内容的字体大小进行设置。1~6号标题。
<br> 换行，使该标签两侧的内容不在同一行。
<hr> 水平线，网页显示一条线。
<pre></pre> 预留格式，对标签包含的内容，原封不动的显示在网页中，包括换行等等。
<del></del> 删除字，标签中的内容中间带横线。
<ins></ins> 插入字，内容带下划线。
<b></b> 粗体字
<i></i> 斜体字
a<sup>b</sup> a的右上角显示b
a<sub>b</sub> a的右下角显示b
<font></font> 字体标签，对标签包含的内容的字体进行设置，比如颜色大小等等。
<meta charst=”utf-8”> 告诉浏览器，以utf-8形式的字符编码集打开该文件。注意，并不是设置该文件的字符编码方式。

5. 实体符

对于大于号，小于号等这种和标签冲突（一样，会被当做标签，类似保留字）的符号，可以采用特殊的实体符来表示。实体符号以 & 开始，以 ; 结束。

实体符 描述
&lt; 小于号
&gt; 大于号
&nbsp; 空格

6. 表格

  • 表格采用<table></table>标签，
  • 表格中有若干行，行采用<tr></tr>标签，
  • 行中有若干个单元格（列），单元格采用<td></td>标签。
  • 对于表格的第一行，一般是列标题，可以采用<th></th>标签，自动加粗居中。

表格可以设置边框的宽度，默认是0，即不显示边框；也可以设置表格的宽度高度等等。表格、行以及单元格都可以设置对其方式，三行三列的表格如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1px" width="300px" height="150px">
    <tr align="center">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td align="center">d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr>
        <td>z</td>
        <td>x</td>
        <td>c</td>
    </tr>
</table>

效果如下所示：

html_02.png (321×174) (gitee.io)

6.1 单元格合并

有时候，表格中的单元格并不是那么规整，有的单元格可能跨两行，有的可能跨两列。那么这种表格怎么设置呢？效果如下所示：

html_01.png (309×161) (gitee.io)

可以这样认为，这种效果是：单元格f将单元格c合并了，可以这样实现：不再写c单元格，在f单元格的基础上，修改其属性 rowsapn="2"，也就是该单元格跨两行。对于列也是如此，不再写被合并的单元格，而是修改合并单元格的属性colspan="n"，该单元格跨n列。

html_03.png (321×168) (gitee.io)

6.2 表格结构

表格除了上述部分，也分为head、body、foot三部分。分别用标签<thead>、<tbody>、<tfoot>表示。这三类标签不是table所必须的，只是这样说便于后去JS代码的编写。

本质上，表格还是由若干个行组成，每行由若干个单元格组成。只不过<thead>、<tbody>、<tfoot>将这些行划分成若干部分，后续操作比较方便。简单例子如下所示：

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
<table border="1px" width="300px" height="150px">
    <thead>
        <tr align="center">
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>d</td>
            <td>e</td>
            <td>f</td>
        </tr>
        <tr>
            <td>z</td>
            <td>x</td>
            <td>c</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>z</td>
            <td>x</td>
            <td>c</td>
        </tr>
    </tfoot>
</table>

7. body的一些属性

属性名 描述
bgcolor 设置背景颜色
background 设置背景图片

8. 图片和超链接

8.1 图片

图片的标签为<img src="路径" width="" height="" title="" alt="" />，注意可以仅仅设置图片的宽度（高度会进行等比例缩放），如果宽度和高度一起设置的话，容易改变图片原始的比例。其中title表示鼠标悬停时显示的信息，alt表示图片加载失败显示的信息。

注意，如果标签成对，而标签并不包含内容的话，可以省略后面的结束标签，在开始标签后面加上斜杠。

8.2 超链接

超链接的标签为<a href="url">内容</a>，href是hot refreence的意思，即热引用。url为空的话，表示当前路径。

超链接中有一个target属性，可取值：

  • _blank：新开一个窗口
  • _self：在当前窗口跳转连接
  • _top：顶级窗口
  • _parent：父窗口

超链接的作用：通过超链接可以从浏览器向服务器发送请求。浏览器向服务器发送数据（请求：request），服务器向浏览器发送数据（响应：response）。B/S结构的系统，每一个请求都会对应一个响应。

用户点击超链接和用户在浏览器地址上直接输入URL，本质上没什么区别，都是向服务器发送请求。

9. 列表

列表分为有序列表和无序列表

无序列表用</ul></ul>标签表示，用<li></li>表示列表项，无序列表可以嵌套，即每一个列表项可以是一个无序列表。<ul>有一个属性type，规定了列表前面的形状，有circle、square、disc。

1
2
3
4
5
6
7
8
9
10
11
<ul type="circle">
    <li>中国
        <ul>
            <li>北京</li>
            <li>天津</li>
            <li>上海</li>
        </ul>
    </li>
    <li>美国</li>
    <li>日本</li>
</ul>

无序列表用<ol></ol>标签表示，用<li></li>表示列表项，同样可以嵌套，同样有type类型，设置具体的列表表示形式。

1
2
3
4
5
6
7
8
9
10
11
<ol>
    <li>水果
        <ol>
            <li>苹果</li>
            <li>西瓜</li>
            <li>桃子</li>
        </ol>
    </li>
    <li>蔬菜</li>
    <li>甜点</li>
</ol>

10. 表单（重要）

表单一个重要作用就是收集信息，将一组信息打包传送（提交）给服务端，一个网页中可以有多个表单。所以，表单至少有两个重点，一个是信息的收集，一个是提交的方式以及提交的地址。

  • 数据收集：form标签内的各种静态输入框均可。
  • 提交的方式以及提交的地址：
    • 地址填写在action属性中，action属性和超链接中的href属性一样，都可以向服务器发送请求（request），页面转向该url，并且附加提交的数据。
    • 提交的方式在method属性中，有get和post两种方式，默认是get方式。采用get方式，提交的时候，表单的信息会显示在浏览器地址栏中；采用post方式，提交的时候，表单的信息不会显示在地址栏中。当用户提交的信息中有敏感信息，建议采用post方式提交。二者提交的信息格式是一样的，只不过post不会显示在地址栏中。

表单的语法结构如下所示：

1
2
3
4
5
6
7
8
9
<form action="http://127.0.0.1:8080/jd/login">
    
    <!-- 只提交带有name属性的标签中的值，下面 备注输入框中，没有naem属性，不会被提交 -->
    用户名：<input type="text" name="username" /><br>
    密码：<input type="password" name="userpwd" /><br>
    备注：<input type="text" /><br>
    <!-- submit类型的input输入框，则是具有提交功能的按钮，点击按钮则直接提交到action的连接中 -->
    <input type="submit", value="按钮显示的内容" />
</form>

注意，表单是以什么格式提交数据给服务器的？

运行上述网页后，浏览器中的url是：http://127.0.0.1:8080/jd/login?username=qwer&userpwd=asdf

所以，表单提交的格式是：

action?name=value&name=value&name=value…

也就是将具有name属性的字标签以及name属性值拼接在一起提交到服务器上。这是HTTP协议规定的，必须以这种格式提交给服务器。所以，如果想要提交该数据，那么所在子标签必须写上name属性值，否则不满足要求，也就不会提交该数据。

10.1 案例：用户注册表单的实现

用户注册表单，需要以下信息：

  • 用户名（text文本框，可以设置maxlength、readonly和disabled属性）

    1
    <input type="text" name="username" />

  • 密码（password文本框）

    1
    <input type="password" name="password" />

  • 确认密码（password文本框）

    1
    <input type="password" />

    注意，这里不用写 value，因为确认密码直接本地确认即可，没必要发送到服务器端确认。

  • 性别（radio单选框，注意，多个子项的 name 值必须一样。value必须手动指定。增加 checked 属性表示默认值）

    1
    2
    <input type="radio" name="gender" value="1" />男
    <input type="radio" name="gender" value="0" checked/>女

  • 兴趣爱好（checkbox复选框，子项的 name 值必须一样，value必须手动指定。）

    1
    2
    3
    <input type="checkbox" name="interest" value="smoke" />抽烟
    <input type="checkbox" name="interest" value="drink" />喝酒
    <input type="checkbox" name="interest" value="firehair" />烫头

  • 学历（select下拉框，selected属性默认值）

    1
    2
    3
    4
    5
    6
    <select name="grade">
        <option value="gz">高中</option>
        <option value="dz">大专</option>
        <option value="bk" selected>本科</option>
        <option value="ss">硕士</option>
    </select>

    其中，设置multiple属性值为multiple，可将下拉框变为多选框。size属性设置显示的条目数量。

  • 简介（textarea文本域，rows指明行数，cols指明列数）

    1
    <textarea rows="10" cols="10" name="introduce"></textarea>

将上面的内容编写在表单（默认get方式提交）中，这样发送的表单的内容如下所示：

1
http://127.0.0.1:8080/tb/login?username=asdf&password=qwer&gender=1&interest=smoke&interest=drink&interest=firehair&grade=ss&introduce=这是一个文本域，可以填写很多内容

采用post方式提交，地址栏的信息如下所示：

1
http://127.0.0.1:8080/tb/login

既然如此，那么其实超链接也是可以提交数据给服务器的，只要构造上述get方式的地址栏相关信息，实际上也是可以提交的。但是缺点就是超链接中的信息是写死的，并且不安全，即只能是get请求。

11. 典型控件

11.1 file控件

该控件主要用于文件上传，语法结构如下所示：

1
<input type="file" />

11.2 hidden控件

该控件主要用于隐式提交数据，就是提交默认值。该控件在网页上看不到，但是表单提交的时候会自动提交给服务器，所以在写该控件的时候，必须写上name属性和value属性，语法结构如下所示：

1
<input type="hidden" name=“111” />

12. id属性

在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一表示，相当于身份证号，所以在同一个HTML文档中id值不能重复。

但是，表单提交数据的时候，只和name有关，和id无关。

id的作用？

id属性的存在，是为了更方便的获取这个元素。JavaScript可以对HTML文档中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。

13. div和span标签

div和span标签都可以成为“图层”，图层的作用是为了保证页面可以灵活的布局。最开始的网页是采用table进行布局的，但是table不灵活，太死板。现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。

这个图层盒子，通过盒子的左上角顶点坐标来定位，因为定位可以定位到任意位置，可以嵌套，所以图层的布局就比较方便。默认情况下div独占一行，span不会独占一行

1
2
<div></div>
<span></span>

14. 总结

可以看到，其实整个HTML文档相当于一棵树，根节点是HTML标签，然后有两个子标签以及若干个后代标签。这棵树被称为DOM树，也就是document的缩写。Javascript主要是对这棵DOM树上的节点进行增删改的。

15. 备注

参考B站《动力节点》。

文章作者: 浮云
文章链接: https://ihianian.github.io/2021/12/16/JavaWeb-02-HTML/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 浮云 !
JavaWeb
赏
  目录