前端与HTML | 青训营笔记

文木木
63 阅读2分钟

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

前端的发展、更新迭代是很快的，虽然入门容易，但是要一直走下去，就需要持续的学习。

前端应该关注的方面有:

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性

1. HTML是什么

HyperText Markup Language --- 超文本 标记 语言

基本代码结构

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

主要标签含义

doctype: 标记了当前正在使用的是什么样的HTML版本，浏览器最终会根据这个去决定使用哪种渲染模式

html: 文档的跟标签，所有的其它标签都是写在html里面的

head: 里面放一些页面的元数据，即页面需要的信息但是又不用直接呈现的

body: 放置需要呈现给用户的

DOM树

每一个标签作为一个节点DOM

image-20220724171241099

2. HTML语法

  • 标签和属性不区分大小写，推荐小谢
  • 空标签可以不闭合，如input,meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，如required、readonly

3. 常用标签

  1. 标题: h1~h6

  2. 列表

    • 有序列表

      • ol>li

    • 无序列表

      • ul>li

    • key-value 形式列表

      • dl> dt:dd

  3. 链接a，下面是属性

    • href
    • target="_blank" 跳转新的页面窗口，默认覆盖

  4. 媒体标签

    • img

    • audio

      • controls 出现控制按键

    • video

      • controls 出现控制按键

  5. 输入标签

    • input
    • textarea

  6. 选项标签

    • input 属性type选择选项值

    • select>option 下拉选项

    • 下拉选项，但是用户仍旧可以做一些快捷输入（初次遇到）

      <input list="countries">
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

  7. 文本类标签

    • blockquote : 块级引用，长引用，一般是引用别人的一段话，cite属性可以跟链接表示这段文本来源是哪里
    • cite: 短引用（在页面中显示为斜体）
    • q: 短引用（相当于双引号）
    • code: 用来表示代码
    • pre: 按输入格式展示

  8. 内容划分的标签

    image-20220724174806596

4. 语义化

  • html中的元素、属性及属性值都拥有某些含义
  • 开发者应遵循语义来编写HTML，结构会更清晰，也更好维护

使用我们写的HTMl的用户

  • 开发者 - 修改、维护页面
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键词
  • 屏幕阅读器 - 给盲人读页面内容
avatar
文章
阅读
粉丝