前端与HTML ｜ 青训营笔记

只会说欧克的码农
83 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第一天，看到如此火爆的学习场面，也不得不感叹互联网的卷啊，这种活动真的很不错，认识了一位小伙伴一起学习一起进步，第一天的知识是前端与HTML入门，也是比较基础，而且讲师也讲了很多新的HTML5的标签，很不错的，也是轻松拿下，笔记奉上。

前端与HTML

前端

什么是前端？

  • 解决GUI人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等

  • Web技术栈

前端的边界

image-20220724101524484.png

开发环境

image-20220724101546498.png

HTML

一、HTML是什么？

HyperText Markup Language

  • HyperText：图片、链接、标题、表格等
  • Markup Language ： 标签加内容
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

image-20220724102151988.png

二、DOM树

image-20220724102216197.png

三、HTML语法

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

1、标题

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

image-20220724102613391.png

2、列表

  • 有序列表
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>
  • 无序列表
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>
  • 普通列表
<!-- <dl></dl>用来创建一个普通的列表 -->
<!-- <dt>< /dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目 -->
<!-- <dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间 -->
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

3、链接

    <a href="#">A链接</a>
    <br>
    <!-- target="_blank"的含义是点击链接新建一个浏览器窗口进行跳转 -->
    <a href="#" target="_blank">B链接</a>

4、图片、音频和视频

    <!-- src是图片文件路径，alt是图片加载失败显示的内容 -->
    <img src="./assert/1.jpg" alt="" width="400px" height="400px">
    <!-- src是音频或者视频文件路径 -->
    <audio src="" controls></audio>
    <video src="" controls></video>

image-20220724104155653.png

controls 属性规定浏览器应该为音频提供播放控件。
浏览器控件应该包括：
    播放
    暂停
    定位
    音量
    全屏切换
    字幕（如果可用）
    音轨（如果可用）

5、输入

    <!-- input输入框 -->
    <input placeholder="请输入用户名">
    <!-- input拖动条 -->
    <input type="range">
    <!-- input只能输入数字 -->
    <input type="number" min="1" max="10">
    <!-- input日期选择框 -->
    <input type="date" min="2018-02-10">
    <!-- 文本内容标签 -->
    <textarea>Hey</textarea>
    <!-- input复选框 -->
    <input type="checkbox"> aaa
    <input type="checkbox"> bbb
    <!-- input单选框，需要相同的name属性值才能单选 -->
    <input type="radio" name="sport"> ccc 
    <input type="radio" name="sport"> ddd
    <!-- 下拉选择框 -->
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>
    <!-- 可输入选择框 -->
    <input list="countries" />
    <datalist id="countries">
        <option>Greece</option>
        <option>United Kingdom</option>
        <option>United States</option>
    </datalist>
  </body>

5、文本

    <!-- 长文本引用 -->
    <blockquote>长文本引用</blockquote>
    <!--  cite标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题 -->
    <p>普通段落，一本书叫做<cite>活着</cite></p>
    <code>代码段</code>
    <strong>加粗字体</strong>
    <em>强调斜体文本</em>

6、页面内容划分

image-20220724105533077.png

语义化

语义化是什么？

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

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

    • 有序列表用ol；无序列表用ul
    • lang属性标识内容所使用的语言

谁在使用我们写的HTML？

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

语义化的好处

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

另外，我们使用HTML需要传达的是内容，而不是样式。

avatar
文章
阅读
粉丝