前端与HTML ｜ 青训营笔记

春天要喝红茶
416 阅读3分钟

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

什么是前端

前端

  1. 解决GUI人机交互问题

  2. 跨越端

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

  3. WEB技术栈

关注的方面

  1. 美观
  2. 功能
  3. 无障碍
  4. 安全
  5. 性能
  6. 兼容
  7. 体验

前端的技术栈

image-20230115204719474

image-20230115205335600

前端的边界

image-20230115213237141

HTML是什么

image-20230115205557505

<img src="photo.jpg"/>
src是属性名，“photo.jpg”是属性值

DOM树

image-20230115205732040

HTML语法

标题

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

列表

//有序列表
<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>
​
//无序列表
<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>
​
<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

链接

  • 图片链接

    <img
  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5a2e7eef0f46c6b57ccc83b9714797~tplv-k3u1fbpfcp-zoom-1.image"
  alt="Metal movable type"
  width="400"
/>

  • 音频链接

    <audio 
src="https://music.163.com/song/media/outer/url?id=29023577.mp3"
  controls></audio>

    在HTML5中，使用<audio></audio>标签来播放音频，在该标签中可通过src属性设置音频文件的url，通过controls属性添加播放控件，添加autoplay属性可在音频加载后自动播放。

  • 视频链接

    <video
  src="https://prod-streaming-video-msn-com.akamaized.net/3f6ca508-598d-4cbd-a3e2-43deea7bc377/b60c553e-9f3f-4164-8850-700a9a73a899.mp4"
  controls
></video>

    HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。

    • MP4：这是一种具有H.264视频编码和AAC音频编码的格式
    • WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式
    • Ogg：是一种具有Theora视频编码和Vorbis音频编码的格式。

    使用video元素播放视频，也不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <video src="…" controls="controls"></video> 在 <video> 和 </video>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <video>标签的浏览器中。 video元素常用的属性如下：

    • src：规定要播放的视频文件的地址
    • controls：添加该属性，则向用户显示带有播放、暂停和音量调节、全屏的视频控件，不同的浏览器会展示不同样式的控制面板
    • autoplay：添加该属性，可在视频加载完成后自动播放
    • loop：添加该属性，可使视频连续播放
    • preload：用于控制视频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个视频；当取值为metadata时，只载入视频的元数据。
    • width：设置视频播放器的宽度
    • height：设置视频播放器的高度

语义化

什么是语义化

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

  2. 开发者应该遵循予以以来开发html

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

谁使用html

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

语义化的好处

  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提供无障碍性

如何实现语义化

  1. 了解每个标签和属性的含义
  2. 思考什么标签最适合什么内容
  3. 不使用可视化工具生成代码

感悟

html是整个页面的框架，是css和js基础。通过这次课程，我复习了一下html的语法，对语义化有了更深刻的了解。

avatar
文章
阅读
粉丝