HTML

最新推荐文章于 2024-10-04 06:11:34 发布

crraxx

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量167

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/crraxx/article/details/109152104

版权

html概述

HTML是什么?

HTML即超文本标记语言(HyperText Markup Language)

超文本:采用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言:用标签标注网页内容,浏览器在运行网页时就可以根据标注显示相应的格式.

HTML可以做什么?

制作网页

HTML基本语法:

开发工具

HBuilder X 国产软件

基本结构

<!-- 给浏览器声明为html 5类型 ，告诉浏览器按照html5的标准运行-->
<!DOCTYPE html>
<!-- 所有的内容都需要放到<html>中 -->
<html>
	<!-- html头部 ，里面可以设置网页信息，还可以添加网页标题-->
	<head>
		<!-- 设置网页字符集编码 -->
		<meta charset="utf-8" />
		<!-- 为标题处添加图标 href="图标地址" rel="说明文件类型" -->
		<link href="img/baidu.ico" rel="icon"/>
		<!-- 设置网页标题 -->
		<title>百度一下，你就知道了</title>
	</head>
	<!-- 网页的身体，设置主题内容 -->
	<!-- 
	 属性语法：
	 属性格式：属性名="属性值"
	 属性位置:写在开始标签
	 属性数量:一个或多个
	 -->
	<body text ="purple" bgcolor="bisque">
		<!-- 
		 标签分类:
		 <开始>修饰的内容 </结束> 闭合标签(双标签)
		 <link href="img/baidu.ico" rel="icon"/> 自闭和标签 (单标签)
		 -->
		 <!-- <b>标签是内容加粗 -->
		<b>网页中的内容都写在body中</b>
		<!-- <i>标签可使内容变为斜体 -->
		<i>网页中的内容都写在body中</i>
		<h1>标题</h1>
	</body>
</html>

运行实例:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0K2rP4E-1603033066496)(C:\Users\云\AppData\Roaming\Typora\typora-user-images\1603025561609.png)]$

标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <h1>到<h6>代表标题标签,一共六级 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<!-- 
		可直接占一行
		align="center" 文本居中对齐 
		align="right" 文本向右对齐
		默认况下为向左对齐
		-->
		<h1 align="center">一级标题居中对齐</h1>
	</body>
</html>

运行实例:
在这里插入图片描述

段落标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 段落标签,在<p>标签内的话即可称为一个段落,下一段落会有较大行间距 -->
		<p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
		这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
	    <p>这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符
		这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符这是一段话这是一行字符</p>
	 <!-- 换行标签<br/> -->
	 <p>这是一段话这是一行字符这是一段话<br/>这是一行字符这是一段话这是一行字符</p>
	 <!-- 空格标签&nbsp -->
	 这是一段话这是一行字符&nbsp;&nbsp;&nbsp;这是一段话这是一行字符
	 <!-- 大于号&gt,小于号&lt -->
	 &lt;b &gt;是一个加粗符号
	 <!-- 注册商标 -->
	 &reg;
	 <!-- 版权 -->
	 &copy;
	 <!-- 空格 -->
	 &nbsp;
	</body>
</html>

运行实例:
在这里插入图片描述

列表

列表可以分为有序列表和无序列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 有序列表,默认类型为数字 -->
		<ol>
			<li>这是一个有序列表</li>
			<li>这是一个有序列表</li>
		</ol>
		<ol type="A">
			<li>这是一个有序列表</li>
			<li>这是一个有序列表</li>
		</ol>
		<!-- 无序列表,默认类型为实心圆 -->
		<ul>
			<li>这是一个无序列表</li>
			<li>这是一个无序列表</li>
		</ul>
		<ul type="circle">
			<li>这是一个无序列表</li>
			<li>这是一个无序列表</li>
		</ul>
	</body>
</html>

运行实例:

超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
		<!-- target=""默认为从当前网页打开即和target="_self"效果一
		样,若想新建网页打开可用target="_blank" -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<a href="baidu.html" target="_blank">自建百度</a>
	    <a href="http://www.qq.com">
		<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
		alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
			<img src="img/qq.ico" width="100" height="100"
			 alt="正在努力加载"
			 title="本产品由腾讯公司开发"
			 />
		</a>
	</body><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 当没有互联网时可以在本项目中新建一个html文件也可练习超链接操作，
		如下方的自建百度 -->
		<!-- target=""默认为从当前网页打开即和target="_self"效果一
		样,若想新建网页打开可用target="_blank" -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<a href="baidu.html" target="_blank">自建百度</a>
	    <a href="http://www.qq.com">
		<!-- 若网络不好或者编写中出现错误使得图片加载不出从而使得
		alt中设置的属性值 ,当鼠标停留在本图片上时候会显示出title的属性值-->
			<img src="img/qq.ico" width="100" height="100"
			 alt="正在努力加载"
			 title="本产品由腾讯公司开发"
			 />
		</a>
	</body>
</html>

</html>