欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【HTML】第一节 HTML标签(上)

程序员文章站 2022-05-31 23:08:58
...

标签

  • <html></html>：HTML的开始和结束
  • <head></head>：控制HTML的地址栏以上部分
  • <link rel=“short icon” href=url>：设置网页标题图标
  • <title></title>：用来设置网页标题
  • <body></body>：用来设置网页的主题内容
  • <img src=url width="" title="">：用来向网页中插入图片并设置宽度与标题
  • <!–此处添加注释–>：HTML注释
  • <a href=url target=“”>：超链接标签
  • &nbsp;：空格
  • &copy;：©符号
  • <i></i>：设置斜体
  • <b></b>：设置粗体
  • <del></del>：设置删除线
  • <span></span>：范围标签，单独使用看不出效果，但今后学习中很重要
  • <p></p>：段落标签，单独占一个网页的宽度，设置居中效果明显
  • <div></div>：块标签
  • <h1></h1> – <h6></h6>：标题标签
  • <ol></ol>：有序列表标签
  • <ul></ul>：无序列表标签，不能设置从多少号开始，但是可以设置序号样式
    • start：设置从多少号开始
    • type：设置序号样式
    • <li></li>：列表中的条目标签
  • <table></table>：表格标签
    • <tr>/：设置行标签
    • <th>/：设置表头
    • <td>/：设置数据行标签

标签属性

  • charset：设置字符集
  • href：设置URL
  • type：设置类别
  • src：用于设置向网页中插入的图片的URL
  • width：设置宽度
  • height：设置高度
  • target：设置是否在新窗口打开超链接
  • text-align：设置对齐方式
  • border：设置边框颜色、宽度、样式
  • border-spacing：去掉表格边框之间的空隙
  • border-collapse：collapse 合并边框
  • color：设置字体颜色
  • font-size：设置字体大小
  • font-family：设置字体样式，样式名中间有空格的话需要加单引号引起来

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--设置标题和图标-->
		<link rel="shortcut icon" href=img/favicon.ico type=image/x-icon>
		<title>百度一下，你就知道</title>
	</head>
	<body>
		<!--插入图片-->
		<img src="img/volvo.png" width="50%" title="这是沃尔沃汽车">
		<!--插入超链接-->
		<a href="http://www.baidu.com" target = "_blank">百度</a>
		<!--插入空格-->
		&nbsp;&nbsp;&nbsp;
		<!--插入专利符号-->
		<a href="http://www.qq.com">腾讯&copy;</a>
		<!--设置斜体-->
		<i>郑州大学</i>
		<!--设置粗体-->
		<b>郑州大学</b>
		<!--设置删除线-->
		<del>郑州大学</del>
		<!--插入范围标签-->
		<span>郑州大学</span>
		<!--设置段落标签样式-->
		<p style="text-align: center; border: black 2px solid; color: red; font-size: 36px; font-family: 'kunstler script'" >Welcome to ZhengZhouUniversity！</p>
		<p style="text-align: center; border: black 2px solid; color: red; font-size: 36px; font-family: 仿宋;" >郑州大学</p>
		<!--插入块标签-->
		<div>
			郑州大学
		</div>
		<!--设置标题标签，共有六个等级-->
		<h1>郑州大学</h1>
		<h2>郑州大学</h2>
		<h6>郑州大学</h6>
		<!--添加有序列表-->
		<ol start="1" type="a">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ol>
		<!--添加无序列表-->
		<ul type="circle">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ul>
		<!--设置表格样式-->
		<style type="text/css">
			table{
				width: 100%;
				border-collapse: collapse;
				border: black 1px solid;
			}
			th{
				border: black 1px solid;
				font-family: 黑体;
				font-size: 30px;
			}
			td{
				border: black 1px solid;
				font-family: 仿宋;
			}
		</style>
		<!--添加表格-->
		<table>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>地址</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Tom</td>
				<td>19</td>
				<td>zzu</td>
			</tr>
			<tr>
				<td>2</td>
				<td>june</td>
				<td>23</td>
				<td>bju</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
【HTML】第一节 HTML标签(上)

相关标签： HTML

上一篇： 将带有‘-’形式的字符串转换为驼峰格式

下一篇： C#——第一节

推荐阅读