这是我参与「第四届青训营 」笔记创作活动的的第1天
前端简介
一、 语言
HTML: 全称HyperText Markup Lauguage即超文本标记语言
- 超文本:图片、标题、链接、表格等
- 标记语言: 即标签
<img src="photo.png" />
基本结构
<!doctype html>: html5标准网页声明,有了这个网页就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面。<html></html>: 文档根标签<head>表示页面的"头部",页面的 title(标题)和meta(使用的字符集)一般写在<head></head>中间;<title>表示页面的标题;<body>表示页面的"身体",页面中的绝大部分内容都可以写在<body></body>之间。
语法规范
- 标签和属性不区分大小写,但是建议小写
- 空标签可以不闭合,例如<input …… >
- 属性值推荐使用双引号包裹
- 某些属性可省略例如
<img>的alt属性
新知识
一、input的使用
<input type=range>
<input type="number" min="0" max="100">
<input type="date" min="2022-07-23">
- 提示下拉框实现
二、引用
blockquote: 一段文字的引用,cite属性加链接 ,效果类似有margin的块级元素cite:斜体q: 双引号括起内容code:代码格式- 强调:
strong严重em语气
三、语义化
- header:页头 + nav: 导航
- main: 主体内容 => article: 文字、图片(主要内容)+ aside: 不太重要的文章
- footer: 页尾
为什么要写好html:
- 让维护的同事易理解
- 让浏览器展示页面更美观
- 让搜索引擎更好的查找内容
- 便于用户使用
html是传递内容的,而不是样式
课后阅读材料
- MDN 上的 HTML 参考,包含每个标签和属性的详细说明developer.mozilla.org/en-US/docs/…
- 最新版的 W3C HTML5 规范 html.spec.whatwg.org/multipage/