初识前端与基本标签
python语法 -- 输入输出 变量 数据类型 函数 流程控制 模块 装饰器
高级编程 -- 面向对象 并发编程 网络编程 mysql
web前端 -- 全新的内容,不是python,学习目标 -- 开发网页网站
作案工具
vscode -- 开发工具 (非常好用的编辑器)
拓展快捷键(ctrl + shift + x)
1.中文插件 -- 拓展 -- chinese -- 安装设置
2.打开网页 -- 拓展 -- open in browser -- 安装后就可以用快捷键alt + b快速打开网页
自动保存 -- 文件 -- 自动保寸
前后端与全栈
前端: 给用户看的内容 -- 显示器 -- 淘宝页面
后端: 在后台处理数据 -- 主机箱 -- 具体功能(登录,购买,收藏)
全栈: 前后端都会,都能搞 -- 具备独立开发的能力
看得到的网页内容称为web前端 -- 本阶段学习内容
看不到的后台功能属于后端 -- 数据处理 / 功能实现 -- 后续用python来做(后端框架)
本阶段的学习模板 -- 独立实现一个网站
前端三剑客: 前端基础由3个东西组成
html : 是一个网页基本组成,给用户看的内容都写这里(图片,文字,视频) -- 身体
css : 负责美化网页内容 / 优化网页性能(排版,颜色,字号) -- 化妆品
JavaScript : 脚本语言,主要用来实现动态效果,前后端交互 -- 技能
前端的两个好处:
1.简单好上手,甚至可以说比python还简单一些
2.见效很快
初识html – 超文本标记语言
怎样的文件才算是一个网页文件??? 网页文件的后缀是什么?
一个文件,内容为html代码 后缀名为 .html 就是一个网页文件
多喝热水.html
html叫超文本标记语言,不是编程语言
编程语言 -- 具有逻辑性,用来使用的
标记语言 -- 不具备逻辑,是用来看的
超文本标记语言:
超文本:
比普通文本更厉害,可以插入图片/音乐/视频/超链接
对内容进行排版,样式设计
标记语言:
把html当成一块拼图,它的代码就是一块块拼图碎片称为标签
我们要做的就是把标签放在合适的位置上让他显示 (不需要考虑过多逻辑)
为什么html比python更简单. 它是用来看的,不是使用的. 不涉及太多的复杂逻辑
标签: 写在html里的代码 用<>包裹
单标签: 功能标签,有特别作用
<br> -- 换行
<hr> -- 分割线
双标签: 内容标签,用来显示内容.它是成双成对出现的,需要闭合.结束标签有个/
<标签名>内容</标签名>
<h1>多喝热水</h1>
<h1>
多喝热水
</h1>
html基本框架
写代码时,推荐用一个专门的文件来写.便于管理
创建html文件 输入 ! + 回车 / html:5 就可以生成网页模板
html中注释写法
快捷键: ctrl + /
<!-- 注释内容 -->
基本框架代码:
<html></html> : 是网页的基本组成,基本所有东西都写它里面
<head></head> : 头标签.里面的内容主要是写给浏览器解析. 网页说明信息,样式
<body></body> : 身体标签.里面的内容是写给用户看的
html基本文字标签
html中内容应该由标签包裹,不要裸奔
h标题标签
<h1>标题内容</h1>
一级标题,网页里的老大. 从规范角度来说,一个网页只能有1个h1标签
<h2>标题内容</h2>
二级标题,作用为切分网页内容.作为目录. 可以有多个
<h3>标题内容</h3>
三级标题.分开内容标题
h标题标签有h1 - h6. 常用的是h1-h3
<p>文本内容</p>
段落标签.比较常用的文本标签,会自动换行
<span>文本内容</span>
文本标签.它不会自动换行,也没有特别的样式属性,很单纯.适合配合css使用
<br> 换行
<hr> 分割线
特殊文字标签:
<b></b> && <strong></strong> 粗体标题
<i></i> && <em></em> 斜体标题
<u></u> && <ins></ins> 下划线标题
前者只是单纯视觉效果,后者能给内容起到强调的作用
前者是写给人看的 后者是强调给浏览器看的
前者是单纯加粗,对于浏览器来说,里面的数据还是普通数据
后者加粗的同时会强调里面的数据. 浏览器就会优先识别/处理
狂飙. 剧集介绍
狂飙 -- h1
第X集 -- h2
<b>高启强</b> -- 文字加粗了,但是浏览器不会对它特别对待
<strong>张颂文</strong> -- 文字加粗了,浏览器也会优先处理这个数据
转义字符:
在前端开发时.有的符号可能会产生歧义. 所以就用转义字符来代替. 比如空格 > <
< -- 小于号 -- <
> -- 大于号 -- >
-- 空格符 --
SEO:
seo -- 搜索引擎优化
优化网页内容,提高权重.让网页可以在搜索引擎里排名更靠前(提高规范性,meta属性)
网站排名靠前的好处:
点击量更多 -- 用户量更大
互联网上什么值钱:
1.数据
2.流量 (用户量)
搜索引擎本质上其实就是爬虫. 通过大型爬虫获取网页数据
里面的排名:
1.SEM (竞价排名 给了多少钱)
2.SEO (网站的权重 规范 原创内容 点击)
语义性 -- 代码是否有特别含义 / 强调作用
b × (单纯加粗)
strong √ (加粗+强调)
vscode使用
1.内容自动换行 alt +z
2.选中多行 alt + 点击
3.选中多行 alt + shift + 拖选
1.查看网页代码信息
1.网页里右键 -- 查看源代码
2.按下f12
2.互联网上造假很简单,擦亮双眼
通过修改网页源码的方式,让页面从<本地>看起来不一样
练习
以html的方式写个自我介绍. 用h1输出姓名 h2输出年龄 h3输出性别 p输出来自哪 span输出兴趣爱好 b输出喜欢的电影/歌手/演员/座右铭
实现<练习>文件夹里图片效果(剧情介绍 + 古诗)
填空题:
1.前端三剑客分别为: __,__,和__
2.body标签里的内容是写给__看的
3.head标签里的内容是写给__看的
4.html里,注释的写法为: ___
5.提问的艺术能提升学习效率,即提问时,不需要问:___.___.___.这类问题.直接说 1.你要干嘛 2.出现了什么问题 3.代码截图/代码文件
6.<p>标签的作用是__,<span>标签的作用是__.
判断题:
1.html不是编程语言 --> ()
2.前端是指面向用户,给用户看的内容 --> ()
3.标签分为单,双,多标签 --> ()
4.<b>标签作用为字体倾斜 --> ()
5.title标签里的内容用户是看不到的 --> ()
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
