Day2 前端与HTML | 青训营

用户3703779306996
92 阅读2分钟

前端与HTML

前端

什么是前端

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

前端技术栈

  • HTML(内容)
  • CSS(样式)
  • JavaScript(行为)

*通过网络协议与服务器端交互

注意事项

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

HTML(HyperText Markup Language)

DOM数

联想截图_20230727113202.png

语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，如required

标签和属性介绍

标题

<h1></h1>~<h6></h6>

列表

<!--有序列表-->
<ol>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
</ol>

<!--无序列表-->
<ul>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
</ul>

<!--定义列表-->
<dl>
  <dt>xxx：</dt>
  <dd>xxx</dd>
  <dd>xxx</dd>
  <dd>xxx</dd>
</dl>

链接

  • <a href="xxxx">yyyy</a>
  • <a href="xxxx" target="_blank">yyyy</a>
    • target="_blank"意味着点这个超链接的时候将会是在新的窗口中打开一个页面

多媒体

  • <img>
    • alt属性规定图像的替代文本，图片加载失败时显示该替代文本
  • <audio></audio>
    • controls属性默认显示播放控件
  • <video></video>

输入

  • <input>
    • placeholder属性规定无输入时默认显示的文本
    • 多选：<input type="checkbox">
    • 单选：<input type="radio" name="xx">
      • 互斥关系通过name实现
    • 下拉选择：<select>
    • 辅助输入：<input list="xxx">
  • textarea
    • 输入多行文本

引用

  • <blockquote cite="xx"></blockquote> 比如引用名言
  • <cite></cite> 比如引用作品名字或者章节
  • <q></q> 比如引用具体内容
  • <code></code> 引用代码
  • <pre></pre> 引用多行代码

内容划分

联想截图_20230727123008.png

  • header:页头，放置logo、导航等
  • main:主体
  • aside:与内容相关的东西
  • footer:页尾，放置参考链接、版权信息等

语义化

  • HTML中的元素、属性以及属性值都拥有某些含义
  • 应遵循语义编写HTML

语义化的好处

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

*传达内容，而不是传达样式。

个人总结

2023.07.27，今日学习了《前端与HTML》。课程主要讲解了前端相关知识，重点介绍了HMTL，提及了HTML的基本语法，讲解了部分标签及相应属性的使用，最后强调了语义化的重要性。由于HTML中标签过多，课程中无法讲解所有标签以及其相应的属性，后续在MDN中查看并学习其他标签的使用。在今天的课程中除了HTML知识外，我觉得最重要的是语义化，语义化的代码结构清晰，如果写的代码不注重语义化，我想以后回顾该代码时重新梳理会变得十分麻烦，效率十分低下；注重语义化，那么搜索引擎蜘蛛能快速的识别出你的网页是什么类型、什么方向的内容，网页的结构、内容由什么组成；注重语义化还能更容易让一些特殊设备识别、利于特殊终端的阅读，这样可以让一些特殊人群知道网页上的内容。

avatar
文章
阅读
粉丝