Web前端学习1
一.了解HTML和CSS
1.简单定义： 做网站的编程语言
二.了解VS Code
1.Vs Code,全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器。
2.安装插件在左侧一栏的扩展
3.Open in browser、View in browser运行网页
4.编辑器基本使用：创建文件、创建文件夹、重命名、删除、快捷操作、搜索
5.设置：文件~首选项~设置（大小、是否换行、word wrap）
具体快捷操作
1.ctrl+s:保存
2.ctrl+a:全选
3.ctrl+x、ctrl+c、ctrl+v：剪切、复制、粘贴
4.ctrl+z、ctrl+y：撤销、前进
5.shift+end：从头选中一行
6.shift+home：从尾部选中一行
7.shift+alt+↓：快速复制一行
8.alt+↑或↓：快速移动一行
9.tab：向后缩进
10.tab+shift：向前缩进
11.alt+鼠标左键：多光标
12.ctrl+d：选择相同元素的下一个
三.chrome浏览器
chrome浏览器下载地址：https://www.chromexz.com/
四. 网站开发常见职位及工作
1.UI设计师：设计稿
2.Web前端开发工程师：设计稿~代码、数据库里数据显示到页面、HTML(结构）+CSS（样式）
3.Web后端开发工程师
五. web三大核心技术
javascript,html,css间的关系
六. HTML基本结构与属性
6.1 HTML：超文本 标记 语言
(1)超文本：文本内容+非文本内容（图片、视频、音频等）
(2)标记：<单词>
(3)语言：编程语言
(4)标记也叫标签：
<header>
<footer>
(5)写法分成两种：
单标签 <header>
双标签 <header></header>
(6)创建标签的快捷键：单词 + tab键
标签可以上下排列，也可以组合嵌套。
（7）HTML常见标签：https://www.w3cschool.cn/html/html-Label.html
（8）标签属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值”属性2=“值2”>
6.2 HTML标签含义
七.初始代码
7.1 概念:每一个HTML文件都必要的代码,要符合html规范写法
7.2 快捷键：！+tab
1.<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
2. <html lang="en"> html文件的最外层标签：包含着所有html代码 lang="en"表示是一个英文网站；lang="zh-ch"表示是一个中文网站
3. <head>
4. <meta charset="UTF-8"> 元信息：是编写网页中的一些辅助信息(charset="UTF-8"国际编码，让网页不出现乱码）
5. <title>标题</title> 设置网页标题
6. </head>
7. <body>
8. 显示网页内容的区域
9. </body>
八.HTML中的注释
8.1 概念：注释的代码，只有在文件中看得到，但是浏览器显示不出来。
（1）
8.2 意义：
（1)把暂时不用的代码注释起来，方便以后使用
（2)对开发人员进行提示
8.3 快捷添加注释与删除注释
（1)ctrl+/
（2)ctrl+alt+a(选中）
九.HTML语义化
9.1 概念：根据网页中内容的结构，选择合适的HTML标签进行编写。
9.2 好处：
（1）.没有CSS的情况下，页面也能呈现出很好的内容结构。
（2）.有利于SEO，让搜索引擎爬虫更好地理解网页。
（3）.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
（4）.便与团队开发与维护。
十.标题与段落（h标签与p标签）
10.1标题 → 双标签 :<h1></h1> ... <h6></h6>
注意：在一个网页中，h1标题最重要，并且.html文件中只能出现一次h1标签。
10.2段落→双标签 ：<p></p>
段落->双标签：<h1></h1>
十一.文本修饰标签
11.1强调 →双标签 ： （加粗，强调性更强）、（斜体，强调性较弱）
11.2下标：<sub></sub>
11.3上标：<sup></sup>
11.4删除：<del></del>
11.5插入：<ins></ins>
注意：一般情况下，删除文本都是和插入文本配合使用的。
十二.图片标签与图片属性
12.1img→单标签
(1).src:引入图片地址。
(2).alt:图片出现问题时，可以显示一段友好的提示文字。
(3).title:提示信息
(4).width、height:图片的大小
十三.引入文件的地址路径
13.1 相对路径
.：在路径中表示当前路径
…：在路径中表示上一级路径
13.2 绝对路径（盘符可省略)
十四.跳转链接
14.1 a→双标签
(1).href属性：链接的地址
(2).target属性：可以改变链接打开的方式，默认情况下，在当前页面打开：_self；新窗口打开：_blank
14.2 base→单标签（一般写在head当中）
(1).作用：改变连接的默认行为
十五.跳转锚点
实现一：#号+id属性
实现二：#号+name属性
十六.特殊符号
十七.列表标签
17.1 无序列表
1.ul li 列表最外层容器，符合嵌套的规范
2.type属性：改变前面标记的样式（一般用css控制）
17.2 有序列表
1.ol li 列表最外层容器，符合嵌套的规范
2.type属性：同上
17.3定义列表
1.dl 定义列表
2.dt 定义专业术语或名词
3.dd 对名词进行解释和描述
扫一扫
3740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
