前端web基础一：初识html

最新推荐文章于 2024-09-15 16:55:26 发布

慢羊羊6379.*?

最新推荐文章于 2024-09-15 16:55:26 发布

阅读量180

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_49088841/article/details/108115514

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、客户端与服务器

1.1通常情况下现在的软件一般由两部分组成

客户端：用户通过客户端来使用软件(本地)
服务器：服务器负责在远程处理业务逻辑(远程)
服务器开发的语言
java（服务器主要使用语言）、php 、c# 、python、 node.js…

1.2客户端的形式

文字客户端：通过命令行来使用软件
图形化界面：通过拖动点击来使用软件(C/S架构)
网页：通过访问网页来使用软件(B/S架构)
网页的特点：相较于传统的图形化界面，网页不需要安装、不需要更新、跨平台
网页使用的语言：HTML、CSS、JavaScript

2、网页及浏览器

浏览器：访问网页的工具，负责把网页渲染出来呈现给用户，
网页：浏览器显示的内容就是我们所说的网页
前端工程师负责编写网页源码，浏览器负责将网页渲染我们想要的样子
市面上有很多不同的浏览器，在万维网初期，网页编写的初期没有标准，于是对于不同的浏览器就渲染出不同的内容，我们希望不同的网页在不同的浏览器中呈现夕一样的内容

2.1 W3C：万维网联盟

他的出现就是为了制定网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果，我们制定编写的网页都需要遵守W3C的规范
在这里插入图片描述
HTML：负责页面结构类似于人体骨骼
CSS：负责页面样式，美化界面，类似与人的皮囊
JavaScript：负责页面的行为，让人可以动起来有交互有行为

3、HTML入门

HTML(hypertext markup language)：超文本标记语言
负责三要素之中的结构
HTML5：HTML的第5个版本(w3c设想的最终版本)
纯文本：只能保存文本数据图片字体颜色大小等无法保存到文本
富文本：类似word，可以保存除文本外的格式
html使用标签的形式来识别网页中的不同组成部分
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
可以使用记事本编写代码，该文本后缀格式既可以成为一个简单的网页
HTML标准的格式

<html>
	<head>
		<title>哈哈，我在哪出现网页标题</title>
	</head>
	<body>
	这部分写想展示给浏览者的数据
		<h1>回乡偶书（其二）</h1>
		<h2>贺知章</h2>
		<p>少小离家老大回</p>
		<p>笑问客从和何处来</p>
	</body>
</html>

4、安装notepad++

百度notepad++下载，傻瓜式安装即可，这样就可以代替记事本进行代码的编写（文本编译器：初学者的使用）

<html>
	<head>
		<title>这是我的第二个标签</title>
	</head>
	<body>
		<h1>这是我的第二个标签</h1>
		<!--
		html的注释，注释的内容会被浏览器忽视，不会再网页中直接显示
		但是可以在源码中查看注释，用作解释说明，要求简单明了
		标签一般成对出现，但是也存在一些自结束标签
		-->
		<!--
		注释不能嵌套使用
		-->
		<img>
		<img />
		
		<input>
		<input/>
	</body>
</html>

<html>
	<head>
		<title>标签属性</title>
	</head>
	<!-- 
	在标签中还可以设置属性（开始标签或者字结束标签可以设置）不能在结束标签写
	属性是名值对结构（x=y）属性和标签之间需要空格隔开
	属性用来设置标签的内容如何显示，属性不能瞎写，应该根据文档的规定编写
	有的属性有属性值，有的没有属性值，属性值要使用引号引起来
	属性可以有多个用空格隔开
	-->
	<body>
		<h1>这是我的<font color='red' size='3'>第三个</font>网页!</h1>
	</body>
</html>

5、网页规范

<!doctype html>
<html>
	<head>
		<title>网页的基本结构</title>
	</head>
	<body>
		<!--
		迭代
			HTML4
			XHTML2.0
			HTML5
			...
			文档声明（告诉浏览器当前网页的版本）
			HTML5的文档声明
			<!doctype html>表示网页是html5的，写在html上面第一行，告诉浏览器，我网页的规范
			<!Doctype html>表示网页是html5的不区分大小写
		-->
		<h1></h1>
	</body>
</html>

6、进制

<!--
进制：
	十进制：（我们日常使用）
		-特点：满10进1
		-计数：0 1 2 3 4 5 6 7 8 9 10 11...
		-单位计数：10个（0-9）
	二进制：（计算机底层的进制）
		-特点：满2进1
		-计数：0 1 10 11 100 101 110 111 10000
		-单位计数：2个（0和1）
			-所有的数据在计算机底层都会以二进制的形式保存
			-可以将内存想象为多个小格子组成的容器，每个小格子可以存储一个1或者0
				这个小格子在内存中被称为1位（bit）
				8bit(位) = 1byte(字节)
				1024bite() = 1kb(千字节)
				1024kb() = 1mb(兆字节)
				1024mb() = 1gb(吉字节)
				1024gb() = 1tb(特字节)
				1024tb() = 1pb()
	八进制(很好用)
		-特点：满8进1
		-计数：0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 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 ... 1a 1b ..
		-单位计数：16个（0和9和a-f）
-->

7、字符编码

<!--可以通过meta变迁标签来设置网页的字符集，避免乱码问题-->
	<meta charset="utf-8">
北月->101011(编码)
		101011->北月(解码)
		-所有的数据在计算机中储存的时候都会以二进制形式存储，文字也不例外
			所以一段文字往内存当中存储的时候，都需要转化为二进制编码
			当我们读取这段文字的时候，计算机会将编码转化为字符供我们阅读
		--编码
			--将字符转化为二进制码的过程叫做编码
		--解码
			--将二进制码转化为字符的过程称为解码
		--字符集(charset)
			--编码和解码所采用的规称为字符集
		--乱码问题
			--如果编码和解码所采用的字符集不同就会出现乱码问题
		--常见的字符集
			-ASCII
			-ISO88591
			-GB2312
			-GBK
			万国码：unicode UTF-8

完整的前端html架构

<!-- 文档声明，声明当前网页的版本-->
<doctype html>
<!--html的根标签(元素)，网页中的所有内容都要写在根元素的里面-->
<html>
	<!--head是网页的头部，head中的内容不会在网页中直接出线，主要用来帮助浏览器或搜索引擎来解析网页-->
	<head>
		<!--meta标签用来设置网页的元数据，这里的meta用来设置网页的字符集，避免乱码问题-->
		<meta charset="utf8">
		<!--title中的内容会显示在浏览器的标题栏，搜索引擎会根据title中的内容来判断网页的主要内容-->
		<title>网页的标题</title>	
	</head>
	<!--body是HTML的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里面-->
	<body>
		<!--h1网页的一级标题-->
		<h1>网页的大标题</h1>
	</body>
</html>