HTML基础知识

By Walk-FearLess前端

一、HTML简介

①名词解释

HTML 是 Hyper Text Markup Language的缩写。意思是 超文本标记语言。

1、超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——–本身是文本，但是呈现出来的最终效果超越了文本。

2、标记语言

说HTML是一种标记语言是因为它不是向Java这样的 编程语言，因为它是由一系列 标签组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号 + 标签名的方式来定义的：

<p>HTML is a very popular fore-end tenchnology.</p>

这个例子中使用了一个p标签来定义一个段落，<p> 叫 开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称标签体。

有的时候标签里还带有属性：

<a href="http://www.xxx.com">show detail</a>

href=”http://www.xxx.com”就是属性，href是属性名，http://www.xxx.com是属性值。

还有一种标签是单标签：

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

②HTML文件结构

  • 文档类型声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本，HTML4版本的文档类型声明是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5版本的文档类型声明是：

<!DOCTYPE html>

现在主流的技术选型都是使用HTML5，之前的版本基本不用了。

历史上HTML的各个版本：

HTML1991
HTML+1993
HTML2.01995
HTML3.21997
HTML4.011999
XHTML1.02000
HTML5.02012
XHTML52013
  • 根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。上面的文档类型不能当做普通标签看待。

  • 头部

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

  • 主体

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

  • 注释

HTML注释的写法是：<!– 注释内容 –>

注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明的。

③HTML语法规则

  • 根标签有且只能有一个；
  • 无论是双标签还是单标签都必须正确关闭；
  • 标签可以嵌套但不能交叉嵌套；
  • 注释不能嵌套；
  • 属性必须有值，值必须加引号，单引号或双引号均可；
  • 标签名不区分大小写但建议使用小写。

二、HTML常用标签

①使用HTMl展示文章

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>这是二级标题</h2>
    <p>HTML is a very popular fore-end tenchnology.</p>
    <a href="http://www.baidu.com">跳转百度</a>
    <div>下面开始换行了</div>
    <br/>
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>grape</li>
    </ul>
    <img src="/img/img01.png">
    <div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
    <div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
    <span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
    <span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
</body>
</html>

页面效果：

标签说明：

标签名称 功能 备注
h1~h6 1级标题~6级标题 标题标签前后有换行
p 段落 段落标签前后有换行
a 超链接 点击后跳转到 href 属性指定的页面
ul / li 无序列表 type属性有disc（默认）、circle、square
ol 有序列表 start表示从xx开始，type 显示的类型：A、a、I、i、1（默认）
sup、sub 上标、下标
img 图片 src属性用来指定图片文件的路径
div 定义一个前后有换行的块 【块】并不是为了显示文章内容，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。
span 定义一个前后无换行的块

备注：

  • a标签的target属性（共四个）

_self ：在本窗口打开；_blank：在一个新窗口打开；_parent：在父窗口打开；_top：在顶层窗口打开

  • 路径

相对路径：相对路径都是以 当前位置 为基准进行编写的。

<a href="../../aaa/z.html">TO z.html</a>

绝对路径：绝对路径要求必须是以正斜线开头。这个正斜线表示服务器根目录。

<a href="/d/e/z.html">TO z.html</a>
  • HTML实体

在HTML文件中，<、>等等这样的符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果我们想使用符号本身就是使用HTML实体来转义。

②使用HTML表格展示数据

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table,th,td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<!-- 使用table标签定义表格 -->
<table>
    <!-- 使用tr标签定义表格的行 -->
    <tr>
        <!-- 使用th标签定义表头，表头有字体加粗效果 -->
        <th>姓名</th>
        <th>属性</th>
        <th>级别</th>
        <th>忍村</th>
    </tr>
    <tr>
        <!-- 使用td标签定义单元格 -->
        <td>漩涡鸣人</td>
        <td>风</td>
        <td>下忍</td>
        <td>木叶</td>
    </tr>
    <tr>
        <td>宇智波佐助</td>
        <td rowspan="2">雷&火</td>
        <td colspan="2">下忍</td>
    </tr>
    <tr>
        <td>我爱罗</td>
        <td>影</td>
        <td>砂隐村</td>
    </tr>
</table>
</body>
</html>

页面效果：

标签说明：

标签名称 功能 备注
table 表格 有如下属性：border：表格边框的粗细；width：表格的宽度；cellspacing：单元格间距；cellpadding：单元格填充
tr 行
td 列 rowspan：行合并；colspan：列合并
th 表头列

③使用HTML表单收集数据

1、什么是表单：表单（Form）是用于收集、提交和处理用户输入数据的结构化界面，常见于网页、应用程序和文档中。在项目开发过程中，凡是需要用户填写的信息都需要用到表单。

2、form标签

在html中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

<form action="/page/sample04.html" method="post">

</form>
  • action属性

用户在表单里填写的信息需要发送到服务器端，对于java项目来说就是交给java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个html页面来当作服务器端地址使用。

  • method属性

在form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，一般使用post即可。

  • 请求方式

浏览器和服务器之间在相互通信时有大量的数据需要传输。但不论是浏览器还是服务器都有很多不同厂商提供的不同产品。

常见的浏览器：chrome、Firefox、safari、Opera、Edge

常见的java服务器：Tomcat、Weblogic、WebSphere、Glassfish、Jetty

这么多不同厂商各自开发的应用程序怎么能保证它们彼此之间传输的【数据】能够被对方正确理解呢，很简单，我们给这些数据设定【格式】，发送端按照格式发送数据，接收端按照格式解析数据，这样就能够实现数据的【跨平台传输】了。

而这里定义的【数据格式】就是应用程序之间的【通信协议】。我们现在使用的【HTTP协议】的底层就是TCP/IP协议。

HTTP1.1中共定义了八种请求方式：GET、POST、PUT、DELETE、HEAD、CONNECT、OPTIONS、TRACE

在html标签中，点击超链接是GET方式的请求，提交一个表单可以通过form标签的method属性指定GET或POST请求，其他请求方式无法通过HTML标签实现。

3、name和value

在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那么服务器是怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码…

很简单，给每个数据都起一个名字，发送数据时用名字携带对应的数据，接收数据时通过名字获取对应的数据。

在各个具体的表单标签中，我们通过name属性来给数据起名字，通过value属性来保存要发送给服务器的值。

名字和值之间的关系既有可能是一个名字对应一个值，也有可能是一个名字对应多个值。所以在服务器端使用Map类型来接收请求参数，具体的类型是：Map<String,String[]>。name属性就是Map的键，value属性就是Map的值。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/page/sample04.html" method="post">

    个性签名：<input type="text" name="signal" /> <br/><br/>

    密码：<input type="password" name="secret" /> <br/><br/>

    你最喜欢的季节是：
    <input type="radio" name="season" value="spring" />春天
    <input type="radio" name="season" value="summer" checked="checked" />夏天
    <input type="radio" name="season" value="autumn" />秋天
    <input type="radio" name="season" value="winter" />冬天
    <br/><br/>

    你最喜欢的动物是：
    <input type="radio" name="animal" value="tiger" />路虎
    <input type="radio" name="animal" value="horse" checked="checked"/>宝马
    <input type="radio" name="animal" value="cheetah" />捷豹
    <br/><br/>

    你最喜欢的球队是：
    <input type="checkbox" name="team" value="Brazil">巴西
    <input type="checkbox" name="team" value="GerMan" checked="checked">德国
    <input type="checkbox" name="team" value="France">法国
    <input type="checkbox" name="team" value="China" checked="checked">中国
    <input type="checkbox" name="team" value="Italian">意大利
    <br/><br/>

    你喜欢的运动是：
    <select name="interesting">
        <option value="swimming">游泳</option>
        <option value="running">跑步</option>
        <option value="shooting" selected="selected">射击</option>
        <option value="skating">溜冰</option>
    </select>
    <br/><br/>

    <button type="button">普通按钮</button>
    <button type="reset">重置按钮</button>
    <button type="submit">提交按钮</button>
    <br/><br/>

    表单隐藏域：<input type="hidden" name="userId" value="2333">
    <br/><br/>

    自我介绍：<textarea name="desc"></textarea>

</form>

</body>
</html>

页面效果：

标签说明：

  • 单行文本框
个性签名：<input type="text" name="signal"/>
  • 密码框
密码：<input type="password" name="secret"/>
  • 单选框
你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天

说明：

name属性相同的radio为一组，组内互斥；

当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器；

设置checked="checked"属性设置默认被选中的radio

  • 多选框
你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 下拉列表
你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

说明：

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项；

name属性在select标签中设置；value属性在option标签中设置；

option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值；

通过在option标签中设置selected="selected"属性实现默认选中的效果。

  • 按钮
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

说明：

普通按钮点击后无效果，需要通过JavaScript绑定单击响应函数；

重置按钮点击后将表单内的所有表单项都恢复为默认值；

提交按钮点击后提交表单。

  • 表单隐藏域
<input type="hidden" name="userId" value="2233"/>

说明：通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户ID等。

  • 多行文本框
自我介绍：<textarea name="desc"></textarea>

说明：textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注