HTML基础+案例（适合零基础小白）

最新推荐文章于 2024-03-23 20:03:07 发布
最新推荐文章于 2024-03-23 20:03:07 发布
阅读量1.4k 收藏 17
点赞数 7
分类专栏： 日常练习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42907061/article/details/117917706
版权

HTML练习

1. HTML简介

  1. HTML注释标记是<!- ->
  2. HTML不用区分大小写，但是建议用小写
  3. 当网页既设置了背景图像有设置了背景色，那么以背景图片为主
  4. URL：统一资源定位器（uniform Resource Locator）
  5. http：超文本传输协议
  6. HTML后缀:.htm和.html
  7. 在网页中,可以使用书签连接方法制作帮助文档

2. HTML基本标签

  1. 斜体：<i></i>
  2. 粗体：<b></b>
  3. 删除线：<s></s>
  4. 一条横线：<hr>
  5. 段落标记：<p></p>
  6. 预格式<pre>
  7. 回车：<br>
  8. 下划线：<u></u>
  9. 上标：<sup></sup>
  10. 下标：<sub></sub>
  11. 空格：&nbsp; html默认是一个空格，如果需要多个空格就需要nbsp
  12. 着重元素： <em> 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
  13. 小于：<lt></lt>
  14. 大于：<gt></gt>
  15. navigator：版本
  16. font
<p><font size=2 face='隶书'>欢迎访问我的主页！<font>
li 标记里的type属性设置的影响范围是只影响当前列表项
  1. 地图
    target:目标的打开方式
<img src="3.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="福建" title="福建" href="https://www.fujian.gov.cn/" coords="846,628,825,643,809,667,803,693,816,706,826,730,841,709,853,704,867,690,875,671,886,647" shape="poly">
</map>
</img>

3. 列表

3.1 有序列表

<ol>
    <li></li>
</ol>

【属性】

  • type:指定列表项标志的类型，默认为数字排列 取值：1（默认值）/a/A/i/I
  • start:定义起始值(一定是数字)，默认从1开始取值：数字，如：start:1;

3.2 无序列表

<ul>
     <li></li>
</ul>

【属性】

  • type：指定无序列表的列表项标识取值：

disc:实心圆
circle:空心圆
square:实心矩形

案例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<embed src="1.mp3" hidden="false" autostart="false" loop="true">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国</p>
<ol type="1" start=1>
<li>安徽
<ul type='disc'>
<li>合肥</li>
<li>滁州
<ul type='circle'>
<li>来安</li>
<li>天长</li>
<li>全椒</li>
</ul>
<li>芜湖</li>
</li>
</ul>
</li>
<li>北京</li>
<li>上海</li>
</ol>
</embed>
</body>
</html>

在这里插入图片描述
案例2:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>列表练习</title>
</head>
<body>
<ol type="I" start=1>
<li>引言</li>
<li>第一部分
<ol type='A' start=1>
<li>说明</li>
<li>例子
<ul type='disc'>
<li>案例1</li>
<li>案例2</li>
</ul>
</li>
</ol>
</ul>
</li>
<li>第二部分</li>
<li>总结</li>
</ol>
</body>
</html>

在这里插入图片描述

4. 多媒体和超链接

4.1 多媒体

图片：

<img src="2.png" width="400" height="400">

背景音乐：

<embed src="de.mp3" hidden="true" autostart="true" loop="true">
<bgsounds>

4.2 超链接

链接： <a></a>
属性：

href：链接地址
target：打开方式
_blank：新标签页打开
_self：当前页面打开（默认）

<a id="top" href="#bottom">这里是顶部，点击我去往底部！</a>
<a id="bottom" href="#top">这里是底部，点击我返回顶部！</a>

<a href="https://www.cqupt.edu.cn/"><font size=5 color=#33ccff>超级链接练习</font>

跳转到锚点一定要在href的参数前面加上# title：链接提示（书签链接）

5. 表格

表格是一种能够有小描述信息的组成形式，有行，列和单元格组成
案例:

<html>
<head></head>
<body>
<capital align='center'>学生情况表</capital>
<table border="1" align='center' width=500 height=200>
<tr align='center'>
<td rowspan="2">学号</td>
<th colspan=3 >个人信息</th>
<th colspan=2 >入学信息</th>
</tr>
<tr align='center'>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>班级</td>
<td>入学年月</td>
</tr>
<tr>
<td>007</td>
<td>东方不败</td>
<td>不详</td>
<td>19</td>
<td>200303</td>
<td>2003月9月</td>
</tr>
<tr>
<td>008</td>
<td>任我行</td>
<td>男</td>
<td>20</td>
<td>200303</td>
<td>2003日9月</td>
</tr>
</table>
</body>
</html>

学生情况表

学号个人信息入学信息
姓名性别年龄班级入学年月
007东方不败不详192003032003月9月
008任我行男202003032003日9月
  1. 表格标题的html是<capition align=# valign=#></caption> 默认效果为标题顶部居中显示
  2. table中常用的属性 border：定义表格边线，表格默认是没有边线的。
  3. cellpadding的意思是文字到单元格的距离
  4. cellspacing的意思是单元格之间的空隙
  5. align：设置表格在水平方向的对齐方式，其值可为left，right，center
  6. valign：设置表格在垂直方向的对齐方式，其值可为top，middle，baseline
  7. colspan（跨多列）
  8. rowspan（跨多行）
  9. colspan（跨多列）、rowspan（跨多行）是td（默认左对齐）和th（表头，默认居中对齐）的专属标记
 <th colspan="2">Telephone</th>、<th rowspan="2">Telephone:</th>

6. 表单

  1. HTML表单的作用是收集用户反馈信息
  2. 表单域的控件:单行文本框(text) 复选框(checkbox) 下拉菜单(<select><option>)
  3. 在指定单选框时,只有将name属性的值指令为相同,才能使他们成为一组
  4. method属性的取值可以为get和post之一,默认是get
<form></form>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>国家摄影师考评在线系统</title>
</head>
<body>
<form action="1.htm" method="get">
<table border=1 bordercolor=#004080 align="center" celladding="0" cellspacing="0" >
<tr bordercolor=#004080><td align="center" width=200>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</td><td width=800>&nbsp;&nbsp;<input type="text" name="text" value="">*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td><td>&nbsp;&nbsp;<input type="radio" name="gender" value="0">男<input type="radio" name="gender" value="1">女&nbsp;*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>出生日期：</td><td>&nbsp;&nbsp;<input type="text">年<input type="text">月<input type="text">日*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>文化程度：</td><td>&nbsp;&nbsp;
<select name="whcd">
<option value="gz">高中</option>
<option value="dx">大学</option>
<option value="yjs">研究生</option>
<option value='bss'>博士生</option>
</select>*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>所在省份：</td><td>&nbsp;&nbsp;
<select name="szsf">
<option value="bj">北京</option>
<option value="cq">重庆</option>
<option value="cd" selected>成都</option>
</select>*</td></tr>
<tr><td align="center" width=200>联系地址：</td><td>&nbsp;&nbsp;<input type="text">*</td></tr>
<tr><td align="center" width=200>邮政编码：</td><td>&nbsp;&nbsp;<input type="text">*</td></tr>
<tr><td align="center" width=200>联系电话：</td><td>&nbsp;&nbsp;<input type="text">*</td></tr>
<tr><td align="center" width=200>电子信箱：</td><td>&nbsp;&nbsp;<input type="text"></td></tr>
<tr><td align="center" width=200>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td><td>&nbsp;&nbsp;
<select name="whcd" >
<option value="hs">函授</option>
<option value="js">讲师</option>
<option value="bs">博士</option>
<option value="yjs">研究生</option>
</select>*</td></tr>
<tr><td align="center" width=200>报考层次：</td><td>&nbsp;&nbsp;
<select name="whcd" >
<option value="gj">高级</option>
<option value="zj">中级</option>
<option value="cj">初级</option>
</select>*</td></tr>
<tr><td align="center" width=200>报考专业：</td><td>&nbsp;&nbsp;
<select name="whcd" size="">
<option value="gjsy">国家摄影师等级考评</option>
<option value="mba">MBA考试</option>
<option value="yjs">研究生入学考试</option>
</select>*</td></tr>
<tr><td align="center" width=200>备注：</td><td>&nbsp;&nbsp;<textarea name="bz" cols=60 rows=5 ></textarea></td></tr>
<tr><td align="center" width=200></td>
<td align="center">&nbsp;&nbsp;
<input type="submit" name="ok" value="提交">
<input type="reset" name="re-input" value="重填">
</td>
</tr>
</table>
</form>
</body>
</html>

在这里插入图片描述

</head>
<body>
<table>
<tr>
<td id="head" colspan="2">◼︎同城网在线调查</td>
</tr>
<tr>
<td>你从哪里知道同城的</td>
<td>
<select>
<option value="网上搜索">网上搜索</option>
<option value="朋友推荐">朋友推荐</option>
</select>
</td>
</tr>
<tr>
<td>你正在使用的同城网服务</td>
<td>
<input type="checkbox" value="免费社区">免费社区</input>
<input type="checkbox" value="免费留言簿">免费留言簿</input>
<input type="checkbox" value="免费投票">免费投票</input>
</td>
</tr>
<tr>
<td>你希望我们提供哪些新服务</td>
<td>
<input type="checkbox" value="聊天室">聊天室</input>
<input type="checkbox" value="博客">博客</input>
<input type="checkbox" value="游戏系统">游戏系统</input>
</td>
</tr>
<tr>
<td>你是同城网的会员吗</td>
<td>
<input type="radio" id="is-member-yes" name="is-member" value="是">
<label for="is-member-yes">是</label>
<input type="radio" id="is-member-no" name="is-member" value="否">
<label for="is-member-no">不是</label>
</td>
</tr>
<tr>
<td valign="top">你对同城网的其他意见</td>
<td>
<textarea name="opinions" id="opinions" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button>提交</button>
</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

叶faner～
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML零基础入门+百度搜索案例
06-18
HTML零基础入门教程，教程配有百度首页案例，HTML是前端学习的第一步，把基础打扎实，更有利于后期学习
HTML5基础知识核心技术与前沿案例
07-22
资源名称：HTML5基础知识 核心技术与前沿案例内容简介：HTML5基础知识 核心技术与前沿案例《HTML5基础知识、核心技术与前沿案例 》是一本引导初、中级学习者深入了解并有效掌握HTML5核心技巧的技术实战书籍，全书...
html的简单例子练习（6个）
小黄呀呀呀的博客
04-19 6222
1、楚乔传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>楚乔传</h1> <p>中国大陆 67集（TV版）/58集（DVD版）&l...
WEB前端(2)—— HTML经典案例
qq_46187519的博客
08-09 2049
目录 案例一：(表格) 案例二：(表单) HTML的框架元素： 前言：当我们开始接触HTML时处于懵懂状态不知道那些知识点重要，下面我将举几个HTML具有代表性和考试经常会出的案例和HTML的框架元素。 案例一：(表格) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont.
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
网页设计与制作
03-23 2278
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1 网页简介：此作
11个精美网页——Web前端开发技术课程大作业，html简单网页代码
qq__3200628753的博客
12-20 6096
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto...
HTML综合案例练习
moteandsunlight的博客
02-26 1158
可以首先看一下我们的效果，之后再思考怎么实现总的来说，这个练习不算难。这里关于这个简历的代码编写我们不说太多，只注意以下几个内容即可：注意及时查看我们的代码是否符合预期，即一段一段测基本信息那里的内容应该是普通文字，但是注意加换行符项目那里注意不同级别的划分功能介绍是二级的无序话不多说，直接看效果和源码！！ 二、简历内容填写 首先可以看一下我们最终的效果：接下来，我们思考怎么实现。这里由于这个练习代码相对更多，更琐碎，所以这里列了一个思维导图，帮助理解。 三、总结 关于HTML 总的来讲，html还是比较简
python办公自动化教程(零基础)+案例源码
04-23
内容包括：01 python基础，软件和环境教程 02Excel自动化处理 03Word自动化处理 04 PPT自动化处理 05 邮件自动化处理 06 Web自动化处理 07微信，钉钉自动化处理 08 爬虫自动化处理 09 文件自动化处理 10总结 内附...
c语言基础联系案例.zip
最新发布
04-27
c语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础联系案例.zipc语言基础...
爬虫基础+源码+案例分享+图片爬取
03-27
爬虫基础+源码+案例分享+图片爬取
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
综合案例.html基础
06-12
先讲解HTML5常用标签，接着讲解CSS3常见样式，主要学习盒子模型，浮动，定位还有高级布局技巧，之后讲解HTML5和CSS3提高，讲解新增加的新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果。
html的一个小例子
03-17
html的一个小例子，很简单，希望对大家有所帮助！
HTML基础标签与相关案例
jakelihua
10-04 1456
速通过HTML。
07_html 小案例
java_996的博客
11-04 216
一个HTML小案例，用到很多基本标签，完成一个注册页面，用到的素材如下 <!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, init
HTML小练习
littielucky的博客
12-09 835
HTML简历 HTML小练习 利用HBuilder写一份简单的简历表 主要练习HTML里表格的用法 如图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 我的简历 </title> </head> <body ...
简单HTML网页制作 实例
热门推荐
xiaoxiaoxiexies的博客
04-25 2万+
HTML网页制作 1.新建文本文档，以“html”结尾。 2.用html网页逻辑器打开，这里我们用Sublime Text打开。 在标签<body></body>里写文本,<h1></h1>意思是把文本设置为标题， align里设置文本居中属性。 html基本结构 <html></html> 段落标签 <p></p> 用来分段用的 空格标签 &nbsp 有几个空格就写几个 &nbsp 标题标签
HTML项目案例，适合练手总结。
qq_47828130的博客
11-06 7395
HTML网页设计虽然简单，但也有很多细节需要留意，特别是浮动和定位的知识点，需要理清思路！
html5+css3网站设计基础教程实验案例
05-12
《HTML5 CSS3 网站设计基础教程实验案例》是一本针对初学者的网站设计入门教材，书中具有很多实用的案例。本书从HTML5和CSS3的基础概念开始讲解，逐步的教授读者如何使用HTML5和CSS3来创建绚丽的网页。书中的实验案例涵盖了不同类型的网站，包括博客、企业网站、个人主页等。每个实验案例都提供了详细的步骤和示例代码，方便读者跟随练习。此外，本书还介绍了响应式设计的基础知识，教授读者如何制作适应不同设备的网站。本书内容易于理解，对于初学者来说非常友好。读者可以通过学习本书中的案例，掌握网站设计的基础知识并促进自己的学习。总之，《HTML5 CSS3 网站设计基础教程实验案例》是一本实用性强的网站设计入门教材，有助于初学者学习网页制作技巧，提升自己的设计能力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值