前端与HTML
前端技术栈
1、JavaScript(行为)
2、CSS(样式)
3、HTML(内容)
运行在浏览器上,通过http协议从服务端拿到前端代码渲染成页面。浏览器也可以拿到用户输入传给浏览器。
前端应该关注那些方面?
美观、安全、性能、无障碍、功能、兼容
前端边界
node:服务端
electron:z桌面端
...
开发环境
浏览器、编辑器
HTML是什么(HyperText Markup Language)
超文本编辑语言 doctype:浏览器识别渲染模式 html:根标签 head:页面源数据,标题 编码 body:呈现给用户的内容
DOM树
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:语气上强调
header:页头
nav:导航
main: 主题 一个页面里面一般只有一个
article: 正文
aside:相关的 不是重点
footer:页尾
语义化是什么?
- HTML中的元素、属性和属性值都拥有某些含义
- 开发者应该遵循予来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
总体原则传达的是内容而不是样式