HTML-通过案例来学习

已于 2022-04-08 13:11:51 修改
阅读量652 收藏 1
点赞数 1
分类专栏： 前端三件套 文章标签： html
于 2022-03-22 15:43:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47518713/article/details/123660343
版权

文章目录

前言

几行代码入门HTML

一、HTML是什么？

HTML是最基础的网页开发语言----Hyper Text Markup Language 超文本标记语言 HTML：用于搭建基础网页，展示页面的内容

二、代码展示

1.标签介绍


> 标签学习：
		1. 文件标签：构成html最基本的标签
			* html:html文档的根标签
			* head：头标签。用于指定html文档的一些属性。引入外部的资源
			* title：标题标签。
			* body：体标签
			* <!DOCTYPE html>：html5中定义该文档是html文档
		2. 文本标签：和文本有关的标签
			* 注释：<!-- 注释内容 -->
			* <h1> to <h6>：标题标签
				* h1~h6:字体大小逐渐递减
			* <p>：段落标签
			* <br>：换行标签
			* <hr>：展示一条水平线(下面都是它的属性)
				* 属性：
					* color：颜色
					* width：宽度
					* size：高度
					* align：对其方式
						* center：居中
						* left：左对齐
						* right：右对齐
			* <b>：字体加粗
			* <i>：字体斜体
			* <font>:字体标签
			* <center>:文本居中
				* 属性：
					* color：颜色
					* size：大小
					* face：字体

			* 属性定义：
				* color：
					1. 英文单词：red,green,blue
					2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
					3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
				* width：
					1. 数值：width='20' ,数值的单位，默认是 px(像素)
					2. 数值%：占比相对于父元素的比例
			
			3.图片标签
				 <img src="image/jingxuan_2.jpg" align="right" alt="古镇" title＝"来点我呀"　width="500" height="500"/>
				 		alt设置图片加载失败时显示的提示信息
				 		title设置鼠标悬停时显示的信息。
			4.有序标签 无需标签
				* 有序列表：
				* ol:
				* li:
			* 无序列表：
				* ul:
				* li:
			
			5. div和span：
			* div:每一个div占满一整行。块级标签
        	* span：文本信息在一行展示，行内标签 内联标签
        	
        	6.<a href="http://www.baidu.com"></a>

我来举几个例子，看例子来学标签，第二个例子的黑马就用到了我们很多标签

有序和无序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="images/banner_1.jpg" align="center" width="100%" height="50%">
    <!--有序标签，type代表列表样式-->
    <ol type="1">
        <li>吃饭</li>
        <li>起床</li>
        <li>刷牙</li>
    </ol>
   <!-- 无序标签-->
    <ul>
        <li>吃饭</li>
        <li>起床</li>
        <li>刷牙</li>
    </ul>
    <a href="http://www.baidu.com"></a>
    <span>黑马程序员</span>
    <span>传智播客</span>

    <hr>
    <div>黑马程序员</div>
    <div>传智播客</div>
</body>
</html>

运行出来的样子
在这里插入图片描述

2.来几个案例

案例一：
在这里插入图片描述
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>公司简介</h1>
    <hr color="red" size="1">
    <p>中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN， 并委托传智播客进行
        教学实施的软件开发高端培训机构， 致力于服务各大软件企业，
        解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
    </p>
    <p>
        目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，
        并被评为中关村软件园重点扶持人才企业。
    </p>
    <p>
        目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，
        并被评为中关村软件园重点扶持人才企业。 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业
        而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。
    </p>
    <hr color="red">
    <font color="red" size="2">
        <center>
            江苏传智播客教育科技股份有限公司</br>
            版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882-->
        </center>
    </font>
</body>
</html>

图片标签示例

案例二：做一个表格

  • table：定义表格
    * width：宽度
    * border：边框
    * cellpadding：定义内容和单元格的距离
    * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
    * bgcolor：背景色
    * align：对齐方式
    * tr：定义行
    * bgcolor：背景色
    * align：对齐方式
    * td：定义单元格
    * colspan：合并行
    * rowspan：合并列
    * th：定义表头单元格
    * * caption：表格标题

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
	<font><center>学生成绩表</center></font>
    <!-- border是线条-->
    <table align="center" cellpadding="0" cellspacing="0" bgcolor="#faebd7" width="50%" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>1</td>
            <td>小龙女</td>
            <td>女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>杨过</td>
            <td>男</td>
            <td rowspan="2">90</td>
        </tr>
        <tr>
            <td>3</td>
            <td>金轮法王</td>
            <td>男</td>
        </tr>
        <tr>
            <td>总成绩</td>
            <td colspan="3" align="center">190</td>
        </tr>
    </table>
</body>
</html>在这里插入代码片

总结

java 后端的小朋友不需要掌握太多，但至少要看得懂简单的HTML语言，接下来我们就进入HTML 与CSS结合
HTML+CSS传送门

听~宇
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html.zip_HTML 例子_html
09-14
囊括了html的所有的标签总结，以及html的应用的小例子
入门HTML(含常见标签)—附实现案例
qq_63218110的博客
11-27 4505
HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。本篇文章主要常见文本标签和文档结构标签。
html的简单例子练习（6个）
小黄呀呀呀的博客
04-19 6088
1、楚乔传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>楚乔传</h1> <p>中国大陆 67集（TV版）/58集（DVD版）&l...
html css简单的文章展示
jialan75的博客
01-29 1300
自己的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
HTML四个实例
m0_70933211的博客
08-16 1452
HTML四个实例1.HTML 标题（Heading）是通过 二、HTML 段落 1.HTML 段落是通过 标签进行定义的 以下实例 三 、HTML 链接 HTML 链接是通过 标签进行定义的 以下实例 注释：在 href 属性中指定链接的地址HTML 图像是通过 标签进行定义的 以下实例 注释：图像的名称和尺寸是以属性的形式提供的.........
pink老师htmlcss学习 - 学成在线案例
03-26
2023.3.26
html.zip_HTML学习_app案例_app设计
09-20
这是一个web app 页面设计的案例，仅供学习参考，不得用于商业
fairseq-LSTM案例学习
10-14
https://fairseq.readthedocs.io/en/latest/tutorial_simple_lstm.html examples/translation，对prepare-iwlt4.sh文件运行一直报错数据集下载失败，所以稍作了修改。自行下载好数据，并对.sh文件进行修改。
个人前端HTML文件学习案例.zip
最新发布
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html学习案例
08-15
自己总结的html基础 ，打开方式记事本可查看代码
HTML基础 + 实例解析(速速来看!!!)
niceffking的博客
04-29 3696
HTML常见标签使用 1.注释标签 2.标题标签 3.段落标签 4.换行标签 5.格式化标签 6.图片标签 7.超链接标签 8.表格标签 9.表格标签-单元格合并 10.列表标签 无序列表标签 有序标签 11.表单标签
HTML基础标签与相关案例
jakelihua
10-04 1400
速通过HTML。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML 代码举例
qq_43563187的博客
07-21 3771
1. 标题标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题标签</title> </head> <body> <!-- h1------h6 --> <h1 align="leff">一级标题</h1> <h2 align="center">二级标题</
html简单案例
陈表达的博客
10-12 924
属性指定了控件类型，如文本框、邮箱和密码等。标签定义超链接，将该链接指向百度网站。属性给不同的元素命名。标签定义了网页的样式，使用。是两个具有不同样式的区域。标签显示一级标题，使用。标签定义表头和单元格。标签定义表单标签，使用。标签定义表单控件，其中。标签布局网页，并使用。
HTML中的文本段落实现
冯浩月
12-18 9610
前言    孙鑫讲的HTML内容，虽然只有短短的2个小时，但是也有很多值得出入门的自己需要学习的地方，小编在视频的讲解下将里面的7个小例子都实现了， 动手之后确实感觉很好，下面是进行总结
HTML——文本制作
qq_59147478的博客
03-01 1003
HTML文本制作知识点
Html入门案例
weixin_56309075的博客
08-06 490
Html 1.html简介 ​ HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。 1.1 Html练习 1.1.1 html超链接 <a
HTML示例
weixin_45590490的博客
09-24 1229
1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="font-size:x-large;">亲爱的召唤师们，欢迎来到王者峡谷！</div> <script&
js html css案例
12-25
总的来说，通过这个案例，我学会了如何使用HTML、CSS和JavaScript来进行网页设计和开发，也提高了自己的实际操作能力。我相信在未来的工作和学习中，这些知识和经验一定会对我有很大的帮助。希望通过不断地练习和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值