〖Web全栈开发④〗— HTML基础详讲(超详细)

HTML基础详讲

  • （一）HTML基础
    • 1.1浏览器发展史
    • 1.2浏览器的诞生和发展
  • （二） 什么是网页
    • 2.1 网站是什么？
    • 2.2 什么是网站
    • 2.3 网站服务器
    • 2.4 总结
  • （三）HTML基础
    • 3.1 什么是HTML
    • 3.2 HTML标签
    • 3.3 实例
    • 3.4 HTML常用标签
      • 3.4.1 标题标签（h1-h6）
      • 3.4.2 段落标签（p）
      • 3.4.3 换行标签（br）
      • 3.4.4 水平线标签（hr）
      • 3.4.5 图片标签（img）
      • 3.4.6 超链接标签（a）
      • 3.4.7 列表标签
      • 3.4.8 文本格式标签
      • 3.4.9 表格（table）
      • 3.4.10 表单
      • 3.4.11表单域
      • 3.4.12表单控件
      • 3.4.13特殊字符
      • 实战演示
        • 实现如下样式的表单：

🏘️🏘️个人简介：以山河作礼。
🎖️🎖️:Python领域新星创作者，CSDN实力新星认证，阿里云社区专家博主
🎁🎁:Web全栈开发专栏：《Web全栈开发》免费专栏，欢迎阅读！

（一）HTML基础

1.1浏览器发展史

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示HTML文档、PDF、图片、视频等网络内容。这些网络资源的位置由用户使用
URI（统一资源标示符）来指定指定。

或许在大多数人眼中，浏览器是这样的：

〖Web全栈开发④〗— HTML基础详讲(超详细)

一个展示前端，一个未知的中间层连接着网络世界

甚至，网络世界也可以省略：一台显示器，一个神秘的幕后黑盒。

1.2浏览器的诞生和发展

浏览器诞生于上个世纪八九十年代。

下图展示的是几款浏览器的图标：
〖Web全栈开发④〗— HTML基础详讲(超详细)

（二） 什么是网页

2.1 网站是什么？

网站是由一个一个网页构成的，要想理解网站是什么，首先要理解网页是什么。

网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
</head>
<body>
    <p>这是一段文本</p>
    <a href="http://c.biancheng.net/">这个一个超链接</a>
    <ul>
        <li>条目1</li>
        <li>条目2</li>
        <li>条目3</li>
    </ul>
</body>
</html>

〖Web全栈开发④〗— HTML基础详讲(超详细)

这就是 HTML 代码！我们可以看到很多由<>包围的特殊标记，这叫做 HTML 标签（Tag），浏览器通过识别这些 HTML 标签来渲染出各种界面和效果。

2.2 什么是网站

一个网站由很多网页组成，可以将多个网页放在一个文件夹中。

可以认为，网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问。

当然，你也可以不绑定域名，只要在服务器上设置某个文件夹提供 Web 服务，用户也可以通过 IP 地址来访问。

互联网上的所有服务器都是通过 IP 地址来定位的，域名只是 IP 地址的一种助记符，帮助用户记住网站的链接以及品牌。使用域名访问网站时，浏览器会先找到域名对应的 IP 地址，然后再通过 IP 地址请求服务器上的文件；这个过程叫做域名解析，是通过 DNS 服务器来完成的。

网站的作用是把计算机上的数据（文章、博客、图片、视频等）分享出去，让别人也能获取到有用的信息；同时，别人也能发布自己的数据（发布文章、留言、上传视频等），让网站的内容更加丰富。网站和用户之间是一个相互促进的关系，网站用户越多，积累的数据也就越多，然后就会吸引更多用户继续分享数据，这是一个良性循环，是一个健康的生态。

网站是互联网的基石，它让用户获取信息，也让用户分享信息，所以现在的互联网才能丰富多彩。

2.3 网站服务器

我们都知道网站放在服务器上，服务器其实就是一台计算机，它和我们平时使用的笔记本、台式机并没有什么区别，都由主板、CPU、内存、风扇等部件构成。不过，服务器一般是不带显示器、键盘、音响等外设的（当然它也支持这些外设），因为服务器的唯一用途就是运行网站，没有其它作用，所以用家庭台式机的主机箱来类比服务器更加恰当。

服务器一般放在专业的机房中，这些机房温度恒定、网络畅通、有备用电源、有容灾备份，能够保证服务器 7×24 小时不间断运行。

另外，为了让服务器能够放入机柜中，避免占用太多空间，服务器一般看起来很薄，是扁平的，这就是人们常说的“刀片”。
〖Web全栈开发④〗— HTML基础详讲(超详细)

〖Web全栈开发④〗— HTML基础详讲(超详细)

2.4 总结

网站可以认为是放在服务器上的一个文件夹，它包含了很多网页文件以及很多子文件夹。用户访问网站就是读取文件的内容，用户分享数据就是修改文件的内容，或者删除现有的文件，或者创建一个新的文件。

（三）HTML基础

3.1 什么是HTML

HTML是用来描述网页的一种语言。

3.2 HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

3.3 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
</body>
</html>

〖Web全栈开发④〗— HTML基础详讲(超详细)

例子解释：

3.4 HTML常用标签

3.4.1 标题标签（h1-h6）

3.4.2 段落标签（p）

主要用于将一段内容裹起来，便于后期的统一设置

p标签本身没有效果，标签内的内容与标签外的内容空一行（自动换行）

3.4.3 换行标签（br）

此标签属于单标签

3.4.4 水平线标签（hr）

此标签属于单标签

3.4.5 图片标签（img）

3.4.6 超链接标签（a）

超链接：使用超链接可以访问另一个页面 # web项目 音乐网站

3.4.7 列表标签

  1. 有序列表

    <ol>
    <li>登录</li>
    <li>注册</li>
    <li>退出</li>
</ol>

  2. 无序列表

    <ul>
    <li>登录</li>
    <li>注册</li>
    <li>退出</li>
</ul>

<li>表示列表项

3.4.8 文本格式标签

在网页中，有时需要为文字设置粗体、斜体或者下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

3.4.9 表格（table）

<table>
    <tr>  <!--表格第一行-->
        <td></td>  <!--表格第一行第一个空格-->
        <td></td>
        ……
    </tr>
    <tr>  <!--表格第二行-->
    	……
    </tr>
</table>

<table>用于定义一个表格

3.4.10 表单

一般用于搜集用户的信息。

在HTML中，一个完整的表单通常由表单控件、提示信息、表单域3个部分组成。
〖Web全栈开发④〗— HTML基础详讲(超详细)

  1. 表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
  2. 表单控件：表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等
  3. 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

3.4.11表单域

3.4.12表单控件

3.4.13特殊字符

〖Web全栈开发④〗— HTML基础详讲(超详细)

实战演示

实现如下样式的表单：

〖Web全栈开发④〗— HTML基础详讲(超详细)

HTML源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <!-- 用户名称-->
    用户名:<input name="user" type="text">
    <br>
    <br> <!-- 用户密码-->
    <label>密&emsp;码:
        <input type="password" name="password">
    </label>
    <br>
    <br> <!-- 年龄-->
    年&emsp;龄:<input name="age" type="text">
    <br>
    <br> <!-- 用户性别-->
    性&emsp;别:
    &ensp;<label>男<input type="radio" name="gender" value="male"></label>
    &ensp;<label>女<input type="radio" name="gender" value="female"></label>
    <br>
    <br> <!-- 用户技能，可以单选也可以多选-->
    技&emsp;能:
    <label>Python<input type="checkbox" name="skills" value="python"></label>
    <label>C++<input type="checkbox" name="skills" value="c++"></label>
    <label>Java<input type="checkbox" name="skills" value="java"></label>
    <label>C<input type="checkbox" name="skills" value="C"></label>
    <label>php<input type="checkbox" name="skills" value="php<"></label>
    <br>
    <br>
    城&emsp;市: <!-- 用户所在城市，单选-->
    <select name="city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
    </select>
    <label>
        <br><br>
    </label>
    自我介绍：
    <textarea name="introduction" rows="6"></textarea>
    </label>
    <br><br>
    <!-- 对输入数据进行重置 -->
    <input type="reset" value="重置">
    <input type="submit" value="提交">
</form>
</style>
</body>
</html>

运行结果：
〖Web全栈开发④〗— HTML基础详讲(超详细)

标签 , ,

发表回复