HTML超文本标记语言
是一种用于创建网页的标准标记语言
-
实体
- 在网页中编写的多个空格默认情况会自动被浏览器解析成一个空格
- 在HTML中有些时候，我们不能直接书写一些特殊符号
- 例如多个连续的空格，比如字母两侧的大于和小于号
- 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
- 语法：&实体的名字
-  ；空格
- >；大于号
- <；小于号
- ©；版权符号
-
meta标签
-
主要用于设置网页中的一些元数据，不是给用户看的 元数据指的是描述数据的数据，对数据以及信息资源的描述性信息
-
charset 指定网页的字符集
-
name 指定的数据的名字
-
content 指定的数据的内容
- keywords 表示网站的关键字，可以同时指定多个关键字，之间使用，隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,"/> <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越">-
description 用于指定网站的描述
网站的描述会显示在搜索引擎的搜索的结果中
-
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>-
title 标签的内容会作为搜索结果的超链接上的文字显示
-
页面重新定向到另外一个网站
-
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
-
-
-
语义化标签
- 在网页中HTML专门用来负责网页的结构
- 所以在使用html标签时，应该关注标签的语义，而不是他的样式
- 标题标签
- 在h1~h6一共有六级标题
- 重要性递减
- 在网页中h1的重要性仅次于title标签，一般情况下一个页面只会有一个h1
- 一般情况下标题标签指挥使用到1
3,46很少用 - 标题标签都是块元素
- 页面中独占一行的元素称为块元素
- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
- p 标签标示页面中的一个段落 也是一各块元素
- em标签用于标示语音语调的一个加重
- 在页面中不会独占一行的元素成为行内元素
- strong 表示强调；重要内容
- blockquote 表示一个长引用
- q表示一个短引用
- br表示换行
- 在网页中HTML专门用来负责网页的结构
-
块元素
- 在网页中一般通过块元素来对页面进行布局
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内，而不会在行内里面放块元素
- 块元素中基本什么都能放
- p元素中不能放任何的块元素
-
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
- 比如：
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- 根元素中出现了head和body以外的子元素
- 比如：
-
布局标签
- header 表示网页的头部
- main 表示网页的主体部分 一个页面中只会有一个main
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 和主体相关的其他内容（侧边栏）
- article 表示一个独立的文章
- section 表示一个独立的区块 上面的所有标签都不能表示时使用section
- div 没有语义，就用来表示一个区块，目前来说div还是我们主要布局元素
- span 行内元素 没有任何的语义，一般用来在网页中选中文字
-
列表
- list 在html中也可以创建列表，html列表分三种
- 有序 ol > li
- 无序 ul > li
- 定义 dl >dt & dd 定义内容和对内容的解释说明
- 列表之间可以相互嵌套
- list 在html中也可以创建列表，html列表分三种
-
超链接
-
可以让我们从一个页面跳转到其他页面 或者是当前页面的其他位置
-
使用a标签来定义超链接
- 属性
- href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以是一个内部页面的地址
- 属性
-
超链接也是一个行内元素，在a标签中可以嵌套除他以外的任何元素
-
超链接中 target属性，指定超链接打开的位置
- _self默认值 在页面中打开
- _blank 在一个新页面中打开超链接
-
在开发中可以将#作为超链接的路径展位符使用
-
可以使用javascript:;作为href的属性，此时点击这个超链接什么都不会发生
-
可以直接将超链接的href属性设置为# 这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值
id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性 - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
-
-
img标签
-
自结束标签 属于替换元素 （块和行内元素之间，有两个元素的特点）
-
图片标签用于向当前页面引入一个外部图片
-
属性
- src属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt属性是图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
- 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
- width 图片的宽度 --单位是像素
- height 图片的高度
- 高度和宽度如果只修改了一个，则另一个会等比例缩放
-
一般情况下载pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常要对图片进行缩放
-
图片的格式
- jpeg（jpg）
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
- gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
- png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
- webp
- 这种格式是谷歌新推出的专门用来表示网页中图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
- base64
- 将图片使用base64编码，可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是需要和网页一起加载的图片才会使用base64
- 效果一样，用小的
- 效果不一样，用效果好的
- jpeg（jpg）
-
-
内联框架
- 用于向当前页面中引入一个其他页面 标签是 iframe
- src 指定要引入的网页的路径
- frameborder 指定内联框架的边框
- 用于向当前页面中引入一个其他页面 标签是 iframe
-
audio 标签
-
audio标签用来向页面中引入一个外部的音频文件的
- 音视频文件引入时，默认情况下不允许用户自己控制播放停止
-
属性
-
control 是否允许用户控制播放
-
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时 会自动播放 但是目前来讲 大部分浏览器都不会自动对音乐进行播放
-
loop 音乐是否循环播放
-
<audio src="./source/audio.mp3" controls autoplay loop></audio>
-
-
除了通过src来指定外部文件的路径以外，还可以通过source来制定文件的路径
-
<audio controls> <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ --> <source src="./source/audio.mp3"> <source src="./source/audio.ogg"> <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"> </audio>
-
-
使用video也可以向页面中引入一个视频
-
使用方式和audio基本一样
-
<video controls> <source src="./source/flower.webm"> <source src="./source/flower.mp4"> <embed src="./source/flower.mp4" type="video/mp4"> </video> <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
-
-
使用iframe可以引入一个外部视频 直接复制地址就可以
-
-
注释
-
HTML中的注释内容会被浏览器所忽略，不会在网页中直接显示
但是可以在源码中直接查看注释，注释用来对代码进行解释说明的
开发中一定要养成良好的编写注释的习惯，注释要求简单明了
-
还可以将一些不希望显示的内容隐藏
-
不能嵌套
-
-
属性
- 在标签中（开始标签或者自结束标签）还可以设置属性
- 是一个名值对
- 属性用来设置标签中的内容如何显示
- 属性和标签名或者其他属性应该使用空格隔开
- 属性不能瞎写，应该根据文档中的规定来编写
- 有些属性有属性值，有些没有，如果有属性值，应该用引号引起来
-
meta标签
- 可以通过meta标签来设置网页的字符集，避免乱码问题
-
doctype
- 文档声明用来告诉浏览器当前网页的版本
- HTML5的文档声明
-
进制
-
十进制（日常使用）
- 特点：满十进一
- 计数：0 1 2 3 4 5 6 ... 19 20
- 单位数字：10个
-
二进制（计算机底层的进制）
- 特点：满二进一
- 计数：0 1 10 11 100 101 110 111
- 单位数字：2个 （0-1）
- 扩展
- 所有数据在计算机底层都会以二进制形式保存
- 可以将内从想象成为一个有多个格子组成的容器，每一个小格子中可以储存一个1或者一个0
- 每一个小格子在内存中被称为1位（bit）
- 8bit = 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb(特字节)
1024tp = 1pb
-
八进制（很少用）
- 特点：满8进1
- 计数：0 1 2 3 4 5 6 ... 17 20
- 单位数字：8个（0-7）
-
十六进制（一般显示一个二进制数字时，都会转换为十六进制）
-
特点满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个
-
-
字符编码
-
李立超 -> 110000110110 （编码）
110000110110 -> 李立超 （解码）
-
所有的数据在计算机中储存时都是以二进制形式储存的，文字也不例外
所以一段文字在储存到内存中，都需要转换成二进制编码
当我们读取这段文字时，计算机会将编码转换成字符，供我们阅读
-
编码
- 将文字转换为二进制码的过程称为编码
-
解码
- 将二进制码转换为字符的过程称为解码
-
字符集（charset）
- 编码和解码所采用的规则称为字符集
-
乱码问题
- 如果编码和解码所采用的字符集不同就会出现乱码问题
-
常见的字符集
-
ASCII
-
ASO88591
-
GB2312
-
GBK
-
UTF-8，在开发时我们使用的字符集都是UTF-8
-
-
-
-
html根标签
- 网页中所有的内容都要写在根元素里面
-
head
- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页
- meta标签用来设置网页的元数据，这里用meta用来设置网页的字符集，避免乱码问题
- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title的内容来判断网页的主要内容
- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里
-
相对路径
- 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
- 相对路径都会使用.开头 或者..开头
- ./可以省略不写，如果不写./或者../则就相当于写了./
- ./表示当前文件所在的目录
- 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
