文章目录
网页
什么是网页
网站
指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。
网页
网站中的一页,通常是HTML格式的文件,通过浏览器来阅读。
网页是构成网站的基本元素,由图片、链接、文字、声音、视频等元素组成,以 .htm 或 .html后缀结尾的文件(HTML文件)。
什么是HTML
HTML指的是超文本标记语言,用来描述创建网页。
标记语言是一套标记标签。
超文本:
1.可以加图片、声音、动画、多媒体等内容(超越文本限制)。
2.可以从一个文件跳转到另一个文件,与世界各地主机文件连接(超级链接文本)。
网页的形成
利用html标签将网页元素描述出来,通过浏览器解析显示给用户。
前端人员开发代码 -> 浏览器显示代码(解析、渲染) -> 生成web
常用浏览器
常用的浏览器
浏览器是网页显示、运行的平台。
五大浏览器:IE、火狐(firefox)、谷歌(chrome)、Safari、Opera
浏览器内核
浏览器内核(渲染引擎):负责读取网页内容、整理讯息,计算网页的显示方式并显示页面。
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
firefox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
chrome/Opera | Bink | chrome/opera浏览器内核。Blink其实是WebKit的分支 |
Web标准
Web标准是由W3C组织和其它标准化组织制定的一系列标准的集合,W3C(万维网联盟)是国际最著名的标准化组织。
为什么需要Web标准
浏览器不同,显示页面或排版有差异。
优点:
1.让不同人写出的页面更标准统一。
2.让Web的发展前景更广阔。
3.内容能被更广泛的设备访问。
4.更容易被搜索引擎搜索。
5.降低网站流量费用。
6.使网站更易于维护。
7.提高页面浏览速度。
Web标准的构成
最佳体验方案:结构、表现、行为相分离。
结构: 用于对网页元素进行整理分类(HTML)。
表现: 用于设置网页元素的版式、颜色、大小等外观样式(CSS)。
行为: 指网页模型的定义及交互的编写(JavaScript)。
HTML语法规范
基本语法概述
1.HTML标签是由尖括号包围的关键词。
2.HTML标签通常是成对出现的(双标签:第一个标签是开始标签,第二个是结束标签)。
3.有些特殊的标签是单个标签(单标签)。
标签关系
包含关系:
<head>
<title></title>
</head>
并列关系:
<head></head>
<body></body>
HTML基本结构标签
HTML基本结构标签也称骨架标签。
第一个HTML网页(HTML文档):
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
学习HTML很开心!
</body>
</html>
在浏览器中打开页面:
标签名 | 定义 | 说明 |
---|---|---|
< html >< /html > | HTML标签 | 跟标签:页面中最大的标签 |
< head >< /head > | 文档的头部 | 注意在head标签中我们须设置title标签 |
< title >< /title > | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
< body >< /body > | 文档的主体 | 元素包含文档所有内容、页面内容都放body里 |
开发工具
Visual Studio Code
1.双击打开软件
2.新建Ctrl+N
3.保存Ctrl+S(保存为.html文件)
4.Ctrl+加号键,放大页面
Ctrl+减号键,缩小页面
5.生成页面骨架:输入"!",按下Tab键/Enter键/点击选择
6.用插件在浏览器中预览页面
7.安装(Install)插件:(左侧菜单栏中的图标)
<!DOCTYPE>标签
(文档类型声明标签):告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
——意思是当前采取HTML5版本
注:
1.<!DOCTYPE>
声明位于文档中的最前面的位置,在前。
2.<!DOCTYPE>
不是一个HTML标签。
lang语言种类
定义当前文档显示的语言。
en定义语言为英文;zh-CN定义语言为中文。
(都能显示中英文:对浏览器和搜索引擎(百度、谷歌)还是有作用的)
<html lang="en">
<html lang="ch-CN">
字符集
(多个字符的集合)
以便计算机能够识别和存储各种文字。
在标签内,可通过标签的charset属性来规定HTML文档应使用哪种字符编码。
<meta charset="UTF-8/">
charset常用值:GB2312、BIG5、GBK和 UTF-8(万国码:基本包含了全世界各国文字)。
尽量统一写成"UTF-8",不要写成"utf8"或"UTF8"
上面三种语法是必写代码,否则可能引起乱码,vscode自动生成
HTML常用标签
标签语义
根据标签语义(标签的含义),在合适的地方给一个最为合理的标签,可以让页面结构更加清晰
标题标签< h1 >-< h6 >
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
1.加标题的文字更粗、字更大。
2.一个标题独占一行。
3.1-6级,字号递减,重要性递减。
段落标签和换行标签
段落标签
用于定义段落,将文字分段显示。
<p>段落标签</p>
1.文本在一个段落中会根据浏览器窗口大小自动换行。
2.段落间保持空隙。
换行标签
使文本强制换行显示。
<br />
1.<br />
是单标签。
2.换行无空隙。
文本格式化标签
为文字设置粗体、斜体或下划线等效果,使文字以特殊方式显示突出重要性。
功能 | 标签 |
---|---|
加粗 | <strong></strong> 或<b></b> |
倾斜 | <em></em> 或<i></i> |
删除线 | <del></del> 或<s></s> |
下划线 | <ins></ins> 或<u></u> |
< div > 和 < span > 标签
用来装饰内容,作"盒子",用来布局,没有语义。
<div>"大盒子"</div>
<span>"小盒子"</span>
1.<div>
一行只能放一个</div>
2.<span>
一行可放多个</span>
图像标签和路径
图像标签
<img>
(单标签)
<img scr="图像url地址" />
scr是<img>
标签的必须属性,用于指定图像文件的路径、名称。
属性 | 单位 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本(图像不能显示时的文字) |
title | 文本 | 提示文本(鼠标放图像上显示的文字) |
width | 像素 | 设置图像宽度 |
height | 像素 | 设置图像高度 |
border | 像素 | 设置图像的边框粗细 |
1.图像标签可拥有多个属性,必须写在标签名后面。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间用空格。
3.属性采取键值对的格式,即key="value"的格式,属性=“属性值”。
路径
目录文件和根目录用于管理文件。
目录文件夹:做页面所需的相关素材,如html文件、图片等。
根目录:打开目录文件夹的第一层。
用vscode打开目录文件夹使后期方便管理文件。
相对路径
以引用文件所在位置为参考,建立出的目录路径(图片相当于HTML页面的位置)。
同一级路径 | <img src=" "/> | |
---|---|---|
下一级路径 | / | <img src="下一级名称/ "/> |
上一级路径 | …/ | <img src="../ "/> |
绝对路径
(用的少)
1.电脑上的路径
2.网络地址
超链接标签
<a>
从一个页面链接到另一个页面
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 指定链接目标的url地址(必须属性)当为标签应用href属性时,它就具有了超链接功能 |
target | 指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中的打开方式 |
链接分类
外部链接 | <a href="http://www.baidu.com">百度</a> |
---|---|
内部链接 | 网站内部页面之间的相互链接,直接链接内部页面名称<a href=".html">页面</a> |
空连接 | 当没有确定链接目标时<a href="#">页面</a> |
下载链接 | 如果里面地址是一个文件或压缩包,会下载这个文件 |
网页元素链接 | 在网页中的各种网页元素(文本、图像、表格、音频、视频等) |
锚点链接 | 快速定位到页面中的某个位置 |
锚点链接:
1.在链接文本的href属性中,设置属性值为"#名字"的形式。
2.找到目标位置标签,里面添加一个"id属性=刚才的名字"。
<a href="#name">内容</a>
<h3 id="name">内容</h3>
文章内容为观看他人视频学习笔记,仅个人学习记录