1.网站和网页
网站是网页的集合,网页是构成网站的基本元素.
2.什么是HTML
HTML不是一种编程语言,而是一种超文本标记语言.超文本指的是,第一个是可以加入图片、声音、动画、多媒体等内容(超越了文本限制),第二个是可以文件间跳转,与世界各地主机的文件连接(超级链接文本)。
ps:不太理解与世界各地主机的文件连接的意思是什么
3.网页的形成
前端代码-->浏览器显示代码(解析、渲染)---->生成最后的Web页面
4.常用的浏览器
五大浏览器:常用的浏览器有IE、火狐(Firefox )、谷歌(Chrome ) 、Safari和Opera等。
5.常用浏览器内核
浏览器内核,也叫渲染引擎,负责读取和渲染页面。
国内浏览器一般都会采用webkit/Blink浏览器内核
6.为什么需要Web标准
浏览器不同,解析出来的效果可能不一致,因此W3C组织制定了一系列标准。
7.Web标准的构成
结构、表现和行为相分离,结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。
8.HTML语法规范
基本语法:
双标签:<html></html>
单标签:<br/>
双标签关系:包含关系和并列关系
9.HTML基本结构标签
网页的骨架标签:
<html>
<head><title></title></head>
<body></body>
</html>
10.常用的网页开发工具
最常用vscode、WebStorm
11.VSCode插件安装:
点设置,搜名字。
12.文档类型声明标签(自动生成)
< ! DOCTYFE html>文档类型声明标签,写在html文件的第一行,作用就是告诉浏览器使用哪种HTML版本来显示网页
这句代码的意思是:当前页面采取的是HTML5版本来显示网页.
13.lang语言种类(自动生成)
写在网页根标签<html lang="en">中,用来定义当前文档显示的语言。告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示
14.字符集(自动生成--必须写,否则乱码)
在<head>标签内,可以通过<meta>标签的charset属性来规定HIML文档应该使用哪种字符编码。
例: <meta charset="UTF-8">
charset常用的值有:GB2312、BlG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符
15.标签语义
标签语义:根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰
16.语义标签
标题标签:<h1> - <h6> 加粗 独占一行
段落标签:<p></p> 自动换行 段落之间保有空隙
换行标签:<br/> 单标签 强制换行 不会加垂直间距
17.文本格式化标签
加粗(重点):<strong></strong>或者<b></b>,<strong>语义更强烈
倾斜(重点):<em></em>或者<i></i>,<em>语义更强烈
删除线:<del></del>或者<s></s>,<del>语义更强烈
下划线:<ins></ins>或者<u></u>,<ins>语义更强烈
18.<div>和<span>标签(无语义)
没有语义,用来布局,它们就是一个盒子,用来装内容的
<div>:一行只能放一个,大盒子
<span>:一行可以多个,小盒子
19.图像标签
<img src=”图像URL”/>:图像标签。src是必须属性,用于指定图像文件的路径和文件名
所谓属性:简单理解就是属于这个图像标签的特性。
图像标签的属性(6个):src(图像路径必须有)、alt(替换文本,图像不能显示的文字)、title(提示文本,鼠标放到图像上,显示的文字)、width(设置图像的宽度)、height(设置图像的高度)、border(设置图像的边框粗细)
图像标签注意点:1、图像标签可以拥有多个属性,必须写在标签名的后面。
2、属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3、属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。
20. 目录文件夹和和根目录
目录文件夹和和根目录(为了快速找到所需文件,并管理所需文件):
目录文件夹∶就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
21.路径( 相对路径和绝对路径 )
路径分为:相对路径和绝对路径
相对路径∶以引用文件所在位置为参考基础,去找目标文件。
相对路径分为:同一级路径、下一级路径(/)、上一级路径(../)
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif” .
22.链接标签
<a>:用于定义超链接,作用是从一个页面链接到另一个页面。
链接的语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<a>标签的属性(2个):
(1)href:用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
(2)target:用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式.
23.链接的分类href(重点)
链接的分类(6种),主要是根据href属性来分类:
1.外部链接:例如< a href="http:// www.baidu.com ">百度.
2.内部链接;网站内部页面之间的相互链接.直接链接内部页面名称即可,例如< a href=" index.html">首页</a>.
3.空链接:如果当时没有确定链接目标时,< a href="#">首页</a >.
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>
找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two">第2集介绍</h3>
24.注释标签
注释:在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字。
HTML中的注释以“<!-”开头,以“-->”结束。
<!-―注释语句-->
快捷键: ctrl +/