前端与HTML | 青训营笔记

落叶才知秋
60 阅读2分钟

前端与HTML | 青训营笔记

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

前端

前端指的是什么？

  • 解决GUI人机交互问题
  • 跨终端
    1. PC/移动浏览器
    2. 客户端/小程序
    3. VR/AR等
  • web技术栈

网页结构

  1. 结构（HTML）用于描述页面的结构。
  2. 表现（CSS）用于控制页面中元素的样式。
  3. 行为（JavaScript)用于响应用户操作。

HTML

  • HTML（Hypertext Markup Language）超文本标记语言
  • 负责网页的三个要素之中的结构
  • HTML使用标签的形式标识网页中的不同组成部分
  • 超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

HTML基本结构

1 <!doctype html>
2 <html>
3   <head>
4     <meta charset="UTF-8">
5     <title>页面标题<title>
6   </head>
7   <body>
8     <h1>一级标题</h1>
9     <p>段落内容</p>
10   </body>
11 </html>

列表

列表（list），html中的列表一共有三种：

  1. 有序列表: 使用ol标签来创建有序列表，使用li表示列表项
  2. 无序列表：使用ul标签来创建无序列表，使用li表示列表项
  3. 定义列表:使用dl标签来创建有序列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

超链接

  • 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
  • 使用a标签来定义超链接
    • 属性：
      • href 指定跳转的目标路径
        1. 值可以是一个外部网站的地址
        2. 也可以写一个内部页面的地址
      • target 用来指定超链接打开的位置
        1. _self 默认值 在当前页面中打开超链接
        2. _blank 在一个新的页面中打开超链接

输入

  • <input> 输入
  • <textarea> 用户输入长文字
  • <checkbox> 多选
  • <radio> 可以用name属性相同限制单选
  • <select> 下拉菜单
  • <input list="conturies"> 辅助用户输入

文本标签

  • <blockquote> 外部引用，cite属性代表来源
  • <cite> 短引用，书名、章节等
  • <q> 引用之前提到过的内容
  • <code> 代码
  • <em> 用于表示语音语调的加重
  • <strong> 用于表示内容重要，加粗

内容划分

  • <header> 页面元数据，logo、导航等
  • <main> 页面主体
  • <aside>
  • <footer> 页脚，版权等

语义化标签

  • 有助于

    • 开发者协作 代码可读性
    • 浏览器：用户展示 可维护性
    • 搜索引擎：关键词、排序 搜索引擎优化
    • 屏幕阅读器：无障碍 eg. 给盲人读页面 提升无障碍性

  • 传达内容，而不是样式

  • 如何做到语义化

  • 跨域：引用本域还是外域的资源

avatar
文章
阅读
粉丝