十五天学会css之第一天css基础 html 马克飞象css基础 html 马克飞象

东方淼淼
355 阅读4分钟

第一天 css基础 html 马克飞象css基础 html 马克飞象

8a8cc4fd6dbd86550435e2189e608f3.png

一.基础知识

1.web的基本组成

示例图片.jpg

  • 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的基本设置

  • 汉化：文件-->扩展-->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

5.vscode 的基本操作

  • 认清楚文件和文件夹
  • 增:新建文件 新建文件夹
  • 删：选中要删除的文件过文件夹-->delete
  • 改（重命名）：①F2 ②右键

二.马克飞象的语法知识

文字

  1. 标题：用#来表示，分为六级，快捷键Ctrl+（1~5），六级标题没有快捷键，可以手敲六个#
  2. 加粗：Ctrl+b或者文字
  3. 加斜：Ctrl+i或者文字
  4. 分割线：三颗星或者以上
  5. 无序列表：用+或-（空格）
  • 子列表：按tap生成
  • 回退上一级：shift+tap
  • 退出列表编辑：连按两次enter
  1. 有序列表：数字+.+空格
  2. 特殊标记能产生红色字体：Ctrl+k
  3. 代码块：①按ctrl不松，连按三次k ②英文状态下+空格+
  4. 灰色背景(引入)：>+空格
  5. 文字链接:Ctrl+l
  6. 插入图的两种方式
  • QQ：①：CTRL+alt+a ②：Ctrl+v
  • Ctrl+g：①本地上传图片 ②复制图片地址
  1. 帮助文档：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的字符库链接

www.w3school.com.cn/html/html_e…

3.html标签的规则

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

1.【标签语法】
  1. 用尖括号包裹关键词；
  2. 成对出现的，由开始标签和结束标签组成。
  3. 结束标签比开始标签多了一个“/”（反斜杠）
  4. 大部分都是双标签，但是也有一些特殊的标签，它们被称为“单标签”，或是自闭合标签 或者“空标签”, 例如：<br/> 、<meta/>、<img/>
2. 标签的关系
  • 包含
  • 并列

4.html 的基本结构

  • gb2312 简体中文
  • gbk 国标码（中文 繁体）
  • Unicode 万国码，国际通用编码
  • utf-8 是unicode的升级
<html lang="en">  //语言类型，lang=“en”代表的是英文，在浏览器中打开，会提示是否翻译成中文 lang=“zh-CN”或者不写代表的是中文
<head>
//字符编码：万国码
<meta charset="UTF-8"/> 
<meta name="keywords" content="关键字" />
<meta name="description" content="描述的文字">
//显示网页标题
<title>html的基本结构</title>
</head>
<body>
可视部分
</body>
</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="" />
avatar
文章
阅读
粉丝