第一课网页

最新推荐文章于 2024-10-17 06:11:29 发布

没能找回t

最新推荐文章于 2024-10-17 06:11:29 发布

阅读量1.3k

点赞数 24

文章标签： html

本文链接：https://blog.csdn.net/2402_84217483/article/details/137525299

版权

本文介绍了浏览器与编辑器的工作原理，包括浏览器内核、HTML、CSS和JavaScript的基本概念，以及HTML的标签结构、CSS样式和JavaScript的作用。同时讲述了HTML文档结构、路径（相对和绝对）以及语义化的概念和优势。

摘要由CSDN通过智能技术生成

一、浏览器与编辑器
1、浏览器
网页运行和显示的平台
五大浏览器：
苹果浏览器(safiri)、火狐浏览器(firefox)、谷歌浏览器(chrome)、IE浏览器、欧朋浏览器A210×297mm) K 1/10
搜索
2、编辑器
插件：
chinese---------将英文界面变成中文
open in brower在浏览器中打开
二、浏览器内核
浏览苹果浏览器火狐浏览器谷歌浏览器 IE浏览欧朋浏览器
器 (safiri ) (firefox) (chrome) 器 ( opera)
对应
Presto内核…
webkit内核……
的内
核 webkit内核 Gecko内核 Blink内核内核 TridentBlink内核
五大浏览器用的都是单内核
三、前端的三大组成部分
HTML
结构层
主要负责页面的语义
超文本标记语言
CSS
表现层
主要负责美化网页
层叠样式表
JavaScript
行为层
为网页添加动态的交互效果
脚本语言
四、基本概念
1、什么是HTML?
hyper text markup language的简写，叫超文本标记语言
HTML是负责描述网页的一种语言
使用标记标签来描述网页的
HTML不是编程语言，是标记语言
2、HTML文档
html文档=网页
html文档的后缀名是.html
html文档是有标签和文本构成的
3、HTML标签
2/10 BRB8O
CSS
表现层
主要负责美化网页
层叠样式表
JavaScript
行为层
为网页添加动态的交互效果
脚本语言
四、基本概念
1、什么是HTML?
hyper text markup language的简写，叫超文本标记语言
HTML是负责描述网页的一种语言
使用标记标签来描述网页的
HTML不是编程语言，是标记语言
2、HTML文档
html文档=网页
html文档的后缀名是.html
html文档是有标签和文本构成的
3、HTML标签
2/10 BRB8O
CSS
表现层
主要负责美化网页
层叠样式表
JavaScript
行为层
为网页添加动态的交互效果
脚本语言
四、基本概念
1、什么是HTML?
hyper text markup language的简写，叫超文本标记语言
HTML是负责描述网页的一种语言
使用标记标签来描述网页的
HTML不是编程语言，是标记语言
2、HTML文档
html文档=网页
html文档的后缀名是.html
html文档是有标签和文本构成的
3、HTML标签
2/10 BRB8O
CSS
表现层
主要负责美化网页
层叠样式表
JavaScript
行为层
为网页添加动态的交互效果
脚本语言
四、基本概念
1、什么是HTML?
hyper text markup language的简写，叫超文本标记语言
HTML是负责描述网页的一种语言
使用标记标签来描述网页的
HTML不是编程语言，是标记语言
2、HTML文档
html文档=网页
html文档的后缀名是.html
html文档是有标签和文本构成的
3、HTML标签
2/10 BRB8O
CSS
表现层
主要负责美化网页
层叠样式表
JavaScript
行为层
为网页添加动态的交互效果
脚本语言
四、基本概念
1、什么是HTML?
hyper text markup language的简写，叫超文本标记语言
HTML是负责描述网页的一种语言
使用标记标签来描述网页的
HTML不是编程语言，是标记语言
2、HTML文档
html文档=网页
html文档的后缀名是.html
html文档是有标签和文本构成的
3、HTML标签
2/10 BRB8O
双标签
<div>这里写内容</div>
双标签一般是成对出现的，一个是开始标签，一个是结束标签
单标签
<img />
严格模式下，单标签需要在开始标签中进行关闭
元素：从开始标签到结束标签中间的所有代码
<div>这里写内容</div>
空元素：没有内容的html元素
注释：
vs code中试用ctrl+/可以生成注释
html注释：

css注释
1/10 >
/* cSs注释
五、HTML基本结构
vs code创建基本结构的两种方式：
• !+tab
html:5+tab

<!DOCTYPE html>

<head>


<title>0622web</title>
</head>

<body>
</body>
</html>

注意：
• 文字大小依次减小，重要程度依次减弱的
•h1标签在同一个页面中只使用一次，其他标题标签可以使用多次
• 标题标签是有语义的，主要用来放标题，不能为了加粗使用标题标签
(2)段落标签
主要用来放段落内容
<p>段落内容</p>
特性：
•独立成行
•默认情况下，宽度100%
• 默认情况下，高度自适应的
自带间距
(3)div标签
没有语义的标签，主要用于划分区块，布局标签
<div>div标签</div>
特性：
• 默认情况下宽度100%
默认情况下，高度自适应
• 独立成行
其他标签
强制换行标签
单标签，空元素
<br />
(2)hr标签
文档分隔线，可以把文档在视觉上划分为不同的部分
单标签，空元素
<hr />
特点：自带间距和边框
2、行级标签
文本格式化标签
(1)加粗标签
<b></b>
<strong></strong>
b和strong的区别：
* strong是有强调的语义的，用于放置一些重要的文字，呈现加粗的效果
• b标签没有强调的语义，是一个实体标签，只是视觉上看到加粗了
( 2)斜体标签
<i></i>
<em></em>
i和em的区别：
em是有语义上的强调作用的，包裹的文字会显示倾斜的效果
i是实体标签，只是视觉上看到文字倾斜了
(3)span标签
没有语义的，用来处理一些细节修饰的
<span>span标签</span>
(4)上标标签
<sup></sup>
(5)下标标签
<sub></sub>
(6)删除标签
<del></del>
又本怡式化标签的特点：
•默认情况下，宽度是自适应的
• 默认情况下，高度是自适应的
• 默认情况下，横向排列
(7)超链接标签
超链接标签里面可以是文字，或者图片，也可以是一个模块
<a href="" title="" target=""></a>
常用属性：
• href属性跳转的地址
• title属性提示文字
target属性定义打开方式
o target="_self" 在当前窗口打开（默认的打开方式）
o target="_blank" 在新的空白窗口打开
<a href=https://www.baidu.com/"title="我是跳到百度的” target="_self”>跳转到百度</a>
<a href="./11-img.htm1" target="_blank">跳转到11-img.html</a>
<a href="#">我不知道跳哪</a>
特性：
自带文字颜色、自带下划线、鼠标悬停时显示手型
应用场景：
• 跳转页面
•锚点链接
跳转页面是跳转到某个页面的地址，锚点链接是跳转到页面的某个具体位置。同一页面
■定义锚点
<p id="id名称"></p>
使用锚点
<a href="#id名称"></a> I
。不同页面
• 定义锚点
<p id="id名称"></p>
使用锚点
<a href=“页面的地址#id名称”></a>
例如：
/*同一个页面*/
<a href="#p1">跳转到我当前页的p标签处</a>
/*不同页面*/
<a href="./11-img.html#box">跳转到11-img.html中的div标签位置</a>下载
<a href=“1.rar“>用于下载的a标答</a>
3、行块级标签
img标签
图片标签
<img src="" width="" height="" alt="" title=""/>
常用属性：
• src属性设置图片的资源地址
• alt属性替换文本
。当图片的路径有问题或者图片加载不成功的时候出现的替换文本
。有利于用户体验
width属性用于设置图片的宽度
height属性用于设置图片的高度
默认的单位是px，省略不写
width或者height，如果只设置一个，另一个会进行等比例缩放
• title属性提示文本
鼠标悬停在图片身上时显示的提示文本
标签属性
<标签名属性1=“属性值1”属性2="属性值2"></标签名>
应用场景：
广告图、商品展示图、商品详情图等
七、路径
路径是指文件的存放地址，通过路径可以插入图片、视频、音频以及引用文件1、相对路径
从当前的文档出发，引起与另一个文件的位置关系
(1)同级目录
可以省略的

<img src="1.jpg" alt="">
<img src="./1.jpg" alt="">
(2)下级目录
• 下一级目录

<img src="images/2.gif" alt="">
• 下下级目录

<img src="images/static/3.gif" alt="">
依次类推
(3)上级目录
上一级目录./

<img src="../4.gif" alt="">
上上级目录 .1../
I

<img src="../../1.jpg" alt="">
(4)根目录
本地盘符
当前文档所在的根目录/

<img src="/l.jpg" alt="">
2、绝对路径
(1)完整的url路径
<I-- 完整的url地址-->
<img.src="http://www.ujiuye.com/uploadfile/2020/0519/20200519062640309.Jpg"alt="">
Pt转Word 国图片转文字水印√ 合并拆分
(2)从盘符出发的绝对路径

<img src="F:\web一阶段课程资料2020版\ppt\day01\1.jpg” alt="">
八、语义化
1、什么是语义化
语义化是指使用合适的HTML标签或者属性去呈现页面(选择合适的标签放在合适的地方)，比如说：标题得用h1-h6，段落得用p标签、超链接得用a标签..
2、语义化的好处
•没有css的情况下，页面也可以呈现很好的结构
• 有利于团队合作
• 有利于搜索引擎优化
• 有利于用户体验(例如合理的使用alt属性及title属性等)