前端和HTML | 青训营笔记

全国人民
113 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

前端

重点：人机交互

关注的方面：功能 界面 无障碍（适老化） 安全 性能 兼容 体验

HTML

概念:由简单的不同元素组成的超文本标记语言(Hyper Markup Language)

<p>这里是字节跳动青训营</p>

常用标签

h1-h6

<h1>h1长这样</h1>
<h2>h2长这样</h2>
<h3>h3长这样</h3>
<h4>h4长这样</h4>
<h5>h5长这样</h5>
<h6>h6长这样</h6>

image.png

列表

有序列表

<h4>Todo List</h4>
<ol>
  <li>学习</li>
  <li>学习</li>
  <li>还是学习</li>
</ol>

image.png 无序列表

<h4>购物清单</h4>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

image.png 自定义列表 自定义列表包含3个HTML元素：

  • dl: 列表元素，作用同 ol 和 ul
  • dt: 术语
  • dd: 描述
<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.
  </dd>
</dl>

image.png

注意：dt术语和dd描述的关系，可以是一对一、也可以是一对多、还可以是多对多，按需求写就好

链接

<a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>

两个重要属性：

  • href: 其属性值包含超链接指向的 URL 或 URL 片段。 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部（这种行为是 HTML5 的特性）
  • target: 该属性值决定在何处显示目标链接资源 _blank: 在新窗口打开; _self: 在当前页面加载

输入

<input>

一般配合表单<form></form>使用

重要特性

语义化

语义化的含义：语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

语义化的好处：

  • 代码的可读性
  • 有利于搜索引擎的优化
  • 可维护性
  • 提升无障碍性
avatar
文章
阅读
粉丝