【某电商实习】第一周1/6--HTML测试准备.md
我没有签字是为了保密~工厂名称我就不贴了，不算“国外”一级工厂。 /doge/doge 疯狂地救你的命
md格式的二级列表会有一点格式错误html显示文本，不用介意。
考试准备 HTML
HTML 参考指南
之前没注意到的点
写在前面
我使用 runoob 来准备考试
超文本标记语言
HTML 基础知识
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
图片-20230422131633657
图片-20230422131055900
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
// "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档结构
html标签 不区分大小写, 因为浏览器都会将他们解释成小写的, 大小写区别只是为了语义和可读性.
是标准写法.
HTML 元素
HTML 属性和值
HTML 表单
bag模型是CSS中用于布局的基本概念，每个HTML元素都可以视为一个bag。 袋子模型包括四个部分：内容区域、内行间距、边框和外间距。 通过设置该属性，可以控制包的大小和位置。
CSS布局是指如何使用CSS来排列HTML元素。 通过设置袋子模型的大小和位置、使用浮动、定位和弹性袋子，可以通过多种方式实现布局。 常用的布局模式有流体布局、网格布局、弹性袋布局等。
响应式设计是一种用于使网站在不同设备上不同屏幕尺寸和比特率下呈现不同布局和风格的设计方法。 响应式设计可以利用CSS媒体查询、弹性布局等技术使网站在台式笔记本、平板笔记本、手机等多种设备上拥有良好的用户体验。 响应式设计可以提高网站的可访问性和可用性，还可以帮助提高搜索引擎优化 (SEO)。
语义HTML
HTML语义是指使用有意义的HTML标签来表示文本内容和页面结构。 它有助于提高页面的可读性和可访问性html显示文本，以及SEO优化和可维护性。
使用语义 HTML 标记可以提高页面的可读性和可访问性。 在缺乏样式的情况下，语义标记可以使页面内容更加结构化和可读。 据悉，搜索引擎可以通过HTML标签更好地理解页面内容，这有助于提高SEO。在维护代码时，使用语义标记也使代码更容易理解和更改
- 定义页面或区域的页眉
Runnoob通过
字符集
后缀
HTML 文本低格式
该块包含大部分语义标签。
- 定义粗体文本
- 定义着重文字
- 定义斜体
- 定义小号字
- 定义加重语气
- 定义下标
- 定义商标
- 定义插入字
- 定义删除字
计算机输入相关
- 定义计算机代码
- 定义键盘码
- 定义计算机代码样本
- 定义变量
- 定义预格式文本 // 不能包含块级元素
其他
- 定义缩写
- 定义地址
- 定义文字方向
- 定义长的引用
- 定义短的引用语
- 定义长的引用
- 定义一个定义项目
注意注意～所有的内容都只是语义，不同浏览器如何显示～现在我更愿意用class来定义语义，然后用css来控制样式，所以语义在很多地方并不是那么重要～还有seo之类的，你需要注意的是。 但seo不仅仅关注这部分
图片-20230424152352287
关注bdo，可以形成笔试题
定义文本方向的几种方法
// dir 属性
<p dir="rtl">这是一段从右到左的文本。
// bdo标签
<bdo dir="rtl">这是一段从右到左的文本。
// css的direction属性
<p style="direction: rtl;">这是一段从右到左的文本。
a 标签的属性 - 导致弹出窗口滥用
<a href="http://www.example.com" target="_blank">点击打开一个新窗口</a>
现在浏览器通常会限制使用打开新窗口以避免弹出窗口
关于在链接前面添加/
图片-20230424155251293
head 标签中的 image-20230424155835969 基本属性
头部只能写title、meta、style、link、script、noscript、base7标签
内嵌框架
frameborder属性用于定义iframe是否表示是否显示边框。 将属性值设置为“0”会删除 iframe 的边框：
我是用markdown写的，这一段写不下去了...会直接解析html
字符实体
不间断空格 不间断空格
HTML 参考指南
作弊清单
HTML 标签的缩写和全名
之前没注意的点meta标签的属性
图片-20230422140102946
不仅name会使用property来指定原始数据的名称
<meta property="og:title" content="My Sample Website">
<meta property="og:description" content="This is a sample website for learning HTML, CSS, and JavaScript.">
Facebook 和 Twitter 等社交媒体平台可以使用自定义属性来指定元数据，以便在社交媒体上共享 Web 内容时更好地显示。
mailto 链接允许用户使用用户的默认电子邮件客户端直接从网站发送电子邮件。 但是如何在 HTML 中创建 mailto 链接呢？
在本文中，我将引导您完成有关如何在 HTML 中创建 mailto 链接的示例代码。
基本的mailto链接句型
以下是mailto链接的基本句型：
Example mailto link
在浏览器中，用户可以单击链接html链接代码，它将打开他们的默认电子邮件客户端。
在此示例中，当我单击该链接时html链接代码，它会打开我的电子邮件应用程序，其中的电子邮件地址填充在发件人数组中。
使用这些技巧，我可以快速发送电子邮件并返回网站。
如何将多个电子邮件地址添加到 mailto 链接
您可以使用以下语法将多个电子邮件地址添加到 mailto 链接：
Multiple email addresses
用冒号分隔多个电子邮件地址非常重要。
当我单击浏览器中的链接时，它会打开邮件应用程序并使用电子邮件地址填充“收件人”字段。
如何向 mailto 链接添加主题行
下面是一些示例代码，向您展示如何向 mailto 链接添加主题行。
Using the subject parameter
在电子邮件地址之后，您需要添加一个？ 将电子邮件和主题参数分开。 如果说 ？ 省略，主题链接将不起作用。
如何将 CC 和 BCC 添加到 mailto 链接
此示例向您展示如何将 CC（抄送）和 BCC（密送）收件人添加到 mailto 链接。
Using the CC and BCC parameters
在电子邮件地址之后，您需要添加一个？ 将电子邮件和抄送参数分开。 您还需要在密件抄送和主题参数之前添加 &。
如何在mailto链接中添加body参数
这是一个向您展示如何将 body 参数与 mailto 链接一起使用的示例。 这允许您将文本添加到电子邮件正文。
Using the body parameter
需要在body参数前添加&。
使用 mailto 链接有什么缺点吗
使用 mailto 链接的缺点之一是它经常被用户视为垃圾邮件。 不幸的是，许多垃圾邮件发送者使用此选项向用户发送电子邮件。 因此，当您使用它时请记住这一点。
使用 mailto 链接的优点
使用 mailto 链接的一个很好的理由是，如果您要向一组您认识的人发送电子邮件。 如果整个组使用默认电子邮件客户端，那么使用 mailto 链接是联系表单的一个很好的替代方案。
原文：Mailto Link – 如何制作 HTML 电子邮件链接 [示例代码] 作者：Jessica Wilkins
