【web前端笔记】尚硅谷web前端零基础入门HTML5+CSS3基础教程(李立超 超哥)笔记(附原视频链接)

本笔记从原视频的第11开始,11集之前的视频只是一些基础知识和简介,大家有想看的可以点击下方链接听一听。

尚硅谷前端链接

网页的基本结构

这也是我们新建一个HTML文件后默认的结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

那么,这些语句分别代表什么意思呢

<!-- 文档声明,声明当前网页的版本(HTML5) -->
<!DOCTYPE html>

<!-- html的根标签(根元素),网页中的所有内容都要写在根元素的里边 -->
<html>
	<!-- head 是网页的头部 head中的内容不会在网页中直接出现,只是用来帮助浏览器和搜索引擎来解析网页 -->
	<head>
		<!-- meta标签用来设置网页的元数据,这里meta标签用来设置网页中的字符集,避免乱码问题 -->
		<meta charset="utf-8">
		<!-- title中的内容会显示在浏览器的标题栏,搜索引擎主要根据title中的内容来判断网页的主要内容 -->
		<title></title>
	</head>
	<!-- body是HTML的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里 -->
	<body>
	</body>
</html>

DOCTYPE声明必须是 HTML 文档的第一行,位于html标签之前。

需要注意的是,DOCTYPE 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在HTML5出现之前还有许多其他的版本,HTML标准经过很长时间的更新迭代和完善
包括但不限于:

新的解析规则增强了灵活性
淘汰过时的或冗余的属性
一个HTML5文档到另一个文档间的拖放功能
离线编辑
信息传递的增强
详细的解析规则
多用途互联网邮件扩展(MIME)和协议处理程序注册
在SQL数据库中存储数据的通用标准(Web SQL)引用

(上边都是我复制来的,没什么用)
每一代和每一代的功能和语法都一定会有一些不同(相同的话就没必要更新了对吧?)
这个DOCTYPE的作用就是告诉浏览器我用的是哪一个版本的标准,浏览器就会用相应的标准进行解析

html标签
html叫根标签(或根元素),网页中的所有内容都要写在根元素的里边

head标签
head 是网页的头部, head中的内容不会在网页中直接出现,只是用来帮助浏览器和搜索引擎来解析网页

meta标签
meta标签用来设置网页的元数据,这里meta标签用来设置网页中的字符集,避免乱码问题
常见的字符集由ASCII、ISO88591、GB2312、GBK、UTF-8等
在开发时我们使用的字符集都是UTF-8

title标签
title中的内容会显示在浏览器的标题栏,搜索引擎主要根据title中的内容来判断网页的主要内容
以京东为例:
在这里京东插入图片描述
这是京东在搜索引擎的搜索结果

我们来看一看京东的网页源代码(在网站右击 点击查看网页源代码即可):
在这里插入图片描述
body标签
body是HTML的子元素,表示网页的主体,网页中所有的可见内容都应该写在body里

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值