当前位置: 首页 > news >正文

web前端——HTML

目录

一、HTML概述

1.HTML是什么?

2.HTML具体化解释

二、HTML基本语法

1.声明

2. Head头标签

3.body身体标签

4.一个html的基本结构

5.标签

6.标签属性

①属性的格式 

②属性的位置

③添加多个属性

三、基本常用标签

1.超链接

2.图像标签

①图像标签的基本用法

3.特殊符号转义

四、表格

1.表格的基本构成标签

2.表格的基本结构

3.表格属性

五、表单

1.form标签:表单

2.表单——文本

3.表单——其它表单 

4.表单——下拉框

5.表单——多行文本域

6.表单——按钮 


一、HTML概述

1.HTML是什么?

HTML是超文本标记语言 (HyperText Markup Language)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

2.HTML具体化解释

浏览器根据不同的HTML标签,解析成我们看到的网页 

二、HTML基本语法

1.声明

html5的文档声明     <!DOCTYPE html>
!!!如果不声明解析网页时会产生一些不可预期的行为,所以我们应该避免出现

2. Head头标签

!!!Head标签包含了所有的头部标签
● 头部区域的标签标签为:
<title>, <style>, <meta>, <link>, <script>
<title>    标签可定义网页的标题
<meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度               的描述和关键词。
<meta> /<meta charset="utf-8" />标签位于文档的头部
<link rel="icon" href="ico地址">标题处添加图标

● 具体代码实现: 

<!-- 头标签 --><head><meta charset="utf-8" /> <!-- 网页字符集 --><meta name="Keywords"  content="家电,手机"/> <!-- 设置网页关键字,让搜索引擎查找的 --><title>我的第一张网页</title> <!-- 网页标题 --><link href="img/baidu.ico" rel="icon"/><!-- 标题上的图标 --></head>

3.body身体标签

身体标签,用来写网页内容的

<!-- 身体标签,用来写网页内容的 --><body text="yellow" bgcolor="blue">网页内容</body>

4.一个html的基本结构

<!-- <!DOCTYPE html>html5的文档声明 -->
<!DOCTYPE html>
<html><!-- 头标签 --><head><meta charset="utf-8" /> <!-- 网页字符集 --><meta name="Keywords"  content="家电,手机"/> <!-- 设置网页关键字,让搜索引擎查找的 --><title>我的第一张网页</title> <!-- 网页标题 --><link href="img/baidu.ico" rel="icon"/><!-- 标题上的图标 --></head><!-- 身体标签,用来写网页内容的 --><body text="yellow" bgcolor="blue">网页内容</body>
</html>

5.标签

HTML中的标记指的就是标签
HTML使用标记标签来描述网页
结构:
<开始标签> 标签体 </结束标签> 闭合标签(双标签)
          
 <标签名>  属性=""  />完成一个特定的设置功能,没有标签体 自闭和标签(单标签)
      <meta charset="utf-8" />
          <br/> 换行标签

6.标签属性

标签可以拥有属性,属性进一步说明了该标签的显示或使用特性。属性写在标签的开始标签中
, 一个标签可以有多个属性
如:<body text="red" bgcolor="green"> 
 属性名="值"
如:<body text=”red”>

①属性的格式 

属性名 = “属性值“

②属性的位置

<标签名 属性名 = “属性值“ >xxx</标签名>

③添加多个属性

<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

三、基本常用标签

● 标题标签 <h1></h1>…..<h6></h6>

● 段落标签 <p></p>

● 换行标签 <br/>
● 列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
● 超链接<a></a>
● 图像标签<img/>

1.<a>超链接

HTML使用超级链接与网络上的另一个文档相连,通俗的说就是 通过连接来访问其他网页资源。
target:默认值为_self
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
URL(Uniform Resource Locator)统一资源定位符
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 超链接标签href="链接地址"   URL-- 文件的地址target="打开的位置"  _self(默认) 在自己本窗口打开一个新的网页--><a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.baidu.com" target="_blank">百度</a><a href="index.html">首页</a></body>
</html>

 

2.图像标签

①图像标签的基本用法

注!!! 图片的宽高一般不建议使用 

<html><head><meta charset="utf-8"><title></title></head><body><a id="top"></a><a  href="#p1">图片1</a><a  href="#p2">图片2</a><a  href="#p3">图片3</a><a  href="#p4">图片4</a><a  href="#p5">图片5</a><h2><a id="p1"></a>图片1</h2><img src="img/1.png"/><!-- <a id="p1"></a> 在网页中定义一个锚点--><h2><a id="p2"></a>图片2</h2><img src="img/2.png"/><h2><a id="p3"></a>图片3</h2><img src="img/3.png"/><h2><a id="p4"></a>图片4</h2><img src="img/4.png"/><h2><a id="p5"></a>图片5</h2><img src="img/5.png"/><p align="right"><a href="#top">返回顶部</a></p></body>
</html>

3.特殊符号转义

①< 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html签;

②<b> 会被解析为b标签;

③空格,再多的空格都会当一个空格处理;

为了可以使用这些预留字符,我们必须在html中使用字符转义
小于号<                      &lt;
版权(C)                       &copy;
大于号>                     &gt;
商标(TM)                    &trade;
空格                          &nbsp;
注册商标(R)              &reg;  
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>&lt;b&gt;标签的功能是加粗文件百&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度&reg;&copy;&trade;</body>
</html>

 

四、表格

1.表格的基本构成标签

table标签:表格标签
tr标签:     表格中的行
th标签:       表格的表头
td标签:    表格单元格

2.表格的基本结构

<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
tr    表示一个行
th    表示一个单元格,还是表头,内容会加粗,并且居中 设置宽度
td    表示一个普通单元格

3.表格属性

width  表格的宽
height  表格的高
cellspacing 设置内容到 边框和内边距
cellpadding 设置单元格与单元格之间的外边距
align 设置内容水平对齐方式  left center right
valign
cospan 合并列  从哪列开始合并,在哪列添加colspan="合并的数量" 记得删除多余的单元格
rowspan 合并行  跨行合并单元格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" width="400" cellspacing="0"><tr height="40"><th>姓名</th><th>java</th><th width="100">C</th><th>python</th></tr><tr><td>zz</td><td>78</td><td>80</td><td>95</td></tr><tr><td>yy</td><td>78</td><td>80</td><td>95</td></tr><tr><td>ll</td><td>78</td><td>80</td><td>95</td></tr><table></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" width="400" height="300"><tr><td colspan="4" ></td></tr><tr><td></td><td></td><td></td><td rowspan="3"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>

五、表单

1.form标签:表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器

2.表单——文本

3.表单——其它表单 

• 密码框基本语法
<input type=“password ” value=“ 123456 ” />
• 单选按钮基本语法
<input type="radio" value="男" checked="checked“/>
• 复选框基本语法
<input type=“checkbox” name="cb2“ value="talk“/>
!!!注意:单选框通过name属性来分组,name相同是一组才可实现单选。单选和复选不能输入内                  容,所以必须指定value的值
• 文件选择框语法
<input type=“file” name=“img”/>
accept=“.文件后缀名,.文件后缀名… “ 限制文件类型

4.表单——下拉框

● 基本语法

!!!下拉框的name,id,事件等需要在select中定义,而value需要在option中定义

5.表单——多行文本域

● 多行文本域基本语法
<textarea name= "textarea" cols= "40" rows= "6"> 文本域中的内容 </ textarea >

6.表单——按钮 

按钮基本语法

<input type="reset" name="Reset" value=" 重填 ">
type="submit" 提交按钮 触发表单的提交
 type="reset"  重置按钮  让表单回到默认状态
 type="button" 普通按钮  是用来触发事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="server.html" method="get">账号:<input type="text" name="account" value="" placeholder="请输入用户名" /> <br/>	 密码:<input type="password" name="password"/> <br/>	性别:<input type="radio" name="gender" value="男" checked/> 男<input type="radio" name="gender" value="女"/> 女<br/>是否满意:<input type="radio" name="a" value="同意" checked/>同意<input type="radio" name="a" value="不同意"/>不同意<br/>课程: <input  type="checkbox" name="course" value="java" checked/>java	<input  type="checkbox" name="course" value="c"/>c		<input  type="checkbox" name="course" value="sql"/>sql		<input  type="checkbox" name="course" value="html"/>html	<br/>附件: <input  type="file" name="file"/>		<br/>省份: <select name="province"><option>请选择</option><option value="101">北京</option><option value="102" selected>上海</option><option value="103">陕西</option></select> <br/>1111地址:<textarea rows="5" cols="30" name="address">1111</textarea>		<br/><input  type="submit" value="保存"/><br/><input type="reset"/><input  type="button" value="登录" onclick="alert('你好');"/></form></body>
</html>

相关文章:

web前端——HTML

目录 一、HTML概述 1.HTML是什么&#xff1f; 2.HTML具体化解释 二、HTML基本语法 1.声明 2. Head头标签 3.body身体标签 4.一个html的基本结构 5.标签 6.标签属性 ①属性的格式 ②属性的位置 ③添加多个属性 三、基本常用标签 1.超链接 2.图像标签 ①图像标…...

C++的模板(九):模板的实例化问题

前文子系统中的例子&#xff0c; SubSystem内部用了STL库的map模板: template <class Event, class Response> class SubSystem{ public:map<Event*, Response*> table; public:void bind(Event *e, Response *r);void unbind(Event *e); public:int OnMessage(E…...

Clickhouse Projection

背景 Clickhouse一个视图本质还是表&#xff0c;只支持一种order By&#xff0c;不然要维护太多的视图。 物化视图能力有限。 在设计聚合功能时&#xff0c;考虑使用AggregatingMergeTree表引擎&#xff0c;现在有了projections&#xff0c;打算尝试使用一下 操作 ADD PROJE…...

放烟花短视频素材去哪里找?去哪里下载?烟花素材网分享

在当代社会&#xff0c;短视频凭借其独有的魅力成为大众传递情感、记录生活、分享快乐的新兴方式。特别是在庆祝节日和特殊时刻时&#xff0c;烟花的绚丽效果常常被用来吸引观众的目光&#xff0c;成为视频作品中的亮点。然而&#xff0c;对于短视频制作者来说&#xff0c;寻找…...

爬虫笔记14——爬取网页数据写入MongoDB数据库,以爱奇艺为例

下载MongoDB数据库 首先&#xff0c;需要下载MongoDB数据库&#xff0c;下载的话比较简单&#xff0c;直接去官网找到想要的版本下载即可&#xff0c;具体安装过程可以看这里。 pycharm下载pymongo库 pip install pymongo然后在在python程序中我们可以这样连接MongoDB数据库…...

Jenkins教程-10-发送飞书测试报告通知

上一小节我们学习了发送企业微信测试报告通知的方法&#xff0c;本小节我们讲解一下发送飞书测试报告通知的方法。 1、自动化用例执行完后&#xff0c;使用pytest_terminal_summary钩子函数收集测试结果&#xff0c;存入本地status.txt文件中&#xff0c;供Jenkins调用 conft…...

Swift开发——简单App设计

App的界面设计需要具有大量的图像并花费大量的时间,这样的应用不方便学习和交流,这里重点介绍SwiftUI界面元素的用法,通过简单App设计过程的讲解,展示图形用户界面应用程序的设计方法。 01、简单App设计 按照9.1节工程MyCh0901的创建方法,创建一个新的工程MyCh0902,此时工…...

Python操作mysql

一、python连接mysql 1.python连接mysql代码示例 from pymysql import Connection# 获取到mysql数据艰苦的连接对象 conn Connection(hostlocalhost,port3306,userroot,passwordroot ) # 打印mysql数据库软件信息 print(conn.get_server_info()) # 关闭到数据库的连接 conn.…...

监控易产品升级动态:V7.6.6.15版本全面升级

随着信息技术的不断发展&#xff0c;企业对系统监控和数据管理的需求日益增加。为了满足广大用户的实际需求&#xff0c;监控易团队经过不懈努力&#xff0c;成功推出了V7.6.6.15版本&#xff0c;对产品进行了全面升级和优化。本次升级不仅增强了产品的稳定性和可靠性&#xff…...

Vue3 + Element-plus + TS —— 动态表格自由编辑

前期回顾 《 穿越时空的代码、在回首&#xff1a;Evil.js两年后的全新解读 》-CSDN博客 Vue3 TS Element-Plus 封装Tree组件 《亲测可用》_ https://blog.csdn.net/m0_57904695/article/details/131664157?spm1001.2014.3001.5501 态表格 自由编辑 目录 ♻️ 效果图…...

虚拟机配置桥接模式

背景 因为要打一些awd比赛,一些扫描工具什么的,要用到kali,就想着换成一个桥接模式 但是我看网上的一些文章任然没弄好,遇到了一些问题 前置小问题 每次点开虚拟网络编辑器的时候都没有vmnet0,但是点击更改的时候却有vmnet0 第一步: 点击更改设置 第二步: 把wmnet0删掉 …...

星戈瑞DSPE-SS-PEG-CY7近红外花菁染料

DSPE-SS-PEG-CY7是一种具有复杂而精细结构的复合纳米材料&#xff0c;其在生物医学领域的应用增多。该材料结合了磷脂&#xff08;DSPE&#xff09;、聚乙二醇&#xff08;PEG&#xff09;、二硫键&#xff08;SS&#xff09;以及荧光染料&#xff08;CY7&#xff09;的特点&am…...

LeetCode:503. 下一个更大元素 II(Java 单调栈)

目录 503. 下一个更大元素 II 题目描述&#xff1a; 实现代码与解析&#xff1a; 单调栈 原理思路&#xff1a; 503. 下一个更大元素 II 题目描述&#xff1a; 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&…...

代码重构:解读重构概念及重构实战

目录 一.重构是什么(what) 1.重构的本质 2.重构≠性能优化 二.重构的目的(why) 1.去写好的代码 2.去写更灵活的代码 三.重构的时机(when and where) 1.何时重构 2.何时不重构 四.重构的方法(how) 1.重构关键核心 2.重构方法 3.重构工具 小结 一.重构是什么(what)…...

java.util.Optional类介绍

java.util.Optional 是 Java 8 引入的一个容器类,用于表示可能包含或不包含非空值的对象。它的设计初衷是为了减少程序中的空指针异常(NullPointerException),并使代码更加简洁和易读。 Optional 类的介绍 1. 特点 避免显式的 null 检查:使用 Optional 可以避免显式的 n…...

PhotoShop自动生成号码牌文件

1、说明 设计卡牌的时候&#xff0c;遇到自动生成编号&#xff0c;从01500到-02500&#xff0c;一个一个的手写&#xff0c;在存储保存成psd格式的文件&#xff0c;会很耗时。 下面将介绍如何使用ps自动生成psd格式的文件 2、使用excle生成数字 从01500到-02500 第一步&…...

02逻辑代数与硬件描述语言基础

2.1 逻辑代数&#xff08;简单逻辑的运算&#xff09; 2.2 逻辑函数的卡诺图&#xff08;从图论的角度&#xff09;化简法 2.3 硬件描述语言Verilog HDL基础&#xff08;研究生阶段才用得到&#xff09; 要求&#xff1a; 1、熟悉逻辑代数常用基本定律、恒等式和规则。 2、掌握…...

OpenGL3.3_C++_Windows(21)

抗锯齿 遇到模型边缘有锯齿&#xff1a;光栅器将顶点数据转化为片段的方式有关 抗锯齿&#xff1a;产生更平滑的边缘SSAA超采样抗锯齿&#xff1a;使用比正常分辨率更高的分辨率&#xff0c;来渲染场景&#xff0c;它也会带来很大的性能开销。 光栅器&#xff1a; 位于最终处…...

clickhouse学习

ClickHouse学习 安装部署 1.下载rpm文件 下载地址&#xff1a;https://packages.clickhouse.com/rpm/stable/ clickhouse-client-23.2.1.2537.x86_64.rpm clickhouse-common-static-23.2.1.2537.x86_64.rpm clickhouse-common-static-dbg-23.2.1.2537.x86_64.rpm clickhous…...

MySQL高级-索引-使用规则-前缀索引

文章目录 1、前缀索引2、前缀长度3、查询表数据4、查询表的记录总数5、计算并返回具有电子邮件地址&#xff08;email&#xff09;的用户的数量6、从tb_user表中计算并返回具有不同电子邮件地址的用户的数量7、计算唯一电子邮件地址&#xff08;email&#xff09;的比例相对于表…...

外星生命在地球的潜在存在:科学、哲学与社会的交织

外星生命在地球的潜在存在&#xff1a;科学、哲学与社会的交织 摘要&#xff1a;近年来&#xff0c;关于外星生命是否存在的讨论日益激烈。有研究表明&#xff0c;外星人可能已经在地球漫步&#xff0c;这一观点引发了广泛的科学、哲学和社会学思考。本文将从科学角度探讨外星…...

使用FRP 0.58版本进行内网穿透的详细教程

什么是FRP&#xff1f; FRP&#xff08;Fast Reverse Proxy&#xff09;是一款高性能的反向代理应用&#xff0c;主要用于内网穿透。通过FRP&#xff0c;您可以将内网服务暴露给外网用户&#xff0c;无需进行复杂的网络配置。 准备工作 服务器&#xff1a;一台具备公网IP的服…...

0000电子技术基础概述

数电 未来课的基础 以前是模块、器件级 现在是 系统级 价格、性能、 技术更新快速的好处&#xff1a;得到了实惠 坏处&#xff1a;工程师需要不断地学习&#xff0c;不变就容易out&#xff0c;要用发展的眼光看待问题 了解基础知识、还要有前沿概念。 理论课、实践课要相结…...

vscode+platformio使用STC官方库进行51单片机开发 -- 中断异常

问题描述 在进行STC8H1K08单片机的开发时&#xff0c;使用官方提供的C语言库函数&#xff0c;在vscodeplatformio开发环境下发现库函数的串口中断异常&#xff0c;看起来像是中断没有触发。 解决过程 用串口中断时一直没有触发中断&#xff0c;起初没有怀疑是中断的问题&…...

探索Android架构设计

Android 应用架构设计探索&#xff1a;MVC、MVP、MVVM和组件化 MVC、MVP和MVVM是常见的三种架构设计模式&#xff0c;当前MVP和MVVM的使用相对比较广泛&#xff0c;当然MVC也并没有过时之说。而所谓的组件化就是指将应用根据业务需求划分成各个模块来进行开发&#xff0c;每个…...

基于matlab的不同边缘检测算子的边缘检测

1 原理 1.1 边缘检测概述 边缘检测是图像处理和计算机视觉中的基本问题&#xff0c;其目的在于标识数字图像中亮度变化明显的点。这些变化通常反映了图像属性的重要事件和变化&#xff0c;如深度不连续、表面方向不连续、物质属性变化和场景照明变化等。边缘检测在特征提取中…...

CentOS安装ntp时间同步服务

CentOS安装ntp时间同步服务 安装ntp 检查服务器是否安装ntp&#xff1a; rpm -q ntp安装ntp&#xff1a; yum install -y ntp服务端配置 配置文件路径&#xff1a;/etc/ntp.conf 设置ntp为开机启动 systemctl enable ntpd查看ntp开机启动状态 enabled:开启, disabled:关闭 …...

【Linux进阶】UNIX体系结构分解——操作系统,内核,shell

1.什么是操作系统&#xff1f; 从严格意义上说&#xff0c;可将操作系统定义为一种软件&#xff0c;它控制计算机硬件资源&#xff0c;提供程序运行环境。我们通常将这种软件称为内核&#xff08;kerel)&#xff0c;因为它相对较小&#xff0c;而且位于环境的核心。 从广义上…...

PageOffice国产版在线编辑word文件

PageOffice国产版支持统信UOS、银河麒麟等国产操作系统。调用客户端WPS在线编辑word、excel、ppt等文件。在线编辑效果与本地WPS一致。如图所示&#xff1a; web系统集成pageofficeV6.0国产版的文档&#xff1a;PageOfficeV6.0国产版最简集成代码(Springboot) PageOffice最简集…...

Bitmap位图数据排列方式

读取dicom C# 使用fo-dicom操作dicom文件-CSDN博客 创建位图 通过读取dicom得到像素内存&#xff0c;本例单指彩色图像。 Bitmap dataBmp new Bitmap(imageWidth, imageHeight, stride, PixelFormat.Format24bppRgb, dstBmp); 当像素的内存按照RGB的排列模式时&#xff0c…...

购买网站服务器/定制网站制作公司

原文出处http://wenku.baidu.com/view/1f3eb740c850ad02de8041ac.html 编译错误&#xff1a;local function definitions are illegal解决办法 这个没有别的原因就是少了一个右大括号“}”&#xff0c;报错的个数和这个函数的位置有关&#xff0c;好像也和作用域有关&#…...

取消网站备案号/武汉seo优化代理

<head><title></title><script type"text/javascript">//鼠标移动到表格行&#xff0c;被点击的行高亮显示&#xff08;背景是红色&#xff09;&#xff0c;其他行白色背景。监听每个tr的onclick事件&#xff0c;将点击的背景设置为黄色&…...

企业网站建设 安全/关键词提取工具app

el-tree初始化的时候默认选中第一个 先查看https://cloud.tencent.com/developer/section/1489888按照以上方法能不能解决 首先设置node-key 然后设置default-expanded-keys <template><div class"system-tree"><el-tree :data"data" …...

网站开发+进度表/东莞排名优化团队

LocalTime是不可变的时间类&#xff0c;默认格式hh:mm:ss.zzz. 和LocalDate一样&#xff0c;这个类也有时区信息&#xff0c;并且可以通过时分秒创建。 import java.time.LocalTime; import java.time.ZoneId;/*** LocalTime Examples* author somefuture**/ public class Loca…...

企业建设网站的作用/百度建一个网站多少钱

Nginx 标签 &#xff1a; nginx 代理 代理服务可简单的分为正向代理和反向代理: 正向代理: 用于代理内部网络对Internet的连接请求(如VPN/NAT),客户端指定代理服务器,并将本来要直接发送给目标Web服务器的HTTP请求先发送到代理服务器上, 然后由代理服务器去访问Web服务器, 并将…...

wordpress如何配置前端用户中心/关键词查询工具免费

一、HTML_input数值输入框加验证 type类型为“number” 设置最大数300 最小数100 required表示必填项 <input id"id1" type"number" min"100" max"300" required> View Code验证js代码如下 <script>function myFunction…...