[前端教程]01-第一章 HTML常用标签--轻松跟我学前端
时间：2023-07-25 00:36:01 | 来源：网站运营
时间：2023-07-25 00:36:01 来源：网站运营
[前端教程]01-第一章 HTML常用标签--轻松跟我学前端：
哈喽，各位朋友们大家好。今天小编给大家带来的是我在学前端时自己做的笔记。这个是笔记的第一章，在学前端的朋友们可以拿去看看。接下来每天都会更新这样的笔记。
在这里给新来的小伙伴们说一下，我们这个系列两到三天会有一次更新哦，更新会优先发在群里
如果你想要第一时间知道获取新的内容，以及文章的目录，可以加一下我们的交流群：417662152
这里面有我写过的一些不公开的技术文章，不定期更新干货，包括一份最适合2018年前端学习的教程资料
欢迎初学和进阶中的前端学者们加入，希望可以帮到你们。
----------------------正文开始-------------------------
一、 HTML是什么? HTML5又是什么?
HTML是什么？HTML是目前最流行的网页制作语言。HTML（Hypertext Markup Language）即 超文本标记语言，是用于描述网页文档的一种标记语言。网页的本质就是超级文本标记 语言，通过结合使用其他的Web技术可以创造出功能强大的网页。
HTML5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示 Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频， 音频，图像，动画，canvas/SVG 地图技术，以及同电脑的交互都被标准化。
二、 了解html css javascript
(1)、HTML : “超”文本 标记“语言” ，结构（HyperText Markup Language）——网页基础，结构
超文本:超级文本
标记:<>
语言:沟通交流（打交道）的工具
双标签：<html></html> <body></body>
单标签：<meta /> <img />
(2)、CSS:层叠样式表（Cascading Style Sheets）——修饰、美化网页 (化妆师)
1.#box{
2. width : 200px;
3. height : 200px;
4. border:8px solid red;
5.
6.}
(3)、js：脚本语言 (Javascript)（行为）——增加动态交互功能 (魔术师)
1.<div onclick=" this.style.width = '100px'; this.style.height = '500px'; "></div>
以上css、js不是让大家马上学习，而是让大家了解，知道什么是css、js
三 常用标签
div ——————块
img ——————图片（单标签）
a ———————链接、下载、锚点
h1-h6—————-标题
p ———————段落
span —————-区分样式
ul——————–无序列表
ol——————–有序列表
li————————-列表项dl ——————-定义列表
dt ————————-定义列表标题
dd ————————定义列表项i ———————定义斜体文字
strong————–强调（粗体）
em ——————强调（斜体）trong 标签和 em标签一样，用于强调文本，但它强调的程度更强一些。
br ———-换行
hr——————定义水平线
四、img图片标签详解
<img src="文件路径" alt="图片名"/>
img属性
src -定义图片路径
width -图片宽度,如果只给了width 没给height,height会自等比例缩放
height-图片高度,如果只给了height 没给width,width会自等比例缩放
alt -图片名字 给百度搜索引擎抓取使用(SEO)
title -标题给用户提示信息（有利于用户体验）
五、a标签
a标签功能： 链接 | 下载 | 锚点
链接: href='url' 中url是一个网页地址
相对 URL - 指向站点内的某个文件（href=”./index.html”）
绝对 URL - 指向另一个站点（比如 href=”百度一下，你就知道”）
下载：href=’url’中url链接地址一个软件就会下载
锚点：href=’#ID名’ 锚点
target 链接打开方式
_blank 新窗口（空白页面）
_self 当前窗口
<base target="_blank" /> 定义默认网页打开方式
六、路径
相对路径 —相对于当前 文档位置出发（推荐使用）
绝对路径—路径名称不能出现中文
本地绝对路径：从盘符出发
D:/a/b/c/d/6.jpg
网络绝对路径：从域名出发
https://www.baidu.com/img/bd_logo1.png注意=>需要跳到上一级要../ 如果要跳两级../../
七、代码seo方法：
SEO : 搜索引擎优化
一、页面标签语义化；
二、使用对SEO有利的标签： h1/h2/h3/strong/em……
三、提高页面关键词密度；
今天分享的笔记就到这里了哦，如果感觉喜欢的话，记得关注我
在线咨询
