1.自结束标签和注释

通常标签都是成对出现,如<h1></h1>,<div></div>等等。但是又些标签是没有结束标签的,成为自结束标签,如<img>,<input>

<img>和<img />两种写法都正确。

注释是在代码中对代码进行解释说明的文字,注释中的内容会被浏览器忽略,在网页中看不到注释内容。(注释不能嵌套)

2.标签中的属性

可以在标签(开始标签或自结束标签)中设置属性,不能再结束标签内设置;

属性是键值对,形式为x=”Y”,一个标签可以有多个属性;

标签内属性要和标签名隔开,属性之间也要用空格隔开;

属性用来设置标签中的内容如何显示(大小,位置,色彩等都是属性);

属性是官方规定标准的,不能随意编造,其值也不能乱写;

有些属性有值,二有的属性无值,只有属性键名。

3.文档声明

迭代——网页的版本:

HTML4-------->XHTML2.0-------->HTML5

文档声明(doctype):用来告诉浏览器当前网页的版本,放在代码第一行,大小写无影响

<!doctype html>默认为HTML5版本

<!Doctype html>   ,   <!doctype HTML >都对

通常的编辑器可以使用 !---->tab 快捷键快速生成网页结构代码

4.进制

10进制(日常使用),

2进制(计算机底层机制):所有数据在计算机底层都会以二进制形式保存,可以将内存想象为由很多个小格子组成的容器,每一个小格子可以存储一个1或者0,这一个小格子在内存中被称为1位(bit)

8bit = 1byte(字节)

1024byte = 1kb(千字节)

1204kb = 1mb(兆字节)

1204mb = 1gb(吉字节)

1204gb = 1tb(特字节)

1204tb = 1pb

8进制(很少用),

16进制(一般在显示2进制数字时会转换成16进制)

5.字符编码

<meta/>自结束标签

所有数据在计算机底层都是以二进制形式保存,文字也不例外。所以一段文字在存储到内存中时都需要转化成二进制编码,当我们读取这段文字时,计算机会将编码转化为字符供我们阅读

编码:将字符转化为二进制编码

解码:将二进制编码转化为字符

字符集(charset):编码与解码遵循的规则

乱码问题:编码与解码采用的字符集不同时会产生乱码

常见字符集:ASCII(美国)   ISO88591(欧洲)   GB2312(中国)   GBK(中国扩展)    UTF-8(万国码,在开发时使用的标准)

<meta charset=”utf-8” />设置网页字符集,避免乱码,只需要解析,不用显示,所以放在<head>标签内。Charset属性值在设定时必须与编辑器的编码格式一致

6.文档的使用

使用zeal进行离线文档查看

7.实体

在网页中,编写的多个空格会被浏览器解析成一个空格;

在HTML中有些时候不能直接书写一些特殊符号,会被浏览器错误解析,比如连续多个空格,字母两侧小于号大于号……

如果我们需要在网页中书写这些特殊符号,需要使用HTML中的实体(转义字符);

转义字符用法:

&实体的名字;

例如:&nbsp;表示一个空格

&gt;表示大于号

&lt;表示小于号

&copy;表示版权符号

8.meta标签

作用就是设置网页的元信息,元信息是给浏览器看的。

常用属性有:

Charset :指定网页的字符集

Name : 指定数据的名称

Keywords:表示网站的关键字,可以同时使用多个关键字,关键字之间使用逗号隔开

Description:用于指定网站的描述,网站的描述会显示在搜索引擎的搜索结果中

title标签的内容会作为搜索结果的超链接上的文字显示

Content : 指定数据的内容

http-equiv : 服务器在向浏览器发送文档之前会发送一些键值对信息提示卢兰其将要接受的文档信息,在使用带有http-equiv属性的meta标签时,服务器会把该键值对添加到要发送给浏览器的提示信息头部。

特殊情况:

<meta http-equiv="refresh" content="5;url=https:www.baidu.com"/>

<!-- http-equiv的值为refresh表示网页重定向,content里的5表示5秒后重定向,url为重定向的目标地址 -->

9.语义化标签

在网页中,HTML专门负责网页的结构,使用HTML时应该关注标签的语义,而不是样式。

h1 ~ h6:一共6级标题,重要性逐级递减,一般情况下一个页面中只会有一个h1,一般情况下只会使用h1 ~ h3

hgroup标签:给h标签分组,可以将相关的h标题放到一组

P标签:表示一个段落

Blockquote标签:表示长引用

块元素:在页面中会独占一行的元素,h1 ~ h6都是块元素,p元素也是块元素

Em标签:表示语音语调语气的加重

Strong标签:表示强调重要的内容

Q标签:表示短引用

行内元素(内联元素):在页面中不会独占一行的元素,如em元素和strong元素

Br标签:表示换行

10.块元素(block)和行内元素/内联元素(inline)

Block:网页中通常使用块元素进行布局

Inline:主要用来包裹文字

块元素中什么都能放,行内元素中不能放块元素

P元素中不能放块元素

浏览器在解析网页时会自动对不符合规矩的内容进行修正:

比如:标签写在根标签外面

p元素中嵌套了块元素

根元素中出现了head和body以外的子元素

……

11.布局标签(结构化语义标签)

Header标签:网页的头部

Main标签:网页的主体部分,一个页面中只会有一个main

Footer标签:网页的底部

Nav标签:网页中的导航

Aside标签:和主体相关的其他内容

Article标签:一个独立的文章

Section标签:表示一个独立的区块

Div:块元素,没有语义,用来表示一个区块,目前是主要的布局元素

Span:行内元素,没有语义,一般用于在网页中选中文字

12.列表

HTML中列表一共有三种:

(1)有序列表

ol标签:创建有序列表

(2)无序列表(常用)

ul标签:创建无序列表

li标签:表示列表项

(3)定义列表

dl标签:创建定义列表

dt标签:定义的目标

dd标签:对目标解释的内容

列表之间可以互相嵌套

13.超链接

超链接可以帮我们从一个页面跳转到另一个页面

a标签(行内元素):定义超链接

href属性:指定跳转的目标路径,属性值可以是外部网站的地址,也可以是内部页面的地址(目标文件的相对路径)

a标签中可以嵌套除了自身外的任何元素

14.

H5+CSS复习笔记(全)的更多相关文章

  1. css复习笔记

    margin: 1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下. 2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准.另外,当一个元素包裹另一元素时也会发生折叠. ...

  2. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  3. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  4. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  5. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  6. Html和Css学习笔记-html基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  7. Html和Css学习笔记-html进阶-html5属性

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  8. Html和Css学习笔记-html进阶-div与span

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  9. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

随机推荐

  1. Jmeter连接数据库进行参数化

    实际使用Jmeter进行性能测试或接口测试自动化过程中,很多场景需要从数据库中获取一些关键性参数,或进行一些断言,比较,那么如何进行数据库连接以及怎么获取参数就变得尤为重要 一.下载mysql驱动 1 ...

  2. jQuery实现购物车商品数量及总价的计算

    记录一下项目中遇到的计算购物车商品数量和总价的jQuery代码,重点在于选择器以及.text()命令的使用. 先上效果图,点击加减,商品数量以及总价会发生相应变化. html代码: <div c ...

  3. JAVA多线程实现的三种方法

    JAVA多线程实现方式主要有三种:继承Thread类.实现Runnable接口.使用ExecutorService.Callable.Future实现有返回结果的多线程.其中前两种方式线程执行完后都没 ...

  4. JavaScript 定时器 取消定时器

    感谢:链接(视频讲解很清晰) 定时器:作用主要是一定时间间隔后,做出相关的变化,例如图片轮播. 目录 两种定时器的使用 两种定时器区别 取消定时器的方法 两种定时器的使用: 方法一:setTimeou ...

  5. Censoring【KMP算法+堆栈模拟】

    Censoring 传送门:链接   来源:UPC8203 题目描述 Farmer John has purchased a subscription to Good Hooveskeeping ma ...

  6. Fibonacci(模板)【矩阵快速幂】

    Fibonacci 题目链接(点击) Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20989   Accepted: 14 ...

  7. mysql忘记root密码后,重新设置、修改root密码

    大致步骤如下(这个步骤针对5.7版本,8.0之后版本修改方式有所改变,版本为8.0之后的可自行搜索相关修改方法) 1. 关闭正在运行的mysql服务,确保mysql服务要先关闭2. 打开dos窗口,转 ...

  8. 浅谈async 及 await

    async 及 await 涉及面试题:async 及 await 的特点,它们的优点和缺点分别是什么?await 原理是什么? 一个函数如果加上 async ,那么该函数就会返回一个 Promise ...

  9. 基于flask框架的高校舆情分析系统

    系统分析: 高校舆情分析拟实现如下功能,采集微博.贴吧.学校官网的舆情信息,对这些舆情进行数据分析.情感分析,提取关键词,生成词云分析,情感分析图,实时监测舆情动态. 系统设计: 前端:采用layui ...

  10. TopK问题,数组中第K大(小)个元素问题总结

    问题描述: 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 面试中常考的问题之一,同时这道题由于解法众多,也是考察时间复杂 ...