html功能（二）

最新推荐文章于 2024-10-11 16:10:25 发布
最新推荐文章于 2024-10-11 16:10:25 发布
阅读量299 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43684686/article/details/106338784
版权

html功能（二）

背景图片设置

<html>

<body background="/i/eg_background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>
</html>

设置图片放置位置

<body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>

在这里插入图片描述

<body>

<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

</body>

在这里插入图片描述

调整图像尺寸

<html>

<body>

<img src="/i/eg_mouse.jpg" width="50" height="50">

<br />

<img src="/i/eg_mouse.jpg" width="100" height="100">

<br />

<img src="/i/eg_mouse.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>
</html>

为图像显示替换文本

<body>


<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>

<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>

<img src="/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>

<img src="/i/eg_goleft123.gif" alt="向左转" />

</body>

在这里插入图片描述

制作图像链接

<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>

在这里插入图片描述

创建图像映射

<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

https://www.w3school.com.cn/tiy/t.asp?f=html_areamap
https://www.w3school.com.cn/tags/tag_area.asp

把图像转换为图像映射

<body>

<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>

<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>

</body>

创建表格

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

创建表格边框

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>

没有边框的表格

<body>

<h4>这个表格没有边框：</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格也没有边框：</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

表格中的表头

<body>

<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<caption>我的标题</caption>
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

</body>

跨行或跨列的表格

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
£•€•×
关注
专栏目录
HTML功能含义,html代码的基本意义都有哪些
weixin_42118011的博客
06-08 1075
html代码的基本意义都有哪些HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包...
HTML简述及作用
平安学习日记
03-07 5794
HTML： 超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接成为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 文本：包含一些普通的文本字符 超文本：在文档中可以包含特殊字符、图片、音乐、视频 标记：用标签讲内容体标记起来 HTML入门案例 创建文...
HTML的作用与功能,css是什么？有什么作用？
weixin_35275922的博客
06-17 1860
css是什么？有什么作用？下面本篇文章就来给大家介绍一下CSS样式表，让大家对CSS有一个简单的了解，希望对大家有所帮助。一、CSS定义与解释CSS是Cascading Style Sheets(层叠样式表单)的简称。CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为“层叠样式表”(Cascading Stylesheet)。在主页制作时采用CSS技术，可以有效地对页面的布局、...
html网页实现分享功能,H5网页实现微信分享功能
weixin_26833205的博客
07-05 3147
H5网页实现微信分享功能一，首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。二，在需要调用JS接口的页面引入微信JSSDK的JS文件 。这个文件在需要分享的页面是...
html表格筛选,js实现表格筛选功能
weixin_42517623的博客
06-05 5066
本应用就两个主要实现：1.表格的id 和 class之间的命名关系请看图： 将组名和个人信息联表格联系起来，这样会很好的操作表格HTML代码：前台设计组张三男浙江宁波李四男浙江宁波胡歌男浙江宁波前台开发组李三男浙江宁波张无忌男浙江宁波孔子男浙江宁波2.就是筛选功能的使用：使用filter联合contains将输入框的字加入contains进行筛选javascript代码：//设置列表查询$("#f...
html 键盘按键与按钮功能关联
让算法融入生活，改变生活！
09-05 6652
键盘中每个按键都对应一个数值，通过匹配进行功能函数得划分，主要使用得是键盘按键事件，onkeydown;案例如下： &lt;!DOCTYPE html&gt; &lt;html &gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt
html简单的二级菜单制作
小坚的技术博客
10-27 1万+
首先看看效果图 具体实现方法如下： 首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。 index.html Title 一级菜单 二级菜单
HTML基础知识点
qq_40046544的博客
07-27 8906
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
用户登录项目第二期——HTML登录页面实现
左耳的博客
08-06 1万+
前言 在简单创建了一个MySQL数据库表后，我们进入第二阶段：HTML登录页面实现。 该片段需要具备一定的html知识 本章所用到的知识有：CSS和HTML（关于JvavScript的有关内容将在后面进行补充） 正文 登录界面我们日常见过许多，比如我们小时候常玩的造梦西游，它的主要内容就是输入账号，密码，一个登录按钮，以及账号注册的区域。 在这里我们主要简单实现两页面：一个登录页面，一个注册页面 先看下登录页面的效果 页面很简单，下面说下页面元素的布局： 首先是最内层的body区.
HTML 返回顶部功能实现
wq_ocean_的博客
02-15 6233
1.首先设置一个返回顶部的标签 <div id="totop"> <a href="javascript:;" id="btn">顶部</a> </div> 如果设置href="#"的话,超链接会自动存在一个瞬间返回顶部的功能，这里为了有效果的返回顶部，我们设置引入一个空脚本 2.在body添加脚本 <scr...
[精华]二十多套后台后管理系统网站模版 HTML，经典实用
05-14
这些压缩包文件包含的是二十多套后台管理系统的HTML模板，非常适合用于快速构建高效、美观的后台界面。HTML模板是预设计的网页结构，通常由HTML、CSS和JavaScript组成，允许开发者快速搭建网站或应用的前端部分，而...
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
热门推荐
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
前端开发笔记--html 黑马程序员2
m0_73805171的博客
10-08 532
路径分为绝对路径和相对路径。
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1399
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
html 之 relative 和 absolute
u010194271的博客
10-09 410
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
《常见 HTML 标签和属性全解析》
一名资深Java工程师的技术分享
10-10 1041
在网页开发的世界里，HTML（超文本标记语言）就像是构建数字大厦的基石。它通过各种标签和属性来定义网页的结构、内容和样式。下面，让我们深入了解一些常见的 HTML 标签和属性。
HTML 常用的块级元素和行内元素
u010194271的博客
10-09 596
块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。
前端开发笔记--html 黑马程序员1
m0_73805171的博客
10-08 1480
VsCode在刚下载完成后默认是英文的，这对我们这些中国程序员来说很不友好，为了解决这个问题我们可以选择在VsCode中安装一个这个插件，在安装并重启VsCode后VsCode便会将语言调整为中文。这个插件能够让我们实时看到我们修改后的代码的效果，而不需要在每次修改后都刷新浏览器。这个插件能够帮助我们进行快捷的修改标签在我们修改前一个·标签，后一个标签也会改动。由于篇幅的原因在这里便简单介绍一下一些比较重要的插件，黑马那边有更加全面的插件。这个插件能够让我们选择想要的浏览器进行预览。1.前端开发框架代码。
QD1-P17 HTML 下拉框标签（select、option）
最新发布
qq_38641599的博客
10-11 350
本节学习：HTML 下拉框标签（select、option）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值