HTML代码示例和介绍
2024-05-11 03:03:04
HTML基本的格式
<!DOCTYPE html> <!-- 声明文档。定义html -->
<html lang="en"> <!-- 元素是页面的根元素 -->
<head> <!-- 元素包含文档的元数据 --><meta charset="UTF-8"> <!-- 定义网页编码格式 --><title>第一个项目</title> <!-- 元素描述了文档的标题-->
</head>
<body><!--元素包含了页面可以看见的内容。定义文档主体。--><p>这个p是段落。可以把很多文字放到里面去。比如这是一段文字。</p><p>这是另一个段落。</p><h1>这是h1标题</h1><!-- 通过<h1>-<h6>标签来定义 --><h2>这是h2标题</h2><h3>这是h3标题</h3><h4>这是h4标题</h4><h5>这是h5标题</h5><h6>这是h6标题</h6><hr><!--定义水平线--><p>这是一个段落。插入图片</p><a href="www.baidu.com">这是跳转到的百度链接</a> <!--<a>标签来定义。在 href 属性中指定链接的地址。--><br><!--换行--><img src="data:images/one.jpg" alt="" width="500" height="500"> <!--图像是通过标签 <img> 来定义的。 --><img src="data:images/two.jpg" alt="" width="500" height="500"><hr>
<!--文本格式化的标签--><b>这是一句话。定义粗体</b><em>这是一句话。定义着重文字</em><i>这是一句话。定义斜体</i><small>这是一句话。定义小字号</small><strong>这是一句话。定义加重语气</strong><p>插入<sub>这是一句话</sub>定义下标字</p><p>插入<sup>这是一句话</sup>定义上标字</p><ins>这是一句话。定义插入字</ins><del>这是一句话。定义删除字</del>
<!-- 计算机输出标签 --><hr><p>这是计算机输出标签</p><code >#定义计算机代码print("hello world!")</code><br><kbd>定义键盘码</kbd><br><samp>定义计算机代码样本</samp><br><var>定义变量</var><pre>定义预格式文本</pre><p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p>
<!-- HTML 引文 引用 标签定义 --><hr><abbr title="">定义缩写</abbr><address>定义地址</address><p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p><blockquote>定义长的引用</blockquote><q>定义短的引用</q><br><cite>定义引用、引证</cite><br><dfn>定义一个定义项目</dfn>
</body>
</html>
页面的展示：
头文件标签的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>这是一个标题</title><base href="www.baidu.com"> <!--定义页面链接标签的默认链接地址--><link rel="stylesheet" href="lesson01.html"><!--定义一个文档和外部资源之间的联系--><meta name="lizhe" content="web开发"><!-- 定义HTML文档中的元数据--><script></script><!--定义客户端的脚本语言--><style></style> <!--定义HTML文档的样式文件-->
</head>
<body>
</body>
</html>
HTML图片的运用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>img</title>
</head>
<body><b>来自本地文件夹的图片</b><p>这是一张图片</p><img src="data:images/three.jpg" alt="view" width="300" height="200"><p>这是一张动图</p><img src="data:images/haha.gif" alt="do" width="300" height="200"><hr><p>来自网站的图片</p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603976446&di=919d66677c39ad3198f97c54cc1d1982&imgtype=jpg&er=1&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F213205624b29002ace7d11f2c546016400c10750.png" alt="" width="300" height="100"><p>这是一个微笑 <img src="data:images/smile.jpg" align="bottom" alt="smile" width="70" height="70"> 这是一个微笑</p><p>这是一个微笑 <img src="data:images/smile.jpg" align="middle" alt="smile" width="70" height="70"> 这是一个微笑</p><p>这是一个微笑 <img src="data:images/smile.jpg" align="top" alt="smile" width="70" height="70"> 这是一个微笑</p><p>注意:在HTML 4中 align 属性已废弃 HTML5已不支持该属性 可以使用 CSS 代替。</p><p>创建图片链接<a href="www.baidu.com"><img border="5" src="data:images/smile.jpg" alt="smile" width="50" height="50" align="middle"></a></p><hr><p>map的使用</p><img src="data:images/four.jpg" alt="pepple" width="400" height="400" usemap="#view"><map name="view"><area shape="rect" coords="0,0,100,100" href="images/smile.jpg" alt="01"><area shape="circle" coords="300,300,100" href="images/smile.jpg" alt="02"><area shape="circle" coords="300,100,10" href="images/smile.jpg" alt="03"></map></body>
</html>
表格和列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table and list</title>
</head>
<body><h3 style="color:green">下面开始建立一个表格</h3><table border="1" cellpadding="10" cellspacing="10"> <!-- border代表边框的粗细。为0时就没有边框了。cellpadding设置表格内的边距--><!--cellspacing设置单元格间距 --><caption><b>学生基本信息</b></caption> <!--添加表头信息--><!-- --><tr><th>姓名</th><th>年龄</th><th>体重(kg)</th></tr><tr><td>小明</td><td>20</td><td>67</td></tr><tr><td>大白</td><td>23</td><td>75</td></tr><tr><td>李白</td><td>28</td><td>80</td></tr></table><h3 style="color:green">跨行或跨列的表格</h3><table border="1"><tr><th>职业</th><th>收入</th><th colspan="3">手机号两个到三个联系方式</th></tr><tr><td>老师</td><td>5000</td><td>182222</td><td>182222</td><td>182222</td></tr><tr><td>医生</td><td>7000</td><td>19999</td><td>19999</td><td>-</td></tr></table><br><table border="1"><tr><th>姓名</th><td>小黑</td></tr><tr><th rowspan="3">电话号</th><td>182222</td></tr><tr><td>189999</td></tr><tr><td>133333</td></tr></table>
<h3 style="color:green">表格内的标签</h3><table border="1"><tr><td><p>这是一个段落</p><p>另一个段落</p></td><td><p>这个段落中还有一个表格</p><table border="1"><tr><td>姓名</td><td>qq/微信/电话</td></tr><tr><td>baby</td><td>我不加你哈哈</td></tr></table></td><td>How are you！</td></tr><tr><td><p>这里面还有一个列表</p><ul><li>red</li><li>blue</li><li>black</li></ul></td><td><img src="data:images/smile.jpg" alt="" width="50" height="50"><p>这是一张图片</p></td><td><p>这是一个链接</p><a href="www.baidu.com">百度一下吧</a></td></tr></table><h3 style="color:blue">下面是列表的使用</h3><b>无序列表：</b><ul><li>apple</li><li>banana</li><li>pear</li></ul><b>有序列表：</b><ol><li>apple</li><li>banana</li><li>pear</li></ol><ol type="A"> <!-- 根据type属性来设置排序列表的类型。--><li>apple</li><li>banana</li><li>pear</li></ol><ul style="list-style-type:circle"><li>apple</li><li>banana</li><li>pear</li></ul><h4>嵌套列表：</h4><ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea</li></ul></li><li>Milk</li></ul><h4>嵌套列表：</h4><ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea<ul><li>China</li><li>Africa</li></ul></li></ul></li><li>Milk</li></ul><h4>一个自定义列表</h4><!--dt为自定义列表项目 定义自定列表项的描述--><dl><dt>fruit</dt><dd>- apple</dd><dd>- banana</dd><dt>food</dt><dd>- dumping</dd><dd>- hamburger</dd></dl>
</body>
</html>
网页示例：
HTML代码示例和介绍相关推荐
- java kryo_Kryo框架使用方法代码示例
Kryo框架的source已移至https://github.com/EsotericSoftware/kryo ,进入此页面,然后点击右边的Download Zip按钮,就能下载到最新版本的Kryo ...
- 【Groovy】集合遍历 ( 使用集合的 findAll 方法查找集合中符合匹配条件的所有元素 | 代码示例 )
文章目录 一.使用集合的 findAll 方法查找集合中符合匹配条件的所有元素 1.闭包中使用 == 作为 findAll 方法的查找匹配条件 2.闭包中使用 is 作为 findAll 方法的查找匹 ...
- php控制文本换行,css如何控制文字换行方式？（代码示例）
css如何控制文字换行方式?本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)强制换行.强制不换行且隐藏超出部分的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一. ...
- C#摄像头实现拍照功能的简单代码示例
C#摄像头实现拍照功能的简单代码示例 2009-11-20 来自:网上整理字体大小:[大中小] ·摘要:这里将介绍一个C#摄像头实现拍照功能的简单代码示例,代码虽然不短,但是基本上实现了相对应的功能 ...
- php运行js代码,如何在PHP中运行JavaScript代码？（代码示例）
JavaScript是客户端脚本语言,PHP是用于与数据库交互的服务器端脚本语言.那么如何如何在PHP中运行JavaScript?本篇文章就来给大家介绍几种在PHP中运行JavaScript的方法,希 ...
- 借助全新 MATLAB® 适配器代码示例读取英特尔® 实感™ 摄像头数据流
下载源代码请访问原文地址:借助全新 MATLAB® 适配器代码示例读取英特尔® 实感™ 摄像头数据流 简介 该可下载代码示例简要介绍了如何使用英特尔® 实感™ SDK 和 MATLAB 的图像采集工具 ...
- java原子变量的作用_AtomicInteger原子类的作用介绍（代码示例）
本篇文章给大家带来的内容是关于AtomicInteger原子类的作用介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. AtomicInteger 原子类的作用 多线程操 ...
- php中使用mysql的视图_MYSQL中视图的用法介绍（代码示例）
本篇文章给大家带来的内容是关于MYSQL中视图的用法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.什么是视图 执行一条SQL,将结果集保存在一张虚拟表中 (相关 ...
- python简单代码画曲线图教程-Python绘制折线图和散点图的详细方法介绍（代码示例）...
本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...
- python画折线图代码-Python绘制折线图和散点图的详细方法介绍（代码示例）
本篇文章给大家带来的内容是关于Python绘制折线图和散点图的详细方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.绘制折线图和散点图要用到matplotlib ...
最新文章
- Ajax实例（一）$.ajax的应用
- vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解
- [导入]实现数字分页
- 免费注册丨全国社会媒体处理大会（SMP 2020）召开，98场报告日程全公开
- MongoDb 中 serverStatus was very slow 的原因分析
- 在linux下创建自定义service服务
- 在asp.net中做视频转换，将各种视频文件转换成.flv格式
- jcenter那些事儿
- 矩阵分解：奇异值分解（SVD）详解
- sfr测试图像清晰度 C 语言,SFR分辨率测试卡的不足和改进
- Lattice的JTAG编程烧录
- 甘肃暴雨强度公式_甘肃暴雨强度公式
- 计算机系统u盘判断,U盘真实容量检测工具
- 微信小程序样式padding理解
- 自定义android tv播放器,具有可自定义实时广播源的Android TV手机播放器
- 纵向时间线html,51个css时间轴
- 非对称密码之DH密钥交换算法
- 安利3款可以将pdf转换成word免费软件
- pkg-config的用法
- 网站空间如何选择？空间选择的标准是什么？
热门文章
- 基于Python+MySQL的图书销售管理系统 课程论文+项目源码及数据库文件
- matlab cnn 识别苹果,CNNmatlab cnn卷积神经网络用于手写数字识别 - 下载 - 搜珍网
- 解决：Eclipse SVN一直要求输出登陆密码
- android后厨打印机漏单,后厨打印丢单解决方案
- Firemonkey Control的TabStop处理
- 卸载网易邮箱大师邮件从服务器删除,如何卸载网易邮箱大师 网易邮箱大师卸载教程...
- plc控制系统设计步骤
- 继电保护计算机化,浅谈继电保护的未来发展趋势
- 征信报告 加密文档_Secret Folder for Mac(文件加密隐藏软件)
- [转]互联网企业安全建设(一)