web大前端-------初识html

可劲旋代码

已于 2022-07-09 14:00:36 修改

阅读量311

点赞数 2

文章标签： html 前端

于 2022-07-09 10:38:42 首次发布

本文链接：https://blog.youkuaiyun.com/jiao18237330105/article/details/125686093

版权

html基本结构

h 标签和 p 标签

<html>
     <head>
         <text>基本标签</title>
     </head>
     <body>
      <!--一级到六级标题-->
      <!--h1定义最大的标题,h6定义最小的标题,h标签是成对出现的，以<h>开始,以</h>结束。h1，h2，h3，h4，h5，h6，作为标题标签，并且依据重要性递减。遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。-->
      <!--无论内容有多少都是独占一段-->
      <h1>一级标题</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
      <h4>四级标题</h4>
      <h5>五级标题</h5>
      <h6>六级标题</h6>
      <--!这就是h标签了-->

在这里插入图片描述

<--html中 p 是一个用于定义段落的html标签-->
<p>
html标签<p>是段落的意思，其中p是paragraph英文段落的缩写。<br>段落是中英文里的概念基本类似，就是文本块，不同的段落一般要另起新行。<p >元素会自动在其前后创建一些空白。
</p>
<!--段落想要换行用br-->
<br>
<!--加下划线用hr-->
<!--hr的/在它后面-->
<hr/>
<p>
html标签<p>是段落的意思，其中p是paragraph英文段落的缩写。段落是中英文里的概念基本类似，就是文本块，不同的段落一般要另起新行。<p >元素会自动在其前后创建一些空白。
</p>

在这里插入图片描述
注释标签 < !---->
标题标签 h1 h2 h3 h4 h5 h6
段落标签 p
换行 br
下划线hr/

<html>
   <head>
      <title>李清照简介</title>
   </head>
    <body>
	  <h1>人物简介</h1>
	  <p><b>李清照</b>（<i>1084年3月13日~1155年5月12日</i>），宋代女词人，号易安居士，婉约词派代<br>
	  表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。<br>
	  所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟<br>
	  途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之<br>
	  法作词，留有诗集《易安居士文集》、《易安词》等。</p>
	  <hr/>
      © 简单尝试一下
	</body> 
</html>

</head>
   <body>
	   <h2>空格符号</h2>
	    符号<br>
	   符&nbsp;&nbsp;&nbsp;号<br>
	   <!--半角空格-->
	   符&ensp;&ensp;&ensp;号<br>
	   <!--全角空格-->
	   符&emsp;&emsp;&emsp;号<br>
	   <hr/>
       <h2>大于小于号</h2>
	   &lt;span&gt;符号&lt;/span&gt;<br>
	   <hr/>
	   <h2>双引号</h2>
       &quot;符号&quot;
       <hr/>
       <h2>版权符号</h2>  
       &copy;符号
   </body>
</html>

在这里插入图片描述

<html>![在这里插入图片描述](https://img-blog.csdnimg.cn/7527d84b304240b9b0939a844af57f46.png#pic_center)

	<head>
		<title>图片的引用</title>
	</head>
	<body>
		<!--
	       src：图片路径
		       绝对路径:从盘符开始
			   相对路径:相对于当前编辑的文件寻找图片，添加图片名字
			    1、先跳到能看得到图片所属的文件位置
				2、再进到图片所属路径
			    ./：同级目录
				../：回到上一级，不用写上级文件名
		   title:鼠标悬浮时的提示文字
		   alt:图片未加载时的代替文字
		   width:图片宽度
		   height:图片高度
		   
		-->
		<img src="D:\workspace\初始html\img\核桃.png" title="" alt="" width="" height="">
		<img src="./img/核桃.png" title="核桃" alt="核桃" width="100" height="100">
		<img src="../img/核桃.png" title="" alt="" width="" height="">
		<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.iilMusn3clq4IvVfdvzjOwHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
			title="" alt="" width="" height="">
	</body>
</html>

在这里插入图片描述