前端与HTML ｜ 青训营

Cmon
59 阅读2分钟

前端与HTML

什么是前端

HTML(内容）、CSS(样式)、Javascript(行为)在浏览器中通过http协议和服务器进行通信构成前端最基础的技术栈。
要关注功能、美观、安全、无障碍、性能、兼容性、用户体验问题。
随着技术更新，前端不仅仅局限于页面开发，比如node可以开发服务器端的内容，使用electron或React Native开发客户端的应用，使用WebGL开发3D游戏等等。
HTML即HyperText+Markup+Language

用处

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

最基本的

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

浏览器会将代码解析成一个DOM树

909bed6f54802147d10c4cfba0f7af3.jpg

HTML语法

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

标题h1~h6

e387c4577c88dba698e650d8ca6b4b9.jpg

列表

e81858e68f4e34dcc7cac4af31cec81.jpg 有序、无序、属性名后接属性值三种表达

链接

f9f4796fa82f5a3f6470a0f62c96f73.jpg

多媒体

bafb9ab9f797f1fbc8b8ac14d0f0121.jpg

输入

0700d66b474e2c80d0d76b8cd588e1b.jpg

选择

1a9a720053c396649d7de62a01b5746.jpg 单个与多个

文本类标签

4e97c3465fe29113c5603009c7b3e50.jpg

<blockquote cite="来源">
   <p>文字</p>
</blockquote>快捷应用

<p>文字<cite>文字</cite></p>短引用

<p><code>"   "</code>内容</p>单行代码
<pre><code>"   "</code>内容</pre>多行代码

<p>内容<strong>内容</strong></p>内容强调

<p>内容<em>内容</em>内容</p>语气强调

内容划分

bfd6a4a590b8f0b0188073274427168.jpg

语义化

00ea8da58de4a30ddf4a9ad28a4c21f.jpg

谁在使用我们写的HTML

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

我的思考与总结

记住HTML是传达内容而不是样式的，了解每个标签和属性的含义，思考什么标签最适合描述这个内容，尽量不使用可视化工具生成代码。

avatar
文章
阅读
粉丝