前端与HTML | 青训营笔记

画一个圆
409 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天。在此之前我一直都是自己在网上看视频学习，中途也因为种种原因放弃了好几次，等再次开始的时候，前面的知识也忘记了好多。青训营今天的这节课，不但回忆起了之前学习的内容，补充了其他的知识点，真的很不错！！！

什么是前端

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

前端技术栈

HTML(内容) CSS(样式) JS(行为)

浏览器通过http网络协议和服务器进行通信将上面的代码通过http协议从服务器上拿到渲染到浏览器上

01前端与HTML_01.png

前端应该关注哪些方面

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

前端的边界

  • node.js开发服务器端的应用
  • ELECTRON/React Native 开发客户端的应用
  • Web 基于RTC的在线查收，实现多人的会议
  • WebGL 开发3D游戏

开发环境

浏览器

  • Edge
  • Chrome
  • Firefox
  • Safari

编辑器

  • VsCode
  • Vim
  • WebStorm(老实说，这个编辑器对新手更加友好吧--不过收费)

什么是HTML

HyperText Markup Language

  • HyperText：超文本，包括(图片、标题、链接、表格)
  • Markup Language：以一个开始标签和一个结束标签表示内容
<img src="photo.jpg" alt="这是一张图片">
  • src：属性名
  • photo.jpg:属性值
  • alt：当图片不能显示的时候显示的描述图片的内容
<!--标记html文件的版本-->
<!doctype html>
<!--文档根标签-->
<html lang="en-ES">
<!--放置页面的元数据：页面的描述等(不直接展示给用户的)-->
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<!--展示给用户的内容-->
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>

浏览器获取html文件后，会将html代码解析成DOM树

01前端与HTML_02.png

HTML语法

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

标题

h1~h6

<h1>文章摘要</h1>
<h2>精彩文案</h2>
<h3>广告文案</h3>
<p>世界上有两个地方，体重就是地位。一个在相扑场上，一个在猪圈里。</p>
<h3>脱口秀大会文案</h3>
<p>别人都关心我 飞得高不高，只有我妈会担心我 翅膀硬不硬</p>
<p>没有必要掩饰自己的胜负心，既然是比赛，就有输赢，我接受失败，但我永远不服</p>

列表

  • 有序列表(orderList)
<h2>全球高票房</h2>
<ol>
    <li>夏洛特烦恼</li>
    <li>西虹市首富</li>
    <li>这个杀手不太冷</li>
</ol>
  • 无序列表(unOrderList)
<h2>购物清单</h2>
<ul>
    <li>苹果</li>
    <li>花菜</li>
    <li>榴莲</li>
</ul>

  • 列表(老实说这个我都没有怎么用--可能是我之前都不知道的原因吧哈哈哈)

    dl(列表-definition list) dt(标题-definition title) dd(描述-definition description)

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

链接

a：锚点链接

<a href="https://www.baidu.com">百度</a>

<a href="https://www.baidu.com" target="_blank">百度</a>

多媒体标签

<!--图片-->
<img src="" alt="">
<!--音频-->
<audio src="" controls></audio>
<!--视频-->
<video src=""></video>

输入

  • 表单
<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-18">

<textarea>Hello World</textarea>

提交会交给JS控制

  • 多选
<p>
    <label><input type="checkbox">苹果</label>
    <label><input type="checkbox" checked>梨</label>
</p>


<p>
    <label><input type="radio" name="sport">足球</label>
    <label><input type="radio" name="sport">篮球</label>
</p>

<p>
    <select>
        <option>猪肉</option>
        <option>鱼肉</option>
        <option>牛肉</option>
    </select>
</p>

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

文本


<blockquote cite="https://new.qq.com/rain/a/20221020A00BG700">
    <p>死者倘不埋在活人心中，那就真真死掉了</p>
</blockquote>

<p>
    <code>const</code>声明创建一个只读的常量
</p>

<pre>
  <code>
    const add = (a,b)=>a+b;
    const multiply=(a,b)=>a*b;
  </code>
</pre>

<p>This is <em>China</em></p>

内容划分

  • header：logo
    • nav
  • main：主要内容
    • article
  • aside：相关但不直接属于这个页面内容
  • footer：备案信息、友情链接以及版权相关信息

01前端与HTML_03.png

语义化

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

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

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

  • 谁在使用我们写的HTML

    • 开发者-修改、维护页面
    • 浏览器-展示页面
    • 搜索引擎-提取关键词、排序---有利于SEO优化
    • 屏幕阅读器-给盲人读页面内容

  • 语义化的好处

    • 代码可读性
    • 可维护性
    • 搜索引擎优化
    • 提升无障碍性

HTML是传达内容，而不是样式

  • 如何做到语义化
    • 了解每个标签和属性的含义
    • 思考什么标签最适合描述这个内容
    • 尽量不使用可视化工具生成代码
    • 多阅读mdn文档、w3c文档(不是w3c school)

以上就是今天的收获，尽管有些在我的知识库了，但是知识就是不断重复的过程。不过肯定也有新知识。在这感谢今天的(赵老师)简直yyds！！！

avatar
文章
阅读
粉丝