尚硅谷(李立超)——HTML5CSS3笔记总结【持续更新】
尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】
本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃)
一、进制
1.十进制(日常使用):
特点:满10进1
计数:0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20
单位数字:10个(0-9)
2.二进制(计算机底层的进制):
特点:满2进1
计数:0 1 10 11 100 101 110 111
单位数字:2个(0-1)
扩展:所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器,每一个小格子中可以存储一个0或一个1,这一个小格子在内存中被称为1位(bit)。
8bit = 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb(特字节)
1024tp = 1pb
3.八进制(很少用)
特点:满8进1
计数:0 1 2 3 4 5 6 7 10 11 12 13 14…17 20
单位数字:8个(0-7)
4.十六进制(一般显示一个二进制数字时,都会转换为十六进制)
特点:满16进1
计数:0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12…1a 1b 1c 1d 1e 1f 20…
单位数字:16个(0-f)
二、字符编码
举个例子:
(这里假设周杰伦对应的二进制码是110000110110)
周杰伦→110000110110(编码)
110000110110→周杰伦(解码)
-笔记总结:所有的数据在计算机中存储时都是以二进制形式存储的,文字也不例外。所以一段文字在存储到内存中时,都需要转换为二进制编码。当我们读取这段文字时,计算机会将编码转换为字符,供我们阅读。
1.编码:将字符转换为二进制码的过程成为编码。
2.解码:将二进制转换为字符的过程成为解码。
3.字符集(charset):编码和解码所采用的规则称为字符集。可以通过meta标签来设置网页的字符集,避免乱码问题。
4.乱码问题:如果编码和解码所采用的字符集不同就会出现乱码问题。
5.常见的字符集:ASCII
ISO88591
GB2312
GBK
UTF-8(在开发时我们使用的字符集都是UTF-8)
三、文档的使用
这里我们需要牢记整个HTML中的最基本的架构:
四、实体
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格。在HTML中有些时候,我们不能直接书写一些特殊符号,比如,多个连续的空格,字母两侧的大于小于号等等。
在HTML中常用的实体名字:
 ;空格
>;大于号(great)
<;小于号(little)
©;版权符号(©)
五、meta标签
meta主要用于设置网页中的一些元数据,元数据不是给用户看。
charset指定网页的字符集。
name指定数据的名称。
content指定数据的内容。
keywords表示网站的关键字,可以同时指定多个关键字,关键字之间使用逗号隔开。
description用于指定网站描述,网站的描述会显示在搜索引擎的搜索的结果中。
title标签的内容会作为搜索结果的超链接上的文字显示。
六、语义化标签(1)
在网页中HTML专门用来负责网页的结构,所以在使用HTML标签时,应该关注的是标签的语义,而不是它的样式。
1.标题标签:
h1~h6 一共有六级标题;
从h1~h6重要性递减,h1最重要,h6最不重要;
h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1;
一般情况下标题标签只会使用到h1~h3;
标题标签都是块元素。
2.在页面中独占一行的元素称为块元素(block element)。
3.hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup。
4.p标签表示页面中的一个段落。p标签是一个块元素。
5.em标签用于表示语音语调的一个加重。
6.在页面中不会独占一行的元素称为行内元素(inline element)。
7.strong表示强调重要内容。
8.blockquote表示一个长引用。
9.q表示一个短引用。
10.br标签表示页面中的换行。
七、块和行内
1.块元素(block element)
在网页中一般通过块元素来对页面进行布局。
2.行内元素(inline element)
行内元素主要用来包裹文字;
一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素;
块元素中基本上什么都能放;
p元素中不能放任何的块元素。
3.浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正。比如:
标签写在了根元素的外部;
p元素中嵌套了块元素;
根元素中出现了除head和body以外的子元素;
……
八、语义化标签(2)
布局标签(结构化语义标签)。
header表示网页的头部;
main表示网页的主体部分(一个页面中只会有一个main);
footer网页的底部;
nav表示网页中的导航;
aside和主体相关的其他内容;
article表示一个独立的文章;
section表示一个独立的区块,上边的标签都不能表示使用section;
div没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素;
span行内元素,没有任何的语义,一般用于在网页中选中文字。
九、列表
在HTML中也可以创建列表,一共有三种列表方式:
1.有序列表
2.无序列表
3.定义列表
无序列表,使用ol标签来创建无序列表,使用li表示列表项。
有序列表,使用ul标签来创建有序列表,使用li表示列表项。
定义列表,使用dl标签来创建一个定义列表,使用dt来表示定义的内容,使用dd来对内容进行解释说明。
列表之间可以相互嵌套。
尚硅谷(李立超)——HTML5CSS3笔记总结【持续更新】相关推荐
- 尚硅谷李立超JavaScript笔记
李立超老师JavaScript笔记 目录 1.JS简介 2.JS的HelloWorld 3.JS代码编写的位置 4.JS的基本语法 5.字面量与变量 6.标识符 7.数据类型 8.强制类型转换 1. ...
- 尚硅谷李立超老师讲解web前端---笔记(持续更新)
目录 一.准备(2023.2.8) 二.组成部分(2023.2.8) 1.HTML 2.CSS 3.layout 一.准备(2023.2.8) 专业英语: 在进行编写布局时,我们使用的类名通常用英文编 ...
- 尚硅谷李立超老师讲解web前端网课笔记
HTML的重要知识点: 初学web笔记一(语义化标签) h标签表示一个标题,p标签表示一个段落,hgroup用于标题分组,em标签用于语意加重,blockquote表示长引用(会自动换行),q表示短引 ...
- 尚硅谷李立超老师讲解web前端网课的笔记
初学 web 前端笔记一 刚刚看完网课,趁着脑子里还有点东西,小彭赶紧来做个笔记~接下来看吧: 一.软件的分类 1.系统软件:(我们买电脑或手机第一件事就是先激活或者安装一个"灵魂" ...
- [JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)
文章目录
- node.js Promise详解(尚硅谷李立超老师视频笔记)
• Promise就是一个用来存储数据对象,但是由于Promise存取的方式的特殊,所以可以直接将异步调用的结果存储到Promise中 Promise存储异步数据: function sum(a,b) ...
- 尚硅谷雷神SpringBoot2超详细笔记和源码以及自己Bug修改和个人的体会
## 01.基础入门-SpringBoot2课程介绍 Spring Boot 2核心技术 Spring Boot 2响应式编程 学习要求 -熟悉Spring基础 -熟悉Maven使用 环境要求 Jav ...
- 尚硅谷李老师Mysql基础笔记
数据库的相关概念 一:数据库的好处 1.可以持久化数据到本地 2.结构化查询 二:数据库的常见概念 1.DB:数据库,存储数据的容器 2.DBMS:数据库管理系统,又称为数据库软件或数据库产品,用于创 ...
- 尚硅谷python核心基础教程笔记-第一章 计算机基础知识
第一章 计算机基础知识(视频1-10) 课程介绍 课程名称:Python基础视频教程 讲师:尚硅谷教育,李立超(lichao.li@foxmail.com) 面向的层次:From Zero to He ...
最新文章
- (转)有关Android线程的学习
- 漫画:如何实现大整数相加
- git合并分支的策略(赞)
- JavaScript-jQuery事件
- matlab语言和python_matlab语言转译成python
- 华为多臂路由_[分享]华为 AR路由 策略路由 多WAN环境下指定出口 | 霸王硬上弓's Blog...
- c语言实现sbrk函数,菜鸟随笔(2)---brk()与sbrk()函数的学习与使用
- C根据输入的城市坐标求各城市间的距离
- android 点餐系统 构思
- 【MAPBOX基础功能】12、mapbox点击点位图层高亮指定的点位
- php后台万能登陆密码,各类网站后台万能密码整理
- 如何设置局域网共享打印机及问题解决
- 【费用流】洛谷1251 餐巾计划问题
- 4G新业务--RCS简介
- 如何深入掌握C语言指针(详解)
- 计算机的宽带用户名没有了怎么办,电脑没办法建立宽带连接怎么办
- 2月15日市场游资操作情况以及龙虎榜
- 大学计算机应用基础知识点王爱平,北京师范大学心理学院硕导介绍:王爱平
- 波士顿地区Airbnb价格预测Project (一)
- mxgate是gpcopy同步速度的2倍