Day1 前端与HTML学习笔记
文章目录
1 概述
- 前端是使用Web技术栈解决多端图形界面交互问题的
- 前端技术栈内容
- HTML（内容）、CSS（样式）、JavaScript（行为）
- HTTP（网络协议）
- 前端关注哪些方面
- 美观、功能、无障碍、安全、性能、兼容
- 前端可以什么？
- 开发服务器端、开发客户端、编写游戏等
2 HTML
2.1 简述
- HyperText Markup Language
- 超文本可以包括图片、标题、链接、表格等内容
- 使用的是标记语言
- 举例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
- 浏览器根据doctype来选择哪种渲染模式
浏览器根据代码会解析出一个DOM树
语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包括
- 某些属性值可以省略，比如required、readonly
2.2 知识点
2.2.1 标题&列表
- 标题h1~h6
- 列表
- 有序列表
<ol>+<li> - 无序列表
<ul>+<li> - p value形式
<dl>+<dt>+<dd>
2.2.2 超文本
- 链接
<a href="www.bytedance.com">
官网
</a>
<a href="www.bytedance.com" target="_blank">
官网
</a>
- 图片/音频/视频
<img src="XXX.jpg" alt="Metal movable type" width="400"/>
<audio src="/assets/music.ogg" controls></audio>
<video src="/assets/video.mp4" controls></video>
2.2.3 控件
- 输入
- placeholder：占位符
- 输入范围（出现滑动块）
- 输入数字（可以上下选择数字）
- 日期选择
- 输入长文字文本框
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
- 选择
- 单选
- 多选
- 下拉选择
- 自由输入辅助选择
<p>
<label><input type="checkbox" />红苹果</label>
<label><input type="checkbox" />绿苹果</label>
</p>
<p>
<label><input type="radio" name="sports" />足球</label>
<label><input type="radio" name="sports" />篮球</label>
</p>
<P>
<select>
<option>梨子</option>
<option>苹果</option>
<option>葡萄</option>
</select>
</P>
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
2.2.4 文本
- blockquote：快捷引用/长引用
- cite：短引用，一般引用的是作品名字和章节
- q：短引用，具体引用的内容
- code：代码引用
- preview+code：多行代码引用
- strong：加粗（强调）
- em：斜体（重读）
<blockquote cite=“http://t.cn/RfjK00F”>
<p>XXXXXXXXXXXXXXXXXXXX</p>
</blockquote>
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<p><code>const</code>声明创建一个只读的常量。</p>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
<p>今天买了一本<strong>日历</strong>。</p>
<p>今天买了一本<em>日历</em>。</p>
2.2.5 内容划分
图示
header
- logo
- 导航（nav）
- main
- 页面主体
- aside
- 和页面相关但又不属于主体内容
- footer
- 放在页尾
2.3 语义化
- 要求：遵循HTML的语义来编写HTML，要传达内容而非样式
- 好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
- 如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
- 推荐资料
- MDN文档
- W3C上HTML5的规范