前端与HTML笔记|青训营

coder_黑仔
49 阅读5分钟

一、什么是前端

  1. 解决人机交互问题
  2. 跨终端：（PC/移动端浏览器，客户端/小程序，VR/AR等）
  3. Web技术栈：最基础的 网页三剑客 。HTML负责描述网页的内容 CSS负责网页的样式 JavaScript负责网页与用户交互的行为。

前端应该关注哪些方面： 功能 美观 无障碍 安全 性能 兼容 体验。

前端的边界：nodejs（服务器端开发）；electron，React Native (开发桌面端应用)；WebRTC（P2P在线传输，多人会议，直播）；WebGL（3D游戏开发）；Webassembly（可以把其他语言编译成能在浏览器端运行的语言）

开发工具：推荐VScode；调试可以在浏览器控制台进行调试。

二、HTML介绍

什么是HTML？HTML（HyperText Markup Language） 是一个超文本标记语言。

下面是一段基本的HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    
    <div>
        <h1>hello world</h2>
    </div>
   
</body>
</html>

我在里面放了一个div盒子，里面嵌套了一个h1标签，h1里面写上了hello world。

我解析一下这段代码吧：

  1. 第一行 渲染模式，如果不写浏览器可能会议一种比较老的模式渲染网页。
  2. 第二行 这表示了页面的语言，这里默认是英语。这个主要是给搜索引擎以及浏览器看的。因为懒得设置这个语言，所以每次我写完代码谷歌浏览器都跳出翻译的按钮，就挺无语的。
  3. 第五行 这个是浏览器所用的字符集。UTF-8是万国码，最通用的字符集。
  4. 头部标签， 主体标签。

小白可以自己拿去跑一下试一下哈。特别注意的是，这个总体的骨架结构是不需要自己去写的，你在VScode装个基本的插件打个英文的感叹号他就能给你自动生成。

下面说一下HTML的语法。

  1. 标签和属性不区分大小写，推荐小写！
  2. 空标签可以不闭合，比如 input、meta。例如,注意也有这种写法
  3. 属性值推荐用双引号包裹
  4. 某些属性值可以省略，例如 required，readonly。 这个我举个例子： 这样写就行。你想表达 required为true（意思就是这个东西必填）， 可以省略他的属性值。

HTML比较常见的标签如下：

1.标题： h1~h6，权重从大到小。

2.列表 ：ol 有序列表 ； ul 无序列表；值得注意的是，他们作为父元素，里面只能包裹li这个标签；dl 我这边单独说一下，因为我自己也没怎么用过，都忘了。他的子元素 ，是key value形式存在。

<p>片名:我与前端-三本非科班的学生的挣扎</p>
<dl>
    <dt>导演</dt>
    <dd>黑仔</dd>
    <dt>主演</dt>
    <dd>黑仔</dd>
    <dd>前端</dd>
 </dl>

这里放张效果图给大家看看

day2-sc.png

  1. 链接： a标签，是一个超链接，用于网页的跳转。href表示点击之后要访问的地址。（必填属性）target 可以控制是否进入新标签，默认是直接跳转，值为_blank时是打开新页面

  2. 媒体标签： 图片标签img；音频标签audio；视频标签video。它们都是通过src设置所展示的资源的地址。其他：img有个alt属性，如果图片加载不出来则会在页面上呈现属性的值。

  3. 输入：①input 他的类型非常多，可通过type属性设置其类型，其中有range，number，date等等②textarea 留言框

  4. 选择：① input中有 radio checkbox两个类型，前者表示单选框，后者表示多选框。 这个常常跟label标签一起使用。这样你点击属性旁边的文字，也能选中这个选项，用户体验提高。

    男

    女

    其实不一定要用for的，这样写起来比较清爽啦

    男

    女

    ②下拉框需要使用select标签实现。里面的option标签表示了每一个选项。这个不多说。

  5. 引用！blockqoute 块级引用；cite段引用，code：短小片段代码的引用，pre：使用 <pre> 标签可以保留文本中的空格、换行符和其他空白字符，并且以固定的字体显示文本内容，而不会自动折行或忽略空格。这使得 <pre> 标签非常适合用于显示代码示例、ASCII 艺术、电子邮件等需要保留原始格式的文本。 代码如下：

<blockquote cite="https://www.baidu.com/">百度一下，你就知道</blockquote>
  <cite>小王子</cite>
  <p><code>const</code>用于声明一个只读的常量</p>
  <code>const add = (a,b) => a+b</code>
  <pre>
    function add(a,b) {
        return a+b
    }
  </pre>

效果图如下：

百度一下，你就知道
小王子

const用于声明一个只读的常量

const add = (a,b) => a+b 
        function add(a,b) {
            return a+b
        }
  1. 强调： em i strong 的介绍：<i> ， <em> ，标签都可以用于斜体文本的呈现，但<em> 标签更推荐用于情感性强调的文本；更强调紧迫性和关键性。而 <i> 标签则更适合用于仅仅对文本进行样式化处理，而无需强调特定的含义。

H5内容划分：

day2-1.png

三、关于HTML语义化

HTML语义化：HTML中的元素、属性及属性值都拥有某些含义，开发者应该遵循语义来编写HTML。有序列表用ol；无序列表用ul。lang属性表示内容所使用的语言。

语义化的好处：1.代码可读性↑2.可维护性↑3.搜索引擎优化↑4.提升无障碍性

如何做到语义化：1.了解每个标签和属性的含义2.思考什么标签最适合描述这个内容3.不使用可视化工具来生产代码

avatar
文章
阅读
粉丝