W3c制定规则
结构,表现,行为
html骨架
css皮
js让人动起来的东西
html
超文本标记语言
文本:只能写入文本,纯文本编辑器
word:富文本
.html扩展名
<div></div>
<html>根标签,为title的祖先标签
<head>
头部标签,为html的字标签
<title>
标题标签,显示在标题,为html后代标签
</title>
</head>
<body>
主体部分
</body>
</html>
<html>
<head>
<title>
这里是标题
</title>
</head>
<body>
<h1>
这是我的第二个网页
</h1>
</body>
</html>
自结束标签
<img>
<img />
<input>
<input />
注释
要求简单明了,注释不能嵌套
<!-- 注释 -->
标签属性
<html>
<head>
<title>
标题
</title>
</head>
<body>
<!-- 属性:名值对
设置标签内的内容如何显示
用空格隔开
属性名不可以乱写,根据文档中规定来编写,
有些有属性值,有些没有
有属性值,用引号引起来
-->
<h1>
1234 <font color="red" size="18"> 567</font>89
</h1>
</body>
</html>
文档声明
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<!-- 网页版本的迭代
开头写<!doctype html>用来识别当前网页的版本
<!doctype html>
<!DOCTYPE HTML>
-->
<h1>
</h1>
</body>
</html>
进制
十进制(日常用)
特点:满10进1
计数:1,2,3,4,5,6,7,8,9,10......19,20
二进制(计算机底层进制)
特点,满2进1
计数:0,1,10,11,100,101,111,10000,10001....
扩展:所有数据在计算机底层以二进制去存储
内存可以比喻成一个或多个小格子组成的容器,每一格可以存储一个0或者1,这些小格子被称为bit
8bit=1byte(字节)
1024byte=1kb(千字节)
1024kb=1mb(兆字节)
1024mb=1gb(吉字节)
1024gb=1tb(特字节)
1024tb=1pb
八进制(很少用)
特点:满8进1
计数:0,1,2,3,4,5,6,7,10,11,12....17,20
单位数字:8个(0-7)
十六进制(一般显示一个二进制数字时,转换为一个十六进制)
特点:满16进1
计数:1,2,3,4,5,6,7,8,9,a,b,,c,d,e,f,10,11....1a,1b,1c,1d,1e,1f,20...
单位数字:16个(0-f)
字符编码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
<h1>
</h1>
</body>
</html>
编码和解码
编码:中文转换成二进制
解码:二进制转换成中文
字符集(charset):编码和解码所采用的规则称为字符集
乱码问题:如何编码和解码采用的字符集不同就会出现乱码问题
常见的字符集:
ASCIT
ISO88591
GB2312
UTF-8
离线文档查看器
zeal
!tab一键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
live server 提供一个服务器地址
p+tab
h1+tab
自动补全
实体(转义字符)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 多个空格浏览器解析为一个空格
实体语法(转义字符)
空格
>大于号
<小于号
©版权符号
-->
<p>今天 天气真不错</p>
<p>a<b>c</b></p>
<p>a>b<c</b></p>
©
</body>
</html>
meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
meta用于设置网页中的一些元数据,元数据不是给用户看的
charset指定网页字符集
name指定数据的名称
content指定数据的内容
keywords表示网站的关键字,可以同时指定多个关键字
description用于指定网站的描述
-->
<meta name="keyWord" content="前端">
<meta name="description" content="11111">
<!-- 重定向跳转 -->
<meta http-equiv="refresh" content="0; url=http://www.baidu.com">
<title>Document</title>
</head>
<body>
</body>
</html>
块元素和行内元素 语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
html主要负责结构,关注语义,而不是去关注样式
标题标签,都为块元素
h1-h6,主要用h1-h3,h1只能有一个,h4-h6很少去使用
页面中独占一行称之为块元素(block element)
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 p 块元素-->
<p>表示为一个段落</p>
<p>表示为一个段落</p>
<!-- hgroup 给标题分组,可以将一组相关标题同时放到hgroup中 -->
<hgroup>
<h1>回乡偶书2首</h1>
<h2>其一</h2>
</hgroup>
<!-- em表示语音语调的一个加重 行内元素
在页面中不会独占一行的元素称为行内元素
-->
<p>今天天气<em>真</em>不错</p>
<!-- strong 表示强调 重要内容 行内元素 -->
<p>你今天必须 <strong>
完成作业
</strong> </p>
<!-- blcokquote 表示一个长引用,块元素,独占一行 -->
鲁迅说过: <blockquote>啦啦啦啦</blockquote>
<!-- q表示一个短引用 行内元素 -->
子曰 <q>啦啦啦啦啦</q>
<!-- br表示换行 -->
11111<br>1111
</body>
</html>
语义化标签规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
块元素(block element):浏览器通过块元素来对页面进行布局
行内元素(inLine element):行内元素用来包裹文字
一般情况下在块元素里方行内元素,而不会在行内元素内放块元素
块元素基本上什么都能放
p标签不能放任何块元素
浏览器在解析网页时会对不符合规范的内容进行修正
比如 标签写在了根元素的外部
p标签内嵌套了块元素
根元素中出现了出head和body之外的子元素
-->
<p> <h1>1111</h1> </p>
</body>
</html>
<h1>任性的</h1>
布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
布局标签
header 表示网页头部
main 表示网页主体(一个页面中只会有一个main)
footer 表示网页底部
nav表示网页中的导航
aside 表示网页中的侧边栏 和主体相关的其他部分
article 表示独立的文章
section 表示独立的区块 上面的标签都不适用时用section
div 没有语义 表示一个区块 主要用的比较多
span 行内元素 没有任何语义 一般用于在网页中选中文字
-->
</body>
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
列表(list)
1,铅笔
2,尺子,
3,橡皮
html可以创建列表,列表有三种
1 有序列表 ol
2 无序列表 ul
3 定义列表 dl
-->
<!-- 有序列表 -->
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
<!-- 无需列表 -->
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<!-- 定义列表 :用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
-->
<dl>
<dt>解释</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
</dl>
<!-- 列表之间可以相互嵌套 -->
<li>
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</li>
</body>
</html>
超链接 a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
超链接 从一个网页跳转到其他网页
使用a来定义超链接
属性:href 指定跳转的目标路径
-值可以是一个外部网站的地址
-也可以是一个内部页面的地址
超链接是一个行内元素,在a标签里面可以嵌套除了他自身外的任何元素
-->
<a href="http://www.baidu.com">跳转</a>
<a href="列表.html">跳转</a>
</body>
</html>
相对路径
默认值./ 不写的话按默认值
相对于当前目录所在的路径
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
target属性 用来指定超链接打开的位置
默认是_self 当前页面中打开链接
_blank 在一个新页面中打开超链接
-->
<a href="http://www.baidu.com" target="_blank">111</a>
<a href="http://www.baidu.com" target="_self">111</a>
<!-- 快速回到顶部 -->
<a href="#">back</a>
<!-- 快速到达底部
id属性(唯一不重复)
id属性就是唯一标识,同一个页面中不能出现重复id属性
通过id 可以跳转到任意位置
-->
<a id="bottom" href=""></a>
<a href="bottom"></a>
<!-- 在开发中,可以把#作为超链接的占位符使用 -->
<a href="#"></a>
<br>
<!-- 点完了无事发生 -->
<a href="javascript:;">无事发生</a>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 图片标签向当前界面引入一个外部图片
使用img标签 img标签是一个自结束标签
img属于替换元素(介于块元素和行内元素中间,具有两者元素的特点)
属性: src属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,描述默认情况下不会显示,有些浏览器无法加载时显示
搜索引擎会根据alt中的图片来识别图片,如果不写alt属性 不会被搜索引擎搜索得到
width 图片宽度(单位是像素)
宽度和高度如果只修改一个,另一个会等比例缩放
注意 :一般在pc,不建议修改图片大小
-->
<img src="QQ图片202112212246.jpg" alt="cb">
<!-- 图片的格式
jpeg(jpg):支持颜色丰富,不支持透明效果,不支持动图,一般用来显示照片
gif:支持颜色较少,支持简单透明,支持动图,颜色单一的图片,动图
png:支持颜色丰富,支持复杂透明,不支持动图,颜色丰富,复杂透明图片(专为网页而生)
webp:谷歌推出的一种格式,继承了上面的所有有点,文件还特别小
致命性缺点:兼容性不好
base64:将图片赢base64进行编码,将图片转换为字符,通过字符形式来引入图片
一般都是一些需要和网页一起加载的图片
效果一样的,用小的
效果不一样,用效果好的
-->
</body>
</html>
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
内联框架,简单来说就是在当前页面中插入一个其他界面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="http://www.baidu.com" width="880" height="600" frameborder="0"></iframe>
</body>
</html>
音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
audio 标签向页面中引入一个外界的音频
音频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
如果设置了autoplay 则会自动播放,但是大部分浏览器都不会自动播放
loop 是否循环
-->
<!-- 兼容写法 -->
<audio controls>
对不起,您的浏览器不支持播放音频!请升级浏览器
<source src="./meta标签.html">
<source src=".xxxxxx" type="">
<embed src=".xxxxx" type="audio/MP3">
</audio>
<!-- 使用video标签向网页中引入一个视频
使用方式和audio基本一样 -->
<video controls>
<source src="xxxxx" type="">
<source src="xxxxx" type="">
<embed src="xxxxxx" type="video/mp4">
</video>
<!-- 引用其他网站视频到本页面,访问的是其他服务器 -->
<iframe src="" frameborder="0"></iframe>
</body>
</html>
扫一扫
9070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
