web标准
-
Web标准不是某一种标准,而是一系列标准的集合。网页主要由3部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的Web标准也分为3类:结构化标准语言主要包括XHTML和XML,表现标准语言主要为CSS,行为标准主要包括对象模型W3C DOM、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制定的标准,如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
-
表现与结构的分离
-
1.内容
-
内容就是页面实际要传达的真正信息,包含数据、文档或图片等。注意这里强调的“真正”,是指纯粹的数据信息本身,不包含任何辅助信息。
-
2.结构
-
完整的文本信息如果不格式化,会混乱一团,难以阅读和理解,必须将其格式化一下。把其分成标题、段落和列表等。
-
3.表现
-
虽然定义了结构,但是内容还是原来的样式没有改变,例如标题字体没有变大,正文的背景也没有变化,列表没有修饰符号等。所有这些用来改变内容外观的东西,称之为“表现”。
-
4.行为
-
行为是对内容的交互及操作效果。例如,使用JavaScript可以使内容动起来,可以判断一些表单提交,进行相应的一些操作。
HTML简介
超文本标记语言HTML
-
网页是WWW的基本文档,它是用HTML(HyperText Markup Language,超文本标记语言)编写的。HTML严格来说并不是一种标准的编程语言,它只是一些能让浏览器看懂的标记。当网页中包含正常文本和HTML标记时,浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息,从而将网页按设计者的要求显示出来。
HTML5简介
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。设计目的是为了在移动设备上支持多媒体, 简单易学。
-
HTML5的特性
-
1.实现Web应用程序
-
HTML5引入新的功能,以帮助Web应用程序的创建者更好地在浏览器中创建富媒体应用程序,这是当前Web应用的热点。多媒体应用程序目前主要由Ajax和Flash来实现,HTML5的出现增强了这种应用。
-
2.更好地呈现内容
-
基于Web表现的需要,HTML5引入了更好地呈现内容的元素。
-
HTML5的使用
- vscode中新建文件demo.html,输入感叹号!快速建立HTML5文档。
HTML基本结构
语法结构:
-
1.标签
-
HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果,其功能类似于一个排版软件,将网页的内容排成理想的效果。标签(tag)是用一对尖括号“<”和“>”括起来的单词或单词缩写,各种标签的效果差别很大,但总的表示形式却大同小异,大多数都成对出现。在HTML中,通常标签都是由开始标签和结束标签组成的,开始标签用“<标签>”表示,结束标签用“</标签>”表示。其格式为:
-
<标签> 受标签影响的内容 </标签>
-
示例:<p>Hello word!</p>
-
2.属性
-
标签仅仅规定这是什么信息,但是要想显示或控制这些信息,就需要在标签后面加上相关的属性。标签通过属性来制作出各种效果,通常都是以“属性名="值"”的形式来表示,用空格隔开后,还可以指定多个属性,并且在指定多个属性时不用区分顺序。其格式为:
-
<标签 属性1="属性值1" 属性2="属性值2" …> 受标签影响的内容 </标签>
-
示例:<div style="background-color: lightblue; width: 300px; height: 600px;" ></div>
-
3.元素
-
元素指的是包含标签在内的整体,元素的内容是开始标签与结束标签之间的内容。没有内容的HTML元素被称为空元素,空元素是在开始标签中关闭的。
编写规范:
-
1.标签的规范
-
(1)标签分单标签和双标签,双标签往往是成对出现,所有标签(包括空标签)都必须关闭,如<br/>、<img/>、<p>…</p>等。
-
(2)标签名和属性建议都用小写字母。
-
(3)多数HTML标签可以嵌套,但不允许交叉。
-
2.属性的规范
-
(1)根据需要可以使用该标签的所有属性,也可以只用其中的几个属性。在使用时,属性之间没有顺序。
-
(2)属性值都要用双引号括起来。
-
(3)并不是所有的标签都有属性,如换行标签就没有。
-
3.元素的嵌套
-
(1)块级元素可以包含行级元素或其他块级元素,但行级元素却不能包含块级元素,它只能包含其它的行级元素。
-
(2)有几个特殊的块级元素只能包含行级元素,不能再包含块级元素,这几个特殊的标签是:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<dt>。
-
4.代码的缩进
-
HTML代码并不要求在书写时缩进,但为了文档的构性和层次性,建议初学者使用标记时首尾对齐,内部的内容向右缩进几格。
文档结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--网页 内容 -->
</body>
</html>
head元素 :
<title></title>标签:
<title>标签是页面标题标签,它将HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途,这个标签只能应用于<head>与</head>之间,每个文档只允许有一个标题。
语法格式为:
<title>标题名</title>
示例:
<title>创作中心</title><!--定义一个标题为创作中心 -->
<meta>标签:
<meta>标签是元信息标签,该标签可重复出现在头部标签中,用来指明本页的作者、制作工具、所包含的关键字,以及其他一些描述网页的信息。
语法格式为:
<meta name="参数" content="参数值">
-
name属性主要用于描述网页摘要信息,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息用的。
-
name属性主要有以下两个参数:keywords和description。
-
1. keywords(关键字)
-
keywords用来告诉搜索引擎网页使用的关键字。
-
2. description(网站内容描述)
-
description用来告诉搜索引擎网站主要的内容。
示例:
<meta charset="UTF-8">
通过将charset
属性设置为"UTF-8",该代码告诉浏览器使用UTF-8字符编码来解析和显示网页中的文本内容。UTF-8是一种通用的字符编码标准,支持多种语言和字符集,包括中文、日文、韩文等亚洲语言。
<link>标签:
link>标签是关联标签,用于定义当前文档与Web集合中其他文档的关系,建立一个树状链接组织。<link>标签并不将其他文档实际链接到当前文档中,只是提供链接该文档的一个路径。link标签最常用的是用来链接CSS样式文件,
语法格式为:
<link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
示例:
<link rel="stylesheet" href="../layui/css/layui.css">
链接本地layui.css文件。
<script></script>标签:
<script>标签是脚本标签,用于为HTML文档定义客户端脚本信息。此标签可在文档中包含一段客户端脚本程序。此标签可以位于文档中任何位置,但常位于<head>标签内,以便于维护。
语法格式为:
<script type="text/javascript" src="脚本文件名.js"></script>
示例:
<script src="../jquery.min.js"></script>
链接本地jQuery脚本文件。
文本元素:
HTML标题:
语法格式:
<h#></h#> #为数字1~6
1~6号标签由大到小
特殊符号:
常用的特殊符号及对应的字符实体见下表。
基本排版元素:
段落标签<p></p>
<p>标签是HTML格式中特有的段落元素,在HTML格式里不需要在意文章每行的宽度,不必担心文字是不是太长了而被截掉,它会根据窗口的宽度自动转折到下一行。
段落标签的格式为:
<p align="left|center|right"> 这是P标签的演示效果</p>
换行标签<br>
<br>标签是单标签,将打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行中都会使该行换行,如果<br/>放在一行的末尾,可以使后面的文字、图像、表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行。
换行标签的格式为:
<p > 换行前的效果</p>
<p > 换行后 <br>的效果</p>
预格式化标签<pre>
<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体
分割线<hr>标签
当浏览器解释到HTML文档中的<hr>标签时,会在此处换行,并加入一条水平线段。
列表元素
列表分为有序列表<ol>和无序列表<ul>
<li>标签标识一个列表项
有序列表是一个有特定顺序的列表项的集合。在有序列表中,各个列表项有先后顺序之分,它们之间以编号来标记。使用<ol>标签可以建立有序列表。
格式为:
<div style="float: left; background-color: lightblue;">
<ol>
<li>表项1</li>
<li>表项2</li>
</ol>
</div>
<div style="float: left; background-color: lightcyan;">
<ul>
<li>表项1</li>
<li>表项2</li>
</ul>
</div>
图像元素
在HTML中,用<img>标签在网页中添加图像,图像是以嵌入的方式添加到网页中的。
图像标签的格式为:
<img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度"
height="图像高度" border="边框宽度" hspace="水平空白" vspace="垂直空白"
align="环绕方式|对齐方式" />
常用的网页图像格式
虽然有很多种计算机图像格式,但由于受网络带宽和浏览器的限制,在网页上常用的图像格式有3种:GIF、JPEG和PNG。
简单的示例:
超链接元素
1.超链接的定义
超链接(hyperlink)是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
2.超链接的分类
根据超链接目标文件不同,超链接可分为页面超链接、锚点超链接、电子邮件超接链等;根据超链接单击对象不同,超链接可分为文字超链接、图像超链接、图像映射等。
3.路径
创建超级链接时必须了解链接与被链接文本的路径。在一个网站中,路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径。
创建锚点格式:
<a href="url" title="指向链接显示的文字" target="窗口名称"> 文本标题 </a>
target属性设定链接被单击后所要开始窗口的方式,有以下4种方式。
_blank:在新窗口中打开被链接文档。(新建窗口进行跳转,原窗口不变。)
_self:默认。在相同的框架中打开被链接文档。(本窗口直接跳转,原窗口关闭。)
_parent:在父框架集中打开被链接文档。
_top:在整个窗口中打开被链接文档。
打开外部网站设置超链接示例:
行内元素与块级元素
<div> 是块级元素,它独占一行,可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构,例如页面的主体区域、容器、布局等。
<span> 是行内元素,它不会独占一行,宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
默认样式和布局:
<div> 元素的默认样式为块级显示,会以块的形式占据可用空间。
<span> 元素的默认样式为行内显示,它不会独占一行,只占据其内容的宽度。
嵌套关系:
<div> 可以容纳其他块级元素和行内元素,包括其他的 <div> 和 <span> 元素。
<span> 通常被用来包裹文本或其他行内元素,比如用来设置特定文本的样式。
总之,<div> 用于创建页面结构和布局,而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。
示例: