软件选用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> 文字加粗了.但是对浏览器来说.就是普通的数据,不会强调
1089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
