墨滴

Shinkai005

V1

2023/04/25阅读：22主题：极简黑

【某电商实习】第一周1/6--HTML复习

【某电商实习】第一周1/6--HTML复习.md

没签保密,so我就发了~ 厂子名我就不发了, 不算"国内"一线大厂./doge /doge 疯狂保命

复习HTML

我用runoob复习

HTML

  1. HTML基础知识

    • HTML是什么？ 
    HTML 是用来描述网页的一种语言。

   - HTML 指的是超文本标记语言: HyperText Markup Language
   - HTML 不是一种编程语言，而是一种标记语言
   - 标记语言是一套标记标签 (markup tag)
   - HTML 使用标记标签来描述网页
   - HTML 文档包含了HTML 标签及文本内容
   - HTML文档也叫做 web 页面
    • HTML的历史和版本
    image-20230422131633657
    image-20230422131633657
    • HTML文档的结构
    image-20230422131055900
    image-20230422131055900
    • HTML元素和标签 
    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
// "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
    HTML 标签是由尖括号包围的关键词，比如 <html>
    HTML 标签通常是成对出现的，比如 <b> 和 </b>
    标签对中的第一个标签是开始标签，第二个标签是结束标签
    开始和结束标签也被称为开放标签和闭合标签
    • HTML属性和值
    • HTML注释
    • HTML特殊字符和实体

  2. HTML文档结构

    • DOCTYPE声明 
    html标签 不区分大小写, 因为浏览器都会将他们解释成小写的, 大小写区别只是为了语义和可读性. 
<!DOCTYPE html> 是标准写法.
    • HTML标签
    • HEAD标签
    • META标签
    • TITLE标签
    • BODY标签

  3. HTML元素

    • 文本元素
    • 图像元素
    • 超链接元素
    • 列表元素
    • 表格元素
    • 表单元素
    • 媒体元素
    • 框架和iframe

  4. HTML属性和值

    • 全局属性
    • 事件属性
    • 表单属性
    • 图像属性
    • 超链接属性
    • 媒体属性

  5. HTML表单

    • 表单的结构
    • 输入类型
    • 文本框
    • 单选框和复选框
    • 下拉列表
    • 文件上传
    • 表单提交和验证

  6. HTML样式和布局

    • CSS样式表
    • 样式属性
    • 盒子模型

    盒子模型是 CSS 中用于布局的一种基本概念，每个 HTML 元素都可以看作是一个盒子。盒子模型包括内容区域、内边距、边框和外边距四部分，通过设置这些属性可以控制盒子的大小和位置。

    • 布局

    CSS 布局是指如何使用 CSS 来布置 HTML 元素。布局可以通过设置盒子模型的大小和位置、使用浮动、定位和弹性盒子等多种方法来实现。常用的布局模式包括流式布局、网格布局和弹性盒子布局等。

    • 响应式设计

    响应式设计是一种设计方法，用于使网站在不同设备上的屏幕大小和分辨率下呈现不同的布局和样式。响应式设计通过使用 CSS 媒体查询和弹性布局等技术，可以使网站在桌面电脑、平板电脑、手机等多个设备上都具有良好的用户体验。响应式设计可以提高网站的可访问性和可用性，同时也有助于提高 SEO。

  7. HTML语义化

    • 什么是语义化

    HTML 语义化是指使用具有含义的 HTML 标记来表示文本内容和页面结构。它有助于提高页面的可读性和可访问性，也有助于 SEO 优化和维护性。

    • 为什么需要语义化

    使用具有语义的 HTML 标记可以提高页面的可读性和可访问性。在没有样式的情况下，具有语义的标记可以让页面内容更具有结构性和可读性。此外，搜索引擎可以通过 HTML 标记来更好地理解页面内容，有助于提高 SEO。在维护代码时，使用具有语义的标记也可以使代码更易于理解和修改

    • 语义化的元素 
    <header> - 定义页面或区域的页眉
<nav> - 定义导航链接的容器
<main> - 定义页面主要内容的容器
<article> - 定义独立的、完整的文章或页面区块
<aside> - 定义页面内容之外的区域，例如侧边栏
<section> - 定义页面中的一个区块，例如章节或区域
<footer> - 定义页面或区域的页脚

Runnoob过一遍

字符集

  • html meta标签里声明的charset属性 要和浏览器默认对应. 不然会出现乱码; 常见有gbk和utf-8

后缀

  • .html 和.htm一样的, 单纯操作系统限制了显示长度

HTML 文本格式化

这块包含了大部分语义化标签.

- <b> 定义粗体文本
- <em> 定义着重文字
- <i> 定义斜体
- <small> 定义小号字
- <strong> 定义加重语气
- <sub> 定义下标
- <sup> 定义商标
- <ins> 定义插入字
- <del> 定义删除字
计算机输入相关
- <code> 定义计算机代码
- <kbd> 定义键盘码
- <samp> 定义计算机代码样本
- <var> 定义变量
- <pre> 定义预格式文本 // 不能包含块级元素
其他
- <abbr> 定义缩写
- <address> 定义地址
- <bdo> 定义文字方向
- <blockquote> 定义长的引用
- <q> 定义短的引用语
- <cite> 定义长的引用
- <dfn> 定义一个定义项目

注意注意~ 所有的内容只是语义化,如何显示不同浏览器不同的~ 如今比较愿意使用class去定义语义,然后css去控制样式, 所以语义化很多地方不是那么重视~ 但是seo之类, 就需要注意了. 不过seo也不只专注这一部分嘛

image-20230424152352287
image-20230424152352287

注意一下bdo, 可以产生一个面试问题

定义文本方向的几种方式

// dir 属性
<p dir="rtl">这是一段从右到左的文本。</p>
// bdo标签
<bdo dir="rtl">这是一段从右到左的文本。</bdo>
// css的direction属性
<p style="direction: rtl;">这是一段从右到左的文本。</p>

a标签的属性-引出弹窗滥用

<a href="http://www.example.com" target="_blank">点击打开一个新窗口</a>

如今浏览器一般会限制使用新开一个窗口, 防止弹窗

  • 限制了html 还可以使用window.open
  • 但是依旧会被限制, 比如新窗口无法使用工具栏地址栏等.

关于在链接后面加/情况

image-20230424155251293
image-20230424155251293
image-20230424155835969
image-20230424155835969

head标签里base属性

  • base属性是写指定页面上所有链接的默认地址.

只有title, meta, style, link, script, noscript, base 7个标签可以写在head里

iframe

frameborder 属性用于定义iframe表示是否显示边框。 设置属性值为 "0" 移除iframe的边框:

我用markdown写的, 这块不能写出来...会直接解析html

字符实体

不间断空格 non-breaking space &nbsp

HTML 参考手册

https://www.runoob.com/html/html-quicklist.html 速查列表

https://www.runoob.com/html/html-tag-name.html HTML 标签简写及全称

以前没注意的点

meta标签的属性

image-20230422140102946
image-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等社交媒体平台，可以使用自定义的property属性来指定元数据，以便在社交媒体上分享网页内容时更好地显示。

http-equiv 属性

在HTML中， 标签还有一个常用属性是http-equiv属性，它用于指定HTTP头部信息（HTTP headers），以控制浏览器的行为。http-equiv的全称是“http equivalent”，意思是“HTTP等效”。它可以模拟HTTP头部中的各种字段，如Content-Type、Refresh、Set-Cookie等。通过使用http-equiv属性，开发人员可以在HTML文档中控制浏览器的行为，例如自动刷新页面、设置字符集、禁止缓存等。下面是一个使用http-equiv属性设置字符集的例子：

htmlCopy code
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

在这个例子中，http-equiv属性被设置为“Content-Type”，这意味着它模拟了HTTP头部中的Content-Type字段。content属性则用于指定Content-Type字段的值，包括字符集编码（如UTF-8）和文档类型（如text/html）。通过这样的设置，可以确保浏览器正确地解析和显示网页的内容。

有空会在写一下这部分, 因为这只是个广度学习笔记~ 不再往深走了

http通用字段

对于请求（即客户端向服务器发起的请求），通常至少需要包含以下头部字段：

  • Host：指定请求的目标服务器名称或IP地址；
  • User-Agent：指定客户端使用的浏览器或其他应用程序的名称和版本；
  • Accept：指定客户端接受的内容类型（MIME类型）；
  • Accept-Language：指定客户端接受的语言类型；
  • Accept-Encoding：指定客户端接受的内容编码方式；
  • Connection：指定客户端与服务器之间的连接方式；
  • Cache-Control：指定客户端缓存响应的方式。

对于响应（即服务器向客户端发送的响应），通常至少需要包含以下头部字段：

  • Date：指定响应产生的日期和时间；
  • Server：指定服务器的名称和版本；
  • Content-Type：指定响应的内容类型（MIME类型）；
  • Content-Length：指定响应的内容长度；
  • Cache-Control：指定客户端缓存响应的方式；
  • Set-Cookie：指定在客户端上设置的Cookie；
  • Location：指定重定向的目标地址。

通过抓包工具可以更好理解~

MIME类型

MIME的全称是Multipurpose Internet Mail Extensions，是一种互联网标准，用于在电子邮件系统和其他应用程序中识别文件的性质和格式。

常见的MIME类型包括：

  • text/plain：纯文本格式
  • text/html：HTML格式
  • text/css：CSS格式
  • application/javascript：JavaScript代码格式
  • application/json：JSON数据格式
  • image/png：PNG图片格式
  • image/jpeg：JPEG图片格式
  • image/gif：GIF图片格式
  • application/pdf：PDF文档格式
  • application/msword：Word文档格式
  • application/vnd.ms-excel：Excel文档格式
  • application/vnd.ms-powerpoint：PowerPoint文档格式
  • audio/mpeg：MP3音频格式
  • video/mp4：MP4视频格式

等等。MIME类型的具体定义和对应的文件格式可以在MIME类型注册表中查看。

HTML空元素

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

连续空行

  • 连续的空格和回车, 浏览器会解析成一个空格.

写在后面

Runnoob 很久没更新了. 就像是map和area 已经不是主流了依旧会讲MDN就不会涉及这些了.

不过我用它这次是情怀嘛, 毕竟很多年前用它学的~

  • [x] html

  • [ ] css flex

  • [ ] js复习

  • [ ] html5

单词:

  1. Color - 颜色
  2. Hue - 色相
  3. Saturation - 饱和度
  4. Brightness - 亮度
  5. Shade - 阴影
  6. Tint - 浅色
  7. Tone - 中间色
  8. Complementary - 互补色
  9. Monochromatic - 单色调的
  10. Gradient - 渐变
- END -

分类：

后端

标签：

后端

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai