HTML基础与语义化 | 青训营笔记

KKPROGRAMING
233 阅读3分钟

HTML基础与语义化 | 青训营笔记

🐾前言

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

对于前端“三件套”来说，HTML的学习相对来说还是较为简单的。但或许也因为不够重视，所以容易在学习时遇到知识的遗漏。
今天正式开始了字节跳动第四届青训营前端方向的授课，下面整理了在课堂上学习到的要点，对于复习与查漏补缺也有一定的帮助~

🐤HTML基础

HTML (Hypertext Markup Language)

超文本标记语言
不仅仅是文本
在文档中还可以展示多种资源

语法

  • 不区分大小写🚫，推荐小写
  • 标签之间写入内容
  • 空标签可以不闭合
    1. 标签闭合<tagName></tagName>
    2. 不闭合<tagName/>
  • 属性值推荐"双引号"包裹
  • 某些属性值可省略
  • 注释格式 <!--comment-->

image.png

常用标签类型

1. 标题

<h1></h1>

<h2></h2>

......

<h6></h6>

2. 列表

  • 有序列表(ordered list) <ol></ol>

    • 列表子项(list) <li></li>

  • 无序列表(unordered list) <ul></ul>

    • 列表子项(list) <li></li>

  • 定义列表(definition list) <dl></dl>

    • 标题(definition title) <dt></dt>

    • 描述(definition description) <dd></dd>

    ⚠️dt与dd并非是一对一的关系，可以是一对多或多对一

3. 链接

<a href="#">

  • 外部链接

    href="https://www.websiteName/"

  • 内部链接

    href="pathName/fileName"

  • 指定元素

    <h1 id="text">

    <a href ="#text">

4. 多媒体资源

对于多媒体资源，可以通过设置src属性引入：

  • <img src=""/> 图片
  • <audio src=""/> 音频
  • <vedio src=""/> 视频

5. 输入

常用在表单中，用于获取用户在页面上的输入

(1) input形式的标签

<input type="typeName" attribute="value">

typeName（包括但不限于）:

  • text 单行文本

    ⚠️attention！对于多行文本，需要使用标签<textarea></textarea>，input标签没有textarea类型

  • range 进度条

  • number 填入数字 🔢

    可以通过设置属性min=""以及max=""限制所填入数字的上下限

  • date 日期 📅

  • submit 提交按钮

  • radio 单选框 🔘

    ⚠️对于单选框，需要设置name=""属性将指向同一主题的选项联系在一起

  • checkbox 复选框 ☑️

    可以使用<label></label>标签将选项描述与勾选框绑定在一起，如：

    • <label><input type="checkbox" />apple</label>
    • <label><input type="radio" />banana</label>

image.png

(2) 其它形式的标签

  • <textarea></textarea> 多行文本

  • <select></select> 可下拉选择框

    • 子选项 <option></option>

    格式如下：

image.png

(3) input与其他标签的结合

可下拉选择框

image.png

image.png

6. 引用

  • <blockquote cite="URL"></blockquote> 成块的引用
  • <cite></cite> 格式为斜体的引用
  • <q></q> 用一对引号将引用内容包裹

7. 代码

  • <code></code> 标签内为代码内容

  • <pre></pre> 对代码进行预处理

    格式如下：

image.png

8. 强调

  • <strong></strong> 效果为字体加粗
  • <em></em> 效果为斜体

9. 内容位置或作用

  • <header><header> 首部位置
  • <footer></footer> 尾部位置
  • <aside></aside> 侧边栏
  • <nav></nav> 导航
  • <article><article> 文章内容

10. 其他

  • <button></button> 按钮

    可通过编写JavaScript代码给按钮绑定一些操作，当用户点击这一按钮时即会触发对应操作；

    ⚠️attention！也可以通过在input标签中设置type=”“属性来获得一个按钮，并对按钮的作用进行了说明，如：

    • <input type="submit"> 提交表单内容的按钮
    • <input type="clean"> 清除表单内容的按钮

🧀为什么要设置这么多种标签？

语义化：HTML中的元素、属性及属性值都拥有某些含义

⚠️attention！内容比样式更重要

  • 根据标签语义进行处理和展示
  • 便于维护
  • 搜索引擎爬取关键内容
  • 读屏软件理解（无障碍性、适老性等）

📍小结

HTML中有多种多样的标签，可以根据标签及其属性的名字理解这一标签的作用与意义——这就是标签的语义化。在开发过程中，可能有时会陷入注重样式而忽略了内容本身的误区，从而与标签语义化的初衷背道而驰。
今天的课程是对HTML知识的学习，也是一次查漏补缺。所以还是要把基础打牢，加油！💨

2022/7/23

avatar
文章
阅读
粉丝