这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端与 HTML
前端工作的定义
-
解决GUI人机交互问题
-
跨终端
-
Web技术栈
前端技术栈拆解与分析
前端 (通过网络协议与服务器端关联)
-
HTML（内容）
-
C SS（样式）
-
JavaScript（行为）
HTML （超文本标记语言）
基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body></body>
</html>
- 基本框架能形成DOM树
HTML语法
标题、列表
<!-->标题h1-h6<-->
<h1></h1>
<!-->有序列表<-->
<ol>
<li></li>
</ol>
<!-->无序列表<-->
<ul>
<li></li>
</ul>
<!-->定义列表<-->
<dl>
<dt>
<dd></dd>
</dt>
</dl>
图片、链接、音频、视频
-
图片
- src:图片链接
- alt:图片失效后显示内容
-
链接
- href：网页地址
- target="_blank" ：新窗口打开
<!-->图片<-->
<img src="" alt=""/>
<!-->链接<-->
<a href="" target="">网页名称</a>
<!-->音视频<-->
<audio src=""></audio>
<video src=""></video>
输入
<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" checked />🍏</label>
</p>
<!-->单选框<-->
<p>
<label><input type="radio" name="sport" />⚽</label>
<label><input type="radio" name="sport" />🏀</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>
引用、强调
<!-->长引用<-->
<blockquote cite="">
<!-->cite:引用链接<-->
<p>引用内容</p>
</blockquote>
<!-->短引用<-->
<p>段落<cite>引用内容</cite></p>
<p>段<q>双引号引用内容</q>落</p>
<p>段<code>代码内容</code>落</p>
<p>段<strong>加粗强调内容</strong>落</p>
<p>段<em>斜体语气强调</em>落</p>
HTML语义化
-
遵循语义
- 例：有序列表用ol，无序列表用ul；
- lang属性表示内容所使用的语言
-
语义化好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
个人总结
内容太多，难记忆，可以通过写代码的方式多次运用、使用可以加深印象。
对于一个内容，要提前考虑哪个标签适合它，这就得了解每个标签和属性的含义。
