HTML总结

已于 2022-06-19 20:24:40 修改
阅读量100 收藏
点赞数 1
文章标签： html vscode 编辑器
于 2022-06-19 20:10:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56732056/article/details/125348387
版权
本文介绍了HTML的基本概念，包括标签结构、元素解析、编辑器推荐（VSCode）使用，以及核心元素如标题、文本格式、超链接、图片和表格的详细讲解。通过实例学习，读者能掌握创建和查看简单HTML页面的基础。
摘要由CSDN通过智能技术生成
HTML 学习总结

HTML 简介

HTML(英文: Hyper Text Markup Language)

  • 超文本标记语言，非编程语言。
  • 标记语言是一套标记标签(markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML标签及文本内容
  • HTML 文档也叫做web页面
  • HTML文档的后缀名(.html 或 .htm)

实例解析

  • <!DOCTYPE html> 声明为HTML文档
  • <html>元素是HTML页面的根元素
  • <head>元素包含了文档的元（meta）数据，如<meta charset=“utf-8”>定义网页编码格式为utf-8。
  • <titlt>元素描述了文档的标题
  • <body>元素包含了可见的页面内容
  • <h1>元素定义一个大标题
  • <p>元素定义一个段落

注: 在浏览器的页面上使用F12按键或点击鼠标右键后再点击检查就可开启调试模式，然后将看到组成标签。(非常好的学习手段，包括以后的CSS学习）

HTML 编辑器

VS code

Visual Studio Code (简称 VS Code)微软公司开发，同时支持 Windows、Linux和macOS等操作系统且开放源代码编辑器，编辑器中内置了扩展程序管理的功能。

  • 安装教程参考:https://www.runoob.com/w3cnote/vscode-tutorial.html
  • 运行该软件后，点击软件界面左侧第五个图标即可进行所需插件安装。
  • 推荐安装以下插件：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。

在运行VS Code后在File -> Auto Save选中，这样会自动保存代码，实时查看，方便编写。

HTML 文档结构

  • 新建工作目录

打开/新建一个文件夹，如下图:

  • 新建HTML文件

在该文件夹下新建后缀名为html的文件，如下图:

在该文件中输入如下内容:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
</head>
<body>
  <h1>Web页面，这是标题</h1>
  <p>这是一个段落</p>
</body>
</html>
  • 查看结果

web浏览器如 Chrome、Firefox、Edge、Safari等用来读取HTML文件并呈现出来。

打开方式：
1、安装open in browser插件后在code的编辑区点击鼠标右键即可看到快捷方式在浏览器中打开。如图所示:

2、安装Live Server插件可直接点击HTML文件右下方的Go Live按钮。

HTML 基础

注释

使用特殊记号<i-- 需注释的内容 -->
可以使用快捷键**ctrl + /**进行快速注释

空元素

一般来说元素都有开始标签，内容，接受标签，但是<br>,<hr>,<input>,<img>,<a>等元素只有一个开始标签，称之为空元素。通常使用这类元素来插入/嵌入一些内容。

元素的属性

元素可以有相关属性，属性包含元素额外信息，这些信息不会再浏览器中显示。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

一个属性必须包含如下内容:

  1. 在属性和元素名称之间需要一个空格隔开。(如果已经有一个或多个属性，就与前一个属性加一个空格。)
  2. 属性名称后面跟着一个 = 号。
  3. 一个属性值，由一对引号 “” 引起来。

标题 （heading）

从小到大共有6级标题:<h1> ~ <h6>
在一个页面中标题作用很大:

  1. 搜索引擎用标题来索引页面的内容
  2. 用户也习惯以标题进行主要内容浏览，以决定是否查看该页面

注意: 不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 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>

超链接

超链接语法

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

说明:

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

锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->

注意:

  1. 元素的 id 值必须是唯一的，也即页面不能再有其它元素的 id 值为C4
  2. 超链接中的地址需要有#符号

图片及文件路径

插入图片语法:

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

说明:

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

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

例子解释
<img src=“picture.jpg”>该图片文件与当前文档在同一目录中
<img src=“./images/picture.jpg”>该图片文件在当前目录下的images目录中
<img src=“…/picture.jpg”>该图片文件在上一级目录中

表格

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

代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

列表 List

无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

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

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

有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
</ol>

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

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

表单 Form

当网站需要得到人们一些信息且比较多时使用表单（form）让用户填写或选择比较方便。
试分析如下代码:

<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">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

提示: 当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

其他

HTML的元素可以以称为区块或内联的方式进行显示

区块元素

浏览器显示时以新行 开始 或 结束 ，如:<h1>,<pre>,<ul>,<table>,<div>等。

内联元素

每个元素都跟在上一个元素后面，不会新起一行，如:<span>,<input>,<td>,<a>,<img>等。

预设格式

使用<pre>标签可以帮助我们在网页展示标签里我们自己写的格式。

特殊字符

  • 在 HTML 中，某些字符是预留的。
  • 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
    如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体

例: 我们想要在页面使用<pre>标签显示HTML的源代码

<pre>
  <h1>这是个一级标题</h1>
  <p>这是一个段落<p>
  <a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a>
<pre>

和:

<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
  &lt;a href="https://twitter.com/"&gt;眼见何事，情系何处，身处何方，心思何人&lt;/a&gt;
<pre>

只有后者才能得到我们想要的结果。

特殊字符参考ISO-8859-1 字符实体手册

时光你好i
关注
HTML蓝色爱心射线
兔子王
05-26 8万+
HTML蓝色爱心射线完整代码。
php 输出html 总结
chihouzi的博客
06-29 1万+
while($row = $result->fetch_assoc()) { echo "<a href={$row['link']} title=''> {$row['name']}</a></br>"; }
HTML总结（贵美商城项目）
qq_43956225的博客
09-24 2243
HTML总结（贵美商城项目） 时隔一年多，终于又上手了一次Html项目，最大的感觉就是如果让自己来写一个项目的话，自己可以搞定！ 这次完成这个项目大概用了七天。这次完成的这个项目也是检验一下了自己，很庆幸自我感觉良好。心得主要分为以下两个方面： 布局 布局真的非常重要，一个合理的布局，真的可以省去很多不必要的麻烦。写一个项目，网页要从格局入手，先摆好框架，再去慢慢填充。每一个布局可以用醒目的边框，背景颜色来填充，这样可以快速区分每一个的网页的布局。CSS样式需要慢慢的改动，真的不能着急。 ifra
HTML 知识点总结
m0_57202083的博客
08-12 2531
HTML实例 <!DOCTYPE html> <!-- 注:<!DOCTYPE>标签没有结束标签! --> <html><!-- 元素是 HTML 页面的根元素 --> <head><!-- (头部部分) --> <meta charset="utf-8"> <title>显示在浏览器标题栏中的标题</title> </head> <body>&.
HTML页面知识点小总结(巨详细)
bafeiq的博客
02-11 8598
HTML页面最基础的东西总汇，建议刚开始接触前端页面的小伙伴们收藏哦，可以随时拿出来学习或者复习加深印象。
HTML5的学习总结
JavaAlliance
05-21 3079
HTML5的学习总结 一、什么是HTML5？ 1.支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力 2.HTML5的设计...
学习html的体会和总结
weixin_45669184的博客
01-21 6971
前言 HTML是一种标识型语言 虽然我python和c语言啥都不会骂人但是我还是能学懂html，在几天的学习中，我学会了html中一些常用的标签，和编写html的思路，以及模仿一些简单的网页，我感觉HTML还是很interesting，学习的过程不会感觉很枯燥，每天我还会复习笔记和自己敲一些东西，在学完零碎的东西之后，一开始我完全不知道怎么开始弄，最后在同学和百度的帮助下问题一一得到了解决。 体会...
vue的index.html总结
热门推荐
铁马冰河入梦来
10-08 1万+
为啥要有index.html 对vue来说index.html是一个总的入口文件，vue是单页面应用，挂在id为app的div下然后动态渲染路由模板。 单页面应用 单页面应用是和多页面应用相对而言的。多页面应用是在每次页面跳转的时候，后台服务器都重新生成一张html页面，首屏时间快（只需要加载一次html），搜索引擎优化效果好（html内容都在），但是切换慢（每次页面切换都需要发出一次http请...
HTML基础知识总结
ss810540895的博客
05-05 8835
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
html5项目总结
weixin_40388697的博客
11-30 5811
HTML5项目总结 总的来说，我们组能在短短的一周的时间里把项目完成，我们还是都挺开心的。 不过在此期间也有些不足之处和小小的遗憾。 毕竟第一次做项目，我也是第一次开始管理项目。所以一开始我主要是给每个组员一个大部分的内容要求他们完成。但渐渐的我开始发现效率低到我们跟本没办法按时完成整个项目。在此期间我也认真的观察了组员们做的进度和在此期间犯的错误。 由于第二天组员们给我的成果根本不
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
Html学习的代码及总结.zip
01-01
Html学习的代码及总结Html学习的代码及总结Html学习的代码及总结 Html学习的代码及总结Html学习的代码及总结Html学习的代码及总结 Html学习的代码及总结Html学习的代码及总结Html学习的代码及总结 Html学习的代码及...
HTML学习总结（6）
06-14
HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结HTML学习总结
HTML学习内容总结
qq_48681023的博客
07-10 2309
HTML学习总结
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 219
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2073
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 937
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 939
【代码】Html编写发射粒子爱心。
HTML入门教程22：HTML文件路径
软考鸭
10-30 561
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
HTML常用标签总结及用法实例
经过一段时间的学习，对于HTML也有了基础的认识。在网页基本结构中，一个HTML网页最基本由网页头...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值