HTML5教程

HTML的基本标签

本文主要是介绍HTML的基本标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端技术：HTML + CSS + Javascript + jQuery + ajax + bootstrap

HTML的基本标签

HTML（HyperText Markup Language）超文本标记语言，网页制作必备的语言

HTML中语言的语法是标签，标签分为两种的

标签的结构分类

  1. 对标签

    ​ 包含两部分：开始标签和结束标签

    ​ 例如<html></html>

  2. 单标签

    ​ 自带结束标记的

    ​ 例如<img />

标签的结构组成

  1. <> 包含标签名

  2. 标签名 html

  3. 属性 <title 属性名=属性值 属性名1=属性值1></title>

    ​ <img 属性名=属性值 />

标签之间的关系

​ 标签之间是可以相互嵌套的，就出现了标签和标签之间的关系

  1. 父子关系

    直接包含的关系

    <div>
	<b>hello</b>
</div>

  2. 兄弟关系

    被同一个标签包含的标签之间的关系

    <div>
	<b>hello</b>
	<img />
</div>

  3. 先辈/后辈关系

    间接包含和被包含的关系

    <div>
	<b>hello</b>
	<img />
	<p>hello nice to <i>meet</i> you</p>
</div>

文档结构

<!-- 注释 html中的注释  快捷键ctrl + /-->
<!-- 
 DTD  文档类型声明 Document Type Define
 将当前文档声明为HTML文档
 -->
<!DOCTYPE html>
<!-- html文档开始位置  -->
<html>
	<!-- 文档的头部设置：文档的编码  文档的标题  文档中引入的文件等等 -->
	<head>
		<meta charset="utf-8">
		<title>文档结构</title>
	</head>
	<!-- 文档体 在文档中呈现的内容都是在body中的 -->
	<body>
		<p>hello</p>
	</body>

<!-- HTML文档结束位置 -->
</html>

常用标签

标题标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<!-- 
		 hi标签
			i是数字 有1到6的
		 -->
		 <h1>一级标题</h1>
		 <h2>二级标题</h2>
		 <h3>三级标题</h3>
		 <h4>四级标题</h4>
		 <h5>五级标题</h5>
		 <h6>六级标题</h6>
		 
		 <!-- 分割线 -->
		 <hr />
	</body>
</html>
文本标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<!-- 呈现一般文本的 span
		 由span结合css给一些文字设计样式
		 -->
		<span>一般文本</span>
		<!-- 加粗字体的文本 b 或者 strong -->
		<b>王欣</b>
		<strong>耿豪</strong>
		
		<!-- 斜体字体的文本  i 或者 em -->
		<i>奕辰</i>
		<em>文琛</em>
		
		<!-- 段落标签 -->
		<p>第一段</p>
		<p>第二段</p>
	</body>
</html>
图像标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 属性
		src -- 要显示的图片的路径【本地文件路径 或者 网络图片路径】
			相对路径（使用）-- 文件放在项目下面的
				参照物：当前正在编辑的文件
				两个路径：
					. --- 当前编辑的这个文件所在的文件夹 HTMLDemo
					.. --- 当前编辑的文件所在的文件夹的上一级目录
				找文件的方式
					参照正在编辑的这个文件  找与目的文件相同的一级目录， 找到这级目录之后
					从这个目录为起点依次去定位到目的文件
					./img/picture.jpg
			绝对路径
				C:\Users\liuyanan\Downloads\蜡笔小新.jpg
		width -- 设置图片宽度
		height --- 设置图片的高度
			width和height设置一方即可 另一方会根据图片的比例自适应
		alt --- 图片路径的错误提示
		title -- 鼠标悬浮提示语 【应用到所有标签】
		 -->
		<img src="./img/picture.jpg" width="200" title="已选中目标"/>
		
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d5572.png" alt='图片资源不存在' />
	</body>
</html>
超链接标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!-- 属性
		href --- 设置链接地址
				可以是网络地址  也可以是本地的html文件的地址
		target -- 设置的是链接地址显示的位置
				1.默认是在当前页面中显示
				2._blank -- 新建一个空白的页面 在页面中显示
				3.指定的具有某个名字的窗口中显示页面
		 -->
		<a href="https://www.bilibili.com/">bilibili</a>
		
		<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
		
		<a href="https://www.bilibili.com/" target="custom">跳转到指定窗口</a>
		
		<!-- 内嵌窗口 -->
		<!-- <iframe src="http://www.baidu.com" name="custom"></iframe> -->
		
		<img src="img/1.jpeg" />
		
		<!-- 如何让一张图片具有链接性 -->
		<a id="xiaoxin" href="https://baike.baidu.com/item/%E8%9C%A1%E7%AC%94%E5%B0%8F%E6%96%B0/29538?fr=aladdin">
			<img src="img/picture.jpg" width="100" />
		</a>
		
	</body>
</html>
列表标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<!-- 
		 1.有序列表
			ol -- 列表标签
			li -- 列表的元素
		 2.无序列表
			ul --- 列表标签
			li --- 列表的元素
		 3.自定义列表
			dl --- 列表标签
			dt --- 列表的元素
			dd --- 对列表元素的解释
		 -->
		 
		 <!-- 有序列表
		  属性 type 设置有序的符号
			默认是1 ---- 数字符号
				A   --- 大写英文字母
				a ----- 小写英文字母
				I ---- 大写的罗马符号
				i ---- 小写的罗马符号
		  -->
		 <ol type="i">
			 <li>苹果</li>
			 <li>西红柿</li>
			 <li>鸭梨</li>
		 </ol>
		 
		 
		 <!-- 无序列表
		  type:  circle --- 圆圈
				desc --- 默认 实心黑点
				square -- 实心黑框
		  -->
		 <ul type="desc">
			 <li>游泳</li>
			 <li>篮球</li>
			 <li>网球</li>
		 </ul>
		 
		 <!-- 自定义列表  -->
		 <dl>
			 <dt>网球</dt>
			 <dd>我最喜欢的运动</dd>
			 <dt>苹果</dt>
			 <dd>我最常吃的水果</dd>
		 </dl>
		 
	</body>
</html>
表格标签
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- 
		 table --- 表格标签
		 tr --- 行
		 td --- 单元格
		 th --- 标题单元格
		 
		 tbody --- 表格体
		 thead --- 表格头
		 tfoot --- 表格尾
			
		caption --- 表格的标题
		 -->
		 
		 <!-- table的属性
		  
		  border -- 设置边框线的线宽 默认是0
		  width --- 设置表格的宽度
		  cellspacing --- 设置的是单元格之间的缝隙
		  height --- 设置表格的高度
		  -->
		 <table border="1" width="500" cellspacing="0" height="300">
			 <thead>
				 <tr>
					 <!-- 标签名*数量  tab键就能生成对应个数的标签-->
					 <th width="200">姓名</th>
					 <th>年龄</th>
					 <th>性别</th>
					 <th>成绩</th>
				 </tr>
			 </thead>
			
			<tbody>
				<tr height="150">
					<td>YDZ</td>
					<td>20</td>
					<!-- rowspan 占几行 -->
					<td style="background-color: #FFC0CB;" rowspan="2">男</td>
					<td>77</td>
				</tr>
				<tr>
					<!-- colspan 占几列 -->
					<td colspan="2">DZ</td>
					<!-- <td>22</td> -->
					<!-- <td>男</td> -->
					<td>78</td>
				</tr>
			</tbody>
		 </table>
		 
		 
		<!-- 父标签>子标签*数量>子标签*数量  tab键 -->
		<!-- table>tr*3>td*4 -->
	<!-- 	 <table>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 </table> -->
		 
		 <!-- table>tr>td*4  -->
		 <!-- <table>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 </table> -->
		 
	</body>
</html>
这篇关于HTML的基本标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航