网页开发 HTML

目录

HTML概述

HTML结构

HTML标签语法

基本标签

标题标签

换行标签

段落标签

文本格式化标签

特殊符号

div和span标签

超链接标签

锚点

img标签

列表标签

表格标签

表单标签


HTML概述

  • HTML,即超文本标记语言(HyperText Markup Language ]),由SGML (标准通用标记语言) 发展而来,也叫web页面。扩展名是 .html 或是 .htm 。

  • HTML,是一种用来制作网页的标准标记语言。超文本,指的就是超出普通文本范畴的文档,可以包含文本、图片、视频、音频、链接等元素。

  • HTML 不是一种编程语言,而是一种写给网页浏览器、具有描述性的标记语言。

自1990年以来HTML就一直被用作WWW(World Wide Web的缩写,也可简写WEB,中文叫做万维网)的信息表示语言,使用HTML语言描述的文件,需要通过网页浏览器显示出效果。用户在访问网页时,是把服务器的HTML文档下载 到本地客户设备中,然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。

网页本身是一种文本文件,通过在文本文件中添加各种各样的标记标签,可以告诉浏览器如何显示标记中的代表的内容,如:HTML中有的标签可以告诉浏览器要把字体放大,就像word一样,也有的标签可以告诉浏览器显示指定的图片,还有的标签可以告诉浏览器把内容居中或者倾斜等等。

每一个HTML标签代表的意义都不一样。同样,他们在浏览器中表现出来的外观也是不一样的。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

1、<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML文档,在它们之间是文档的头部<head>和主体<body>

3、<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

4、<title></title>定义网页标题,在浏览器标题栏显示。

5、<meta charset="UTF-8"> 声明编码方式用utf8

6、<body></body>之间的文本是可见的网页主体内容

HTML标签语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

1、HTML标签是由尖括号包围的特定关键词

2、标签分为闭合和自闭合两种标签

3、HTML不区分大小写

4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性

5、标签可以嵌套,但是不可以交叉嵌套

基本标签

标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

换行标签

悟道休言天命,<br>
修行勿取真经。<br>
一悲一喜一枯荣,<br>
哪个前生注定?

段落标签

<p>菩提本无树,</p>
<p>明镜亦非台。</p>
<p>本来无一物,</p>
<p>何处惹尘埃。</p>

文本格式化标签

HTML提供了一系列的用于格式化文本的标签,可以让我们输出不同外观的元素,比如粗体和斜体字。如果需要在网页中,需要让某些文本内容展示的效果丰富点,可以使用以下的标签来进行格式化。

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />

特殊符号

&reg; &nbsp; &copy;

&reg; 表示注册商标符号(Registered Trademark Symbol),它用于标识已注册的商标。它通常用于产品、服务或其他商业实体的商标标识。

&nbsp; 表示空格符号(Non-Breaking Space),它用于在HTML和XML等标记语言中插入一个空格,但该空格不会被浏览器或解析器忽略,而是被保留并显示。

&copy; 表示版权符号(Copyright Symbol),它用于表示作品的版权所有者。它通常用于文本、音乐、影片等创作作品的版权声明。

div和span标签

<div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

块级元素与行内元素的区别所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

超链接标签

超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的,用户通过点击超链接可以从一个网页跳转到另一个网页。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时,遇到一个不认识的英文,你只要在这个单词上单击一下,即可跳转到它的翻译页面中,看完单词的解释后点一下返回按钮,又可继续阅读,这就是超链接的常见用途。还有经常到购物网站中去,我们都是在百度搜索,然后点击对应的搜索项进入到对应的购物网站的,这也是超链接的作用。超链接的属性:

属性描述
href网络链接 [ 例如: 百度一下,你就知道 ] 本地链接 [ 例如:F:\html\index.html ]规定链接的跳转目标
title百度链接的提示信息
target_blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页]与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过

1、href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是 网络连接,也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https://这样开头的,如果没有网络,则用户点击了超链接也无法访问对应的目标。

3、本地链接跳转指的是本地计算机的地址,一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的,不需要经过网络。

4、如果href的值留空,则默认是跳转到当前页面,也就是刷新当前页面。

锚点

锚点( anchor )是超链接的一种应用,也叫命名锚记,锚点可以像一个定位器一样,可以实现页面内的链接跳转,运用相当普遍。例如,我们有一个网页,由于内容太多,导致页面很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。又例如,我们页面中,有个链接需要跳转到另一个页面的中间或者脚部去,这时候也可以运用上锚点技术来解决这个问题。

<!DOCTYPE HTML>
<html lang="en-US"><head><title>锚点的使用</title></head><body><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><div id="i1"><p>第一章内容</p></div><div id="i2"><p>第二章内容</p></div><div id="i3"><p> 第三章内容</p></div></body>
</html>

img标签

在HTML中,图像由<img>标签定义的,它可以用来加载图片到html网页中显示。网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg、png、gif。

img标签的属性:

/*
src属性:指定图像的URL地址,是英文source的简写,表示引入资源。src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。alt属性:指定图像无法显示时的替换文本。当图像显示错误时,在图像位置上显示alt的值。如上所示,就是谷歌浏览器中,引入图像失败后,显示了替换文本。alt属性一般	作为SEO优化的手段之一,所以,使用了img标签就需要加上alt属性。
width属性: 指定引入图片的显示宽度。
height属性:指定引入图片的显示高度。
border属性:指定引入图片的边框宽度,默认为0。
title属性:悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

<a><img src="" alt=""></a>

列表标签

  <ul type="square"><li>item1</li><li>item2</li><li>item3</li></ul><ol start="100"><li>item1</li><li>item2</li><li>item3</li></ol>

表格标签

在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样,都是有行有列的。HTML使用tr标签定义行,使用td标签定义列。

语法:

<table border="1"><tr><td>单元格的内容</td>……</tr>……
</table>

1、<table></table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。

2、border用于设置整个表格的边框宽度,默认为0,表示不显示边框。

3、<tr></tr>表示表格中的一行的开始和结束。一组<tr>...</tr>,一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。

4、<td></td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列,多少的单元格了。

table属性

属性描述
widthpx、%规定表格的宽度。
heightpx、%规定表格的高度。
alignleft、center、right规定表格相对周围元素的对齐方式。
bgcolorrgb(x,x,x)、#xxxxxx、colorname规定表格的背景颜色。
backgroundurl规定表格的背景图片。
borderpx规定表格边框的宽度。
cellpaddingpx、%规定单元格边框与其内容之间的空白。
cellspacingpx、%规定单元格之间的空隙。

td属性

表格中除了行元素以外,还有单元格,单元格的属性和行的属性类似。td和th都是单元格。

属性描述
heightpx、%规定单元格的高度。
widthpx、%规定单元格的宽度。
alignleft、center、right规定单元格内容的对齐方式。
valigntop、middle、bottom规定单元格内容的垂直对齐方式。
bgcolorrgb(x,x,x)、#xxxxxx、colorname规定单元格的背景颜色。
backgroundurl规定单元格的背景图片。
rowspannumber规定单元格合并的行数
colspannumber规定单元格合并的列数

表单标签

表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后,就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分:

  • 表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

  • 表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

  • 表单按钮,包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性:

属性描述
action访问服务器地址服务器端表单处理程序的URL地址
methodpost、get[默认值]表单数据的提交方法
target参考超链接的target属性表单数据提交时URL的打开方式
enctypeapplication/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]表单提交数据时的编码方式
  <h3>用户注册</h3><form action="http://127.0.0.1:8800" method="get"><p><label for="user">姓名</label>: <input type="text" name="user" id="user"></p><p>密码: <input type="password" name="pwd"></p><p>爱好:<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球</p><p>性别:<input type="radio" name="gender" value="men">男<input type="radio" name="gender" value="female">女<input type="radio" name="gender" value="qita">其他</p><p>生日:<input type="date" name="birth"></p><p>籍贯:<select name="province" id="" multiple size="2"><option value="">广东省</option><option value="" selected>山东省</option><option value="">河北省</option></select></p><p><textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea></p><div><p><input type="reset" value="重置"></p><p><input type="button" value="普通按钮"></p><p><button>普通按钮</button></p><p><input type="submit" value="提交"></p></div></form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/191861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Fiddler抓包工具之高级工具栏中的重定向AutoResponder的用法

重定向AutoResponder的用法 关于Fiddler的AutoResponder重定向功能&#xff0c;主要是时进行会话的拦截&#xff0c;然后替换原始资源的功能。 它与手动修该reponse是一样的&#xff0c;只是更加方便了&#xff0c;可以创建相应的rules&#xff0c;适合批处理的重定向功能。 …

tar文件覆盖漏洞 CVE-2007-4559

文章目录 前言原理例题 [NSSRound#7 Team]新的博客方法一 手搓文件名方法二 python脚本 前言 做到[NSSRound#6 Team]check(Revenge)时发现是tar文件覆盖&#xff0c;但是对概念和执行过程理解不够深就光光记住脚本&#xff0c;所以在做本题[NSSRound#7 Team]新的博客时打算重新…

数据链路层之VLAN基本概念和基本原理

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

笔记-基于CH579M模块通过网线直连电脑进行数据收发(无需网络)

刚学习&#xff0c;做个记录。 基于CH579M模块通过网线直连电脑进行数据收发(无需网络) 目录 一、工具1、CH579模块2、 网线3、电脑以及网络调试工具 二、操作步骤1、TCP/UDP等程序下载以及设置以太网IP2、网络断开3、检查以太网是否正常显示并稳定4、打开网络调试助手进行测试…

揭秘原型链:探索 JavaScript 面向对象编程的核心(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【Android】Android Framework系列--Launcher3桌面图标加载流程

Launcher3桌面加载流程 Android Launcher3(简称Launcher&#xff09;启动后会加载桌面。基于Android12代码&#xff0c;分析一下桌面加载的流程。 一些相关的概念&#xff1a; WorkSpace&#xff1a;桌面。在桌面上可以添加快捷方式、Hoseat或Dock&#xff08;就是手机或者车…

项目中遇到的半导体公司

作为一个技术人&#xff0c;我并不是亲美&#xff0c;从技术的实事求是角度讲&#xff0c;不得不感叹欧美的半导体技术。他们的datasheet能学到的东西太多太多&#xff1b;我甚至佩服他们缜密的逻辑。从他们的文章中领悟我们技术到底有多low&#xff0c;没办法一个一个了解所有…

【重点】【双指针】11. 盛最多水的容器

题目 注意&#xff1a;二维接雨水&#xff0c;有墙的&#xff0c;有线的&#xff0c;着这个属于线的。 class Solution {public int maxArea(int[] height) {if (height.length < 2) {return 0;}int left 0, right height.length - 1, res 0;while (left < right) {…

avue-crud中时间范围选择默认应该是0点却变成了12点

文章目录 一、问题二、解决三、最后 一、问题 在avue-crud中时间范围选择&#xff0c;正常默认应该是0点&#xff0c;但是不知道怎么的了&#xff0c;选完之后就是一直是12点。具体问题如下动图所示&#xff1a; <template><avue-crud :option"option" /&g…

【已解决】if lock.acquire(block, timeout):KeyboardInterrupt

问题描述 Traceback (most recent call last): File "/media/visionx/monica/project/ResShift/app.py", line 134, in <module> demo.launch(shareFalse) File "/home/visionx/anaconda3/envs/ResShift/lib/python3.9/site-packages/gradio/bloc…

Linux文件系统 -- inode和block

目录 重要参数目录项fsck软连接&#xff0c;硬链接 重要参数 dumpe2fs /dev/sda1|more查看ext4文件元数据&#xff08;描述文件系统的数据&#xff09;&#xff0c;xfs_info查看xfs文件系统 superblock&#xff1a;超级块&#xff0c;记录此file system的整体信息&#xff0c…

每日一练:冒泡排序

1. 概述 冒泡排序&#xff08;Bubble Sort&#xff09;也是一种简单直观的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排…

Vue---Echarts

项目需要用echarts来做数据展示&#xff0c;现记录vue3引入并使用echarts的过程。 1. 使用步骤 安装 ECharts&#xff1a;使用 npm 或 yarn 等包管理工具安装 ECharts。 npm install echarts 在 Vue 组件中引入 ECharts&#xff1a;在需要使用图表的 Vue 组件中&#xff0c;引入…

Linux 设置程序开机自启动的方法

目录 前言开机自启动参考 前言 CentOS Linux release 7.9.2009 (Core) 开机自启动 shell> vim /etc/rc.d/rc.local添加开机后执行的命令 sh /xxx/xxx.sh参考 https://www.cnblogs.com/xlmeng1988/archive/2013/05/22/3092447.html

软件工程导论学习资料

软件工程的概述&#xff1a;软件工程就是为了经济地获得可靠的且能在实际机器上有效地运行的软件&#xff0c;而建立和使用完善的工程原理。Software engineering is to establish and use sound engineering principles in order to economically obtain reliable software th…

深入理解Java中的锁机制

引言 大家好&#xff0c;我是小黑。今天咱们来聊聊Java中的锁机制&#xff0c;这可是并发编程的核心。你知道吗&#xff0c;在并发编程的世界里&#xff0c;正确地使用锁就像是掌握了一把神奇的钥匙&#xff0c;它能帮咱们在多线程的混战中保持秩序&#xff0c;防止数据被乱改…

【JavaSE】API(学习笔记)

一、Math 包含执行基本数字运算的方法没有构造方法&#xff0c;但方法是静态的&#xff0c;可以用类名直接调用 1、Math类常用方法 1&#xff09;绝对值&#xff1a;abs public static int abs(int a)2&#xff09;小数的最近整数&#xff1a;ceil(最小整数) / floor(最大整…

【AI】基于已有模型训练自己的模型(迁移)

实际工作中&#xff0c;我们可能缺乏算力去从头到尾训练一个模型&#xff0c;使用别人训练好的模型&#xff08;通常是经典模型&#xff09;就成了一个很好的选择&#xff0c;这样我们就不需要设置每一层的初始参数&#xff0c;极大的提高了训练的效率&#xff1b;但是在使用别…

Python中的加法测试题实现

随机生成5道10以内的加法测试题&#xff0c;用户在10秒内使用键盘输入答案。完成全部5道答题之后&#xff0c;计算机生成答题记录报告&#xff0c;并对答题情况进行分析&#xff0c;显示“答对了”&#xff0c;或“答错了”、并显示正确答案。如果未能按时完成&#xff0c;则显…

opencv知识库:基于cv2.flip()函数对图像进行随机翻转(水平/垂直)

需求场景 欲对RGB格式的lena图像进行随机翻转&#xff0c;要求这些图像不翻转、水平翻转、垂直翻转的概率都为1/3。 功能代码 import cv2 import random# 读取并展示图像 img cv2.imread("lena.jpg") cv2.imshow(lena, img) cv2.waitKey(0)for i in range(6): #…