web前端之HTML超文本标记语言

最新推荐文章于 2022-09-05 18:53:35 发布

C_teacher

最新推荐文章于 2022-09-05 18:53:35 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/C_teacher/article/details/104353011

版权

01 Web前端开发介绍

Web概述

在这里插入图片描述
1）什么是Web开发?

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷

2）核心技术

HTML语言
掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。
随着CSS、JavaScript、Flash等技术的发展，Web对于应用的处理能力逐渐增强，用户浏览网页的体验已经有了较大的改善。不过HTML5中的几项新技术实现了质的突破，使得Web技术首次被认为能够接近于本地原生应用技术，开发Web应用真正成为开发者的一个选择。
HTML5可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为HTML5技术的主要优点之一。AppMobi、摩托罗拉、Sencha、Appcelerator等公司均已推出了较为成熟的开发工具，支持HTML5应用的发展。
CSS
学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
JavaScript
学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
BOM
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
AJAX
AJAX是一种客户端Web开发技术，用于生成交互式Web应用程序。AJAX是一种开发应用程序的方法，它结合了下面的功能，使用JavaScript将它们组合在一起。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
jQuery
jQuery 是一个简洁而快速的 JavaScript 库，可用于简化事件处理，HTML 文档遍历，Ajax 交互和动画，以便快速开发网站。jQuery 简化了 HTML 的客户端脚本，从而简化了 Web 2.0 应用程序的开发。

Web起源

1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站

1989年CERN（欧洲粒子物理研究所）中由Tim Berners-Lee领导的小组提交了一个针对Internet的新协议和一个使用该协议的文档系统，该小组将这个新系统命名为World Wide Web，它的目的在于使全球的科学家能够利用Internet交流自己的工作文档。

这个新系统被设计为允许Internet上任意一个用户都可以从许多文档服务计算机的数据库中搜索和获取文档。1990年末，这个新系统的基本框架已经在CERN中的一台计算机中开发出来并实现了,1991年该系统移植到了其他计算机平台，并正式发布。
在这里插入图片描述

Web的特点

1.易导航和图形化界面
2.与平台无关
3.分布式结构
4.动态性
5.交互性

Web工作原理

在这里插入图片描述
1、用户在浏览器中输入要访问的web站点地址或在已打开的站点点击超链接
2、由DNS进行域名解析，找到服务器的IP地址，向该地址指向的web服务器发出请求
3、web服务器根据请求将URL地址转换为页面所在的服务器上的文件全名，查找相应的文件
4、
若URL指向静态文件，则服务器将文件通过http协议传输给用户浏览器；若HTML文档中嵌入了ASP,PHP,JSP等程序，则由服务器直接运行后返回给用户；如果web服务器所运行程序包含对数据库的访问，服务器会将查询指令发送给数据库服务器，对数据库执行查询操作，查询结果由数据库返回给web服务器，再由web服务器将结果潜入页面，并以html格式发送给浏览器
5、浏览器解释html文档，在客户端屏幕上展示结果。
其中涉及到的协议有：

应用层：HTTP(WWW访问协议)，DNS(域名解析服务)
传输层：TCP(为HTTP提供可靠的数据传输)，UDP(DNS使用UDP传输)
网络层：IP(IP数据数据包传输和路由选择)，ICMP(提供网络传输过程中的差错检测)，ARP(将目的主机的IP地址映射成MAC地址)

URL介绍

URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子：
http://www.westos.org/bbs/index.html

02 HTML网页结构

HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。

超文本指的是超链接
标记指的是标签

1).HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑.
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

HTML的基本结构

在这里插入图片描述

<!--html的注释-->
<!DOCTYPE html>   <!--声明html使用的版本是html5-->
<!--html文档-->
<html lang="en">


<!--html的头部，在页面中不会显示-->
<head>
<!--    声明html文档的编码格式-->
    <meta charset="UTF-8">
<!--    页面的标题-->
    <title>西部开源技术中心</title>
</head>

<!--html的主体，在页面中真正显示的内容-->
<body>
<h1 style="color: blue">标题一</h1>
<h2 style="color: blue">标题一</h2>
<h3 style="color: blue">标题一</h3>
<h4 style="color: blue">标题一</h4>
<h5 style="color: blue">标题一</h5>
<h6 style="color: blue">标题一</h6>
<!--<h7 style="color: blue">标题一</h7>-->
<!--没有h7标签，就是普通文本-->
<!--标题标签是快级元素-->
</body>
</html>

这里介绍一个专门用于Web前端开发的软件——WebStorm，这个软件可以在官网直接下载安装即可。(官网界面如下图），这个软件在Web前端开发过程中比较方便，并且也比较轻量。

文档类型

目前常用的两种文档类型是xhtml 1.0和html5
在这里插入图片描述

文档规范与注释

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

所有的标签必须小写
所有的属性必须用双引号括起来
所有标签必须闭合
img必须要加alt属性(对图片的描述)

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
快捷键ctrl+/

03 HTML标签

文本标签

在这里插入图片描述

<!--html的注释-->
<!DOCTYPE html>   <!--声明html使用的版本是html5-->
<!--html文档-->
<html lang="en">


<!--html的头部，在页面中不会显示-->
<head>
<!--    声明html文档的编码格式-->
    <meta charset="UTF-8">
<!--    页面的标题-->
    <title>西部开源技术中心</title>
</head>

<!--html的主体，在页面中真正显示的内容-->
<body>
<h1 style="color: blue">标题一</h1>
<h2 style="color: blue">标题一</h2>
<h3 style="color: blue">标题一</h3>
<h4 style="color: blue">标题一</h4>
<h5 style="color: blue">标题一</h5>
<h6 style="color: blue">标题一</h6>
<!--<h7 style="color: blue">标题一</h7>-->
<!--没有h7标签，就是普通文本-->
<!--标题标签是快级元素-->
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的文本标签</title>
</head>
<body>
<i>斜体<i>
    hg
    hgjh
<em>斜体<em>
<b>加粗<b>
<strong>加粗<strong><br>
    <hr>
<cite>引用<cite>
    X<sub>1</sub> = pi * r <sup>2</sup>
    原价: <del>100</del>
    现价: <b style="color: aqua">10</b>
<strong>今天</strong>
    <hr>
 <p>   整体缩进：鼠标拉选住代码块，按下tab键。</p>

    <p>反向缩进：鼠标拉选住代码块，按下tab+shift键。</p>

</body>
</html>

在这里插入图片描述

换行标签

在这里插入图片描述

列表标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<h1>无序标签:四大名著</h1>
<ul type="square">
<!--   type的类型有:
disc     实心圆
square   方块
circle   空心圆
-->
    <li>西游记</li>
    <li>红楼梦</li>
    <li>三国演义</li>
    <li>水浒传</li>
</ul>

<h1>有序列表:四大名著</h1>
<ol type="i">
<!--    type:
1
A
a
I
i-->
    <li>西游记</li>
    <li>红楼梦</li>
    <li>三国演义</li>
    <li>水浒传</li>
</ol>
<dl>
    <dt>四大名著</dt>
    <dd>西游记</dd>
    <dd>水浒传</dd>
    <dd>红楼梦</dd>
    <dd>三国演义</dd>
</dl>

</body>
</html>

在这里插入图片描述

div与span标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span</title>
</head>
<body>
<!--快级元素：一个元素占一整行-->
<div style="font-size: 30px;border: blue 1px solid; background: aqua">
    div标签
</div>
<!--行内元素：一个元素占的为值取决于标签的内容-->
<span style="font-size: 20px;border: blue 1px solid">
    span标签
</span>
</body>
</html>

在这里插入图片描述

图片标签img

img 标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
属性：

src: 图片名及url地址
title：文字提示属性
alt: 图片加载失败时的提示信息
width/height：图片宽度/高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="detail.html">
    <img src="电脑.jpg" alt="电脑" title="电脑"><br><hr>
    </a>
<!--
text-align 字体显示的位置(left/right/center)
-->

<div style="width: 220px;text-align: center">
    <b>联想(Lenovo)天逸510S 英特尔酷睿i3 个人商务台式机电脑整机(i3-9100 8G 1T WiFi 三年上门 Win10)21.5英寸 九代酷</b><br>
    <span style="color: crimson">￥ 9999  <del>￥10000</del></span>
</div>
</body>
</html>

在这里插入图片描述

超链接标签

< a href=" ">…< /a > 超级链接标签
属性：

href: 必须，指的是链接跳转地址;
target: 表示链接的打开方式。
_blank 新窗口 ,
_self 本窗口（默认）
title：文字提示属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a标签是行内元素，href指定的是跳转的链接地址，target指定是否开启新窗口打开链接-->
<a href="https://www.baidu.com" >百度一下</a>
<a href="https://www.baidu.com" target="_blank" title="test">百度一下</a>

<h1>图片链接</h1>
<a href="https://www.baidu.com">
    <img src="头像.jpg" alt="diannao" title="diannao">
</a>
</body>
</html>

在这里插入图片描述
项目案例：新闻标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻标签</title>
</head>
<body>
<h3 style="color: cadetblue">焦点新闻</h3>
<font size="2">FOCAL NEWS</font><hr>
<a href="#" >
    <b style="color: black"><font size="5">。。。</font></b>
</a><br>
<a href="#" >
    <font size="5" style="color: black">。。。</font>
</a>
<ul style="size: A5">
    <a href="#"><li><font size="5">。。。<font></font></li></a>
    <a href="#"><li>。。。</li></a>
    <a href="#"><li>。。。</li></a>
</ul>
</body>
</html>

==锚点链接的实现
实现不同的章节的跳转
锚点链接：
1. 定义一个锚点：
~~< a id=“a1”> 百度一下 < a name=“a1”>~~
2. 使用锚点：
< a href="#a1">跳到a1处< /a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点：跳转到当前页面某个位置</title>
</head>
<body>
<h1>锚点</h1>
<a href="#a1">跳转到a1</a>
<a href="#a2">跳转到a2</a>


<h2 id="a1">标题一</h2>
<p>
    ....
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="a2">标题二</h2>
<p>
   ....
</p>
</body>
</html>

表格标签

在 HTML 文档中,广泛使用表格来存放网页上的文本和图像
在这里插入图片描述
标签:

表格标签:table
行标签:tr
单元格(表示列的概念):td
表头:th :加粗并且居中
表格标题:caption

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--
表格标签：
border边框、align排列方向、bgcolor背景颜色、width表格宽度、height表格高度
style=“text-align:center” 表格的单元格字体居中
-->
<table border="1px" align="center" width="500" bgcolor="#faebd7" style="text-align: center;color: blue">
    <caption>表格标题</caption>
    <tr>
<!--        自动加粗-->
        <th>姓名</th>
        <th>年龄</th>
        <th>分数</th>
    </tr>
<!--创建三行表格-->
    <tr>
<!--在每一行创建三列-->
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
标签合并:
- 行合并:rowspan
- 列合并:colspan
标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
center,left,right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--width="50%" 意思是表格宽度占页面的50%-->
<table border width="50%" align="center" style="text-align: center;border: plum ">
    <tr>
        <td colspan="3">星期一菜单</td>

    </tr>
    <tr>
        <td rowspan="2">素菜</td>
        <td>清炒茄子</td>
        <td>花椒便单</td>
    </tr>
    <tr>
        <td>小从豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan="2">荤菜</td>
        <td>油闷大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉 <img src="头像.jpg"></td>
        <td>烤全羊</td>
    </tr>
</table>

</body>
</html>

在这里插入图片描述

form表单标签

常用属性：

action属性:提交的目标地址(URL)
method属性:提交方式:get(默认)和post
get方式:
- URL地址栏可见
- 长度受限制
- 相对不安全.
  post方式:
- URL地址不可见
- 长度不受限制
- 相对安全.
  案例:登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<h1>用户登录</h1><hr>-->
<!--<form action="success.html" method="get">-->
<!--    用户名：<input type="text"><br>-->
<!--    密码：  <input type="password"><br>-->
<!--&lt;!&ndash;    value值是按钮里面的文字信息，可以修改&ndash;&gt;-->
<!--    <input type="submit" value="登陆">-->
<form action="success.html" method="get">
<h1 style="text-align: center">用户登陆</h1><hr>
<table  width="20%" align="center">
    <tr>
        <td style="text-align: right">用户名</td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td style="text-align: right">密码</td>
        <td><input type="password"></td>
    </tr>
    <tr style="text-align: center">
        <td colspan="2"><input type="submit" value="登陆"></td>
    </tr>
</table>
</form>
</body>
</html>

在这里插入图片描述
form中的action属性：将填入的数据提交到指定位置，一般情况下是后台服务器
method属性：指定提交的方式一般有get和post两种方式
get方式提交后会在URL中显示提交的内容，不安全，用来提交不重要的信息
post方式提交后不会在URL中显示提交的内容，这样更安全
如下:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户登录</h1>
<!--
action:将填入的数据提交到指定位置，一般情况下是后台服务器
-->
<!--在input中一定要指定name属性，代表将用户传入的用户名赋值给username变量-->
<form action="#" method="get">
    用户名：<input type="text" name="用户名"><br>
    密码：  <input type="password" name="密码"><br>
<!--    value值是按钮里面的文字信息，可以修改-->
    <input type="submit" value="登陆">
</form>
</body>
</html>

在这里插入图片描述
将get改为post后结果如下：

表单项标签
< input> 表单项标签input定义输入字段，用户可在其中输入数据。
在 HTML 5 中，type 属性有很多新的值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户登录</h1>
<!--
action:将填入的数据提交到指定位置，一般情况下是后台服务器
-->
<!--在input中一定要指定name属性，代表将用户传入的用户名赋值给username变量-->
<form action="#" method="get">
    用户名：<input type="text" name="用户名"><br>
    密码：  <input type="password" name="密码"><br>
<!--    多选框-->
    <input type="checkbox" name="hobby" value="0">编程
    <input type="checkbox" name="hobby" value="1">打篮球
    <input type="checkbox" name="hobby" value="2">睡觉
    <br>
<!--    单选框-->
    <input type="radio" name="性别" value="1">男
    <input type="radio" name="性别" value="2">女<br>
    出生日期：
    <input type="date" name="birth"><br>
<!--    文件上传选择框-->
    个人简历：
    <input type="file" name="interview">
    <br>
<!--    重置-->
    <input type="reset" value="重置">
<!--    value值是按钮里面的文字信息，可以修改-->
    <input type="submit" value="登陆">

</form>
</body>
</html>

在这里插入图片描述

项目案例

邮件登陆系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table align="center" style="width: 600px;height: 360px;background-image: url('./timg.jpg') ">
        <tr style="height: 10%"></tr>
        <tr>
            <td width="60%"></td>
            <td colspan="2" align="center" height="20%"><h3>用户登录</h3></td>
        </tr>
        <tr>
            <td width="60%"></td>
            <td style="text-align: right">用户名</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td width="60%"></td>
            <td style="text-align: right">密码</td>
            <td><input type="password"></td>
        </tr>
        <tr style="text-align: center">
            <td width="60%"></td>
            <td colspan="2"><input type="submit" value="进入邮箱">
            <input type="reset" value="重新填写"></td>
        </tr>
        <tr>
            <td width="60%"></td>
            <td colspan="2" align="center">
            <a href="#">找回密码</a>
            <a href="#">注册新用户</a>
            </td>
        </tr>
</table>
</body>
</html>

在这里插入图片描述

文本域标签

< textarea>…< /textarea> 多行的文本输入区域
- name :定义名称,用于存储文本区域中的值。
- cols ：规定文本区内可见的列数。
- rows ：规定文本区内可见的行数。
- disabled：是否禁用
- readonly：只读

下拉列表标签

< select>…< /select> 标签创建下拉列表。

name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选

< option>… < /option> 下拉选择项标签,用于嵌入到标签中使用的;

*value属性:下拉项的值
*selected属性:默认下拉指定项.

按钮标签

< button>…< /button> 标签定义按钮。

< fieldset>…< /fieldset> 元素可将表单内的相关元素分组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <fieldset>
        <legend>个人信息：</legend>
        姓名：<input type="text"><br>
        年龄：<input type="text"><br>
    </fieldset>
    <br>
    <br>
    <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text"><br>
        体重：<input type="text"><br>
    </fieldset>
    <button>按钮一</button>
    <button>按钮二</button>
    性别：
    <select name="sex">
        <option value="0">男</option>
        <option value="1">女</option>
    </select>
</form>
</body>
</html>

在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    请选择你的出生地：
    <select name=" birthcity">
        <option value="0">郑州</option>
        <option value="1">西安</option>
    </select><br>
    <b>***********留言板*************</b><br>
    <textarea name="留言" rows="10" cols="50" placeholder="请在这里输入。。。">

    </textarea><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置"><br>
    *****请选择你要上传的文件*****<br>
    <input type="file" name="file">
    
</form>
</body>
</html>

在这里插入图片描述

html内嵌框架

标签会创建包含另外一个html文件的内联框架(即行内框架)， - src属性来定义另一个html文件的引用地址 - frameborder属性定义边框, - scrolling属性定义是否有滚动条, 可以将内嵌框架与a标签配合使用 a标签的target属性可以将链接的页面直接显示在当前页面的iframe中： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200218100643238.png) 实验： ```html Title 页面一页面二页面三 ```