HTML总结

已于 2022-06-19 20:24:40 修改
阅读量78 收藏
点赞数 1
文章标签： html vscode 编辑器
于 2022-06-19 20:10:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56732056/article/details/125348387
版权
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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML学习内容总结
qq_48681023的博客
07-10 2125
HTML学习总结
html表单实验总结,html表单知识的相关总结
weixin_34307029的博客
06-09 2649
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。1. ht...
php 输出html 总结
chihouzi的博客
06-29 1万+
while($row = $result->fetch_assoc()) { echo "<a href={$row['link']} title=''> {$row['name']}</a></br>"; }
超详细html5登录注册页面总结
weixin_45738504的博客
03-28 1万+
一、HTML5简介 HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。 HTML5优势 HTML5并不是一种革新的的升级，而是一种向规范向习惯的妥协，因此HTML5并不会带给开发者过多的冲击，从HTML4到HTML5过渡会非常轻松。 HTML5解决了以下四点问题 ： 解决跨浏览器问题 部标签代替了原来的JavaScript 更明确的语义支持 增强了web应用程序和功能 二、我的第一个网页 下面在ideal中先写一个第一个网页，测试一下环
HTML页面知识点小总结(巨详细)
bafeiq的博客
02-11 8311
HTML页面最基础的东西总汇，建议刚开始接触前端页面的小伙伴们收藏哦，可以随时拿出来学习或者复习加深印象。
HTML——基础知识点总结
热门推荐
m0_61016904的博客
10-30 2万+
HTML总结 一.HTML简介 1.HTML HTML(HyperText Markup Language),超文本标记语言，使用各种标记来表示文档的结构以及标识超链接的信息。 2.HTML文档 HTML文档包含了标签及文本内容，并且 html 文档也叫做 web 页面。 二.HTML基本结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 菜鸟教程（runoob.com
HTML+CSS学习总结
weixin_53351919的博客
06-26 2661
html+css学习总结
html总结与理解，自己的心得
chen983234416的博客
11-14 9134
    首先什么是html，它用来做什么，他有什么用 html是个缩写，全名为HyperText  Markup Language，中文名字叫做，超文本链接语言，是用来做静态网页的，也是做动态网页的基础，作用的话就是做个标记，用来让浏览器解析，最后显示出页面。     接下来我解释下什么叫做超文本，什么叫做标记，什么叫做语言，什么叫做静态网页，动态网页，什么是浏览器解析标记 1、超文本：顾名...
HTML和CSS总结
m0_46275263的博客
06-15 3201
前端三剑客之二：HTML和CSS的初步了解
学习html的心得体会
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
html总结.xmind
09-08
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
html总结1
08-03
1.图像与文件在同一目录下 3.图像在下一级目录中 文件夹名/x.jpg"> 1.base标签必须
HTML总结html相关
03-28
把以前学习的东西做一个整理，方便实时查阅，希望大家能够喜欢。
HTML总结.xmind
02-23
HTML总结.xmind
html总结.
03-02
html总结.
HTML的使用（中）
weixin_74141222的博客
05-14 1050
在许多网页平台上浏览，大多逃不了登录账号。此时在网页中填写的用户名文本框与密码文本框，就属于HTML的表单元素。以上就是HTML表单的内容了，表单提供了大量能使浏览器用户快速便捷地填写数据的方法，构建了数据的交互传输。
html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
hx_1199的博客
05-17 401
rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。
自动化测试报告样式HTMLTestRunner、BeautifulReport、HTMLReport、Allure你喜欢哪个？
最新发布
qq_48811377的博客
05-17 701
有很多种自动化测试报告样式，接下来主要看下这些常用样式的效果是怎样的每个样式各有特点，选择自己喜欢的使用就好了自动化测试时你用的最多的是哪个呢？
JSON格式化输出html——数组+对象+JSON字符串+汉字——基础积累——@pgrabovets/json-view
yehaocheng520的博客
05-15 286
JSON格式化输出html——数组+对象+JSON字符串+汉字——基础积累——@pgrabovets/json-view
html样式总结,html标签自带样式总结(示例代码)
06-01
HTML 标签自带样式总结： 1. `<h1>` - `<h6>` 标签：自带字体大小和加粗样式。 ``` 这是一个h1标签 这是一个h2标签 这是一个h3标签 这是一个h4标签 这是一个h5标签 这是一个h6标签 ``` 2. `<p>` 标签：自带行间距...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值