第一天 css基础 html 马克飞象 - 图1

一.基础知识

1.web的基本组成

  • html：超文本标记语言，是使用标记标签来描述网页的一种语言；
  • css：层叠样式表是一种用来表现HTML或XML等文件样式的 计算机语言
  • java script：是一种轻量级的编程语言

    2.网页、网站

    一个html文件就是一个网页。 网站是什么？有很多个网页可以组成一个网站

3.常用的浏览器：

1·谷歌浏览器(chrome):Webkit内核(v8引擎)，现在是blink 2·火狐浏览器(firefox):Gecko内核 3.IE浏览器:Trident内核 4.欧朋浏览器(opera):Presto内核 5·safari、大部分国产浏览器(360、搜狗、QQ、UC、猎豹、百度…)、安卓和IOS大部分手机浏览器…都跟谷歌浏览器一样

4.下载vscode,chrome,马克飞象软件

vscode官网：https://code.visualstudio.com/
马克飞象：https://maxiang.io/

5.vscode的基本设置

  • 汉化：文件—扩展-Chinese-下载
  • 在浏览器打开： open in browser
  • 热更新：live Server
  • 同步修改标签：Auto Rename Tag
  • 自动保存：auto save 设置为afterDelay 下面Auto Save Delay可以是1000，代表1000ms之后自动保存
  • 设置字体大小：文件—首选项—-设置 font Size
  • 自动折行：文件—-首选项—-设置 Editor: Word Wrap 改为on
  • 设置颜色主题：文件—-首选项——颜色主题

  • 树形菜单：文件—首选项—设置—取消complete folders

    6.vscode 的基本操作

  • 认清楚文件和文件夹

  • 增
  • 删

  • 改（重命名）：①F2 ②右键

    二.马克飞象的语法知识

    文字

    1.标题：用#来表示，分为六级，快捷键Ctrl+（1~5），六级标题没有快捷键，可以手敲六个#
    2.加粗：Ctrl+b或者文字
    3.加斜：Ctrl+i或者文字
    4.分割线：三颗星或者以上
    5.无序列表：用+或-（空格）

    • 子列表：按tap生成
    • 回退上一级：shift+tap
    • 退出列表编辑：连按两次enter

6.有序列表：数字+.+空格
7.特殊标记能产生红色字体：Ctrl+k
8.代码块：①按ctrl不松，连按三次k ②英文状态下+空格+
9.灰色背景(引入)：>+空格
10.文字链接:Ctrl+l
11.插入图的两种方式

  • 1.QQ：①：CTRL+alt+a ②：Ctrl+v
  • 2.Ctrl+g：①本地上传图片 ②复制图片地址

12.帮助文档：Ctrl+/

文档

1.最大化编辑区：ctrl+enter
2.最大化预览区：ctrl+alt+enter
3.生成快速目录：[toc]

快捷键

1 快速复制：shift+alt+箭头（上下）
2 单行注释：ctrl+/
3 多行注释：shift+alt+a
4 快速补全代码：关键字+tab
5 快速预览：alt+b

三.html

1.快速生成一个html文件

1.新建一个文件，html后缀名： .html或.htm
2.在英文输入法状态下按！（回车或tab）

2.html的字符库链接

https://www.w3school.com.cn/html/html_entities.asp

3.html标签的规则

html中我们用标签来进行标记，HTML标记标签通常被称为 HTML 标签 (HTML tag)。

【标签语法】 1、用尖括号包裹关键词； 2、成对出现的，由开始标签和结束标签组成。 3、结束标签比开始标签多了一个“/”（反斜杠）

大部分都是双标签，但是也有一些特殊的标签，它们被称为“单标签”，或是自闭合标签 或者“空标签”, 例如：<br/> 、<meta/>、<img/>
标签的关系 ：包含 并列

4.html 的基本结构

gb2312 简体中文
gbk 国标码（中文 繁体）
Unicode 万国码，国际通用编码
utf-8 是unicode的升级

  1. <!DOCTYPE html>  //文档声明，告知浏览器此文档所使用的规范，如果不写就是怪异模式
  2. <html lang="en">  //语言类型，lang=“en”代表的是英文，在浏览器中打开，会提示是否翻译成中文 lang=“zh-CN”或者不写代表的是中文
  3. <head>
  4. //字符编码：万国码
  5. <meta charset="UTF-8"/> 
  6. <meta name="keywords" content="关键字" />
  7. <meta name="description" content="描述的文字">
  8. //显示网页标题
  9. <title>html的基本结构</title>
  10. </head>
  11. <body>
  12. 可视部分
  13. </body>
  14. </html>

四.标签

1.p 段落标签

<p>我是一个段落p</p>

2.超链接

href：跳转的地址

target ：控制打开新的页面时是否打开新的窗口 常用的两种方式：_self ：默认，在当前窗口打开 _blank ：在新窗口打开

<a href="#" target=“_self” > 百度</a>

3.标题标签 h1-h6

从表象上来看：都是加粗的，字号逐次递减，重要性也逐次递减

快捷键：h${$级标题}*6

4.图片标签 img

src：图片地址
alt：替代文本，当图片加载失败的时候，会出现alt里面设置的替代文本
title：鼠标划上去出现的时候，出现跟随文字

<img src="" title="" alt="" />