学习目标:
- 网页
- 常用浏览器
- Web标准
- html标签
- html常用标签
学习内容:
一、网页
1.1 网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。html文件
1.2 html指的是超文本标记语言,不是编程语言(超文本:图片、视频、超链接等超越了文本限制)
**二、**常用浏览器
2.1 五大浏览器
IE(Trident)、火狐(Gecko)、谷歌(Blink)、Safari(Webkit)和Opera(Blink)
2.2 浏览器内核(渲染引擎)
负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。国内浏览器都会采用(Webkit/Blink)
三、W3C标准
3.1 为什么需要web标准:
遵循web标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:
1、让web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜索引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
3.2 web标准的构成
主要包括结构、表现和行为三个方面
结构:结构用于对网页元素进行整理和分类,现阶段主要学的是html
表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为:行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript
web标准提出的最佳体验方案:结构、样式、行为相分离
四、html标签
1、html的语法规范:尖括号包含关键词、大多成对出现、单标签
2、标签关系:包含关系、并列关系
3、html骨架标签:html文档、头部、标题、主体
<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
4、文档类型声明标签:<!DOCTYPE>作用就是告诉浏览器使用哪种html版本来显示网页(写在最前面)
5、lang语言种类:用于定义当前文档显示的语言
- en定义为英语
- zh-CN定义为中文
6、字符集:UTF-8也被称为“万国码”,不写会乱码
五、html常用标签
1、标题标签`
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
标签语义:head的缩写,作为标题使用,并且依据重要性递减
特点: 1. 加了标题的文字会变得加粗,字号也会依次变大
2. 一个标题独占一行
2、段落和换行标签
<p>段落标签</p>
标签语义:把html文档分割成若干段落
特点:
1. 文本在一个段落中会根据浏览器窗口的大小自动换行
2. 段落和段落之间保有空隙
<br />换行标签
标签语义:break的缩写,强制换行
特点:
1. 是单标签
2. 只是简单的开始新的一行
3、文本格式化标签
<strong>加粗</strong>或<b>加粗</b>
<em>倾斜</em>或者<i>倾斜<i>
<del>删除线</del>或者<s>删除线</s>
<ins>下划线</ins>或者<u>下划线</u>
标签语义:突出重要性,比普通文字重要
4、<div>和<span>标签
没有语义,是一个盒子,用来装内容
<div>内容</div>
<span>内容</span>
特点:<div>标签用来布局,但是现在一行只能放一个<div>
<span>标签用来布局,一行可以多个
5、图像标签
<img src="图像URL">
<img>是单标签
1、属性
src是<img>标签的必须属性,用于指定图像文件的路径和文件名
其他属性:alt:替换文本,图像不能显示的文字
title:提示文本,鼠标放到图像上,显示的文字
width:设置图像的宽度
height:设置图像的高度
border:设置图像的边框粗细
注意点:
1. 图像标签可以有多个属性,必须写在标签名的后面
2. 属性之间不分先后顺序,属性和属性之间使用空格隔开
3. 属性采取键值对的形式 key="value"
2、路径
1. 相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。(图片相对于html页面的位置)
同一级路径():图像位于html同一级<img src="theme.png">
下一级路径(/):图像位于html下一级<img src="images/theme.png">
上一级路径(../):图像位于html上一级<img src="../theme.png">
2. 绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径,也可以是一个完整的网络地址