前端与HTML | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第1天
前端技术栈
HTML 内容
JavaScript 行为
CSS 样式
关注点
美观、安全、兼容、功能、性能、无障碍
HTML
什么是HTML
-
HyperText--超文本
-
Markup Language
代码
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">页面样式
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
显示
页面标题一级标题
段落内容
HTML语法
- 标签和属性不区分大小写，自定义推荐用大写，原生用小写
- 空标签可以不闭合
- 属性值推荐用双引号包裹
列表标签
- 有序列表< ol >
代码：
<ol>
<li>📖</li>
<li>🌲</li>
<li>🐰</li>
</ol>
显示:
- 📖
- 🌲
- 🐰
- 无序标签< ul >
代码：
<ul>
<li>📖</li>
<li>🌲</li>
<li>🐰</li>
</ul>
显示:
- 📖
- 🌲
- 🐰
- 定义列表< dl >
代码：
<dl>
<dt>pic</dt>
<dd>🌲</dd>
<dd>🐰</dd>
<dt>word</dt>
<dt>number</dt>
<dd>18互动</dd>
</dl>
显示:
- pic:
- 🌲
- 🐰
- word:
- number:
- 18互动
链接
代码:
<a href="https://www.bilibili.com/">网页</a>
<a href="https://www.bilibili.com/" target="_blank">网页</a>新窗口打开
显示:
多媒体
- 图片
code alt-->加载失败时显示
show
<img
src="" alt="Metal movable type" width="400"
/>
- 音频
show controls-->浏览器默认播放键
code
<audio
src="" controls>
</audio>
- 视频
controls-->浏览器默认播放键
show:
code
<vedio
src="" controls>
</vedio>
输入
Hey📖 🌲
⚽️ 🏀
🥑 🍎
快捷输入方式
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
文本
- 长引用
代码：
<blockquote cite=""><p>《特洛伊》和《赤壁》两者具有一定的相似性，赤壁和特洛伊战争都是由于红颜引起，两者展现了古代西方战争与东方战争的不同，西方注重勇士精神，而东方重于谋略</p>
</blockquote>
效果：
《特洛伊》和《赤壁》两者具有一定的相似性，赤壁和特洛伊战争都是由于红颜引起，两者展现了古代西方战争与东方战争的不同，西方注重勇士精神，而东方重于谋略
- 短引用
代码：
<p>《<cite>赤壁</cite>》里面的人物刻画显然没有《<cite>特洛伊</cite>》成功</p>
效果：
《赤壁》里面的人物刻画显然没有《特洛伊》成功
- 内容引用
代码：
<p>《赤壁》中周瑜的塑造，周瑜既好音周瑜既好<q>音</q>又好<q>淫</q>，喜欢扮无厘头</p>
效果：
《赤壁》中周瑜的塑造，周瑜既好音周瑜既好音
又好淫
，喜欢扮无厘头
- 代码引用
代码：
<p><code>shape1 = Triangle(3,4,5)
shape1.area()
shape1.perimeter()
</code></p>
效果：
shape1 = Triangle(3,4,5)
shape1.area()
shape1.perimeter()
代码：
<pre><code>
shape1 = Triangle(3,4,5)
shape1.area()
shape1.perimeter()
</code></pre>
效果：
shape1 = Triangle(3,4,5)
shape1.area()
shape1.perimeter()
- 强调
代码：
<p>两部电影故事都在<strong>已存在的故事框架上扩展而来</strong>，人物性格就要<em>符合故事的发展</em>，即考虑故事发展的合理性</p>
效果：
两部电影故事都在已存在的故事框架上扩展而来，人物性格就要符合故事的发展，即考虑故事发展的合理性
