html概述

最新推荐文章于 2023-03-29 10:06:26 发布

白居不易.

最新推荐文章于 2023-03-29 10:06:26 发布

阅读量331

点赞数 3

本文链接：https://blog.csdn.net/weixin_45866849/article/details/109167153

版权

html概述

1.html是什么？

html指的是超文本标记语言（HyperText Markkup Language) 。

超文本：是指页面内可以包含图片、链接、声音、视频等内容。

标记：标签（通过标记符号来告诉浏览器网页内容该如何显示）。

2.html做什么？

通过HBuilder(软件工具)来制作网页。

3.html的基本语法

①.html的框架

<!-- 
    声明html的语言版本，当前版本为html5。
	注释快捷键为：ctrl+/
 -->
<!DOCTYPE html>
<!-- 
   该标签标记了html的开始与结束；网页中的所有内容必须写在该标签下。 
 -->
<html>
	<!-- 
	    网页头部，设置网页信息
	 -->
	<head>
		<!-- 设置网页字符集编码 -->
		<meta charset="utf-8">
		<!--link是标题处添加图标 -->
		<link href="图片地址" rel="icon" />
		<!-- 定义网页标题 -->
		<title>网页标题</title>
	</head>
	<!--
	     网页的身体部分，即网页内容
	 -->
	<body>
		网页内容，包括文字、图片、视频等
		<!-- 
		 标签分类：
		 <开始>内容<结束/> 这种类型的称为闭合标签（双标签）
		  <link href="图片地址" rel="icon" />  这种类型的称为自闭合标签（单标签）
		 -->
	</body>
</html>

②.标题标签

<body >
		
		<!--
		   h标签为标题标签，分为六级，h1至h6为一级标题至六级标题
		   每个标题独占一行
		   align为标题的属性，规定标题位置：center(居中)，right(右对齐)，left(左对齐)
		 -->
		<h1 align="center">一级标题</h1>
		<h2 align="right">二级标题</h2>
		<h3 align="left">三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
</body>

③段落标签

<body>
		<!-- 
		 p标签表示一个段落 ，占一行 段落与段落之间有一个间隔
		 <br/> 表示换行   style="text-indent: 2em;" 表示首行缩进
		 -->
		 <p style="text-indent: 2em;">
			 这是第一个段落，且首行缩进，默认左对齐。
		 </p>
		 <p align="center" >
			 这是第二个段落，段落居中。如果想要使段落右对齐的话，则只需把center改为right。
		 </p>
</body>

④特殊符号含义

<!-- 
	      特殊的转义字符：
			   &nbsp;---空格
			   &copy;---版权
			   &reg;---商标
			   &lt---小于号;  
               &gt---大于号;
-->

⑤列表标签

<body>
         <!--
		      列表分为有序列表和无序列表
		      有序列表由两组标签组成：ol li 列表项前自动生成序号  type指定序号类型 ：1,A,a,i,I
		      无序列表由两组标签组成：ul li 列表项前默认为圆点   type制定类型：disc(默认)、square、               circleS
		  -->
		 有序列表
		 <ol type="1">
			 <li>列表项内容</li>
			 <li>列表项内容</li>
			 <li>列表项内容</li>
		 </ol>
		 &copy; &reg;
		 无序列表
		 <ul type="square">
		 			 <li>列表项内容</li>
		 			 <li>列表项内容</li>
		 			 <li>列表项内容</li>
		 </ul>
</body>

⑥超链接与图像标签

<body>
          <!--
		    a为超链接标签  连接到网络上的另一个指定的网页资源
			 target="_self(默认当前窗口打开),_blank(新窗口打开)" 
		  -->
		  <a href="http://www.qq.com" target="_blank">腾讯</a>
		  <a href="http://www.baidu.com" target="_self">百度</a>
		<!-- 
		   img为图像标签 实现图片的插入
		   src="图片地址"  引用项目中的一个图片
		   alt="图片不能正常显示时提示" 
		   title="鼠标移动到标签上提示信息" 
		-->
		<img src="img/baidu.ico" alt="图片不能正常显示时提示" 
             title="鼠标移动到标签上提示信息"  />
</body>