您的位置：首页 > Web前端 > HTML

html常用标签

2020-07-18 04:59 183 查看

html基本语法

<!DOCTYPE html>
<html>
html学习
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

head标签

<!DOCTYPE html>
<html>
<head>
<!--设置文本编码方式-->
<meta charset="utf-8">
<!--设置网页标题-->
<title>head标签</title>
<!--设置网友图标
1）rel: 设置被导入文件的功能:stylesheet (样式表）
icon（网页图标）
2）type 指定被导入的文件类型
text/css（后缀是文本文件）
text/txt(后缀是txt的文本文件)
image/png(后缀是png的图片文件)
image/ico（后缀是ico的图标文件）
3） href -	被导入的文件的路径
-->
<link rel="icon" type="image/ico" href=""
</head>
<body>
</body>
</html>

文本标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- -->
<h1>-一级标题</h1>
<h2>-二级标题</h2>
<h3>-三级标题</h3>
<h4>-四级标题</h4>
<h5>-五级标题</h5>
<h6>-六级标题</h6>
<h7>-七级标题</h7>
<!--2.段落标签:p
一个段落对应一个p标签
-->
<p>...................</p>
<!--3.普通文本标签：font-->
<font>发布时间：1561156</font>
<font>量子..</font>
<!--空格与换行
空格符号-&nbsp(空一个像素) &emsp （空一个空格键）
-->
<p>
窗前明...<br>
疑是地...<br>
举...<br>
低头...<br>
</p>
<font>内容1</font><br><br>
<font>内容2</font>
<!--
5)加粗、倾斜
加粗 b标签，strong标签（强调作用）
倾斜：i标签，em标签

-->
<p>hhhhhhh杀<b>死</b>了<strong>阿巴巴</strong>你啊</p>
<!--
6)水平线
<hr></hr>
</body>
</html>

列表标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.列表标签有三个：ul标签，ol标签，dl标签
无序列表-ul
有序列表-ol
自定义列表-dl
-->
<!--
1）无序列表
列表元素-li标签
-->
<h1>无序列表</h1>
<ul><li>
高等数学
</li>
<li>
量子力学
</li>
</ul>
<!--2)有序列表
-->
<h1>有序列表</h1>
<ol>
<li>将牛肉洗干净</li>
<li>在水中加白金、盐、生姜、花椒，放牛肉进去煮到7分熟</li>
<li>将牛肉捞起来切片</li>
<li>油锅中放入干海椒、花椒、生姜炸香后放入牛肉炸</li>
<li>起锅前放入盐和白糖</li>
</ol>
<!--
3)自定义列表
dl标签-表示整个列表
dd标签-分类
dd标签-元素
-->
<ul>
<li>成都</li>
<li>大连</li>
<li>黑龙江</li>
<li>沈阳</li>
<li>绵阳</li>
</ul>
<dl>
<dt>四川省</dt>
<dd>成都市</dd>
<dd>绵阳市</dd>
<dt>辽宁市</dt>
<dd>大连市</dd>
<dd>鞍山市</dd>
</dl>
<dl>
<dt>
<dd>语言基础</dd>
<dd>html/css/js</dd>
<dd>linux</dd>
<dd>数据库</dd>
<dd>web后端框架</dd>
<dd>爬虫</dd>
<dd>数据分析+人工智能</dd>
<dd>项目</dd>
</dt>
</dl>
</body>
</html>

图片和超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.图片标签：img
1）src属性-图片的地址（a.本地图片地址）
-->
<h1>1.图片显示</h1>
<h2 id="h2">本地图片</h2>
<img src="">
<h2>网络图片</h2>
<img src="" >
<!--
title-设置图片标题
-->
<img src="" title="路飞">
<!--
alt属性-设置图片加载失败后的提示信息
-->
<img src="" alt="图片加载失败">
<!--
超链接:a标签
1）标签内容-超链接中可见可点击的部分
2）href属性-跳转的目标地址
-->
<h1>2.超链接</h1>
<a href="">地图</a>
<a href="">百度</a>
<h2>图片超链接</h2>
<a href=""><img src=""</a>
<!--
href属性
1）网页地址 - 跳转到指定网页
2）本地的html文件地址-在新的页面中加载指定的html文件中的内容
3）选择器-将网页滚动到选择器选中的标签的对应的位置
4） # -页面刷新的功能
-->
<h2>本地html文件地址</h2>
<a href=""></a>

<h2>选择器</h2>
<a href="#h2">本地图片</a>

<h2>刷新</h2>
<a href="#"></a>
<!-- target属性
_self -默认：在当前页面中直接加载新的页面（原页面会被覆盖）
_blank -在新的网友中加载新的页面（原页面会保留）
</body>
</html>

table

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
HTML中和表格相关的常用标签有三个：table/tr/td
table标签-表示整个表格
tr标签-表示一行
td标签-表示一个单元格

2.table相关的属性
1）table的属性
border-边框宽度
cellspacing-单元格之间的间隙
height-设置表格高度
width--设置表格宽度
align-设置整个表格对齐方式
bgcolor-设置单元格的背景颜色
cellpadding-设置内容和格子直接的间距
2）tr属性
height-设置表格高度
width--设置表格宽度
align-设置指定行中所有单元格对齐方式
3）td属性
height-设置表格高度
width--设置表格宽度
align-设置指定一个单元对齐方式
-->
<!--table>tr*3>td*4-->
<table border="1" cellspacing="">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
.......
</table>
<table><tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>

</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航