前端与HTML

35 阅读2分钟

前端与HTML

前端技术栈

1JavaScript(行为)
2CSS(样式)
3HTML(内容)

运行在浏览器上,通过http协议从服务端拿到前端代码渲染成页面。浏览器也可以拿到用户输入传给浏览器。

前端应该关注那些方面?

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

前端边界

node:服务端
electron:z桌面端
...

开发环境

浏览器、编辑器

HTML是什么(HyperText Markup Language)

超文本编辑语言 doctype:浏览器识别渲染模式 html:根标签 head:页面源数据,标题 编码 body:呈现给用户的内容

DOM树

image.png

HTML语法

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

标题

h1~h6

链接a标签

href:链接地址
target:_blank新窗口打开地址

多媒体

imgalt 图片文本 src 图片链接
audiosrc 音频链接 controls 播放按钮
video:src 视频链接 controls 播放按钮

输入表单

input:placeholder-占位符 type-类型 min-最小值 max-最大值 list-提示选项
datalist: 多个选择
textarea:多行输入
select:下拉选择 option-选项

文本标签

blockquote:常引用 cite-表示引用地址
cite:引用标题
q: 具体引用的内容
code: 如代码标签 等宽字体展示 strong:强调紧急严重
em:语气上强调

image.png header:页头
nav:导航
main: 主题 一个页面里面一般只有一个
article: 正文
aside:相关的 不是重点
footer:页尾

语义化是什么?

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

谁在使用我们写的HTML

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

总体原则传达的是内容而不是样式