前端与HTML|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天!💪
小伙伴们，大家好啊，我是Icfh！
本次呢，我将分享我的《前端与HTML》笔记。由于本人水平有限，不乏有些错误，希望各位小伙伴们斧正！
第一大部分--前端简介：
1.前端解决什么问题
人机交互下的界面的设计
2.web前后端的技术栈
服务器 <<---网络协议--->> 前端
而我们要学习的前端的技术包括：
- html （内容）
- css （样式）
- JavaScript （行为）
3.设计的思考点
- 功能
- 美观
- 兼容性
- 无障碍（考虑特殊人群、特殊情况）
- 安全(Web安全)
- 性能
- 体验感
第二大部分--HTML
1.HTML是什么？
超文本标记语言 （HyperText Markup Language）
2.DOM的简介
全名：document object model 文档对象化模型
作用：将 html文档结构转化成树状结构，其中html文档中的标签对应于树的节点
如图所示，图片转载自wiki百科en.wikipedia.org/wiki/Docume…
3.常用的标签分类
1> list的类型：
-
code：
<html>
<head>
<meta charset="UTF-8">
<title> list的相关使用 </title>
</head>
<body>
<h2>世界电影</h2>
<ol>
<!--有序列表-->
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇值联盟</li>
</ol>
<h2>购物清单</h2>
<ul>
<!--无序列表-->
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
<h2>霸王别姬</h2>
<dl>
<!--定义列表--> <!--define list-->
<dt>导演:</dt> <!--define title-->
<dd>陈凯歌</dd> <!--define description-->
<dt>主演:</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期</dt>
<dd>1993-01-01</dd>
</dl>
</body>
</html>
-
show：
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
2>input标签的相关使用：
-
code：
<html>
<body>
<input placeholder="请输入用户名"><br/> <!--占位显示文本-->
<input type="range"><br/> <!--范围滑动块组件-->
<input type="number" min="1" max="10"><br/> <!--输入数字组件-->
<input type="date" min="2018-02-10"><br/> <!--输入日期组件-->
<textarea>Hey!</textarea>
<!--输入的一些组件-->
<!--可以选择多个的-->
<p>
<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍇</label>
</p>
<!--供用户选择一个选项的组件 依靠name属性来进行区别-->
<p>
<label><input type="radio" name="sport" />⚽</label>
<label><input type="radio" name="sport" />🏀</label>
</p>
<!--提供一个可以下拉的选择表-->
<p>
<select>
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>
</p>
<!--提供一个提示表 就比如搜索引擎中的历史记录那样子-->
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</body>
</html>
-
show：
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
3>a标签的相关使用：
-
code：
<html>
<body>
<a href="http://www.bytedance.com/">字节跳动官网</a> <!--原窗口打开字节跳动官网-->
<br/>
<a href="http://www.bytedance.com/" target="_blank">字节跳动官网</a> <!--添加target属性 打开字节跳动官网-->
</body>
</html>
4>text文本的相关标签使用：
-
code：
<html>
<head>
<title>文字部分的相关标签及其说明</title>
</head>
<body>
<!--blockquote标签块级引用 也称为长引用-->
<!--cite属性来指明引用出处-->
<blockquote cite="***">
bala bala
</blockquote>
<!--cite标签-->
<p>我最喜欢的一本书<cite>小王子</cite>。</p>
<!--q标签-->
<p>在<cite>第一章</cite>,我们讲过<q>字符串是不可变量</q></p>
<!--code标签-->
<pre><code>
const add = (a,b) => a+b;
const multiply = (a,b) => a*b;
</code>
</pre>
<!--strong标签-->
<p>在做投资风险之前 <strong>一定要做风险评估</strong>。</p>
<!--em标签-->
<!--emphasize-->
<p>Cats <em>are</em> cute animals</p>
</body>
</html>
-
show：
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
5>多媒体组件：
-
code：
<html>
<head>
<title>展示img、dudio、video标签</title>
</head>
<body>
<img src="" alt="Metal movable type" width="400" /> <!--alt页面加载不出来时，显示在页面未加载处的文本-->
<audio src="" controls></audio> <!--controls为组件-->
<vedio src="" controls></vedio>
</body>
</html>
6>内容划分基本模型：
4.开发HTML须知：
1.我们写的HTML文档是给其他开发者看的，最好遵循语义化的原则，方便阅读和进一步的优化和维护
2.HTML文档的书写与网络搜索、网络爬虫相关，这与网站的流量又有一定程度上的关联性
第三大部分--其他：
1.学习的途径：
-
MDN
-
W3C
2.上述代码工具和运行环境
-
编辑器: vscode
-
操作系统版本：win10
-
浏览器：FireFox
