【html+css网站设计】

B站听课笔记:
对html和css的基本了解,后续将深入学习。

1.vscode常用设置

1.1 打开文件

1)文件 – 打开
2)直接拖拽

1.2 新建文件

1)右击文件 – 新建
2)文件名称右侧 – +

1.3 自动保存(ctrl+S)

管理 – 设置

1.4 文件重命名

右击文件 – 重命名 (F2)

1.5 删除文件

右击文件 – 删除 (delete)

2.vscode常用快捷键

快捷键:eclipse插件

2.1 自动补全HTML基本结构

输入html:5 或者 ! ,回车即可。

2.2 标签自动补全

tab 或者 回车

2.3 复制当前行|复制多行

ctrl+alt+向下键

2.4 删除当前行|删除多行

ctrl+D

2.5 单行注释|取消单行注释

ctrl + /

2.6 多行注释|取消多行注释

ctrl+shift+/

2.7 统一编辑

按住alt–点击统一编辑的位置

2.8 生成多个

数字
例子:p
10 – 回车

2.9 文字

{文字}

2.10 打开浏览器

alt+B

2.11 快捷键可以组合使用

p{哈哈哈哈}*10

2.12 关闭侧边栏

ctrl+B

2.13 其他快捷键

ctrl+C 复制
ctrl+V 粘贴
ctrl+X 剪切
ctrl+A 全选
ctrl+Z 撤销
ctrl+S 保存
window+D 回到桌面
window+E 打开文件资源管理器
window+L 锁屏

2.14 打开浏览器控制台

1)F12 (Fn+F12)
2)右击网页空白位置 – 检查
3)ctrl+shift+i

3.HTML和CSS的区别

HTML:网页中的内容,例如:图片、文字、视频等 。(身体)
CSS:网页的样式,例如:文字颜色、大小、图片的大小、位置等。(衣服)

4.HTML介绍

4.1 简介

HTML:超文本标记语言
作用:写网页结构内容 例如:图片、文字、视频等
文件后缀:.html 或者 .htm

4.2 标签 标记 元素

HTML由标签组成,标签是尖括号包含的关键词,例如:

 //<p>  <body>  <head>

tag:标签;element:元素。

分类:

  • 双标记,封闭类型标记。例子:
//<p>   段落   </p>  
开始标记  结束标记      双标记之间可以写任意内容
  • 单标记,非封闭类型标记,空标记。例子:
//<meta/>  (单标记的 / 可以省略)

4.3 HTML版本

最新版本为HTML5

4.4 浏览器

作用:解析HTML代码,查看网页效果
主流浏览器:谷歌、火狐、Opera、苹果、IE

4.5 html属性

作用:用来修饰HTML元素
语法: 属性 = " 属性值 " 属性="属性值" 属性="属性值" 双标记写在开始标记中,单标记写在“ / ”前面,一个标签可以有多个属性,多个属性之间用空格隔开,不区分前后顺序。
例子:

//双标记<p style="" class="" id=""></p>  
//单标记<hr class="" id=""/>

4.6 html语法

  • 不区分大小写,推荐小写;
  • HTML忽略多余的空格(有多个空格的时候,只会展示一个空格);
  • HTML由浏览器解析执行,由上往下,由左往右的顺序。

5.网页标题

    <h1>一号标题</h1>
    <h2>二号标题</h2>
    <h3>三号标题</h3>
    <h4>四号标题</h4>
    <h5>五号标题</h5>
    <h6>六号标题</h6>
  • 一号标题字体最大,六号标题字体最小。
  • 标题标签都是在网页垂直显示,内容居左,加粗

建议:推荐使用2-5号标题,如果使用一号标题,一个网页推荐只有一个一号标题

添加标签属性时:
a l i g n = " " align="" align=""设置元素内容的水平对齐方式,默认left居左,取值center居中,取值right居右。