Web前端学习

玫瑰小步舞

已于 2022-10-20 08:22:05 修改

阅读量1.9k

点赞数 2

文章标签：前端学习 javascript html css

于 2022-10-20 01:35:53 首次发布

本文链接：https://blog.csdn.net/m0_74301759/article/details/127412792

版权

一.了解HTML和CSS

  1.简单定义： 做网站的编程语言

二.了解VS Code

  1.Vs Code,全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器。
  2.安装插件在左侧一栏的扩展
  3.Open in browser、View in browser运行网页
  4.编辑器基本使用：创建文件、创建文件夹、重命名、删除、快捷操作、搜索
  5.设置：文件~首选项~设置（大小、是否换行、word wrap）

具体快捷操作

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

三.chrome浏览器

在这里插入图片描述

四. 网站开发常见职位及工作

  UI设计师：设计稿
  Web前端开发工程师：设计稿~代码、数据库里数据显示到页面、HTML(结构）+CSS（样式）
  Web后端开发工程师

五. web三大核心技术

javascript,html,css间的关系

六. HTML基本结构与属性

6.1 HTML：超文本标记语言在这里插入图片描述

6.2 在这里插入图片描述

七.初始代码

7.1 概念:每一个HTML文件都必要的代码,要符合html规范写法
7.2 快捷键：！+tab

<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
   <html lang="en">   html文件的最外层标签：包含着所有html代码 lang="en"表示是一个英文网站；lang="zh-ch"表示是一个中文网站
   <head>
        <meta charset="UTF-8">   元信息：是编写网页中的一些辅助信息(charset="UTF-8"国际编码，让网页不出现乱码）
        <title>标题</title>  设置网页标题
   </head>
   <body>
        显示网页内容的区域
   </body>

八.HTML中的注释

8.1 概念：注释的代码，只有在文件中看得到，但是浏览器显示不出来。
8.2

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标题
10.2 段落
在这里插入图片描述

、

十一.文本修饰标签

11.1 强调→双标签：strong、em
区别：strong强调语气较强，em较弱，且em为斜体
11.2 下标→双标签：sub
11.3 上标→双标签：sup
11.4 删除文本→双标签：del
11.5 插入文本→双标签：ins
一般情况下，删除文本与插入文本配合使用

十二.图片标签与图片属性

img→单标签

      src:引入图片地址。
      alt:图片出现问题时，可以显示一段友好的提示文字。
      title:提示信息
      width、height:图片的大小

十三.引入文件的地址路径

13.1 相对路径

.：在路径中表示当前路径
…：在路径中表示上一级路径

13.2 绝对路径（盘符可省略）

十四.跳转链接

14.1 a→双标签

     href属性：链接的地址
     target属性：可以改变链接打开的方式，默认情况下，在当前页面打开：_self；新窗口打开：_blank

14.2 base→单标签（一般写在head当中）

 作用：改变连接的默认行为

十五.跳转锚点

实现一：#号+id属性
实现二：#号+name属性

十六.特殊符号