HTML基础

认识网页

网页是构成网站的基本元素，是承载各种网站应用的平台。网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

浏览器与服务器之间的关系

  • 服务器 存储编写好的网页程序。服务器在网络端，用户不可见。
  • 浏览器 用户电脑上的浏览器可以通过网络获取页面程序，并将页面显示。

构成网页的三大元素

  1. HTML: 超文本标记语言，HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容按照规则写成HTML文件，并通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
  2. CSS: 层叠样式表,用来表现HTML等文件样式的计算机语言。
  3. Javascript: 直译式脚本语言,用来给HTML网页增加动态功能。

开发前准备

浏览器：Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari

常用浏览器

代码编辑器：vscode、Sublime、Notepad++ …

其它工具： Photoshop

计算机设置

显示文件后缀：文件管理器（Win + E） > 工具 > 文件夹选项 > 查看 > 隐藏已知文件类型的扩展名（去掉勾选）> 应用 > 确定

输入法设置

在编写代码时需要将输入法切换为英文半角输入。

W3C

  • w3c World Wide Web Consortium（万维网联盟）,是一个非盈利组织 专门制定网络标准的，像 HTML、XHTML、CSS、XML的标准就是由W3C来定制，
  • w3c中国。

W3C 组织是标准的制定者，而各浏览器厂商则会实现些标准。由于浏览器厂商众多实现也不相同。

如： HTML 中的 <input type="button" value="button" /> 在不同的浏览器中样式也会有所区别。

HTML

HTML版本

  1. HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
  2. HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
  3. HTML 3.2：1997年1月14日，W3C推荐标准。
  4. HTML 4.0：1997年12月18日，W3C推荐标准。
  5. HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
  6. HTML 5：2008 年正式发布，在 2012 年已形成了稳定的版本。极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

HTML文件

html文件的后缀是 .html 或者 .htm,不区分大小写，但通常写成小写的 .html。

HTML采用标签语法

  • 第一个html程序
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p>hello html! </p>
    </body>
</html>

HTML 语法要求比较松散，与之对应 XHTML 语法上非常严格。

标签语法

标签也叫作元素

标签对

单标签

属性

属性是 HTML 元素提供的附加信息。

  • class：定义一个或多个类名
  • id: 定义唯一ID

属性值可以使用单引号、双引号或者不使用引号，在不使用引号时要注意属性只能添加一个有效值。

THML 文档结构

  • <!DOCTYPE html> 声明文档类型, html表示该文档类型为h5。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 表示该文档为h4
  • <html> HTML 页面的根标签
  • <head> 包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容

注释

注释用于帮助编程人员理解程序的作用。注释通常写在被注释语句的上方或右侧.

1
<!-- 注释内容 -->

常用全局属性：

属性名 描述
class 规定元素的类名(值可以有多个)
id 规定元素的唯一 id
lang 设置元素中内容的语言代码,语言编码表
style 规定元素的行内样式（内联css）
title 标签在鼠标停留时的提示信息

常用标签（元素）

  • <html> 页面的根标签，最顶层标签。

  • <head> 定义关于文档的信息（不会显示到页面）

  • <body> 定义文档的主体(要显示到页面中的内容)

  • <title>定义文档的标题，显示到浏览器的选项卡中。该标签必须写在<head>标签内部。

  • <meta> 描述 HTML 文档的元数据。通过标签中属性设置其相关的信息

    • charset 定义文档的字符编码。h5新增
    • name 属性规定元数据的名称,取值通常有keywords、description、author name属性需要配合content属性一起使用。
    1
    2
    3
    4
    5
    6
    7
    8
    <head>
        <!-- 页面描述 -->
        <meta name="description" content="Free Web tutorials">
        <!-- 关键词：用于搜索引擎进优化 -->
        <meta name="keywords" content="HTML,CSS,JavaScript">
        <!-- 作者 -->
        <meta name="author" content="Hege Refsnes">
    </head>

  • <link> 定义文档与外部资源的关系

    • href 定义被链接文档的位置。
    • rel 规定当前文档与被链接文档/资源之间的关系。常用取值如下：
      • stylesheet 表示要导入的样式表的 URL。
      • icon 导入表示该文档的图标。
    1
    2
    3
    4
    5
    6
    <head>
        <!-- 引入外部css文件 -->
        <link rel="stylesheet" href="./main.css">
        <!-- 浏览器标签栏图标 -->
        <link rel="icon" href="./logo.ico">
    </head>

    浏览器标签栏图标格式为 .ico
    图片在线转换ICO

文本相关

标签名 描述
<h1> ... <h6> 标题标签
<div> 文档中的节
<span> 文档中的节
<p> 段落
<br> 换行
<hr> 水平线
<b> 粗体文本
<strong> 定义语气更为强烈的强调文本
<i> 斜体文本
<em> 强调文本
<ins> 被插入文本
<u> 下划线文本
<s> 加删除线的文本
<del> 被删除文本
<sub> 下标文本
<sup> 上标文本
<pre> 预格式文本
<code> 计算机代码文本

在文本中插入一些特殊字符像空格等,可以使用字符实体。字符实体查询

列表

标签名 描述
<ul> 无序列表
<ol> 有序列表
<li> 列表项,<ul> <ol>列表的子级标签
<dl> 自定义列表
<dt> 自定义列表中项
<dd> 自定义列表项的描述 
1
2
3
4
5
<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
</ul>
1
2
3
4
5
6
<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

表格

标签名 描述
<table> 定义一个表格
<caption> 定义表格标题
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容（脚注）
<tr> 定义表格中的行
<th> 定义表格中的表头单元格
<td> 定义表格中的单元

在表格中<thead>和<tfoot>只能有一个但<tbody>可以有多个

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
<table>
    <caption>通讯录</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>职位</th>
            <th>手机</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>班长</td>
            <td>15800099987</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>班长</td>
            <td>15800099987</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>小红</td>
            <td>组长</td>
            <td>075500998877</td>
        </tr>
    </tfoot>
</table>

通常情况下，在写表格时不写<thead>，<tbody>，<tfoot>标签而是直接在<table>中写<tr>,<td>。代码在浏览器中执行时会自动补全<tbody>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>手机</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>班长</td>
        <td>15800099987</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>组长</td>
        <td>075500998877</td>
    </tr>
</table>

为表格设置边框：<table border="1"> </table>

合并表格边框
<table border="1" cellspacing='0'>

表格中属性除border外其它在H5中都不再支持，要修改表格样式可以使用CSS

合并单元格：通过设置 <td>属性可以合并单元格

属性 描述
colspan 设置单元格可横跨的列数
rowspan 设置单元格可横跨的行数

链接

<a> 定义一个链接

属性 描述
href 规定链接的目标 URL
target 规定在何处打开目标 URL。仅在 href 属性存在时使用。常用取值 _blank、_self

a链接可以打开一个新的页面也可以跳转到当前页面中的指定位置。

<base> 定义页面中所有链接的默认地址或默认目标。

1
2
3
<head>
<base href="https://www.timeitself.cn" target="_blank">
</head>
  • target 常用取值
    • _blank 在新窗口中打开被链接文档。
    • _self 默认。在相同的框架中打开被链接文档。

图片

<img> 定义图片

属性 描述
alt 图片不显示时的替代文本
src 要显示图片的 URL

src属性的值可以是本地图片,网络图片,或者是base64格式的文本。

表单

表单是构成 Web 页面的重要组成部分。它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。

标签名 描述 属性
<form> 定义一个 HTML 表单 action：规定当提交表单时向何处发送表单数据。method：发送表单数据的 HTTP 方法，get/post。target：在何处打开 action URL，取值_blank，_self。
<input> 输入控件 type:指定输入控件的类型,常用取值：button、text、password、checkbox、radio、 reset、 submit、 file …。value:控件的输入值。 disabled:禁用元素。readonly：文本只读。name:元素名称。
<label> 定义 checkbox、radio 元素的标注 for:规定 label 与哪个表单元素绑定
<textarea> 文本域，可以输入多行文本 disabled:禁用文本框。readonly：文本只读。name:元素名称。
<button> 定义按钮 type: 规定按钮的类型,取值：button, reset, submit。disabled:禁用该按钮。
<select> 下拉列表 disabled:禁用。name:元素名称。
<optgroup> 定义下拉列表中的选项组 label：为选项组规定描述。disabled:禁用该选项组。
<option> 定义下拉列表中选项 value：定义送往服务器的选项值。selected：默认选中。disabled:禁用该选项。
  1. 提交按钮submit 可以触发<form>向服务器端发送请求。
  2. 表单提交时当前页面会刷新。
  3. <form>通常不会使用 action等属性 向服务器发送数据，现在使用 ajax将表单数据发送到服务器。
  4. 表单控件需要设置 name 属性。
  5. 重置按钮reset 只有在 <form>中才可以重置表单控件中数据。
  6. 表单控件可以不在<from>中单独使用。