软件选用vscode

什么是前端，所谓前端就是我们看到的网页，视图，呈现出来，是我们人眼在显示屏上看到的东西，就叫前端。

前端三剑客:
html : 是一个网页的基本组成.给用户看的东西都是写在这里面.相当于人类的身体/骨架
css: 负责美化网页内容/优化网页性能(字体,排版,颜色,透明度) 相当于人类的衣服/化妆品
JavaScript: 脚本语言.主要用来实现动态效果,前后端通信,交互

初识html – 超文本标记语言

前端的两个好处:
	1.简单好上手
	2.见效很快.很快就可以做出来成果

怎样才算是一个网页文件?它的后缀应该是什么
	一个文件.它的内容为html网页 文件后缀为.html 那就是一个网页文件
		多喝热水.html

超文本: 
	比普通的文本更厉害.可以插入图片/音乐/视频/超链接/排版
标记语言:
	可以把html当成是一块拼图.它的代码称为标签.我们要做的就是把一个个正确的标签放在合适的位置上(不需要考虑太多的逻辑)

标签: 写在html里的代码
	单标签:   一般是作为功能标签,有特别的含义
		<br>	--> 换行	
		<hr>    --> 分割线
	双标签: 一般是用来包裹/保存内容.显示东西用的.它是成双成对的,需要闭合(开关门)
		<标签名>内容</标签名>	
		<h1>多喝热水</h1>
		<h1>
			多喝热水
		</h1>

html基本框架

在vscode中,建立好一个html文件后输入!+回车.就可以生成网页模板

基本框架代码:
	<html></html>  --> 是网页的基本组成.基本上所有东西都写他里面
	<head></head>  --> 头标签.里面的内容主要是写给浏览器看的/出列的. 网页介绍.样式
	<body></body>  --> 身体标签.里面写的内容写给用户看的

html中注释的写法:
	注释的快捷键:  ctrl + /
	<!--  注释内容 -->
	<!-- 多喝热水 -->

html基本文字标签

前端html中内容应该由标签包裹着.不要裸奔 
在网页里面.显示出各种各样的文字
<h1>标题内容</h1>
	一级标题.网页里的老大.从规范的角度来说,一个网站只能有一个h1标签.
<h2>标题内容</h2>
	二级标题.分块标签.作用就是区分网页内容.可以有多个
<h3>标题内容</h3>
	三级标题.分块内容标题
h系列为h1-h6标签.常用的主要就是h1-h3	

<p>段落内容</p>
	段落标签.常用的文本标签.因为是段落,会自动换行
<span>行内内容</span>
	行内文本标签.不会自动换行.后续主要配合css使用

<br> -- 换行标签
<hr> -- 分割线标签

<b></b>  && <strong></strong>   粗体标签.
	b标签只是单纯加粗,起到视觉效果. strong标签带有语义性,起强调作用
<i></i>	 && <em></em>  斜体字标签
<u></u>  && <ins></ins>  下划线标签

养成一个好习惯.代码写完了,改完了随手ctrl + s保存	
不用滥用h标签.它们是作为标题使用,不是放普通文字,文章的

转义字符

在前端开发时,有的符号可能会产生歧义.不好是被.所以用转义字符来代替 : 比如想单纯显示一个< 或 > 
	< -- 小于号 -- <
	> -- 大于号 -- > 
	  -- 空格符 --  
	¥ -- 人民币 -- ¥

语义化与SEO:

seo --> 搜索引擎优化
	优化你的网页内容.提高权重,让网站排名在搜索引擎里面更考勤.
	提升标签的语义,设置meta属性

网站排名靠前的好处:
	越靠前.浏览量,点击量更多 --> 用户量/流量更多	

互联网上最值钱:
	1.数据
	2.流量 --> 用户量

搜索引擎本质全是就是爬虫.通过大型爬虫获取到要搜索的	数据. 里面的网站排名:
		1.给了多少钱
		2.网页内部的权重(规范 语义性 原创内容)

语义化: 判断一个网页权重,性能,规范性的标准:
	一个网站.全是h1	标签 --> 负面例子
	合理的运用标签

b标签 只是单纯的加粗 --> 肉眼可见,对于浏览器来说只是一段普通的文字
strong 在加粗之外.会起到强调的作用 --> 浏览器会优先获取strong标签里的数据.

琅琊榜 --> h1
<strong>胡歌</strong>     搜索引擎会把胡歌当成重点. 显示也是加粗的
<b>胡歌</b>  文字加粗了.但是对浏览器来说.就是普通的数据,不会强调