前端与HTML｜ 青训营笔记

大梦0
77 阅读2分钟

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

一）什么是前端？

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

二）前端技术线

HTML

CSS

JavaScript
  • HTML->内容
  • Css->样式
  • JavaScript ->行为

三）前端应该关注那些方面？

功能、安全、美观、兼容、性能体验、无障碍

四）什么是HTML

HTML (HyperText Markup Language) 超文本标记语言，不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。

五）HTML中文本元素

  • 一级标题
<body>
<h1> 一级标题 </h1>
</body>

h1--h6：表示1级标题--6级标题 （h1最大，然后依次递减）

  • 有序链表
<ol>
     <li>A</li>
     <li>B</li>
     <li>C</li>
</ol>
  • 无序链表
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
  • 定义列表
<dl>
 <dt>A：</dt>
 <dd>B</dd>
</dl>

链接

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

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

target="_blank"->创建一个新页面

字节跳动官网

  • img标签（src 属性是必须的，嵌⼊图⽚的⽂件路径 alt 属性包含⼀条对图像的⽂本描述，⾮强制）
  • audio音频

1.controls 是否展示浏览器⾃带的控件，可以创建⾃定义控件

2.autoplay 是否⾃动播放

3.source元素表示视频的可替代资源(不同格式、清晰度，读取失败或⽆法解码时可以依次尝试)

  • 输入
  1. <input>的工作方式相当程度上取决于type属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。
  2. placeholder占位符
  3. <input type="range">表示范围，界面会显示一个滑动条
  4. <input type="number" min="1" max="10">可以设置最大值最小值
  5. Hey用来输入多行的文字
  • 内容划分
  1. header
  2. nav
  3. main
  4. aside
  5. footer

六）语义化

  1. 每一个HTML元素都有具体的含义

    a：超链接

    p：段落

    h1：一级标题

    ol：有序链表

    ul：无序链表

  2. 开发者应该遵循语义来编写HTML

  • 语义化好处
  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提升无障碍性
  • 如何做到语义化?
  1. 了解每个标签和属性的含义
  2. 思考什么标签最适合描述这个内容
  3. 不使用可视化工具生成代码
avatar
文章
阅读
粉丝