Web前端开发基础

Emporor

已于 2023-11-01 22:58:10 修改

阅读量178

点赞数

文章标签： html 前端

于 2023-10-23 21:47:54 首次发布

本文链接：https://blog.csdn.net/Emporor/article/details/133996179

版权

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>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

head元素：

<title></title>标签：

<title>标签是页面标题标签，它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途，这个标签只能应用于<head>与</head>之间，每个文档只允许有一个标题。

语法格式为：

<title>标题名</title>

示例：

<title>创作中心</title>

<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 type="text/javascript" src="脚本文件名.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>

预格式化标签<pre>

<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体

分割线<hr>标签

当浏览器解释到HTML文档中的<hr>标签时，会在此处换行，并加入一条水平线段。

列表元素

列表分为有序列表<ol>和无序列表<ul>

<li>标签标识一个列表项

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表。

格式为：

<ol>

</ol>

</div>

<ul>

</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> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。

示例：

Emporor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发基础

超文本标记语言HTML网页是WWW的基本文档，它是用HTML超文本标记语言）编写的。HTML严格来说并不是一种标准的编程语言，它只是一些能让浏览器看懂的标记。当网页中包含正常文本和HTML标记时，浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体，简单易学。HTML5的特性1．实现Web应用程序。
复制链接

扫一扫