前端与HTML ｜ 青训营笔记

咸蛋黄肉酥麻薯蛋挞
41 阅读2分钟

这是我参与【第五届青训营】笔记创作活动的第一天

2023.1.15学习打卡

什么是前端？

  • 解决GUI人机交互问题

  • 跨终端

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

  • Web技术栈

  • 前端工程师就是使用Web技术栈解决多端图形用户界面交互问题的工程师。

前端技术栈

  • HTML（内容）
  • CSS（样式）
  • JavaScript(行为)
  • 网络协议（HTTP）

前端应该关注哪些方面？

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

HTML

是什么？(HyperText Markup Language)

HTML是一种用来告知浏览器如何组织页面的标记语言。由一系列元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

HTML标签不区分大小写。

剖析一个HTML元素

元素 = 开始标签 + 内容 + 结束标签

剖析HTML文档

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

  • <!DOCTYPE html> //声明文档类型。

  • <html></html>：这个元素包裹了整个完整的页面，是一个根元素。

  • <head></head>：这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

  • <meta charset="utf-8">：这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。 </meta>

  • <title></title>：设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

  • <body></body>：包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

HTML语法

  • 标签和属性不区分大小写，推荐小写

  • 空标签可以不闭合，比如 input、meta

  • 属性值推荐用双引号包裹

  • 某些属性值可以省略，比如 required、readonly

  • 标题标签h1~h6

列表标签

有序列表<ol>
列表项<li>
无序列表<ul>
定义列表<dl>
列表的标题<dt>
具体描述<dd>

链接

<a href="">
<img src="" alt="" width="">
<audio src="" controls><video src="" controls>

输入

<input placeholder="请输入用户名">
<input type="range">//选择范围
<input type= "number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>//多行文本输入
<input type="checkbox"/>//可多选
<inout type="radio" name="sport"/>//只能选一个
<select>//下拉选项
        <option></option>
</select>
<input list="countries">
<datalist id="countries">
    <option>Greece</option>
    <option>United kingdom</option>
    <option>United States</option>
</datalist>

块级引用

<blockquote cite="">
    <p>
            
    </p>
</blockquote>

短引用

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q></p>
<code></code>//引用代码
<pre><code></code></pre>//引用多行代码

强调标签

<strong></strong>//强调重要紧急
<em></em>//需要重读

注释

<!-- 和 -->
avatar
文章
阅读
粉丝