今天我们继续看看html的学习笔记。
文本标签
标题标签<hn>
将文本设置为标题显示的标签对。设定标题字体大小,n=1(大)~6(小),标题大小一共有6种,也就是从<h1>……</h1>到<h6>……</h6>
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鸟小白</h1>
<h2>你们的好朋友</h2>
<h3> 让我们一起学习吧!!!</h3>
</body>
</html>
显示效果如下:
字体修饰标签
对文字的格式做相应的变化,如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。
我们看下加粗前后对比,其它效果类似方式
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鸟小白呀</b>
我是菜鸟小白呀
</body>
</html>
显示效果如下:
字体标签<font>
设置文档的字体,改变其属性,对文本进行不同的设置,包含字体、大小、颜色等
我们看看大小的对比区别
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鸟小白
<font size="20px">我是菜鸟小白呀</font>
</body>
</html>
显示效果如下:
超链接标签
超链接的定义
在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分:锚标和目标点。锚标就是链接的源点,当鼠标被移动到锚标处时会变成小手状。此时,用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络稳定、一个多媒体文件等。
属性href(hypertext reference)
用于设定链接地址,其链接地址必须是URL地址,必须给出具体的路径。其中URL地址可以为下面内容:
<a href="http://www.baidu.com">百度地址</a>
点击页面的百度地址可直接跳转到百度页面
<a href="cainiao-跳转后页面.html">跳转</a>
跳转前页面
点击跳转后直接跳转到新的本机页面
<a href="index.txt">txt文件,打开进行编辑</a>
<a href="index.wav">播放声音</a>
属性target
我们以“_blank”为例,可以按照如下方式编写:
<!--在新的窗口中打开百度首页-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>
属性title
浏览器会以浮动提示的方式显示解释信息
<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>
实际效果展示:
属性name
利用name属性作为锚定位,可以实现文档内部的定位。这个需要我们在两个<a>标签中,一个写明name,作为一个锚点;另外一个写明herf,用于指向锚点。如下面的示例,点击“百度地址”会跳转到“这是测试跳转处”(当页面超过一页长度时,测试效果更明显)
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<a name=ceshi>这是测试跳转</a>
<a href="#ceshi" title="百度欢迎你">百度地址</a>
</body>
</html>
图像标签
图片标签<img 属性=“属性值”>
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
表格标签
表<table>
创建一个表格,有属性width(宽度)、height(高度)、border(边框)、bordercolor(边框颜色)、cellspacing、cellpadding
行<tr>
创建表格中的每一行,有属性align、valign、bgcolor
列<td>
创建表格的中每一列,有属性
表头<th>
设置表头
我们现在建造一个表
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<table border>
<th>测试表头</th>
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
</table>
</body>
</html>
显示如下:
框架标签
框架<frame>
一个浏览器文档窗口一般只能显示一个网页文件,但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口,每个子窗口中都可以显示一个独立的网页文件。
框架集<frameset>
多个框架组成了一个框架集(Frameset),定义了各个框架如何排列的。有属性rows和cols,两个属性至少选择一个,否则浏览器只显示第一个定义的框架。
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
</html>
最终我们将三个页面在同一个web窗口展示出来了
表单标签
表单标签<form>
主要用于采集和提交用户输入的信息,使网页具有交互功能。有属性:
用户输入区域标签<input type="">
这个标签必须放在<form>……</form>标签之间。有属性type,具体参数值有:
<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body>
<p>用户名<input type="text"></input></p>
<p>多行输入框<textarea></textarea></p>
<p>密 码<input type="password"></input></p>
<p>单选框<input type="radio"></input></p>
<p>复选框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>图片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>
</body>
</html>
实现效果:
好了,今天的内容就分享完了,如有什么意见和建议可以私信菜鸟小白哦,我们下期再会~