前端学习笔记(一)
网页基本框架
- 标签：写在html的代码
- 单标签：一般是功能标签 有特别的功能
- 双标签：一般包裹内容 显示东西
双标签一般闭合而且后面的标签的<>里的第一个字符必须使用/，例如，
<html></html>
基本框架
<html></html> 网页的核心，基本所有内容都被它包裹
<head></head> 头部标签的内容，主要写的是给浏览器看的网络介绍，样式
<body></body> 身体标签，主要给用户看的
lang属性
主要决定浏览器是否自动弹出翻译框
en 会弹出，一般表示英文网页
zh-cn 不会弹出，一般表示中文网页
html的基本标签
- 标题标签
重要程度依次递减
h1-h6标签用于表示网页内容的标题 标签中文字默认会出现不同程度的加粗和增大
<h1></h1>
<!-- 搜索引擎非常看重h1标签内容 重要的内容放在h1里 一般只能放一个h1 否则会适得其反
一个团队只能一个核心负责人就可以 要不人人都是负责人就乱套了
-->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
- 段落标签
<p>今天天气好</p>
双标签 段落标签 英文paragraph 段落之间是有间隙因为段落自带换行
- 转义字符
在书写某些特殊字符的时候可能会出现一些问题 当我们标签和一些特殊字符起了冲突 就需要用对应的代替写法
< 小于号
> 大于号
空格(不会被折叠)
© 版权符号 ©
¥ 人民币符号 ￥
- 文本格式化标签
通过文本标签可以格式化文本(为文本添加样式 比如文本加粗 倾斜添加下划线等等)
b和strong 加粗
u和ins 下划线
i和em 倾斜
一般情况下b和strong标签都是可以让文本进行加粗 但是strong标签的语义是内容具有强调的作用
b标签表现效果加粗
strong标签除了文本加粗 并且还有强调文字的作用让浏览器觉得这里的文字内容比较重要
- 其他标签
单标签
<br> 换行
<hr> 分割线
- span标签
也是文本标签 不会自动换行
视觉上不会产生变化 但是我们可以配合css添加特殊样式
语义化和SEO
SEO:搜索引擎优化
优化你的网页内容 提高你的权重让你的网站在搜索引擎中排名更靠前
网站排名靠前好处:
曝光率 浏览量 点击率 用户量更多
语义化: 判断一个网页权重 性能 规范性标准
合理的运用的标签
语义化的好处:
1.对于开发者来讲 有语义的标签更加的清晰方便编写代码
2.对于浏览器的爬虫 有利于seo更方便解析
3.对于团队来讲 方便团队的开发和维护
W3C组织:
(万维网联盟)是万维网主要国际标志组织 负责制定web标准 主要是HTML/CSS
这一段的学习挺有趣的，特别是能在网页上打开这段代码写的是啥，而且这个语言没有什么编译上的错误，特别容易学习
![[2024-06]-[大模型]-[Ollama]- WebUI](https://img-blog.csdnimg.cn/direct/15d9c2968c26446aa797d52ae1e4a66d.png)
