前端与HTML｜ 青训营笔记

用户5399659033724
118 阅读3分钟

前端与HTML｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

（一）什么是前端

  • 解决 GUI 人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR

  • Web 技术栈

（二）前端技术栈（三大组件必学*）

  • JavaScript（撰写方法，处理服务器等）
  • css（优化样式）
  • html（基础构建）

（三）前端应该关注那些功能

  • 美观
- 主要是布局架构例如流布局，响应式布局以及页面美化css。
- 主要学习技术css，bootstrap
  • 安全
- 在传输过程中使用get/post
- 如何防护例如sql注入等入侵手法
- 是否在传输过程中容易被抓包而窃取数据
  • 功能
目前喜欢用快速原型模型的方式进行项目
  • 性能
-减少代码冗余，例如选择器公用，JavaScript代码设置对象等
-使用算法进行优化代码，例如递归
  • 无障碍
- 多平台，前端优势
- 多注意兼容性，比方说ie的版本的兼容，以及Android，ios的不适配

（四）开发环境

  • 浏览器
    • IE/Edee
    • Chrome（谷歌）
    • Firefox（火狐）
    • Safari（苹果浏览器）
  • 编辑器
    • VSCode（插件库丰富）
    • Vim
    • WebStorm
    • Hubilder（自己在用还不错）

（五）标签和属性

  1. <!doctype html>
说明网页执行的格式，区分大小写
  1. 单标签
例如：<img/>、<br/>
  1. 双标签
例如：p></p>、<div></div>
  1. 实体
例如：
    -&nbsp；空格
    -&gt；小于号
    -&lt；大于号
    -&copy；版权符号
  1. 部分标签属性
1.超链接标签<a href="#"  target="#"></a>
	（1）href:
			#：回到顶部

			超链接：跳转外部页面
			
			#id：跳转本页面
			
			javascript:;  什么也不会发生
			
	（2）target属性：
			_self 默认值 在当前页面中打开超链接
			
			_blank 在一个新的标签页中打开
 

2. 图片<img width="" height="" src="" alt=""/>
	2.1 描述
	
		-src:图片的外部路径
		
		-alt：图片的描述，默认情况下不会显示，搜索引擎会根据alt中的内容识别内容
		
		-width/height：只修改一个，另外一个会等比例修改
		
		备注：一般pc只是单独设置宽高
		
	2.2 图片的格式
	
		jpeg(jpg):
		       -支持的颜色比较丰富，不支持透明效果，不支持动图
			-一般用来显示图片
		gif：
			-支持的颜色比较少，支持简单透明
			-颜色单一的图片，动图
		png：
			-支持的颜色丰富，支持复杂透明
			-颜色丰富，复杂透明图片（专为网页而生）
		webp：
			-谷歌推出的专门表示网页中的一种格式
			-具备所有图片的优点，文件小
			-兼容性不好
		base64
			-将图片使用base64编码
			-这样可以吧图片转换为字符，通过字符的形式引入图片
			
	2.3 备注
	
		效果一样的，选小的，效果不一样的，选效果好的

3. 列表
  3.1无序列表
  
  	<ul>
  		<li></li>
  	</ul>
  	
  3.2 有序列表
  
  	<ol>
  		<li></li>
  	</ol>
  	
  3.3结构列表
  
  	<dl>
  		<dt>列表头</dt>
  		<dd>列表体</dd>
  	</dl>
  	
  3.4 特性
  	列表之前可相互嵌套

4. 内联框架<iframe src="" width="" height="" frameborder="1/0"></iframe>
	
	（1）src：外部链接
	
	（2）frameboder：外部边框

5. 音视频<audio/video src="" controls autoplay></audio/video>
	
	5.1 属性（无值）：
			-controls： 是否允许用户控制播放
			
			-autoplay： 音视频是否自动播放
				-如果设置了autoplay打开浏览器会自动播放
				-但是大部分浏览器不会自动播放
				
			-loop： 循环播放
			
	5.2兼容性解决方案
		<audio/video  controls autoplay>
			升级浏览器。。
			<source src=".ogg"></source>
			<source src=".mp3"></source>
		</audio/video>
		
			-<source>会按顺序执行，成功一个不在往下执行
			-中文是在浏览版本太低时，代码无法被解析，提示用

6. 元数据标签<meta><meta>
	6.1 定义：
		meta主要是用户设置网页中的一些元数据，元数据不是给用户看的
	
	6.2 属性：
			charset 指定网页的字符集
			
			name 指定的数据的名称
			
			content 指定的数据的内容
				-keywords 表示网站的关键字
				
				-Description指定网站的描述
				
				-http-equiv：重定向:自动跳转到指定网站

（六）总结

第一天，讲个偏基础一些，我之前有上过类似的课所有过的速度较快，参考了一下别人的笔记，我的字数还是有点太多了，应该图文结
合一些，基础班也有一个不太好，不是直播，没有办法实时反馈问题
avatar
文章
阅读
粉丝