HTML学习笔记01

最新推荐文章于 2024-06-02 15:15:42 发布

霄雨Blog

最新推荐文章于 2024-06-02 15:15:42 发布

阅读量143

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_41225951/article/details/122481410

版权

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

霄雨Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记01

title: HTMLdate: 2022-01-13 18:38:30tags: HTMLHTML简介浏览器浏览器和网页浏览器就是将网页渲染呈现出来我们希望的效果：同一个网页在不同的浏览器显示的是一样的，在万维网初期，网页编写无标准，所以呈现样子不同 -> W3C制定网页开发标准。网页的组成结构HTML用于描述页面的结构表现CSS用于控制页面中元素的样式行为JavaScript用于相应用户操作HTML最简单HTML超文本标记语言 Hy.
复制链接

扫一扫