是HTML+CSS的学习笔记捏

目录

• HTML+CSS导学
• • 1. 拨云见日
  • • 1.1 基础知识
    • 1.2 VS Code
    • 1.3 编辑器基本使用
    • 1.4 Chrome浏览器
    • 1.5 深入了解网站开发
    • 1.6 web前端的三大核心技术
    • 1.7 HTML基础结构与属性
    • 1.8 HTML的初始代码
    • 1.9 HTML注释
    • 1.10 HTML语义化
    • 1.11 标题与段落
    • 1.12 文本修饰标签
    • 1.13 图片标签与图片属性
    • 1.14 引入文件的地址路径
    • 1.15 跳转链接
    • 1.16 跳转锚点
    • 1.17 特殊符号
    • 1.18 无序列表
    • 1.19 有序列表
    • 1.20 定义列表
    • 1.21 嵌套列表
    • 1.22 表格标签
    • 1.23 表格属性
    • 1.24 表单标签
    • 1.26 表格表单组合
    • 1.27 与
    • 1.28 CSS基础语法
    • 1.29 内联样式与内部样式
    • 1.30 CSS样式的引入方式
    • 1.31 css中的颜色表示法
    • 1.32 css背景样式
    • 1.33 css背景实现视觉差效果
    • 1.34 css边框样式
    • 1.35 边框实现三角形
    • 1.36 css文字样式
    • 1.37-42 CSS段落样式
    • 1.43 CSS复合样式
    • 1.44-45 CSS选择器
  • 2. 溯本求源
  • 3. 风生水起
  • 4. 巧夺天工

HTML+CSS导学

1. 拨云见日

①基础的HTML和CSS的学习
②熟悉切图流程、切图方式
③实战阶段了解PC企业站布局和PC游戏站布局

1.1 基础知识

• 1.“HTML、CSS”——是做网站的编程语言。
• 2.浏览器解析代码→呈现网站
  右键网页选择查看网页源代码
• 3.网站由网页组成
  网页 .html文件
  

1.2 VS Code

• VS Code，全称Visual Studio Code，来自微软，是一款免费开源的、基于Electron的现代级 轻量代码编辑器。

• 支持几乎所有主流的开发语言的语法高亮、语法检查、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

1.3 编辑器基本使用

需要下载的插件 ：语言包、open in browser、view in browser

设置 ：文件→首选项→设置（大小、是否换行 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 ：选择相同元素的下一个

简单使用VScode

1.4 Chrome浏览器

下载地址 ：https://www.google.cn/chrome/

五大浏览器 ：IE、火狐（Firegox）、谷歌（Chrome）、Safari、Opera

1.5 深入了解网站开发

一个大型网站的开发需要团队配合，各个岗位都不可或缺

• UI设计师

  • 设计稿（图片、文字、风格、按键等）
  • 指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人

• web前端开发工程师（H5开发）

  • 主要进行网站的开发、优化、完善的工作
  • 将设计稿转化成代码
  • 将数据库里的数据显示到页面
  • HTML（结构）+CSS（样式）的编写

• web后端开发工程师

  • 负责小程序前端修改和优化升级，根据网站业务需要开发和程序修改。
  • 负责网站日常运行的技术维护工作，对出现的问题积极有效的进行处理；
  • 用html5，css3及JavaScript,vue或uniapp完成页面制作，对完成的页面进行维护和对网站前端性能做相应优化；
  • 丰富互联网的Web开发，改善用户体验；
  • 进行相关数据处理、查询，统计和分析工作。

1.6 web前端的三大核心技术

• HTML ：结构
• CSS ：样式
• JavaScript ：行为（与用户的交互、图片等）

添加一点点点新东西

1.7 HTML基础结构与属性

• 超文本标记语言（HyperText Maekup Language），标准通用标记语言下的一个应用。是网页制作必备的编程语言

• HTML：超文本 标记 语言

• 超文本：文本内容、非文本内容（图片、视频、音频等）

• 标记（标签）：

• 语言：编程语言
  
  

• 写法分成两种

  • 单标签：
  • 双标签：

• 创建标签的快捷键：单词 + tab键→
  标签可以上下排列，也可以组合嵌套。
  标签的属性：来修饰标签的，设置当前标签的一些功能。
  

1.8 HTML的初始代码

• 每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法
• ！+ tab键：就可以快速创建初始代码

来源：瞿岚
                                                        
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！