前端与HTML5 | 青训营笔记

小遥
337 阅读2分钟

这是我参与[第五届青训营]伴学笔记创作活动的第一天

前端与HTML

1.什么是前端工程师

前端工程师是使用使用web技术栈解决多端图像交互问题的工程师

2.前端技术栈

前端技术栈主要分三层

  1. HTML(内容)：主要负责页面结构和内容
  2. CSS(样式)：设置页面样式
  3. javaScript(行为)：定义网页行为

QQ截图20230115194929.png

3.前端应该关注哪些方面

  1. 功能
  2. 美观
  3. 无障碍
  4. 安全
  5. 性能
  6. 兼容
  7. 体验

4.前端边界

image.png

5.开发环境

image.png

6.什么是HTML

HTML即HyperText Markup Language（超文本标记语言），是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

image.png 例如：

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

DOM树

image.png HTML语法

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

7.HTML标签

7.1标题h1-h6

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用<h2>
<p>...</p>

7.2列表

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>


<h2>购物清单</h2>
<ul>
  <li>🍓</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>


<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

7.3链接

<!-- 图片链接 -->
<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>
<!-- 音频链接 -->
<audio 
  src="/assets/music.ogg"
  controls
></audio>
<!-- 视频链接 -->
<video
  src="/assets/video.mp4"
  controls
></video>

7.4输入框

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2020-02-10">
<textarea>Hey</textarea>

8.语义化

8.1什么是语义化

  • HTML中元素、属性以及属性值都拥有某些含义

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

    • 有序列表用ul,无序列表用ol
    • lang属性表示内容所使用的语言

8.2谁在使用我们的代码

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容
8.3 语义化的好处
  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提供无障碍性
8.4 如何实现语义化
  1. 了解每个标签和属性的含义
  2. 思考什么标签最适合什么内容
  3. 不使用可视化工具生成代码
avatar
文章
阅读
粉丝