HTML5基础

最新推荐文章于 2025-05-27 21:54:09 发布

时光无错孤独难谈

最新推荐文章于 2025-05-27 21:54:09 发布

阅读量100

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43745403/article/details/104291796

版权

html5 && css 专栏收录该内容

23 篇文章

订阅专栏

<!-- h5文档声明-->
<!DOCTYPE html>
<!-- 
	HTML不区分大小写
	注释不能嵌套
 -->
<html>

	<!--
		head标签，网页不会直接显示，帮助浏览器解析网页
	-->
	<head>  
        <!--
            meta设置网页元数据
            自结束标签
        -->
		<meta charset="utf-8" />
		<!-- 
			使用meta标签用来设置网页关键字
			name是对content的描述,content关键字
		 -->
		<meta name="keywords" content="HTML5,css,Java" />
		 <!-- 
			指定网页描述
			搜索引擎检索页面同时会搜索关键字和描述
		  -->
		<meta name="description" content="前端信息"/>
		<!-- 
			使用meta可以作为请求指定项
		 -->
		<!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com"/> -->

		<!--
			显示在浏览器标题栏中,搜索引擎首先检测title中的东西
		-->
		<title>这是一个好玩的网页</title>
	</head>
	

	
	<!-- body标签，网页主体，用户可见-->
	<body>
		<!--
			属性：       可以通过属性处理标签内容
				在开始标签中添加属性
				属性写在开始标签，实际是名值对结构
        -->
        
        <!--
            HTML一共有六级标签
            重要性依次降低
        -->
		<h1>
			第<font color="blue" size="7">一个</font>网页		
        </h1>
        <h2>标题1</h2>
        <h3>标题2</h3>
        <h4>标题3</h4>
        <h5>标题4</h5>
		<h6>标题5</h6>

		<p>标签p，表示一个段落</p>
		<p>标签p，表示一个段落</p>
		<!-- 
			字符之间写再多空格，换行，浏览器只能当做一个空格解析 
			<br/>自结束标签，<hr/>也是自结束标签，生成水平线
		-->
		<p>
			123 <br/>
			123 <br/>
			<hr/>
		</p>


		<!-- 
			特殊字符不能直接使用 <  >  ,需要用转义字符
			实体语法： &实体名字
				< :   &lt;
				> :   &gt;
				空格 : &nbsp;
				版权符号: &copy;
		 -->
		 a&lt;&nbsp;b&gt&nbsp;;c


		 <!-- 
			img引入外部图片，也是自结束标签 
			属性：
				src:设置外部图片路径
				alt:设置图片描述(只有在图片不能显示才出现文字)
				width:宽度,一般用px作为单位
				height:高度,一般用px作为单位
					当宽度高度只设置一个另一个也会等比例调整。
				可以用../返回上一级  eg: ../tui/1.jpeg
		-->
		<img src="1.jpg" alt="beautiful" width="200px" />
		<!-- <img src="2.jpg" alt="beautiful" width="200px" /> -->
		<!-- 
			内联框架:使用iframe来创建一个内联框架
			属性:
				src:指向一个外部页面的路径，可以使用相对路径
				width:
				height:
				name:可以内联框架指定属性
			内联框架内容不会被搜索引擎检索到
		 -->
		<iframe src="2.html" name="tom"></iframe>


		<!-- 
			使用a标签创建超链接
			属性:
				href:指向指定链接，跳转外部路径，相对路径
		 -->
		 <a href="http://www.baidu.com">这是一个超链接1</a>
		 <a href="2.html">这是一个超链接2</a>
	</body>
		<!-- 
			a标签中target属性可以用来指定打开链接的位置
				可选值
					_self:表示在当前窗口打开，默认
					_blank:在新窗口打开链接
					可以设置一个内联框架name的属性值，链接在内联框架中打开
		 -->
		 <a href="http://www.baidu.com" target="_blank">这是一个超链接3</a>
		 <br/>


		 <!-- 
			 center标签中的内容，默认在页面居中显示
		  -->
		  <center>
			  <p>居中显示</p>
		  </center>
		  <br/><br/>
		  <br/><br/><br/><br/><br/><br/>
		  <!-- 
			  如果将超链接地址设置为 # 自动到顶部
			  id 可以随便起，不能以数字开头，标签的唯一标识
			  想去哪定位ID   <p herf="#buttom">
		   -->

		   <a id="buttom" href="#">去顶部</a>

		   <!-- 
			   发送电子邮件超链接，默认打开电子邮件客户端
			   herf="mailto:邮件地址"
		    -->
		  <a href="mailto:2856198157@qq.com">联系我们</a>
</html>