HTML 简明教程（一）
|
|
2,362
|
0
|
前端
|
admin52

4288 字
|
34 分钟
本文最后更新于 602 天前，内容如有失效请评论区留言。

[toc]

HTML 概述

简介

随着 Web 技术发展，互联网已经深入到日常生活的各个角落。人们通过浏览网页获取信息，网页已经成为了一种重要的信息传输方式。本实验将会让大家了解网页的传输过程以及介绍 HTML 的一些基本概念。

知识点

  • HTTP 基础
  • 什么是 HTML
  • HTML 网页结构
  • HTML 网页编辑与显示
  • HTML 注释

HTTP 基础

HTTP 概述

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。

注：定义来自于搜狗百科。

img

上图描述了客户端和服务器的交互过程。当用户在浏览器输入网址后，浏览器与服务器建立了一个连接，浏览器给 Web 服务器发送了一个 HTTP 请求，服务器接收并解析请求后，返回响应。HTTP 响应中包含状态代码和返回资源的内容（响应正文）。

常见状态码

  • 200 ：成功。
  • 400 ：客户端请求有语法错误，服务器端不能理解。
  • 401 ：该请求可能未经过授权。
  • 403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
  • 404 ：该资源没找到。
  • 500 ：服务器端发生了一个不可预知的错误。
  • 503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。

什么是 HTML

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。 它不是一种编程语言，而是一种标记语言。

HTML 网页结构

一个网页的基本结构：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。html 标签即根元素，此处表示文档的开始。head 标签是网页的头部，设置网页的相关信息。title 标签设置网页标题。body 标签定义文档的主体，也就是我们的主要内容。

HTML 网页编辑与显示

由于实验楼使用是 WebIDE 的在线环境，所以有不熟悉对同学请阅读下：实验楼 WebIDE 使用指南，前端开发部分的内容。

点击 File，然后点击 New File，输入 test.html 新建一个 test.html 文件。后续的例子中，将不再提醒建立 test.html 文件，大家根据个人需求自行创建对应的 html 文件，完成后续操作)：

img

输入以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    html
  </body>
</html>

img

右键新建的 test.html 文件，点击 Open With 后选择 Preview 查看效果。

img

img

HTML 注释

在 HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染和显示。

<!-- 在此处写注释 -->

注：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录。

<!DOCTYPE html>
<html>
  <body>
    <!--这是一段注释。注释不会在浏览器中显示。-->

    <p>这是一段普通的段落。</p>
  </body>
</html>

总结

本节主要了解了关于前端开发必须的基础概念，对 HTML 的结构和注释进行了介绍，掌握了如何在实验楼中编辑并显示网页文件。希望大家在后面的学习过程中能够多练习，多敲代码多实践。

HTML 常用标签

简介

本节主要是介绍 HTML 常用标签，学习了标题标签、段落标签、图片标签、超链接标签、HTML 列表。由于 <div> 标签和 <span> 标签在网页中有许多应用，对其也进行了介绍。

知识点

  • HTML 标签
  • HTML 元素
  • HTML 常见标签
  • 容器标签
  • HTML 列表
  • HTML 样式

HTML 标签

超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如 <body> 和 <BODY> 表示的意思是一样的，都代表“主体”，推荐使用小写。

双标签（双标记）

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

常见的双标签有：

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

例子 <a></a>：

<a href="https://www.lanqiao.cn">实验楼</a>

单标签（单标记）

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

<标记名/>

常见的单标签有：

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

标签的关系

  • 嵌套关系
<head>
  <title> </title>
</head>
  • 并列关系
<head></head>
<body></body>

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

例子：

<p>I Love You</p>

注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：I Love You。

HTML 常见标签

h 系类标签

h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

img

p 标签

p 标签是我们的文本标签。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。

<p>我是第一段文字，实验楼，做实验，学编程</p>
<p>我是第二段文字，实验楼，做实验，学编程</p>

img

图片标签

HTML 的图像是通过标签 <img> 来定义的。 语法: <img src="图片地址"/> 。

<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

img

a 标签

<a> 标签是超链接标签，意思就是我们点击它可以跳转到一个网页。

<a href="https://www.lanqiao.cn/">实验楼</a>

点击文字：

img

跳转指定页面：

img

div 标签

<div> 标签是一个块级元素，块级元素占据其父元素（容器）的整个空间，你可以把它想成一个盒子。 <div> 能够设置其宽高，后面我们会讲到。

<div style="width:200px;height:200px;background:pink">块级元素</div>

这里设置的 style，后面我们会进行学习，现在只是为了便于产生效果，使大家更好理解。在这里的效果是生成一个宽高 200 像素的粉色 div。

img

换行标签和空格字符

在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行，可以使用 <br/> 标签。如果想使用空格的话可以使用 字符。

<body>
  <p>这是一段文字 前面有很多空格但是只显示一个</p>
  <p>这是一段文字    用了空格字符</p>
  <br />
  <p>上面是换行符</p>
</body>

img

水平分割线

<hr/> 标签用于在 HTML 页面中创建一条水平线。

<body>
  <hr />
  <hr />
  <hr />
</body>

img

容器标签（div 和 span）

接下来我们介绍两种容器标签。

div 标签

标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。

span 标签

标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      #box {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box">这是div标签，自动换行</div>
    <input type="text" /><span>这是span标签，不自动换行</span>
  </body>
</html>

img

HTML 列表

  <li>列表项2</li>
</ol>

img

可以看到有多少个列表项就有多少个 <li> 标签。

无序列表和有序列表的 type 属性：

type 属性定义了列表项前项目符号的类型。

<ul> 标签的 type 属性：

值 备注
disc（默认） 实心圆
circle 空心圆
square 小方块

<ol> 标签的 type 属性：

值 备注
1（默认） 数字表示（1，2，3…)
A 大写字母表示（A,B,C…)
a 小写字母表示（a,b,c…)
I 大写罗马数字表示(I,II,III…)
i 小写罗马数字表示(i,ii,iii…)

我们来看其中一两个 type 属性：

<p>无序列表</p>
<ul type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

img

是不是很简单呢？只需要修改 type 属性，就可以看到不同的项目符号了，自己动手试试其他的吧！

自定义列表（dl）

定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  ...
</dl>

例子：

<h2>一个自定义列表：</h2>
<dl>
  <dt>春天</dt>
  <dd>是万物复苏，百花争艳的季节</dd>
  <dt>夏天</dt>
  <dd>是夏日绵绵，烈日炎炎的季节</dd>
</dl>

在浏览器中的运行效果为：

img

HTML 样式

学习了上面所介绍的标签以后，我们将学习为所有的 HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。

HTML 样式实例 – 背景颜色

<html>
  <body>
    <p style="background-color:red">实验楼</p>
  </body>
</html>

注：通过 "background-color" 属性值的设置来给背景设置颜色。

img

HTML 样式实例 – 字体、颜色和尺寸

<html>
  <body>
    <p style="font-family:arial;color:green;font-size:50px;">实验楼</p>
  </body>
</html>

注：通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。

img

HTML 样式实例 – 文本对齐

<html>
  <body>
    <h1 style="text-align:center">实验楼</h1>
  </body>
</html>

注：上面的标题“实验楼”相对于页面居中对齐。

img

挑战：成品展示

用 HTML 完成下图：

img

源码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div style="width:500px;height:300px;background-color:pink">
      <h1 style="text-align:center">实验楼学习教程</h1>
      <p style="text-align:center">
        学习就上<a href="https://www.lanqiao.cn/">实验楼</a>
      </p>
      <hr />
      <p>在实验楼你可以学习的课程有：</p>
      <ul>
        <li>HTML5 基础课程</li>
        <li>CSS基础课程</li>
        <li>Linux基础课程</li>
        <li>...</li>
      </ul>
    </div>
  </body>
</html>

我的成品：

image-20220425215005754

总结

通过本节学习，我们学会了以下内容：

  • HTML 标签
  • HTML 元素
  • HTML 常见标签
  • 容器标签
  • HTML 列表
  • HTML 样式

通过对 HTML 常用标签的学习，我们可以构建一个简单的网页，文字和图像是网页上最主要的内容，希望大家多多练习。

HTML 表格与 DIV 应用

简介

在网页中插入表格可以使网页上的内容排列整齐，让浏览者对表格中表达的数据及其含义一目了然。div 是网页制作中用于定位元素或者布局的一种重要技术。本节将重点讲解 HTML 表格的相关内容，并比较 div 和表格哪一个更加灵活。

知识点

  • 创建表格
  • 完善表格
  • div 设置

创建表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

我们先来创建一个简单的表格：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

1

你是否发现好像缺了点什么？这个表格为什么没有边框呢？接下来让我们为它添加一个 border 属性再来看看效果。

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

在浏览器显示效果为：

1

完善表格

caption 元素定义表格标题

表格一般都有标题，在 HTML 中表格标题通过 <caption> 定义。

<table border="1" width="300px" height="150px">
  <caption>
    表格标题
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

1

给表格添加表头

表格的表头使用 <th> 标签进行定义，表头通常用于列名字。

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>买苹果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>买饮料</td>
  </tr>
</table>

1

表格与单元格的属性

表格的其他常用属性：

1

注意：其余属性的使用和 border 类似，只需要在 table 标签中添加属性即可，大家可以尝试着使用。

单元格跨行和跨列

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并列）和 rowspan（合并行）属性来帮助我们实现这一效果。

colspan 又称跨列，rowspan 又称跨行。 

<table border="1" width="300px" height="150px">
  <h3>单元跨两列</h3>
  <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>344 22 112</td>
    <td>211 32 123</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>433 31 212</td>
    <td>234 21 654</td>
  </tr>
</table>

<table border="1" cellspacing="0">
  <h3>单元跨两行</h3>
  <tr>
    <th>姓名</th>
    <td>张三</td>
  </tr>
  <tr>
    <th rowspan="2">电话</th>
    <td>344 22 112</td>
  </tr>
  <tr>
    <td>234 21 654</td>
  </tr>
</table>

在浏览器中显示效果为：

图片描述

注：设置 rowspan="2" 表示合并该列上的两个单元格，同样的我们可以通过设置 colspan 来合并行，快动手试试吧。合并之前，我们可以如例子般，先把所有的单元格都写出来，然后找出哪些单元格需要合并的，在第一个单元格内设置 rowspan 或者 colspan，并将其他多余的单元格代码删除。

div 设置

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

语法：

<div style="样式设置"><div></div></div>

div 和 table 的区别

div 布局：

<div style="width:100%;border:1px solid #d4d4d4">
  <div style="background-color:pink">实验楼</div>
  <div style="background-color:skyblue">实验楼</div>
</div>

table 布局：

<table style="width:100%;border:1px solid #d4d4d4">
  <tr>
    <td style="background-color:pink">实验楼</td>
  </tr>
  <tr>
    <td style="background-color:skyblue">实验楼</td>
  </tr>
</table>

两个布局的最终效果：

1

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

table 元素布局：

  • 优点：
  1. 理解比较简单。
  2. 不同的浏览器看到的效果一般相同。
  • 缺点：
  1. 显示样式和数据绑定在一起。
  2. 布局的时候灵活度不高。
  3. 一个页面可能会有大量的 table 元素，代码冗余度高。
  4. 增加带宽。
  5. 搜索引擎不喜欢这样的布局。

div 元素布局：

  • 优点：
  1. 符合 W3C 标准。
  2. 搜索引擎更加友好。
  3. 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
  4. 节省代宽，代码冗余度低。
  5. 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

挑战：课程表绘制

请你尝试着根据我们前面所需的内容绘制如下所示的课程表：

1

源码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>课程表</title>
  </head>
  <body>
    <table border="1" width="60%" bgcolor="pink" cellpadding="2">
      <caption>
        课程表
      </caption>
      <tr align="center">
        <td colspan="2">时间\日期</td>
        <td>一</td>
        <td>二</td>
        <td>三</td>
        <td>四</td>
        <td>五</td>
      </tr>

      <tr align="center">
        <td rowspan="2">上午</td>
        <td>9:30-10:15</td>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>音乐</td>
        <td>体育</td>
      </tr>

      <tr align="center">
        <td>10:25-11:10</td>
        <td>数学</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
      </tr>

      <tr>
        <td colspan="7"> </td>
      </tr>

      <tr align="center">
        <td rowspan="2">下午</td>
        <td>14:30-15:15</td>
        <td>体育</td>
        <td>语文</td>
        <td>历史</td>
        <td>政治</td>
        <td>化学</td>
      </tr>

      <tr align="center">
        <td>15:25-16:10</td>
        <td>音乐</td>
        <td>语文</td>
        <td>数学</td>
        <td>美术</td>
        <td>语文</td>
      </tr>
    </table>
  </body>
</html>

image-20220425224815852

总结

本节介绍了怎样创建表格，给表格添加标题，给表格添加表头、div 和表格的对比等。通过本章的学习，大家应该学会了如何在网页上制作一个表格，并且根据不同的情景选择不同的布局方式，希望大家多动手，多思考，才能更好的学习。

前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇