前端和HTML|青训营笔记

summer瓜瓜
172 阅读2分钟

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

前端的基本概念

什么是前端

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

前端是指图形界面的人机交互

前端关注点

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

HTML基本标签

  1. <head>和<body>

<head>：网页的源数据,不需要直接展示给用户

<body>：标签中的内容需要呈现给用户

  1. <ol>、<ul>、<dl>

<ol>:有序列表

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<ul>：无序列表

<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<dl>：定义列表

<dl>
    <dt>title</dt>
    <dd>description</dd>
</dl>
  1. <a>
<a href="" target="_blank">
//href的属性值表示链接的地址；
//target的属性值"_blank"表示点击这个链接后，会在新的窗口打开网页
  1. 多媒体标签

<img>、<audio>、<video>

<img> 的alt作用:图片展示不出来时作为替代性文本

<audio>、<video>
<audio>标签定义声音，比如音乐或者其他音频流
<video>标签定义视频，比如电影片段

<audio 
  src="/assets/music.ogg"
  controls
></audio>
<video
  src="/assets/video.mp4"
  controls
></video>
  • controls：表示会显示控制条
  1. 输入标签

,, 

<input type='range'>：滑动条
<input type="number" min="1" max="10">:在给定的范围内输入数字
<input type="checkbox">：多选框 
<input type="radio" name=“sport”> 单选框
  • input的单选框，一定要使用name属性，否则实现不了单选的效果，而且你想多选的name属性必须是一样的
<textarea>:输入多行内容，可以调整输入框的大小
<textarea>Hey</textarea>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>
  • datalist及其选项不会被显示出来，他只是一个输入列表
  • 我们需要将input的list属性来绑定datalist
  • 意思就是，你可以下拉选择，你也可以输入(任意输入)
  1. 引用标签

<blockquote>:浏览器在 blockquote 元素前后添加了换行，并增加了外边距。属于长引用

<blockquote cite="">:cite属性:标记引用的来源

<q>：短引用，一般用于那种引号前后

内容划分

<header>
    <nav> </nav>
</header>
<main>
    <article></article> 
    <aside></aside>
</main>
<footer>
</footer>

语义化

开发者需要准寻语义来白那些HTML

例如：

  • 对于有序列表我们使用<ol>
  • 对于无序列表使用<ul>

好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
avatar
文章
阅读
粉丝