【第二届青训营-寒假前端场】- 前端与HTML

什么是前端

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

前端技术栈

基础三大件HTML、CSS、JavaScript+网络协议网络协议实现前端和服务端之间数据交换

前端应该关注哪些方面？

keywords:前端工程师实现工程要关注：功能、安全、性能、美观、兼容、体验、无障碍

前端的边界

开发环境

HTMl

HTMl是什么？

HyperText Markup Language

img src="photo.jpg"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>【第二届青训营-寒假前端场】- 前端与HTML</title>
    </head>
    <body>
        <h1>第一节课：前端与HTML</h1>
        <p>韩广军老师分享</p>
    </body>
</html>

DOM树

DOM树结构

HTML语法

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

标题h1~h6

codepen.io/webzhao/emb…

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

<h2>购物清单</h2>
<h3>ul标签为unorder list</h3>
<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>

<dl> 标签定义了定义列表（definition list）。

<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

链接标签

anchor <a href>anchor</a>
image <img>
audio <audio></audio>
video <video></video>

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>
<!字节跳动官网不支持在其他页面嵌套显示，这个是不能成功打开...--->

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
<!我们设置重新带开一个页面显示就ok了...--->

<a href="https://juejin.cn/user/2199503148693176">
  有出路的掘金个人主页
<a>
  
<a href="https://juejin.cn/user/2199503148693176" target="_blank">
  有出路的掘金个人主页
<a>
  <!掘金个人主页网站两个都可以的...--->
 
 <a href="https://juejin.cn/">
   掘金首页
 </a>
   <!掘金首页也是ok的...--->

链接掘金头像和网易云音乐的一首歌

链接.gif

<img
  src="https://p3-passport.byteacctimg.com/img/user-avatar/a30cd0bb4f2693e80243009179456ba4~300x300.image"
  alt="Metal movable type"
  width="200"
/>
<!alt属性，当图片不能正常显示，就会出现“Metal movable type”字样...--->
<h2>最近在听的一首音乐</h2>
<dl>
  <dt>单曲：Free Loop</dt>
  <dd>歌手：Daniel Powter<dd>
  <dd>所属专辑：Daniel Powter: The Essential Collection</dd>
<dl>
<audio 
  src="https://m801.music.126.net/20220129172837/c7c70173da8af9510aeae8adbfa89e7a/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/11332465155/18e9/7466/1812/25c4891bdd8c20c9a92126af29debdd1.m4a"
  controls
></audio>
 <p>
   作词 : Daniel Powter
作曲 : Daniel Powter
I'm a little used to calling outside your name
我已有些习惯了在外面呼喊你的名字


I wont see you tonight so I can keep from going insane
如果今晚我与你相遇，我可能神迷意乱


But I don't know enough I get some kinda lazy day
但时间流逝得如此缓慢，令我困惑不解


Hey yeah
嘿，耶


I've been fabulous through to fight my town a name
我也曾风光一时，如今却籍籍无名


I'll be stooped tomorrow if I don't leave as them both the same
我的前路黯淡无光，我不想将你也引入其中


But I dont know enough I get some kinda lazy day
但时间流逝得如此缓慢，令我困惑不解
Hey yeah
嘿，耶


Cause it's hard for me to lose
因为失去你令我煎熬万分
In my life I've found only time will tell
我终于发觉唯有时间能证明一切
And I will figure out that we can baby
宝贝，我们会找到答案
We can do a one night stand yeah
至少我们可以在今夜坠入爱河


And it's hard for me to lose in my life
因为失去你令我煎熬万分
I've found outside your skin right near the fire
我发现你游荡在街头，憔悴不堪
That we can baby
宝贝，我们可以做到
We can change and feel alright
我们可以让一切归于美好，重新来过</p>

<video
  src="https://vodkgeyttp8.vod.126.net/cloudmusic/ITQxMGMgIzQgMSEgMjEgMQ==/mv/292191/ead95478b41edb1c16f7ef8123162b80.mp4?wsSecret=e8237dcea3380f05aa97c14fb042e7f1&wsTime=1643447618"
  controls
></video>

输入

输入.gif

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

<input type="range">

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

<input type="date" min="2022-01-29">

<textarea>好好学前端，把你的问题写在这里吧</textarea>

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

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

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

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

【第二届青训营-寒假前端场】- 前端与HTML（1）

【第二届青训营-寒假前端场】- 前端与HTML

什么是前端

前端技术栈

前端应该关注哪些方面？

前端的边界

开发环境

HTMl

HTMl是什么？

DOM树

HTML语法

标题h1~h6

链接标签

输入