Web技术基础学习①——初步学习HTML

最新推荐文章于 2024-07-24 16:53:23 发布

漆黑の黑炎龙

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量141

点赞数

分类专栏： Web 文章标签： html

本文链接：https://blog.csdn.net/syw6666666/article/details/114693704

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初步学习HTML

前言

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

✍HTML文档结构

新建工作目录
在这里插入图片描述
在html文件中输入以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

在这里插入图片描述

✍HTML 文档结构分析

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。

现在我们使用一个简单的html文件来举例说明各部分

在这里插入图片描述

① 部分为html元素，是最为重要的元素，其余的所有元素都包含在它之中，包括了整个页面；
② 部分为head元素，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等；
③ 部分body元素，包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

✍HTML 文档标签

HTML文档标签包括标题、文本格式、超链接、图标等各种功能，灵活使用它们可以使我们的网页格式更规范。

✎ 标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>,

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

显示效果如图：
在这里插入图片描述

✎ 超链接

超链接是HTML中极为重要的存在，可以说，没有超链接就没有万维网。超链接的原理是在两个元素或两个网页之间“连线搭桥”,通过超链接，可以直接访问其他网页上的元素。

超链接语法如下图所示，我们基本可以将任何元素都添加至超链接

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

在这里插入图片描述

通过以上超链接，我们通过点击即可进入百度的网址www.baidu.com，非常便捷。
在这里插入图片描述
原理上任何元素都可以插入超链接，我们下面使用图片做一个示范：

找到电脑中保存的图片Picture1，其路径为/Web基础/HTML/Picture，在HTML文件中输入：
<img src="Picture/Picture1.jpg" alt="MDB Logo" width="200" height="200">
在这里插入图片描述
可以看到图片超链接成功，我们可以通过改变参数来调整图片的尺寸

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

✎ 表单

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

在这里插入图片描述
HTML语法如下：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
</form>

✎ 其他

HTML语法还有许多，譬如列表、表格等等，在这就不一一赘述了，在后面的学习中若有需要可以再进行了解。

✍HTML总结

HMTL在网站的制作中起到了打基础的作用，在整个Web网页的设计中，实现了定义和结构的功能，但是其余的修饰功能却还有其他的技术来实现，比如网站的表现和展示行为，如CSS；网站的功能和行为则使用Javascript来实现。
用盖屋子来举例的话，HMTL只负责房屋的搭建，而内部装修则需要CSS和Javascript。这三者相互结合缺一不可，才能搭建好一个我们日常看到的网页。

漆黑の黑炎龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web技术基础学习①——初步学习HTML

初步学习HTML目录初步学习HTML前言✍HTML文档结构✍HTML 文档结构分析✍HTML 文档标签✎ 标题✎ 超链接✎ 表单✎ 其他✍HTML总结前言HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。✍HTML文档
复制链接

扫一扫

专栏目录