HTML的初略学习

最新推荐文章于 2024-05-17 17:17:32 发布

metanoiah

最新推荐文章于 2024-05-17 17:17:32 发布

阅读量163

点赞数

文章标签： vscode html

本文链接：https://blog.csdn.net/metanoiah/article/details/114800420

版权

文章目录

一、何为HTML
二、新建HTML文档在浏览器中打开
三、HTML学习
四、总结及学习参考链接

提示：以下是本篇文章正文内容，下面案例可供参考

一、何为HTML

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

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

HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。

二、新建HTML文档在浏览器中打开

本HTML开发基于VScode
下载链接: VScode

单击新建文件图标，创建一个以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>

单击 Open in Default browser可在浏览器中打开，也可以单击Open in other browser选择其它浏览器，笔者这里使用的是Chrome浏览器
在这里插入图片描述
浏览器打开结果

三、HTML学习

3.1 HTML 文档结构分析

HTML元素（elements）
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如

元素结构：
在这里插入图片描述
1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
3.内容（Content）：元素的内容，本例中就是所输入的文本本身。
4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

在我看来元素是组成HTML文档最基本的要素，一个HTML由许多个元素组成，而元素由Tag（标签）组成

HTML组成的重要结构元素：
在这里插入图片描述

3.2 HTML 文档相关说明

注释
用特殊的记号 <!–和-->包括起来
(Code快捷键 Ctrl + / )
仅仅在代码中存在用来书写注释，描述工作，对于浏览器被忽略，且用户不可见

示例代码:

在这里插入图片描述
空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素

示例内容

    <p>我可以<br>换行</p>
    <hr>
    <!-- 输入框 -->
    账号<input type="text">
        <br>
    密码<input type="password">

    <p><input type="time"></p>

展示结果：
在这里插入图片描述

元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容：
1.一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2.属性名称，后面跟着一个 = 号。
3.一个属性值，由一对引号 “” 引起来。

示例代码:

<p title="床前明月光">疑是地上霜</p>

展示结果
在这里插入图片描述

3.3标题

一共有六级标题，从<h1>到<h6>
标题的作用非常重要，可以用来加粗字体，但更多的作用是用于搜索引擎索引页面内容及用户浏览打开页面的兴趣点，警惕因为加粗字体而使用标题，文字的醒目可使用文本格式及CCS实现

示例代码：

<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>

展示结果:
在这里插入图片描述

3.4文本格式

提示：HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要使用后面将要学习的 CSS 。

应当学习的文本格式标签及示例代码

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

展示结果
在这里插入图片描述

3.5超链接 a

超链接语法（一个跳向百度的新页面）

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

说明：

1.href即为要跳转去的地址 URL（Uniform Resorce Locator)
2.target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

锚点

与书签一样，通过标记页面的某个元素或位置来进行长页面的跳转
语法：
通过id属性生成某元素的锚点，然后再使用超链接指向该锚点即可
元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号

示例代码(可将下两句代码置于相差较远的位置，用于观察页面跳转):

<h1 id="Metanoia">My Jinji</h1>
<a href="#Metanoia">跳到My Jinji</a>

3.6图片及文件路径 img

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

提示:
对于小尺寸图片使用BASE64编码可提高页面运行速度， BASE64编码工具链接
将编码后的结果直接替换于src="’中的链接即可直接使用

文件路径

示例网络图片使用

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

展示结果
在这里插入图片描述
示例本地图片链接代码

<img src="./bilibili.png" alt="bilibili logo" width="140" height="80">

展示结果
在这里插入图片描述

3.7表格 Table

语法：
<table>标签名称
<tr> 行
<td>行中单元
<th>表头单元

代码示例：

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

展示结果：
在这里插入图片描述

3.8列表 List

列表具体分为有序列表和无序列表

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，可以通过在标签内修改标志为空心圆circle，实心方块square以及不出现标志。

示例代码

    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    <ul type="square">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

展示结果：
在这里插入图片描述

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

示例代码

    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

展示结果
在这里插入图片描述

3.9表单 Form

用于填写信息
<input>基本使用语法

<input type=“value”> type 属性规定 input 元素的类型
<input type=“radio”>中，在标签内加入checked会使该选项成为默认选项，自动打上勾

在标签<select>中，例如<option value=“R” selected>共和党</option>
加入selected会使该选项成为默认选项

示例学习代码

<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>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">   //rows 行数 cols 列数
    Remember,you can always find light in the dark.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

展示结果
在这里插入图片描述

3.10其它

HTML 的元素可以以称为区块或内联的方式进行显示。
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div>等
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

示例代码

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

展示结果
在这里插入图片描述

预设格式
使用<pre>标签展示诗歌等特别格式的文本，pre标签中的内容将保持格式不变

      <pre>
        
        “可惜我从前什么都不懂！
        我应该看她的行动，
        而不是听她的言语。
        她为我散发芬芳，
        点亮我的生活。

        我不应该离开她的，
        我应该看出藏在她那些小把戏后的柔情。
        花儿的心事好难捉摸的！
        当时我太小了，
        不懂得爱是什么。”

      <pre>

在这里插入图片描述
特殊字符
对于在页面中无法展示的标签，可利用图中的用法
来正确展示<和>
该图的展示效果为：<h1>

四、总结及学习参考链接

本次学习，对于HTML超文本标记语言（HyperText Markup Language）的创建及构成，对网页的背后有了一个基本的认识，初略的学习了HTML元素等知识，比如在我看来元素是组成HTML的根基，元素又由tag标签组成。在学习完HTML后还应学习CCS对网页进行该有的修饰，HTML并不是一个有难度的学习项目，它只需要我们用时间和态度去认真学习，即可掌握。

学习参考链接

metanoiah

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的初略学习

文章目录一、何为HTML二、新建HTML文档在浏览器中打开三、HTML学习3.1 HTML 文档结构分析3.2 HTML 文档相关说明总结提示：以下是本篇文章正文内容，下面案例可供参考一、何为HTMLHTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成
复制链接

扫一扫