HTML 知识扫盲

2023-09-14 20:10:13

写在前面

HTML 是一门超文本标记语言，不管你听没听说过 HTML，但在网上冲浪的途中你无时不刻都在与它接触，他遍布在每个你看得到的互联网的角落。其实对于笔者而言，我已经断断续续地学习过这门语言，经过时间的磋磨，所剩知识也是寥寥无几，这次借此机会复盘并总结一下 HTML，当然在这里我不会将 HTML 语言的细节全盘拖出，只是总结笔者认为的重点，与诸君共勉。最后再补充一句，知识的广度使你我力所不能及，但是我们身处当下的互联网盛世，适应时代改变学习思维，已成必然。

（本篇文章不刨根问底，且概概而谈）

常见标签

标签是HTML中的一个重要概念，但是html标签很多，对于不专注于前端开发的来说，记得下面一些常见标签即可，如遇场景需要使用其他陌生标签，再去查阅文档即可，这里推荐 菜鸟教程：

<!-- 注释标签 -->

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p>段落标签</p>

换行单标签
<br/>

格式化标签
<strong>加粗标签</strong>
<b>b 加粗标签</b>

<em>倾斜标签</em>
<i>倾斜标签</i>

<del>删除线标签</del>
<s>删除线标签</s>

<ins>下划线标签</ins>
<u>下划线标签</u>

图片标签
<img src="图片地址" alt="替换文本" title="提示文本" width="图片宽度" height="图片高度" border="边框">

超链接标签
1.添加链接
<a href="http://www.baidu.com">百度</a>
2.添加锚点（点击跳转）
<a href="#one">第一集</a>
	.
	.
	.
<p id="one">
   第一集剧情 <br/>
   第一集剧情 <br/>
   ...
</p>

列表标签
<h3>无序列表</h3>
<ul>
    <li>吃饭</li>
    <li>学习</li>
    <li>敲代码</li>
</ul>

<h3>有序列表</h3>
<ol>
    <li>吃饭</li>
    <li>学习</li>
    <li>敲代码</li>
</ol>

<h3>自定义列表</h3>
<dl>
    <dt>我的一天</dt>
    <dd>吃饭</dd>
    <dd>学习</dd>
    <dd>敲代码</dd>
</dl>

特殊字符

对于html中的特殊字符，是一些在HTML中具有特殊含义或被保留的字符。这些字符在HTML中具有特殊用途，如果直接在HTML文档中使用它们，可能会导致解析错误或被错误地解释。想要正确地在HTML文档中显示必须使用特定的语法格式，下面列出几种常见的特殊字符及对应的语法格式，端末附有完整对照表：

<：小于号（用于起始标签）。对应实体字符：&lt;
>：大于号（用于结束标签）。对应实体字符：&gt;
&：和号（用于表示特殊字符的开始）。对应实体字符：&amp;
"：双引号（用于属性值的引号）。对应实体字符：&quot;
'：单引号（用于属性值的引号）。对应实体字符：&apos;
：空格。对应实体字符：&nbsp;
©：版权符号。对应实体字符：&copy;

HTML特殊字符编码对照表

表格标签

表格是HTML中一个很重要的组件，实际操作中也经常遇得到，下面就以一个“成绩表”的例子详细地说一说：

		<!-- 表格 -->
		<table border="1px" cellspacing="0" align="center" width="350px" height="200px">
			<tr>
				<th colspan="2">成绩</th>
			</tr>
			<tr align="center">
				<td rowspan="2">语文</td>
				<td>100</td>
			</tr>
			<tr align="center">
				<td>95</td>
			</tr>
		</table>

呈现效果：

注释：

  1. 首先使用表格，必须要先写出<table></table>标签。
  2. table 标签中的：align 是表格相对于周围元素的对齐方式，border 表示边框，cellpadding内容距离边框的距离，cellspacing单元格之间的距离，width / height: 设置尺寸。
  3. 其中tr表示表格的一行，th表示表头单元格（内部文字会加粗居中），td表示普通单元格
  4. tr必须嵌套到table标签中，th、td必须嵌套到tr标签中
  5. rowspan="n" 表示跨行合并，colspan="n"表示跨列合并

表单标签

表单标签经常用在用户输入的各种场景下，下面同样以一个例子进行详细介绍：

<!-- 表单 -->
<form action="#" method="post">
	<table>
		<tr>
			<td>用户名:</td>
			<td colspan="3"><input type="text" name="username" placeholder="用户名"/></td>
		</tr>
		<tr>
			<td>密码:</td>
			<td colspan="3"><input type="password" name="userpassword" placeholder="密码"/> </td>
		</tr>
		<tr>
			<td>性别:</td>
			<td ><input type="radio" name="sex" value="男" />男</td>
			<td><input type="radio" name="sex" value="女" />女</td>
		</tr>
		<tr>
			<td>兴趣:</td>
			<td><input type="checkbox" name="interest" value="编程"/>编程</td>
			<td><input type="checkbox" name="interest" value="书法"/>书法</td>
			<td><input type="checkbox" name="interest" value="音乐" checked/>音乐</td>
		</tr>
		<tr>
			<td>协议:</td>
			<td colspan="3">
				<textarea rows="5" cols="50" name="messege" placeholder="请在这里键入附注"></textarea>
			</td>
		</tr>
		<tr>
			<td>老家:</td>
			<td colspan="3">
				<select name="location">
					<option value ="北京">北京</option>
					<option value ="河南" selected>河南</option>
					<option value ="广东">广东</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>生日:</td>
			<td colspan="3"><input name="birthday" type="date"/></td>
		</tr>
		<tr>
			<td >体重:</td>
			<td colspan="3"><input name="weight" type="number" min = "30" max="150" placeholder="30~150"></td>
		</tr>
		<tr>
			<td>上传附件:</td>
			<td colspan="3"><input type="file" id="fileUpload" name="fileUpload"></td>
		</tr>
		<tr>
			<td><input type="submit" name="注册" value="注册"></td>
			<td colspan="3"><input type="reset" name="重置" value = "重置"></td>
		</tr>
	</table>
</form>

呈现效果：

注释：

  1. 各种输入控件必须放到<form></form>标签中才有实际效果。
  2. input 标签表示各种输入控件，其中 type属性(必须有)，取值种类很多, checkbox(多选框), text(文本框), file(上传文件),password(密码框), radio(单选框)
    ,data(日期),number(数字域)等。
  3. 其中type还提供了三种按钮，分别是button(普通按钮)、submit(提交按钮)、reset(清空按钮)。
  4. placeholder 是一个用于在表单字段中显示提示性文本的属性。
  5. name表示给 input 起了个名字，尤其是对于 radio 单选按钮, 具有相同的 name 才能多选一。
  6. value属性input 中的默认值，一般text文本框和password密码框，不设置value值。
  7. checked默认被选中。(用于单选按钮和多选按钮)
  8. select 标签表示下拉框，<option></option>内填写下拉内容，option 中定义 selected 表示默认选中。
  9. textarea 标签表示文本域。
  10. 一般表单为了对齐美观，通常嵌套进表格标签<table></table>中使用 。

无语义标签

在实际开发中我们通常会使用到两种无语义标签<div></div>和<span></span>。虽然无语义，但它们提供了一种有效的方式将内容与样式和布局分离，同时增强了代码的可读性、灵活性和可扩展性。

<div></div>和<span></span>就是两个盒子，用于网页布局，其中：

  1. div 是独占一行的, 是一个大盒子。
  2. span 不独占一行, 是一个小盒子。
更多推荐

VHOST-SCSI代码分析（1）VHOST SCSI设备模拟

VHOSTSCSI设备的模拟是由QEMU和HOST共同实现的，QEMU模拟VHOSTSCSI设备配置空间等，而对于虚拟机通知HOST和HOST通知虚拟机机制由HOST内核实现。在QEMU中VHOSTSCSI设备继承关系如下：其它设备以及对应class_init函数和realize具现化实现与VIRTIO-SCSI一致，

Learn Prompt-为什么用 ChatGPT API？

引用人工智能先驱吴恩达先生说过的话：“一个系统需要的远不止一个提示（prompt）或者一个对LLM（大性语言模型）的调用。”API的优点：集成更深:通过API，您可以将ChatGPT集成到自己的系统和工作流中，实现更深层次的定制和控制。个性化的响应:您可以根据特定需求和场景调整模型的响应，例如，通过改变温度（tempe

华策影视AIGC工程师招聘； 百度大模型创业松；主流大语言模型的技术原理细节；AIGC Prompt的七个缺陷 | ShowMeAI日报

👀日报&周刊合集|🎡生产力工具与行业应用大全|🧡点赞关注评论拜托啦！🎯华策影视AIGC工程师招聘，AIGC在「文娱领域」的真正落地逛即刻时发现关注的AI博主@杨昌发布了自己公司的招聘信息，而且附上了团队氛围和工作感受等分享。华策影视是影视行业龙头企业，成立了AIGC应用研究院，重视AI且不算卷。岗位base上海

Learn Prompt-ChatGPT 精选案例:学习各国语言

过去，我们学语言需要花费很多时间来学习各种材料，再联系老师修改口语、作文等，十分费时费力。有了ChatGPT之后，我们就相当于有一个免费的，实时反馈的语言学习助手，大大节省了我们的时间。下面我将以英文的雅思学习为例子，结合口语和写作，介绍如何利用ChatGPT来学习语言。口语​插件安装​正式开始之前，我们要先完成插件的

安防监控系统/视频云存储/视频监控平台EasyCVR无法级联上级平台，该如何解决？

安防视频监控系统EasyCVR平台能在复杂的网络环境中，将分散的各类视频资源进行统一汇聚、整合、集中管理，在视频监控播放上，TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放，可同时播放多路视频流，也能支持视频定时轮播。视频监控管理平台EasyCVR支持多种播放协议，包括：HLS、HTTP-F

【视频】Python用LSTM长短期记忆神经网络对不稳定降雨量时间序列进行预测分析|数据分享...

全文下载链接：http://tecdat.cn/?p=23544在本文中，长短期记忆网络——通常称为“LSTM”——是一种特殊的RNN递归神经网络，能够学习长期依赖关系（点击文末“阅读原文”获取完整代码数据）。本文使用降雨量数据（查看文末了解数据免费获取方式）进行分析。视频：LSTM神经网络架构和工作原理及其在Pyth

Zynq UltraScale+ XCZU3EG 纯VHDL解码 IMX214 MIPI 视频，2路视频拼接输出，提供vivado工程源码和技术支持

目录1、前言免责声明2、我这里已有的MIPI编解码方案3、本MIPICSI2模块性能及其优越性4、详细设计方案设计原理框图IMX214摄像头及其配置D-PHY模块CSI-2-RX模块Bayer转RGB模块伽马矫正模块VDMA图像缓存VideoScaler图像缓存DP输出5、vivado工程详解PL端FPGA硬件设计PS

云原生服务无状态（Stateless）特性的实现

文章目录为何要使用无状态服务？无状态服务的实现方法1.会话状态外部化2.负载均衡3.自动伸缩4.容器编排5.数据存储6.安全性示例：使用SpringBoot实现无状态服务结论🎉欢迎来到云计算技术应用专栏~云原生服务无状态（Stateless）特性的实现☆*o(≧▽≦)o*☆嗨~我是IT·陈寒🍹✨博客主页：IT·陈寒

一文讲解ARMv8内存属性与类型（Memory types and attributes）简介

ARMv8中将内存分为两种类型：Normalmemory和Devicememory，Normalmemory适用于系统中的大部分内存，而Devicememory则适用于外设所使用的内存。1.NormalMemoryNormalmemory类型属性适用于系统中的大多数内存。它表示架构允许硬件对这些位置执行推测数据读取访问

NetSuite知识会汇编-管理员篇&顾问篇2023

本月初，开学之际，我们发布了《NetSuite知识会汇编-用户篇2023》，这次发布《NetSuite知识会汇编-管理员篇&顾问篇2023》。本篇挑选了近两年NetSuite知识会中的一些文章，涉及开发、权限、系统管理等较深的内容，共19篇。阅读对象是NetSuite的系统管理员与实施顾问。中国的NetSuite系统管

Android10 Settings系列（四）设置应用信息界面，动态控制应用是否可以在设置中卸载强制停止

一、前言笔者最近又遇到了个新的需求，在settings中针对特定应用，禁用应用管理的强行停止和卸载按钮。于是在这里记录分享一下，加深一下印象，方便下次遇到能够快速解决问题二、准备工作我们知道应用管理在Settings应用中，于是准备好定位。那么如何定位呢，这里有两个工具可以使用layoutinspector和uiaut

热文推荐
  1. Android Fragment动画实现

    在Android中，你可以使用FragmentTransaction来实现Fragment的动画效果。这允许你在添加、替换或移除Fragment时应用动画，从而改善用户体验。下面是如何实现Fragment动画的基本步骤：1.创建两个Fragment：首先，创建两个Fragment，例如FragmentA和Fragmen

  2. TS同时打包和监视所有ts文件或只指定ts文件

    当我们项目中ts文件较多时，我们如何直接打包所有ts文件为js文件？而不是使用tsc文件名一个一个去打包文件一、配置tsconfig.json文件创建一个tsconfig.json文件，该文件中不需要配置任何信息二、控制台输入打包命令在控制台输入如下代码：tsc三、对所有ts文件进行监听但是我们并没有对文件进行监听，修

  3. Linux各种命令-查询篇

    目录查看文件内容查看存储空间查看python安装目录查Ubuntu版本查看所有文件（含隐藏文件）查IP查看内存使用情况查看GPU使用情况查看CPU使用情况​​​​​​​查看文件内容cat[选项][文件...]-n：显示行号。-b：显示非空行号。-s：合并空白行。-E：在每行结尾添加$符号。-T：将制表符显示为^I。-v

  4. 交换机端口镜像详解

    交换机端口镜像是一种网络监控技术，它允许将一个或多个交换机端口的网络流量复制并重定向到另一个端口上，以便进行流量监测、分析和记录。通过端口镜像，管理员可以实时查看特定端口上的流量，以进行网络故障排查、安全审计和性能优化。以下是关于交换机端口镜像的详细介绍：工作原理：交换机端口镜像通过在交换机的配置中指定源端口和目标端口

  5. pycharm 中package, directory, sources root, resources root的区别

    【遇到的问题】导入yolov5中有utils文件，自己的代码中也有utils文件，使得yolov5中的这部分引用出错了。【解决方案】单独建立detection文件夹，把检测相关的都放在这里，yolov5是github上拉取的源码，发现yolov5中fromutilsimport...有下划线，且会认为是edgeserv

  6. 多输入多输出 | MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出

    多输入多输出|MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出目录多输入多输出|MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出预测效果基本介绍程序设计往期精彩参考资料预测效果基本介绍MATLAB实现PSO-LSSVM粒子群优化最小二乘支持向量机多输入多输出1.dat

  7. 【码银送书第七期】七本考研书籍

    八九月的朋友圈刮起了一股晒通知书潮，频频有大佬晒出“研究生入学通知书”，看着让人既羡慕又焦虑。果然应了那句老话——比你优秀的人，还比你努力。心里痒痒，想考研的技术人儿~别再犹豫了。小编咨询了一大波上岸的大佬，这份备考书单给大家参考。专业课（此处特指408，全称计算机专业基础综合）知识点超级多，题目灵活，数据结构、计算机

  8. 考研408 | 【计算机组成原理】 数据的表示和运算

    进位计数制十进制计数法：推广：r进制计数法任意进制-->十进制：二进制<-->八进制、十六进制：各种进制的常见书写方式：十进制-->任意进制：十进制-->二进制（拼凑法）：真值和机器数：总结：BCD码总结：无符号整数的表示和运算无符号整数在计算机中的应用：无符号整数的表示：无符号整数的加法运算：无符号整数的减法运算：总

  9. uniapp运行到IOS真机提示 错误:请查看是否设备未加入到证书列表或者确认证书类型是否匹配

    参考文章：请查看是否设备未加入到证书列表或者确认证书类型是否匹配ios开发描述文件必须绑定调试设备，只有授权的设备才可以直接安装基座，所以在申请开发描述文件之前，先添加调试的IOS设备。前往网站https://developer.apple.com，在Devices中，添加手机设备UUID第一步：登录第二步：检查设备列