这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端
一句话: 使用WEB技术栈解决多端图形交互 最基础的技术栈: HTML + CSS + JS + HTTP 关注的问题: 功能, 美观, 无障碍, 安全, 性能, 兼容, 体验
HTML
HTML: HyperText Markup Language (超文本标记语言)
语法
- 不区分大小写, 推荐小写
- 空标签可以不闭合 (如input, meta)
- 属性值推荐用双引号包裹
- 某些属性值可以省略 (如required, readonly)
标签复习
标题
<h1></h1>
<h2></h1>
<h3></h1>
<h4></h1>
<h5></h1>
<h6></h1>
列表
ol 有序列表
<h2>世界电影票房排行榜</h2>
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
ul 无序列表
<h2>购物清单</h2>
<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
dl 定义列表
<h2>霸王别姬</h2>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
链接
href属性指定目标链接, target="_blank"表示在新窗口打开
<a href="https://www.bytedance.com/">
字节跳动官网
</a>
<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>
输入
input 有23种 见blog.csdn.net/fdbyd/artic…
文本展示标签
<blockquote> 标签定义摘自另一个源的块引用
<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>
<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<q> 标签定义一个短的引用
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<code> 标签是一个短语标签，用来定义计算机代码文本 (比起用这个标签, 用CSS更好)
<p><code>const</code>声明创建一个只读的常量。</p>
<pre> 标签可定义预格式化的文本 (可保留空格和换行符)
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
<em>和<strong> 标签都是短语标签，用来呈现为被强调的文本
区别: em用于局部强调 (阅读到某处才会注意到), strong用于全局强调
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em>are</em> cute animals.</p>
内容划分
<header></header>
<main>
<article></article>
<article></article>
<aside></aside>
</main>
<footer></footer>
语义化 好处 怎么做
为什么要使用这么多种标签?
为了语义化.
那么语义化有哪些好处?
在了解语义化的好处前, 让我们先看看谁在使用我们写的HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词, 排序
- 屏幕阅读器 - 给盲人读页面内容
因此, 语义化的好处:
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
标签传达的是内容, 而不是样式
如何做到语义化:
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
