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总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!