Day2 前端HTML ｜ 青训营

Woodzzz
94 阅读2分钟

前端

什么是前端

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

前端技术栈

HTML、CSS、JavaScript运行在浏览器，浏览器通过http协议与服务器进行通信。

最基础的前端技术栈：HTML、CSS、JavaScript和网络协议。

前端应该关注的方面

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

HTML

HTML(HyperText Markup Language)

<!DOCTYPE html>：标记当前使用的HTML文件使用的HTML版本，根据此决定浏览器渲染版本。

<html></html>:文档的根标签

DOM树

浏览器会将HTML代码解析成DOM树。

dom树.jpg

语法

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

标签

标题

<h1></h1>~<h6></h6>,数字越小字越大。

列表

有序<ol></ol>、无序<ul></ul>、定义列表<dl></dl> <dt></dt> <dd></dd>

链接

<a href="...." target="_blank">链接</a>

默认打开方式target为_self。

图片、音视频

//src：文件地址
//alt:替换文本，如文件无法加载将会显示
//controls：进度控制条
<img src="photo.jpg" alt="a photo" width="400"/>
<audio src="music.ogg" contorls></audio>
<video src="video.mp4" controls></video>

表单

<input type="..." name="...">

<textarea></textarea>

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<input list="mylist">
<datalist id="mylist">
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>

文本类标签

<blockquote cite="http://xxx.cn"></blockquote> // 块级(长)引用,cite:引用的来源
<cite></cite> // 短引用
<q></q> // 短引用，上文提过的内容
<code></code> //引用代码

内容划分(结构元素)

<article></article>
<section></section>
<header></header>
<nav></nav>
<main></main>
<aside></aside> //侧边栏等
<footer></footer>

语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML。
    • 如：有序列表用ol;无序列表用ul。
    • 如：lang属性表示内容所使用的语言。

遵循语义化，利于开发者修改、维护页面，利于浏览器展示页面，利于搜索引擎提取关键字、排序，利于屏幕阅读器给盲人读页面内容等等。

遵循语义化的重要性会在进行团队合作开发后会深有体会。。。

总结

本节课回顾了html的一些基础内容，语法、标签等基础内容。
总而言之，无论是初学者还是什么，都应该贯彻规范化的开发模式，如遵循前端语义化，将利于开发的效率和质量。前端应该关注的美观、功能、无障碍、安全、性能、兼容性、体验方面也是我们开发需要注意的，这些也是我们提高前端开发质量的方向。

avatar
文章
阅读
粉丝