web前端学习总结

对html与css的认知

html以及css既适用于web的开发，即便最近几年Javascript最为流行，但两者地位在web开发仍然是不容小觑的。html与css配合使用，作为网站的基础开发语言

可以看见上图中简洁的代码就是html，而下面密密麻麻的则是css
而两者组合则就是我们看到的网页

• 可知一个网页就可呈现为 .html
• 而网页中插入的视频则可视为 .mp4
  设计出一个网页，就是很多文件类型组成的

扩展

什么是html和css

• html HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
• css 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

编辑器vs code的使用

• 什么是vs code
  全称是 Visual Studio Code，由微软创造，是一个开源的、基于Electro的轻量代码编辑器。
• 有关于它的使用

1,快捷方式
***ctrl + s：保存
ctrl + a：全选
ctrl + x：剪切
ctrl + c ：复制
ctrl + v：粘贴
ctrl + z ：撤销
ctrl + y ：前进
shift + end ：从头选中一行
shift + home：从尾部选中一行
 shift + alt +↓：快速复制一行
 alt + ↑或↓：快速移动一行
 tab ：向后缩进
shift + tab：向前缩进
alt + 鼠标左键 ：多光标
ctrl + d ：选择相同元素的下一个

2，设置方法
文件>首选项>设置（大小、是否换行、word wrap）
3.作用：
创建文件、创建文件夹、重命名和删除、搜索

chorm浏览器以及网页开发的认知

目前使用最为广泛的是chorm浏览器，并且的好处是显而易见的，简洁的使用界面，快捷的使用形式
其次广为人的还有诸如火狐浏览器，苹果公司的safrai浏览器等

研发团队的的构造

1，ui设计师
2，web前端开发师
设计稿
将数据库里的数据移入其中
HTML+CSS的使用
HTML：结构开发
3，web后端开发师

web的三项核心技术

首先需要去了解的是三项为人使用最多的
HTML主要司职于结构
CSS可以构造出整体样式
JAVAscript可以决定开发的行为方式同时也可以起到交互作用

HTML的架构及用法

• HTML的基本结构
  首先需要去理解何为超文本，超文本就是由文本内容以及非文本内容包括图片，音频等
  
  以上即为超文本的编辑形式
• HTML的属性
  

web开发中文本的使用

• HTML注释在浏览器中并不会表现出来，只在代码中展现出其的意义

• HTML语义化
  标题 →双标签

  …

  优点
  1.在没有CSS的情况下，页面也能呈现很好的内容结构。
  2.有利于SEO，让搜索引擎爬虫更好的理解网页。
  3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
  4.便于团队开发与维护。

• HTML标题与段落
  1，h标签
  在一个网页中，h1标签最重要，并且一个.html文件中只能出现一个h1标签
  h5、h6标签在网页中不经常使用
  2，p标签
  段落→双标签

## web开发中的几种表格使用

• 文本修饰标签
  1.强调标签
  强调→双标签：
  <strong></strong>
<em></em>
  区别：
  写法和展示效果是有区别的。前者加粗，后者斜体
  strong的强调性更强，en的强调性稍弱。
  2.下、上标签
  下标：<sub></sub>
  上标：<sup></sup>
  3.删除、插入标签
  删除文本：<del></del>
  插入文本：<ins></ins>

• 图片标签与图片属性
  img→单标签：
  属性：src：引入图片的地址
  　　　alt：当图片出现问题的时候，可以显示一段友好的提示文字
  　　　title：提示信息
  　　　width、height：图片的大小（最好加上，为了给用户最好的体验）

• 引入文件的地址路径
  1.相对路径
  在路径中表示当前路径
  在路径中表示上一级路径
  2.绝对路径
  无法随意更改，不见建议前期使用

• 跳转锚点
  实现一：#号，id属性
  #号 + id属性（id属性是加给h标签）

  实现二：#号，name属性
  #号 + name属性（id属性是加给a标签）

• 特殊符号
  

• 列表标签
  1.无序列表
  →符合嵌套的规范
  2.有序列表
  <ol>、<li>：列表的最外层容器、列表项
  1.有序列表用的非常少，经常用的是无序列表，无序列表可以代替有序列表。
  2.type属性：改变前面标记的样式（一般都是用CSS去控制）
  3，定义列表
  <dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述<dl>