青训营前端 ｜ 青训营

九三整夜在写信
101 阅读4分钟

青训营上课笔记

一.前端语言串讲

1.前端语言的基本能力

HTML：超文本标记语言，构建框架结构————人体骨骼架构
CSS：层叠样式表，给元素添加样式，起到装饰作用————人的外貌形象
JavaScript：增加交互体验，处理复杂函数————人体行为能力

2.HTML

a.最小单位是使用左右尖括号包裹起来的字符，称之为标签或元素。
b.HTML的本质就是大量标签构成的文本文件
c.浏览器解析为具体的元素，完成文本到网站内容的转换
d.基本语法：标签、文本、注释、定义文档、处理信息
e.标签分类：文档型、闭合型、换行型、H5新元素

3.CSS

a.由1个Selecter后面跟上多个由大括号括起来的Declaration构成
b.Declaration是Property和Value的键值对

4.JavaScript

a.基本类型：String、Number、Boolean、Null、Undefined、Symbol
b.对象类型：Object
c.var = 7 + “2”；
  1)var：定义变量关键字，表明作用域，与之相同的还有let、const
  2)=：操作符
  3)表达式：运算过程会统一数据类型

5.浏览器

a.包含渲染引擎和JavaScript引擎
b.渲染引擎：加载页面、排版绘制
c.JavaScript引擎：通过解释器运行

6.前端语言的协作配合

a.CSS在HTML中的运用

1).Inline CSS：在HTML标签中通过style、class添加样式
	<p style="color: blue";>This is aparagraph.</p>

2).Internal CSS：内部CSS，在HTML头部(head)通过style标签定义一些类的样式
	<head>
		<style type = test/css>
			body {background-color: blue;}
			p {color: yellow;}
		</style>
	</head>

3).External CSS:引入外部样式
	<head>
        <link rel="stylesheet" type="text/css" href="style.css">
	</head>

b.JavaScript在HTML中的运用

1).script标签引入外部超链文件或在内部编写脚本
2).默认情况下script标签会阻塞页面解析
3).可以使脚本的下载或执行变为异步
4).默认script定义在全局

c.HTML在JavaScript中的运用

实现动态修改HTML内容
function renderHello(){
    var template = document.getElementById('template').innerHTML;
    var rendered = Mustache.render(template, {name: 'Luke'});
    document.getElementById('target').innerHTML = rendered;
}

d.CSS在JavaScript的运用

通过JavaScript动态操作CSS
div.style.width="100px"

div.style.cssText="width:100px;height:100px;background: palevioletred"

div.setAttribute("class","div2")

link.setAttribute("href","css2.css")

二.前端与HTML

1.前端工程师定义

使用Web技术栈解决多端图形用户交互界面问题的工程师

2.前端技术栈

a.使用HTML显示内容、CSS设置页面样式、JavaScript定义网页行为。
b.浏览器通过HTTP协议与服务器进行通信

3.前端关注问题

a.产品功能
b.界面美观
c.无障碍使用
d.安全保障
e.性能
f.兼容性

4.HTML解析

HTML：HyperText Markup Language
a.HyperText——超文本：图片、标题、链接、表格
b.Markup Language——标签书写格式

案例说明

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF—8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p> 段落内容</p>
    </body>
</html>

doctype：标记当前使用的文件是什么HTML版本
html：文档跟标签
head：放入页面元数据，例如：标题、编码选择等
body：需要呈现给用户的内容

语法：
	标签和属性不区分大小写，推荐使用小写
	空标签可以不闭合，例如input、meta等
	属性值推荐使用双引号包裹
	某些属性值可以省略，例如required、readonly等

DOM树

Screenshot_20230727_200143.jpg

5.标题

6级标题h1—h6

<h1>字体排版学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术</p>

从h6—h1显示效果逐渐突出变大

6.列表

序列表：有顺序的展示,默认添加序号前缀
	<ol>
        <li>……</li>
        <li>……</li>
        <li>……</li>
	</ol>

无序列表：默认添加·前缀
	<ul>
        <li>……</li>
        <li>……</li>
        <li>……</li>
	</ul>

定义列表：key——value形式，
	<dl>
        <dt>……</dt>
        <dd>……</dd>
        <dt>……</dt>
        <dd>……</dd>
        <dt>……</dt>
        <dd>……</dd>
        <dd>……</dd>
	</dl>

7.链接

点击跳转到href的超链接
<a href="http://www.bytedance.comn/">字节跳动官网</a>

target="_blank"表示打开新窗口，不在原来窗口进行跳转
<a href="http://www.bytedance.comn/" target="_blank">字节跳动官网</a>

8.多媒体元素

图片：<img src="图片地址" alt="图片未加载的替代文字"  width="宽度"/>

音频：<audio src="" controls></audio>
	controls表示默认添加播放按键与进度条
视屏：<video src="" controls></video>

9.输入

<input>
	<placeholder="用户未输入时的显示内容">
	<type="range">范围滑动块
	<type="number" min="最小值" max="最大值">输入数字
	<type="date" min="">日期选择框
<textarea>输入多行内容</textarea>

<input type="checkbox"/>多项选择
<input type="radio"/ name="">通过name识别进行单项选择
        
下拉选项
<select>
	<option>……</option>
	<option>……</option>
	<option>……</option>
</select>

10.文本类标签

引用
	<blockquote cite="来源链接">块引用</blockquote>
	<cite>短引用</cite>——作品标题
	<q>简短的行内引用</q>
	<code>代码引用</code>
	<strong></strong>  <em></em>强调突出

11.内容划分

Screenshot_20230727_204652.jpg

12.语义化

a.HTML中的元素、属性、属性值都拥有某些含义
b.开发者应该遵循语义来编写HTML
c.利于开发者修改维护页面
d.利于浏览器展示页面
e.利于搜索引擎建立索引
f.利于无障碍阅读
g.传达内容而不是样式
avatar
文章
阅读
粉丝