前端与 HTML | 青训营笔记前端与 HTML | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第一天

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

1.前端与HTML

1.1 什么是前端？

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

1.2 前端技术栈

1.3 前端应该关注哪些方面？

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

1.4 前端的边界

1.5 开发环境

2.HTML

2.1 HTML是什么？

HyperText Markup Language HyperText:图片、链接、标题、表格

<img src = "photo.jpg" /> src:属性名 "photo.jpg":属性值

2.2 简单结构

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

2.3 DOM树

2.4 HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input 、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly（其属性的结果为boolean 默认为true 可以省略）

2.4.1 h1~h6

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

2.4.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>

2.4.3 链接

网页链接

      <a href="https://www.bytedance.com/">字节跳动官网</a>
      <!--重新打开一个网页-->
      <a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>

图片链接

 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5a2e7eef0f46c6b57ccc83b9714797~tplv-k3u1fbpfcp-zoom-1.image"
      alt="Metal movable type" width="400">
       <!--alt图片加载不出来的字样-->

音频链接

  <audio src="https://music.163.com/song/media/outer/url?id=29023577.mp3" controls></audio>

视频链接

<video src="https://prod-streaming-video-msn-com.akamaized.net/3f6ca508-598d-4cbd-a3e2-43deea7bc377/b60c553e-9f3f-4164-8850-700a9a73a899.mp4" controls></video>

输入框

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

2.4.4 选择

        <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"/>

2.4.5 文字

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

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

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

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

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

2.5 内容划分

2.6 语义化是什么？

HTML中元素、属性以及属性值都拥有某些含义
开发者应该遵循予以来开发html
- 有序列表用ul,无序列表用ol
- lang属性表示内容所使用的语言

2.7 谁在使用我们的HTML？

开发者修改、维护页面。
浏览器展示页面。
搜索引擎提取关键字、排序。
屏幕阅读器给盲人阅读内容。

2.8 语义化的好处？

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

2.9 如何做到语义化？

了解每个标签和属性的含义
思考什么标签最适合什么内容
不使用可视化工具生成代码