1、浏览器及内核
-
浏览器最重要的部分或其核心是渲染引擎,我们一般称为内核;
-
内核的作用负责对网页语法的解释并渲染网页;
-
五大浏览器:chrome、safari、Firefox、Opera、IE
1.chrome 谷歌浏览器
生产商:Google
内核:webkit、blink
2.Firefox 火狐浏览器
生产商:Mozilla
内核:gecko
3.Safari 苹果浏览器
生产商:苹果公司
内核:webkit
4.opera 欧朋浏览器
生产商:挪威欧普拉软件公司
内核:presto blink
5.IE 浏览器
生产商:微软公司 Microsoft
内核:trident
其他浏览器:
大部分国产的浏览器(qq浏览器,uc浏览器,猎豹浏览器,360浏览器)基本上是在IE浏览器的内核上进行的二次开发
现在国内市场上有许多双内核的浏览器,使用的是trident,webkit内核
2、页面的三大组成部分
-
结构:给页面搭建基本的框架结构。 html ,类比于建房子的时候要搭的地基跟钢筋。
-
表现:页面的美化,装饰。 css 相当于给房子加背景和家具的排列布局。
-
行为:页面的轮播图,返回顶部... javascript 相当于房子加灯的开关。
结构层html和表现层css,是 W3C 制定的规范,万维网联名。
行为层js,是 ECMA 制定的规范,欧洲计算机协会。
2、HTML介绍
1、什么是HTML
2、HTML文档——网页
HTML文档也被称为网页
创建HTML文档
3、标记(标签)
构成网页的基本单位
<标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>
<后面的第一个单词叫做标签的名字,标签名空格之后的叫做标签的属性。
4、HTML注释
<!-- html注释内容 --> HTML中的注释以`<!--`开头,以`-->`结束,开始和结束中间为注释内容。
-
ctrl + /
-
alt + shift + a: 可以在一行代码的后面进行注释
5、HTML文档的基本结构
<!DOCTYPE html> <!-- <!doctype> 文件类型定义DTD 作用:告诉浏览器该文档的版本信息,让浏览器解析器知道使用哪种语法解析文档 文档第一代码是HTML5标准网页声明,告知浏览器用HTML5标准解析此网页。 不是标签,是声明语句 必须写在HTML文档的第一行 --> <html lang="en"> <!-- 网页的根元素 定义整个HTML文档,包含head和body lang属性 - 作用:定义当前文档显示文字的语言 - 语法:lang=“en” (lang是language的简写) - 取值: en定义语言为英语 zh-CN定义语言为中文 --> <head> <!-- 网页的头部信息 其内容不会显示在网页中 定义文档的头部,包含文档的标题(title),可以包含文档脚本(script),样式(style),Meta信息以及更多的其他信息。 --> <Meta charset="UTF-8"> <!-- 文档字符集 字符集(Character set)是多个字符的集合,便于计算机识别和存储各种文字。 在<head>标签内,通过<Meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。 charset属性:设置编码方式 UTF-8:万国码,通用性较好 (2)常用的字符集 - UTF-8被称为万国码,包含全世界所有国家需要用到的字符 - GB2312简单中文,包括6763个汉字 - GBK包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312 - BIG5繁体中文,港澳台等用 --> <title>标题</title> <!-- 网页标题 添加到收藏夹时的标题显示在搜索引擎结果中的页面标题。 --> </head> <body> <!-- 网页的主体内容 定义文档的主体,在浏览器窗口中可以看到的所有内容都包含在它内部。--> 父子关系——嵌套关系 兄弟关系——并列关系 </body> </html>
6、常用HTML标签
1)块级标记
<div>[内容]</div> <div> 文字内容</div> <div> <div></div> </div>
- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 作用:可以用来划分页面的区块,里面嵌套任何的标签
<h1>title1</h1> <h2>title2</h2> <h3>title3</h3> <h4>title4</h4> <h5>title5</h5> <h6>title6</h6>
- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 - 自带外间距 - 自带加粗效果 应用场景: - logo - 文章页标题、内容章节标题 - 产品标题 - 模块标题等
<p>[文字]</p>
- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 - 自带外间距 应用场景:文章中的段落、页面中的文字块 注意:p标签不能嵌套块级标签,例如:div,p,h1~h6
2)行级标记
文本格式化标签
<!-- 网址 --> <a href="https://www.baidu.com/">百度</a> <!-- 本地文件 --> <a href="./摩洛哥/moluoge.html" target="_self">本地文件1</a> <!-- 空链接 --> <a href="#">空链接</a> <!-- 伪链接 --> <a href="javascript:" title="我是伪链接">伪链接</a> <!-- title --> <a href="https://www.baidu.com/" title="百度">百度title</a> <!-- a:超链接标签 href:跳转的路径; 网址,本地文件,空链接(#占位,跳转到当前页的顶部),伪链接(href="javascript:"假链接,不跳转的) title:提示信息的作用 target:被链接文档在哪里显示 1.target='_self' 在当前窗口跳转,默认值 2.target='_blank'在新窗口跳转 语法: <a href="">内容</a> 特性: 1.宽度默认由内容撑开 2.高度默认由内容撑开 3.默认横向显示,水平布局,一行排不下,自动折行 4.换行和空格会被解析 5.自带文字颜色 6.自带下划线 7.鼠标指针的形状为手型 8.去掉a标签下划线text-decoration: none; 利用锚点来跳转指定锚点处 定义锚点 <div id='锚点名称'></div> 引用锚点 <a href="#锚点名称">内容</a> --> <!-- 点击这个也会跳转到顶部,但是跳转到顶部的原因:由于href属性没有写东西,点击的时候会刷新页面 --> <a href="">点击跳转到顶部没有#</a>
3)行内块级标记
img图像标签
<!-- 网址 右击--复制图片地址 --> <img src="https://img0.baidu.com/it/u=2409410196,1796254698&fm=26&fmt=auto&gp=0.jpg" alt=""> <!-- 盘符下的某个路径 --> <img src="C:\Users\Administrator\Desktop\1.jpg" alt=""> <!-- 本地文件 --> <img src="./images/2.jpg" alt=""> <img src="./images/3.gif" alt=""> <!-- alt --> <img src="./images/4.jpg" alt="图片4"> <img src="./images/44.jpg" alt="图片4"> <img src="./images/444.jpg" alt=""> <!-- title --> <img src="./images/1.jpg" alt="" title="打架" width="300px" height="200px"> img标签 语法:<img src="" alt=""> src:图片的路径 ../../表示上上级目录 alt:作用:指定替换文本,默认不显示,当图像不能正常显示时,显示该文字对图像进行替换,有利于用户体验 title:提示信息的作用,鼠标悬停在图片时显示提示信息 width:宽度 height:高度 注意:值可以不带单位默认px,只指定宽或高属性其中一个,另一个按照原比例等比缩放 特性: 1.默认横向显示,水平布局,一行排不下,自动折行 2.换行和空格会被解析 3.可以设置宽高
四、路径
1、绝对路径
-
带着协议的完整的路径 百度一下,你就知道
-
盘符下的某个路径 E:\1_1.jpg
2、相对路径
原文地址:https://www.jb51.cc/wenti/3288520.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。