前端与HTML | 青训营笔记

得得DD
66 阅读2分钟

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

前端与HTML

什么是前端？

⭐总结：前端工程师就是使用web技术栈解决多端图形用户界面交互问题的shu工程师

前端技术栈

  • HTML（内容）
  • CSS（样式）
  • JavaScript（行为）
  • 浏览器（通过网络协议与服务器端连接）

前端应该关注哪些方面？

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

HTML

HTML是什么？

  • Hyper Text Markup Language 超文本传输协议

HTML语法（规范建议）

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

常用HTML标签

  • 标题h1~h6
  • 列表：三类有序列表ol，无序列表ul，定义列表dl
  • 链接anchor，重要属性href （hyper reference）
  • 多媒体：img, audio, video
  • 表单控件：输入input，文本（引用、代码、修饰）
  • 内容划分

image.png

谁在使用我们写的HTML → 语义化的好处

  • 开发者 - 修改、维护页面 → 提高可读性，可维护性
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键词、排序 → 搜索引擎优化
  • 屏幕阅读器 - 给盲人读页面内容 → 提升无障碍性

⭐总结语义化原则：传达内容，而不是样式！

查缺补漏

引用元素

 <!-- <blockquote> 用于长引用 -->
 <p>Here is a quote from WWF's website:</p>
 <blockquote cite="<http://www.worldwildlife.org/who/index.html>">
 For 50 years, WWF has been protecting the future of nature.
 ……
 1.2 million members in the United States and close to 5 million globally.
 </blockquote>
 ​
 <!-- <q> 用于短引用，相当于加引号 -->
 <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
 ​
 <!-- <abbr> 缩写词 -->
 <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
 ​
 <!-- <address> 地址 -->
 <address>
 Written by John Doe.<br>
 Box 564, Disneyland<br>
 USA
 </address>
 ​
 <!-- <cite> 著作引用 -->
 <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
 ​
 <!-- <bdo> 双向重写（Bi-Directional Override） 定义文字的方向（ltr/rtl）-->
 <bdo dir="rtl">This text will be written from right to left</bdo>

<a>标签

  • 去除下划线: text-decoration:none

  • target 属性，指定打开链接文档的位置

    • _self - 默认，在单击时在同一窗口/选项卡中打开文档
    • _blank - 在新窗口或选项卡中打开文档
    • _parent - 在父级框架中打开文档
    • _top - 在整个窗口中打开文档

  • title 属性，链接标题

<table>标签

  • 区别 <td> <tr> <th>
  • 标题 <caption>，注意必须紧跟在 <table>之后插入
  • 跨列/行 colspan 和 rowspan 属性，注意数字要加引号“

<iframe>标签

  • 用于定义HTML内联框架，即在HTML中再嵌入另一个HTML文档
 <iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
 <!-- iframe作为链接的目标 -->
 <p><a href="<https://www.w3schools.cn>" target="iframe_a">W3Schools.com</a></p>
 <!-- 链接的 target 属性必须引用 iframe 的 name 属性 -->

<form>标签

  • 表单 <form>

  • 表单属性, 控制整个表单的提交, 发送, 响应等

  • 表单元素

    • <input> 输入元素

    • <label> 标签

    • <select>下拉列表

      • <option> 选项
      • <optgroup> 下拉列表选项组合

    • <textarea> 文本域

    • <button> 按钮

    • <fieldset>数据分组

      • <legend> 数据分组的标题

    • <datalist> 为 <input>元素规定预定义选项列表

    • <output> 表示计算结果

  • <input>输入元素

    • 表单属性
    • 输入类型 type
    • 输入属性 value, readonly, disabled...
avatar
文章
阅读
粉丝