title: HTML
date: 2022-01-13 18:38:30
tags: HTML
HTML简介
浏览器
浏览器和网页
- 浏览器就是将网页渲染呈现出来
- 我们希望的效果: 同一个网页在不同的浏览器显示的是一样的,在万维网初期,网页编写无标准,所以呈现样子不同 -> W3C制定网页开发标准。
网页的组成
- 结构
- HTML用于描述页面的结构
- 表现
- CSS用于控制页面中元素的样式
- 行为
- JavaScript用于相应用户操作
HTML
最简单HTML
超文本标记语言 Hypertext Markup Language
用标签形式来标识网页不同组成部分
超文本指的是超链接
建立一个.html文件
在里面直接敲hello word即可得到一个很简单的html页面
渲染结果
HTML标签
标题 内容
一对标签:<标签名>aaaa</标签名>
标题标签(一级):<h1>回乡偶书</h1>
标题标签(二级):<h2>贺知章</h2>
内容:<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
html head title body
head和body是html的子标签,title是head的子标签->title是html的后代,html是title的祖先 <html><head><title></title></head><body></body></html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
head表示的是头,表示的是网页中的元数据,不显示在网页上,是给浏览器和搜索引擎看的,可以让浏览器和搜索引擎解析网页。
body是网页主体,是网页呈现的内容。
title表示的是网页的标题
<html>
<head>
<title>demo回乡偶书</title>
</head>
<body>
<h1>回乡偶书</h1>
<h2>贺知章</h2>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
</body>
</html>
自结束标签和注释
标签一般成对出现,但是有的标签只有开始标签没有结束标签->自结束标签
<img>
<input>
<img />
<input />
注释:
<!--
HTML的注释
-->
标签属性
<html>
<head>
<title>标签属性</title>
</head>
<body>
<!--
属性,在标签中(开始标签或者自结束标签)可以设置属性,我们想要第三个加红,如下所示
属性是一个名值对(x=y)
color是属性名,red是属性值
属性用来设置标签中内容如何显示
属性和标签名或其他属性应该使用空格隔开,font规定的就是字体,尺寸和颜色
-->
<h1>这是<font color='red' size='3'>第三个</font>网页</h1>
</body>
</html>
网页基本结构
文档声明
<!doctype html> <!--文档声明,告诉浏览器网页时html5-->
<html>
<head>
<title>网页基本结构</title>
</head>
<body>
<!--
迭代
网页的版本(需要标注出来)
HTML4
XHTML2.0
HTML5
...
文档声明(doctype)
-文档声明用来告诉浏览器当前网页的版本
-html5的文档声明
<!doctype html>
-->
</body>
</html>
进制
-
十进制
- 满10进1 计数:0 1 2 3 4 5 6 7 8 9 单位数字是10个 0-9
-
二进制(计算机底层进制)
-
满2进1 计数:0 1 10 11 100 101 110 111 单位数字是2个 0 1
8bit = 1byte 1024byte = 1kb 1024kb = 1mb 1024mb = 1gb 1024gb =1tb 1024tb = 1pb计算机内最小操作单元 1byte
-
-
八进制
- 满8进1 单位数字是7个 0-7
-
十六进制(显示一个二进制数字时,会转换为16进制)11111111->ff
- 满16进1 计数:0 1 2 3 4 5 6 7 8 9 A B C D E F 单位数字是16个 0-F
字符编码
-
所有的数据在计算机中存储时都以二进制存储,文字也是,一般文字存储到内存会转换为二进制,读取这段文字,计算机会将二进制编码为字符以供阅读。
-
编码
- 将字符转换为二进制码的过程
-
解码
- 将二进制码转换为字符的过程
-
字符集 (charset)
- 编码和解码采用的规则
-
乱码问题
- 如果编码和解码采用的字符集不同,就会出现乱码问题
-
常见字符集
- ASCII 英语 用7位表示 128
- ISO@8591 欧洲 8位表示 256
- GB2312 中国
- GBK 中国 对GB的扩展
- UTF-8 万国码 包含了世界上所有的语言,在开发时采用的都是UTF-8
<!--文档声明-->
<!doctype html>
<!--html根标签/元素-->
<html>
<!--head是html的子标签,里面的内容是为了给浏览器信息,让其进行解析-->
<head>
<!--meta用来设置网页的元数据,这里meta用来设置网页的字符集-->
<meta charset="utf-8">
<!--网页的标题,会显示在浏览器标题栏上,搜索引擎会主要根据title来判断网页主要内容-->
<title>html基本结构</title>
</head>
<!--body是html的子标签,里面是主要内容,所有可见的内容都在body中-->
<body>
<h1>标题1</h1>
<h2>标题<font color ='red' size ='3'>2</font></h2><!--属性,颜色为红,字大小为3-->
<p>内容1</p>
<p>内容2</p>
<img>
<input>
</body>
</html>
HTML文档查看器
离线:ZEAL
在线:W3School.com.cn