前端与HTML | 青训营笔记

用户2146841409449
347 阅读1分钟

前端与HTML | 青训营笔记

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

课程重点

  • 什么是前端？

    • 关键字 ：解决GUI人机交互问题-----跨终端------web技术栈
    • 一句话：前端工程师是用web技术栈来解决多端图形用户界面交互问题的工程师

  • 前端技术栈？

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

  • 开发环境

  • HTML是什么及其语义标签

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

常用的HTML标签

  • p标签
<p>我是p标签</p>

image.png

  • h1-h6标题标签
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级标题</h4>
<h5>我是5级标题</h5>
<h6>我是6级标题</h6>

image.png

  • 表单标签
<input placeholder="请输入用户名"><br>

<input type="range"><br>

<input type="number" min="1" max="100"><br>

<input type="date" min="2023-01-15"><br>
<textarea>hello world</textarea>

image.png

  • 文字标签

<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">
  <option>Apple</option>
  <option>Banana</option>

</datalist>

image.png

<img
  src="https://img0.baidu.com/it/u=1705694933,4002952892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
  alt="Metal movable type"
  width="400"
/><br>

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4117136098d45b9b038c697538cf245~tplv-k3u1fbpfcp-watermark.image?)
<audio 
  src="/assets/music.ogg"
  controls
></audio><br>

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3085d82fadae46e1b71abf7458a9bdb3~tplv-k3u1fbpfcp-watermark.image?)
<video
  src="https://www.bilibili.com/bangumi/play/ep706668?bsource=baidu_aladdin"
  controls
></video><br>

image.png

新增内容

  • 引用类
    • blockquote: 一大块
    • cite:
    • q
    • code
<blockquote cite="http://t.cn/RfjKO0F">
  <p>引用大一块</p>
</blockquote>


<p>cite标签<cite>短一点的引用，比如章节</cite>，q标签<q>更为明确，比如之前提到过的某个</q>。</p>

<p>code标签表示代码<code>String</code>字符串类型</p>
<p>pre&code表示多行代码，如下</p>
<pre><code>
const add = 100;
const multiply = 200;
</code></pre>

<p>strong标签表示<strong>强调</strong>。</p>

<p>em标签 <em>也是强调比如英语口语中的重读</em> /p>

image.png

  • 内容模块 header[nav]----> main[article]+aside---> footer

关于语义化

语义化是什么以及其好处

个人总结

有利于加深自身对HTML的理解，知道继续深入学习HTML的方向

avatar
文章
阅读
粉丝