Featured image of post HTML Learn
Website

HTML Learn

HTML Learn Note

本文是html学习笔记.

内容一览

  • html 概述
    • 第一个html文件
  • 基本标签
  • 实体符号
  • 表格
  • 背景图片，背景颜色
  • 超链接
  • 列表
  • 表单
    • html中的id属性
    • div和span

HTML 概述

从头开始——第一个html的写法，参考代码文件第一个html：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- 根 -->
 <!doctype html>
<html>
    <!-- 头 -->
    <head>
        <title>
            标签页标题
        </title>
    </head>
    <!-- 网页体，内容显示到网页上 -->
    <body>
        My first HTML page.
        我的第一个HTML文件。
        <!-- 注释信息的写法 -->
    </body>
</html>

基本标签

小知识：html标签不区分大小写；少个尾标签也行。

段落

<p>是段落标签，其中的内容成为一段落。

标题字

<h1>到<h6>

换行

<br>

水平线

<hr>

可以通过color设置属性，例如红色线：<hr color="red">。 color称为属性名，"red"称为属性值。

预留格式

<pre>保留源码格式。例如

1
2
3
4
5
6

<!doctype html>
<pre>
    for i in range(10):
        print(f"i+1={i}")
    print(i)
</pre>

则将打印出已有缩进，不是变成一行打印。

U, I, B, D等

加粗<b>，斜体<i>, 下划线<u>，划掉<del>；

小标：上<sup>，下<sub>

字体标签

<font color="blue" size=13>可修改颜色，字体等。

实体符号

（碎碎念）字符编码 

1
2
3

<head>
    <meta charset="utf-8"/>
</head>

这行代码告诉浏览器使用哪一种字符编码打开文件。这要与html文件编写用的编码相同。

空格

例如要显示大空格，直接打一堆space是没有的，要&nbsp;是一个空格。

大小于号

小于&lt;大于&gt;

表格

参考代码004。

标签描述

  • table 表格
  • tr 表格的一行
  • td 一行中的一列，即单元格

参数

添加边框：<table border="1px">

设置单元格高度宽度：width="300px"，height="200px"。 属性值还可以设置为50%，就是页面的一般大。

对齐：可为tr或者td设置对齐：align="right"，属性值还可为center, left等。

单元格合并

参考代码005。

列合并，同一行俩单元格合并，只留第一个td，并添加属性colspan：

1
2
3
4
5

<tr> 
    <!-- 一个单元格 -->
    <td>1,1</td>
    <td colspan="2">1,2</td>
</tr>

行合并，同一列合并，只留第一个td，并添加属性rowspan：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 行合并 -->
<tr> 
    <td>a</td>
    <td>b</td>
    <td rowspan="2">与下方合并</td>
</tr>

<tr> 
    <td>A</td>
    <td>B</td>
</tr>

th标签

参考代码006。

用<th>代替<td>，可令内容自动加粗居中。

thead，tbody，tfoot

参考代码007

表格可以用thead，tbody，tfoot开分割——目的是方便JS操作表格。 没有视觉效果，方便后续操作。

背景颜色和图片

参考代码008

  • 背景颜色：在body标签处，设置属性bgcolor
  • 背景图片：在body标签处，设置属性background

图片

参考代码009

通过<img src="path/to/your/fig"></img>插入图片。

可用属性：

  • src：指定图片路径
  • width：指定图片宽度（高度保持比例自动缩放）
  • height：手动设置就可以拉伸图片
  • title：鼠标悬停时显示提示
  • alt：若图片加载失败的提示信息

超链接

参考代码010

使用<a href="path">连接文本</a>创建文本超链接。

  • 图片超链接：将插入图片的内容包裹在一对<a></a>中即可。
  • target属性：设置最终打开窗口的位置：
    • _self：在当前窗口打开
    • _blank：新窗口打开
    • _parent：当前窗口的父级窗口（窗口嵌套时的上一级）
    • _top：当前窗口的顶级窗口（窗口嵌套时的最高级）

列表

无序列表：

1
2
3
4
5

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

其输出形式如下：

  • Apple
  • Orange
  • Banana

无序表允许嵌套有序/无序表，参考代码文件011。<ul>标签的type属性可指定样式，例如"circle"是圈圈，"square"是方块。

有序列表：

1
2
3
4
5

<ol>
    <li>Asia</li>
    <li>America</li>
    <li>Arctic</li>
</ol>

同样的，有序表可以嵌套列表。<ol>的type属性指定有序编号样式，例如字母、罗马数字、数码等。

表单（重点）

表单时用来收集用户数据，发送请求时会把收集的数据发送给主机（例如登录页）。

表单的语法格式 

1
2
3
4

<form>
    <!-- 表单项1 -->
    <!-- 表单项2 -->
</form>

参考代码012 表单的属性action和超链接的href类似，可以设置一个目标位置。当按下按钮（如下），自动跳转到此位置。

提交按钮

表单可以画一个按钮，按下即跳转到表单action属性中的目标位置，这要使用<input>标签 （一对<input>表示输入域，通过展示不同的type显示不同的样式） 将<input type="submit"/>作为一个表单写入表单中，即可显示出一个按钮。 注意，所有能够提交表单的按钮，type必须是"submit"。注意：

  • type设置为普通按钮button只能点击，不能跳转到action指定的位置；
  • 在表单外的按钮无法自动跳转
1
2
3
4
5
6

<!-- 例子：包含此段代码： -->
<!-- 浏览器上会显示一个方框按钮，点击会跳转到`form`的type属性值，即目标网站。 -->
<h2>表单</h2>
<form action="https://www.bing.com">
    <input type="submit"/>
</form>

若要按钮显示自定义文本，可设置<input value=>属性为自定义文本。 如果添加了name属性，则会将name=value也发送出去，所以不要为提交按钮添加name属性！

此外，<input type="reset" value="清空输入"/>"表单项可将表单变回默认状态。

一个例子

action属性值的分析：

  • https://是协议
  • 192.168.154.2是IP
  • :8080是端口
  • /oa/login是主机上的一段程序，可用于处理表单提交的信息

<input type=>属性取为text则是可输入文本框，password则是密码框（不显示字符）。

表单项的name属性决定表单项的输入内容是否提交，没有该属性的表单项输入不会被传递到目标位置。 并且，向目标位置提交的数据以url?name=value&name=value的键值对格式提交。

可以测试一下，不加name属性，跳转到的地址栏会显示https://192.168.154.2:8080/oa/login?而没有后续数据。 添加name属性和属性值后，若是依次输入ustc、1234、qwer， 则地址栏为https://192.168.154.2:8080/oa/login?usr_nm=ustc&passwd=qwer这样的内容（UID没有传送数据）。 若某项没有填写又没有默认值，则传递空字符串。

单选框和复选框

参考代码演示表单

type="radio"表示一个单选圆圈，点击一次可变成实心的表示选中 name相同的多个radio类型的input表单项只能选中一个 （换个说法，同一个单选问题的每个input表单项name属性要相同）。 下面的代码展示了这一特性：

1
2
3
4
5
6
7

<!-- 性别表单项 -->
性别    男<input type="radio" name="n1"/>
        女<input type="radio" name="n1"/><br>
年级    高<input type="radio" name="n1"/>
        低<input type="radio" name="n1"/><br>
<!-- 其它表单项 -->
<!-- 这样的表单项是有问题的！因为四个选择框只能选中一个 -->

改成如下这样就互不影响了。 此外，程序员需要提供value的值，对应不同选项映射的收集数据的值， 因为radio类型不知道每个选项要对应哪个值来上传。

1
2
3
4

性别    男<input type="radio" name="n1"/>
        女<input type="radio" name="n1"/><br>
年级    高<input type="radio" name="n2"/>
        低<input type="radio" name="n2"/><br>

为<input type="radio">添加checked属性表示默认选中此表单项。

type=checkbox表示一个复选框；name、value和checked属性用法同上。

下拉列表

下拉列表通过<select>标签实现：

1
2
3
4
5

<select name="level">
    <option>Middle School</option>
    <option>College</option>
    <option selected>小学二年级</option>
</select>

<option>表示下拉列表项。 列表项添加selected属性表示默认选中此项。 注意！下拉列表类型输入不再是使用<input>表示，是<select>

下拉列表支持多选

参考代码014

为select标签添加size="n"属性，即可使得下拉列表一次展现n个选项，并支持滚动条。添加multiple属性，即可支持使用ctrl键进行多选。另外，n=1并添加multiple属性可以显示出下拉复选框。

文本域

一对<textarea>表示一个文本域，可以输入长文本。 值得注意的是标签对内的所有内容都会作为默认内容显示出来，因此不要有换行或注释在其中。 不要这么做：

1
2
3
4
5

<textarea rows="5" cols="60" name="intro">
    <!-- 注释 -->
     123和换行

</textarea>

file控件

<input type="file"/>可以上传文件。 至于后台java程序提纲IO流的方式接收文件。

隐藏域控件

<input type="hidden" name="usercode" value="111"/>产生一个隐藏域， 不在网页上显示，但是可以携带提交内容。

readonly属性和disabled属性

readonly和disabled属性都使得输入内容不可更改（只读）， 并且disabled使得输入内容不被提交。

maxlength属性

限制输入内容长度， 例如，作用于type=text的输入域，则最多输入3字符。

HTML的id属性

在HTML任何一个节点（标签）上都有id属性， 一个id代表一个节点（类似于身份证号）， 因而同一个网页中id属性是不能重复的。 Javascript可以对HTML节点进行改动，这就要用到id来获取节点对象。

例如，可以像下面为每个节点添加id：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html id="myhtml">
    <head id="myhead">
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body id="mybody">
        <form action="ag.asd.org" id="myform"></form>
    </body>
</html>

<div>和<span>

参考代码019

<div>和<span>都被称为图层，网页可以有多个图层。 每个图层在网页中都是一个独立的盒子，可以重叠、嵌套。 图层最主要作用就 —— 网页布局。 图层通过左上角顶点的x, y轴坐标定位其在网页中的位置（后期可用CSS样式进行定位）。

两者的区别：div默认情况下独占一行，span不独占行。

附录

HTML 基础测试练习题

考察范围：基本标签 - 表单（下拉列表）

一、选择题（共 5 题，每题只有一个正确答案）

1–下列哪个标签是 HTML 文档的根标签？（）

A. <head> B. <body> C. <html> D. <!doctype html>

2–要在网页中插入一张图片，且当图片加载失败时显示提示文字，需设置标签的哪个属性？（）

A. src B. alt C. title D. width

3–以下关于 HTML 表单的说法，错误的是？（）

A. 表单的提交按钮type属性值必须为submit
B. 表单项必须添加name属性才能提交数据
C. 下拉列表的标签是<input type="select">
D. 重置按钮的作用是将表单恢复为默认状态

4–若要实现同一行内两个单元格合并，需为标签添加哪个属性？（）

A. rowspan B. colspan C. align D. merge

5–下列哪个实体符号表示 HTML 中的空格？（）

A. &lt; B. &gt; C. &nbsp; D. &amp;

二、填空题（共 10 题，每空 1 分）

6–HTML 文档的基本结构包含<head>和<body>标签，其中<head>标签内的<title>标签用于设置______。

7–要实现强制换行效果，需使用单标签______；要添加一条红色水平线，代码为______。

8–<pre>标签的作用是______，它会保留源码中的缩进和换行格式。

9–HTML 表格中，<th>标签的作用是______，其内容默认______且居中显示。

10–超链接标签<a>的核心属性是______，用于指定跳转目标；若要在新窗口打开链接，需设置target属性值为______。

11–无序列表的标签是______，列表项的标签是______；若要将无序列表的项目符号改为空心圆，需设置type属性值为______。

12–HTML 表单中，单选框的type属性值为______，同一组单选框的______属性值必须相同才能实现互斥效果。

13–下拉列表由<select>标签定义，列表项由______标签定义；若要默认选中某列表项，需添加______属性。

14–文本域的标签是______，通过rows和cols属性分别设置______和______。

15–要设置网页的背景颜色，需在<body>标签中添加______属性；若要设置背景图片，则添加______属性。

三、编写题（共 3 题，每题需写出完整代码）

16–编写一个完整的 HTML 文档，要求包含基本结构（文档声明、<html>、<head>、<body>），<head>中设置页面标题为 “我的第一个 HTML 页面”，<body>中包含一个一级标题 “欢迎学习 HTML” 和一个段落，段落内容为 “这是一道 HTML 编写题的练习内容。”。

17–编写一个 HTML 表格，要求如下： 表格边框为 1 像素；表格包含 2 行 3 列； 第一行是表头，内容分别为 “姓名”、“年龄”、“班级”； 第二行内容分别为 “张三”、“20”、“计算机 1 班”； 表头单元格内容居中加粗（使用<th>标签实现）

18–编写一个 HTML 表单，要求如下： 表单提交目标为https://www.example.com； 包含以下表单项：

  1. 文本框：用于输入用户名，name属性为username，默认值为 “请输入用户名”
  2. 密码框：用于输入密码，name属性为password
  3. 单选框：性别选择（男、女），name属性为gender，默认选中 “男”
  4. 下拉列表：年级选择（大一、大二、大三），name属性为grade，默认选中 “大二”
  5. 提交按钮和重置按钮，按钮文本分别为 “提交信息” 和 “重置表单”

HTML 基础测试练习题 - 答案

一、CBCBC

二、填空题答案

  • 网页标签页的标题
  • <br>；<hr color="red">
  • 预留格式
  • 定义表头单元格；加粗
  • href；_blank
  • <ul>；<li>；circle
  • radio；name
  • <option>；selected
  • <textarea>；行数；列数
  • bgcolor；background

三、编写题答案 第一题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!doctype html>
<html>
<head>
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是一道HTML编写题的练习内容。</p>
</body>
</html>

第二题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<table border="1px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>计算机1班</td>
    </tr>
</table>

第三题

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

<form action="https://www.example.com">
    用户名：<input type="text" name="username" value="请输入用户名"><br>
    密码：<input type="password" name="password"><br>
    性别：男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"><br>
    年级：
    <select name="grade">
        <option>大一</option>
        <option selected>大二</option>
        <option>大三</option>
    </select><br>
    <input type="submit" value="提交信息">
    <input type="reset" value="重置表单">
</form>
Html
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
© 2020 - 2026 春节序曲
Built with Hugo
Theme Stack designed by Jimmy