HTML5教程

web学习---HTML总结

本文主要是介绍web学习---HTML总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

web学习--HTML 总结

  • 软件 vs code 2020以及相关插件安装
  • HTML的学习总结
    • 何为HTML
    • 编写第一个网页
      • 新建一个工程文件夹
      • 新建HTML文件
      • 运行第一个Web网页
      • HTML的文档分析
        • html元素
        • head元素
          • utf-8字符集编码
          • 浏览器标签的图片
          • 浏览器标签的名字
        • body元素
        • 注释
        • 换行
        • 水平分割线
        • 输入框
        • 标题大小的设置
        • 超链接
        • 锚点（书签）
        • 图片的插入以及位置
        • 表格

软件 vs code 2020以及相关插件安装

本次工程是在VS code 2020中编辑的，可以去官网下载，对于安装网上有很多教程，小编也不再重复写。
安装插件
首先点击下图中圈出来的图形
在这里插入图片描述
然后在文本框里面分别搜索Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence、Live server点击安装即可。

HTML的学习总结

何为HTML

HTML是超文本标记语言，我们可以使用HTML来构建我们的网页。

注意：HTML不是一门编程语言，而是一种用来构建网页框架的标记语言。

编写第一个网页

新建一个工程文件夹

点击文件，选择打开文件夹
在这里插入图片描述
此时我们可以新建一个文件夹，输入需要创建工程的文件夹名称

注意：工程文件夹最好不要放在C盘里；文件夹的名称最好是英文

新建HTML文件

点击下图所示的图标，创建一个后缀名为.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>

运行第一个Web网页

在HTML文档里面的空白区域单击鼠标右键，然后点击Open with Live Server
在这里插入图片描述
然后就可以在浏览器中看见刚刚编写的网页
在这里插入图片描述

HTML的文档分析

看看输入html文档里面的代码
在这里插入图片描述
不难看出每一对尖括号里面的内容在上下呼应
比如：和这就是一对
前面一个叫做开始标签，后面一个叫做结束标签；
在开始标签和结束标签里面就是内容；
开始标签+内容+结束标签=元素；
元素之间可以相互嵌套，HTML文档就是一个个元素组成的；

html元素

这个元素包含了整个完整的页面，其他的元素全部嵌套在其中。凡是写在元素外的内容都不会出现在网页上。

head元素

这个元素可以让你所想的包含在HTML页面中但不在HTML页面中显示的内容。
比如：编码、页面的样式、内部CSS等等

utf-8字符集编码
 <meta charset="utf-8">

这个元素设置文档使用utf-8字符集编码，使用这种编码方式会少很多麻烦，因为它可以识别人类大部分的文字。

浏览器标签的图片
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

首先我们随便下载一个.ico的图片，下载的途径应该保存到我们刚刚创建的工程文件夹中；
然后把href后面的favicon修改成图片的名称；
最后看看浏览器标签的图片是否是变成刚刚下载的图片
在这里插入图片描述

浏览器标签的名字
  <title>页面标题</title>

把页面标题修改成web学习

       <title>web学习</title>

在这里插入图片描述

body元素

body元素 包含能在页面看到的所有内容，包括文本，图片，音频，游戏等等

注释

格式

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

在这里插入图片描述

在 code 软件中，输入Ctrl + /即可快捷的进行注释

换行

格式

<br>

在这里插入图片描述

水平分割线

格式

<hr>

在这里插入图片描述

输入框

格式

<input>

在这里插入图片描述
还有带属性的段落输入框和带属性的输入框
在这里插入图片描述

标题大小的设置

格式

  <h1>一级标题</h1>
  <h2>二级标题</h2>

标题有h1到h6六种大小
在这里插入图片描述

超链接

格式

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

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

在这里插入图片描述

锚点（书签）

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

格式

  <h2 id="C4">第四章 论零号病人的重要性</h2

  <a href="#C4">跳到第四章</a>

注意这里的id值必须是唯一的，其余地方不能再出现相同的id值

在这里插入图片描述
思考： 经常在某些网站上看到一个浮动图标显示"回到页首"，它是如何实现的？

  <h1 id="C4">首页</h1

  <a href="#C4">回到首页</a>

图片的插入以及位置

格式

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

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

现在的图片是从网页上获取的，我们也可以下载图片到自己的工程目录下（不建议，因为这样自己的电脑可以顺利打开图片，无法保证别人的电脑有这个目录下的图片）

表格

格式：

<table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>luo</td>
      <td>youxin</td>
      <td>18</td>
    </tr>
    <tr>
      <td>zeng</td>
      <td>xiang</td>
      <td>24</td>
    </tr>
  </table>
这篇关于web学习---HTML总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航