web前端基础-HTML篇

最新推荐文章于 2023-07-09 20:25:08 发布

Ave·

最新推荐文章于 2023-07-09 20:25:08 发布

阅读量967

点赞数 8

分类专栏： web前端 html 文章标签：前端 html 1024程序员节 html5

本文链接：https://blog.csdn.net/NPC75/article/details/120893651

版权

web前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

web前端介绍

前端开发是创建web页面或app等前端界面呈现给用户的过程，通过html，css及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。

网站开发的概述

用HTML语言所编写的一种文件称为网页。网页构成的元素很丰富，可以将音乐、视频、图片等插入到网页里。元素主要可以分类为这几个：

（1）文本

网页的信息主要是以文本为主(这里的文本指文本字)，可以在网页中通过字体、大小、颜色等来设置文本的属性。中文的字体常用宋体，字体大小一般9磅或12磅大小。

（2）图像

网页上丰富多彩的内容大多数都缘与图像。网页支持的图像格式包括JPG、GIF、PNG等格式。网页上常见的图形也很多，比如：代表网站形象的标志性图片（Logo图标）、用于宣传某东西的广告（Banner广告）这种一般为GIF动画的形式为主等等。

（3）超链接

超链接是一个网站的灵魂，主要用处是可以从这个网页通过这个超链接来抵达另一个网站或者相同页面的某一位置。超链接的载体可以是一个图片、文本、Flash动画等。超链接的出现，使得计算机网络的发展的很迅速。

（4）表单

表单主要是收集用户信息，来实现浏览者与服务器之间的信息交互。

（..）等等之类

在网页里也分为两种网页：静态网页和动态网页；

静态网页

由纯粹的HTML的语言来编写的网页被称为静态网页，一般后缀为html、htm；静态网页是网站建立的基础，静态网页相对于动态网页来说，指没有后台数据，不含程序和不可交互的网页。静态网页也不完全静态，也有能出现动态效果。

动态网页

早期的动态网页主要采用共用网关接口（Common Gateway Interface,CGI)技术，可以用c++、Visual Basic、Delphi等语言来编写CGI程序，不过由于修改复杂，编程困难之类的问题逐渐被新技术取代的趋势比如PHP、ASP、JSP、.NET等等。

HTML的基本概念

计算机网络发展的很迅速主要是一个原因，全球广域网（World Wild Web，www）的出现，用户不需要任何计算机网络的专业知识，就可以使用www中的超级链接访问Internet上任意网络资源。www运行主要涉及了三个主要概念：超文本传输协议、统一资源定位符、超文本标记语言。

超文本传输协议

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期web成功的有功之臣，因为它使开发和部署非常地直截了当。

统一资源定位符

统一资源定位符是用于完整地描述Internet上资源位置和访问方法的一种简介表示方法。在internet上每一个资源都有唯一的名称标识，通常被称为URL地址或网址。

1.URL语法格式：

协议://域名或IP地址[:端口号]/目录/文件名.文件后缀[？参数=参数值]

一个典型的URL为http://www.whpu.edu.cn/news/showNew.aspx?id=1624,其中使用协议是http协议，域名是www.whpu.edu.cn,端口号默认为80，目录是news，需要访问的文件名是showNew.aspx,参数和参数值是id=1624。如何URL地址没有给出文件名，浏览器会使用URL引用路径中最后一个目录的默认主页文件，这个默认主页文件常常被称为index.html或default.htm。

2.绝对URL和相对URL：

统一资源定位符分成两种表示方法，一种是绝对URL，另一种是相对URL。绝对URL是显示文件完整路径，这意味绝对URL本身位置和被引用的实际文件位置无关；相对URL是以包含URL本身文件夹的位置为参考点来描述目标文件夹的位置。如果目标文件与当前页面（包含URL的页面）在同一目录，那这个文件的相对URL仅仅是文件名和扩展名；如果目标在当前1目录的子目录中，那么其相对URL是子目录名+斜杠+目标文件的文件名和扩展名。

相对URL的语句如下：

<img src="bg.jpg">

如果在index.htm文件中访问父级目录demo.png文件，语句如下：

<img src="../demo.png">

如果在index.htm文件中访问同级目录images子目录下的bg.jpg文件，语句如下：

<img src="images/bg.jpg">

如果在index.htm文件中访问父级目录jQuery子目录下的jquery-3.2.0.min文件，语句如下：

<script src="../jquery/jquery-3.2.0.min,js"></script>

超文本标记语言

超文本标记语言是一种描述文档结构的标注语言，是通过标记符号来标记要显示网页中的各个部分。（具体可以查阅相关资料）

HTML基本格式

（1）html的基本结构

html的基本格式如下：

<html>
    <head>
        .......
    </head>
    <body>
        .......
    </body>
</html>

<html></html>为文件的开头和结尾。

<head></head>为头部标记，<head>中的元素可以引用脚本、指引浏览器去何处找样式表。大多数头部标记不作为页面内容来显示，但影响显示效果。<head>常用title标记符和meta标记符，title标记符用来定义页面的标题；meta标记符用来描述页面的属性：作者、日期、页面刷新、关键词等。

<body></body>为主体标记，为页面的主体部分，也就是用户能看到的内容，内容包括文本、图片等。

例子如下：

<!doctype html>                            <文档声明：告诉浏览器一下文件用html5版本解析>
<html>
    <head>
        <meta charset="UTF-8">            <网页编码格式为UTF-8>
        <title>你好世界</title>            <网页标题为“你好世界”>
    </head>
    <body>
        你好世界                            <显示的内容>
    </body>
</html>

（2）HTML标记语法格式

HTML标记语法格式如下：

<标记名称属性="属性值" 属性="属性值"......>..........</标记名称>

假如要把页面背景设置成红色；

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>你好世界</title>
    </head>
    <body bgcolor="#FF0000">
        你好世界
    </body>
</html>

也可以改字体颜色

只需要在后面加上text="#FFFF00"即可

<body bgcolor="#FF0000" text="#FFFF00">

对于html标记，属性值可以用引号括起来，也可以不使用引号。使用引号既可以是单引号也可以是双引号。如bgcolor="#FF0000"及bgcolor=#FF0000都可以，值得注意的一点是引号要配对使用，不能一边单一边双，引号也要用英文输入法来输入。

<body bgcolor="#FF0000" text="#FFFF00">

含义为背景为红色，字体为黄色。

在html定义颜色的方法可使用3种方法；

（1）直接输入颜色名称：直接打出颜色英文名称，如：<body bgcolor="red">这样背景就为红色。

（2）十六进制颜色代码，格式如下：#RRGGBB。参数值前加#号后面使用十六进制颜色代码，这种颜色由3部分组成，前两位十六进制为红色，中间两位为绿色，后两位为蓝色，不同取值为不同颜色。

（3）十进制RGB码，语法格式：RGB（RRR,GGG,BBB）。在这种表示法种，这三个参数分别为红色，绿色，蓝色。取值范围是一个字节数的十进制表示即0~255。例如：

<body bgcolor="rgb(255,0,0)">在浏览器显示正文字体为红色。

（3）标题标记

标题标记的语法格式如下：

<hn align="对齐方式"> 标题文本</hn>

HTML中提供了6级标题，<h1>到<h6>,其中<h1>的字号最大，<h6>字号最小。标题属于块级元素，浏览器会自动在标题前后加上空行。

align属性是可选属性，用于指定标题的对齐方式，其值有3种：left,center,right，分别为左对齐、居中对齐、右对齐。

例如：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题标记</title>
    </head>
    <body>
        <h1>标题标记</h1>
        <h2>标题标记</h2>
        <h3>标题标记</h3>
        <h4>标题标记</h4>
        <h5>标题标记</h5>
        <h6>标题标记</h6>
    </body>
</html>

加上align属性，例子如下：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题标记</title>
    </head>
    <body>
        <h1 align="left">标题标记</h1>                在align="对齐方式"修改
        <h2 align="left">标题标记</h2>
        <h3 align="left">标题标记</h3>
        <h4 align="left">标题标记</h4>
        <h5 align="left">标题标记</h5>
        <h6 align="left">标题标记</h6>
    </body>
</html>

（4）字体标记

默认的情况下，中文网页的字体以黑色、宋体、3号字的效果显示。如果要改变，可使用<font>字体标记来设置，格式如下：

<font face="字体名称" size="字号" color="字体颜色">文字</font>

face来指定文字的字体，size来指定文字大小，color来指定文字颜色。

例如：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字体标记</title>
    </head>
    <body>
        <font size="5" face="隶书" color="red">
            字体标记
        </font>
        <font size="6" face="宋体" color="yellow">
            字体标记
        </font>
        <font size="7" face="黑体" color="pink">
            字体标记
        </font>
    </body>
</html>

（5）换行标记

在html中建立一个段落的标记<p>,格式如下：

<p align="对齐方式">段落内容</p>

<p>标记是块级元素，浏览器会自动在<p>标记的前后加上一定的空行。

换行标记是<br/>，一次换行用一次<br>,多行用多次<br/>，两个<br/>等于一个段落换行标记<p/>

例如：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>换行标记</title>
    </head>
    <body>
        123<p/>2222<br/>2222<br/>2222<br/>2222
    </body>
<html>

（6）预格式化标记

我理解为你在里面怎么打，它就在页面怎么显示。（具体可查阅相关资料）

格式如下：

<pre>..........</pre>

例如：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>预格式化标记</title>
    </head>
    <body>
        <pre>
            1111
            1111
            1111
            1111
        </pre>
    </body>
<html>

（7）列表标记

列表标记可分为无序列表和有序列表，前者用项目符号，后者用编号。无序列表主要使用<ul><li><type属性>格式如下：

<ul type="列表项的标记符">
    <li>123</li>
    <li>123</li>
    <li>123</li>
........
</ul>

type的属性值定义如下：

disc是默认值，为实心圆；circle为空心；square为实心方块；

例子如下：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表标记</title>
	</head>
	<body bgcolor="red">
		<font size="10" color="yellow" face="仿宋">
		web前端语言：<br/>
		</font>
			<font size="7" color="yellow" face="宋体">
				<ul type="square">
					<li>HTML</li>
					<li>CSS</li>
					<li>JAVA</li>
				</ul>
		web服务器语言：<br/>
				<ul type="circle">
					<li>ASP.NET</li>
					<li>PHP</li>
					<li>JSP</li>
				</ul>
			</font>
	</body>
</html>

有序主要为数字、字母、罗马数字等，其以<ol><li>和type、start属性来使用，格式如下：

<ol type="列表项的标记符" start="起始值">
    <li>123</li>
    <li>123</li>
    <li>123</li>
........
</ol>

tpye取值为数字、大小写英文、大小写罗马数字。

（8）分隔线标记

分隔线可以在html中建立一条水平线，可把文档分成很多个部分，其分隔线标记是<hr>

属性：align对齐方式，三种前面说过；

noshade设置水平线为纯色，无阴影；

size设置水平线高度，单位为像素；

width设置水平线宽度，单位为像素；

color设置水平线颜色；

例子如下：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分隔线标记</title>
	</head>
	<body>
		<center>
		1111
		<hr size="7" width="70%"color="red">
		2222<br/>
		3333<br/>
		</center>
		<hr align="center" color="pink" width="50%">
	</body>
</html>

（9）超链接标记

网页上的超链接一般分为三种：第一种是绝对URL的超链接；第二种是相对URL的超链接；

第三种是同一网页的超链接，这种超链接又被称为书签；

1.文本标记

<a href="目标URL" target="目标窗口">文本</a>

href属性指出文本链接的目标资源URL地址；target属性来指定目标窗口打开链接文档。

target属性值：_blank在新窗口打开目标资源、_self默认值在当前窗口打开资源、_parent在父框架中打开资源、_top在整个窗口中打开资源

例如：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分隔线标记</title>
	</head>
	<body>
		常用的搜索网站
		<ul>
			<li><a href="https://www.baidu.com/">百度</a></li>
		</ul>
	</body>
</html>

2.书签标记

当页面过多时，可以用到书签标记来进行跳转。创建书签一般为两步，创建书签和创建书签链接，其创建书签基本语法结构如下：

<a name="书签名">文字或图片</a>

创建书签链接；链接到同一页面书签定义语法格式：

<a href="#书签名">源端点</a>

链接到不同页面书签定义语法格式：

<a href="file_URL#书签名">源端点</a>

例子如下：

创建书签

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>书签标记</title>
	</head>
	<body>
		常用的搜索网站
		<ul>
			<li><a href="1.html#top1">百度</a></li>
		</ul>
	</body>
</html>

创建书签链接

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分隔线标记</title>
	</head>
	<body>
		常用的搜索网站
		<ul>
			<li><a name="top1">百度</a></li>
		</ul>
	</body>
</html>

（10）图片标记

在HTML语言中使用<img>标记在网页中放入图片，并设置属性。其格式为：

<img src="图片路径" alt="提示文本" height="图片高度" width="图片宽度" />

src和alt是必需的属性，height和width可以修改图片高宽。

例子如下：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标记</title>
	</head>
	<body>
		<img src="csdn.png" alt="图片">
	</body>
</html>

也可以给图片加上超链接

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标记</title>
	</head>
	<body>
		<a href="https://www.csdn.net/">
		<img src="csdn.png" alt="图片">
		</a>
	</body>
</html>

（11）多媒体标记

1.滚动字幕标记

使用<marquee>可以实现图片或文字在网页的跑马灯效果。格式：

<marquee 属性="属性值">文字或图片</marquee>

属性及说明：

behavior指定效果，scroll（滚动）、slide（滑动）、alternate（交替）；

bgcolor指定效果区域颜色；

direction指定效果移动方向，left（向左）、right（向右）、up（向上）、down（向下）；

scrollamount指定每次移动距离，取值为正整数，数值越大移动越快；

scrolldelay指定每次移动的延迟时间，单位毫秒；

truespeed指定效果速度，单位毫秒；

loop指定运行次数，取值为整数，-1为无限循环；

height和width指定高度和宽度；

hspace和vspace指定左右上下的宽度；

例子如下：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动的字幕</title>
	</head>
	<body>
		<marquee behavior="scroll" direction="right" scrollamount="50" scrolldelay="100" bgcolor="red" turespeed="100">
		<img src="G:\web前端程序\html\csdn.png">
		</marquee>
	</body>
</html>

2.加入音频文件

可在网页里加上音乐或者视频，格式如下：

<embed src="音频或视频的文件URL"></embed>

例子如下：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>音频标记</title>
	</head>
	<body>
		<embed src="G:\web前端程序\html\考生录屏点评前端（带封面）.mp4">
	</body>
</html>