前端与 HTML | 青训营笔记

许敬茹
418 阅读4分钟

这是我参与「第五届青训营 」笔记创作活动的第1天，也是课程开始的第一天，今天学习的是前端与HTML

前端

什么是前端

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

前端技术栈

image.png

前端应该关注哪些方面

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

前端技术更新飞快，因此要不断学习

HTML

什么是HTML

  • HyperText Markup Language 超文本标记语言
    • HyperText
      • 超文本意味着不止文字，还包括图片、标题、链接、表格等更丰富的格式
    • Markup Language
      • 使用标记语言，用成对出现的标签（开始/结束）来表达格式
      • <h1>文章标题</h1>
      • <img src="photo.jpg" />
        • 标签里不需要嵌套别的内容所以可以简写，不需要结束标签
        • src意为属性名，后跟属性值

完整的HTML例子

  • <!doctype html> HTML版本
  • <html> </html> 根标签
  • <head> </head> 放置页面源数据，不需要直接呈现给用户的
  • <body> </body> 直接呈现给用户的内容

DOM树

HTML代码转化成树形结构，节点称为DOM节点

image.png

 HTML语法

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

标题h1-h6

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

image.png

列表

有序列表 OrderList ListItem

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

image.png

无序列表 UnorderedList


<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

image.png

定义列表 DefineList DefineListTitle DefineDescription

<h2>霸王别姬</h2>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>

image.png

链接

  • 超链接

target="_blank" 重新打开新页面

<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
字节跳动官网 字节跳动官网
  • 图片链接 alt="Metal movable type" 若图片加载不出，则以文字显示
<img
  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5a2e7eef0f46c6b57ccc83b9714797~tplv-k3u1fbpfcp-zoom-1.image"
  alt="Metal movable type"
  width="400"
/>

controls 播放控件

<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>
  • 输入

placeholder 占位符 没输入时默认显示

type="range" 滑动条

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

image.png radio根据name来分类

最后一个例子也可以输入选项以外的别的国家，datalist只不过给出了快捷的输入方式

<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>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

image.png

  • 文本标签

blockquote 快捷引用/长引用 cite表示来源

cite标签 短引用

q标签 短引用，一般是内容

code标签 代码

strong标签 内容强调

em标签 语气强调

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

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

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

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

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

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

<p>Cats <em>are</em> cute animals.</p>

image.png

内容划分

image.png

语义化

什么是语义化

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

  • 开发者应该遵循予以来开发html

    • 有序列表用ul,无序列表用ol
    • lang属性表示内容所使用的语言

谁在使用我们的HTML语言

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

语义化的好处

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

如何实现语义化

mdn文档/w3c

  • 了解每个标签和属性的含义

  • 思考什么标签最适合什么内容

  • 不使用可视化工具生成代码

avatar
文章
阅读
粉丝