day03

标签

01标题

<h1></h1>
<h6></h6>

02加粗

<!--bold的简写，单纯的加粗 -->
<b></b>

<!--strong视觉加粗，有强调的意思-->
<strong></strong>

03倾斜

<!--italic倾斜，单纯的倾斜-->
<i></i>

<!--有强调的意思-->
<em></em>

04 超链接

<!-- 重点！！！！！！！！！！！！！！ -->
		<!-- 超链接 a  语法如下 必须搭配一个伙伴  href属性 -->
		<a href="http://www.baidu.com">我是超链接，点我可以跳转</a>
		<!-- 如果想要正确跳转到某个网站，必须添加http:// -->
		<a href="http://www.qfedu.com">我是超链接，点我可以跳转</a>
		<!-- a的特点，横着排列，水平之间也是有缝隙，且文字颜色不再是黑色，还有下划线 -->
		<!-- 如果跳转的不是某个网址，而是自己本项目中的文件，具体写法如下 -->
		<!-- 写法1 -->
		<a href="02加粗.html">点我跳转到02加粗页面</a>
		<a href="../day0222/01文本标题.html">点我跳转到昨天的01文本标题文件</a>
		<a href="room/05我是套间里面的页面.html">点我跳转到套间页面</a>
		<!-- 
		 在写本项目内文件相互跳转的时候，需要先分析再书写代码
		 1、确定一下，当前文件是谁在哪？（当前文件就是书写a代码的文件）
			例如  当前文件就是04超链接.html
		 2、确认一下，目标文件是谁在哪？（目标文件就是最终想要跳转的文件）
			例如： 目标文件就是02加粗.html	
		 3、分析当前文件和目标文件之间的关系
			3-1、如果当前文件和目标文件都在同一个目录，那么href中书写的语法是
				href="目标文件的名字.扩展名"
				就好比自己和郭麒麟在一个屋子里面，那么直接喊郭麒麟的名字即可
			3-2、如果当前文件所在的文件夹和目标文件所在的文件夹在同一目录，写法如下
				href="../目标文件所在的文件夹名字/目标文件的名字.扩展名"
				.. 使用的场景，当需要返回上一级，也就是后退1步的时候可以添加..
				/  可以起到分割的作用  /前面就是第1步操作  /就是下一步操作
				分析过程：
				目标文件是01文本标题，当前文件是04
				目标文件01在day0222文件夹里面，当前文件04在day0223文件夹里面
				可以情景带入：
				把01看成郭麒麟 ，把04看成自己
				已经知道，郭麒麟在0222房间，自己在0223房间
				目的是想去找郭麒麟
				 自己得从0223房间出来，然后进入到0222房间，最后就可以找到郭麒麟
				  出来在代码就是后退，用..  这里的2个点是后退1步
			3-3、当前文件和目标文件所在的文件夹，在同一目录
				  href="目标文件所在的文件夹/目标文件的名字.扩展名"
		 -->

05插入图片

<!-- 注意点，需要的图片必须放在项目里面，尤其不能跨盘 -->
	<img src="pic.png" />
	<img src="img/guoguo.png" />
	<img src="../day0222/qiqi.png" />
	
	<!-- title="设置图片鼠标悬停上去之后的提示信息" -->
	<img src="img/guoguo.png" title="这个是郭麒麟呀" />
	<!-- alt="设置当图片丢失了不显示的时候给的提示信息" 也有利于搜索引擎优化 -->
	<img src="pic.png" alt="这里有一张郭麒麟的照片" />
	<!-- width="宽度"  height="高度"  如果""当中不写单位，默认的单位是像素px-->
	<!-- %单位也可以  %是相对单位，相对于最近的父元素的，目前这里的50%是body的一半-->
	<img src="img/guoguo.png" width="50px" height="50" />
	<img src="pic.png" width="50%" height="50" />

06锚点

<!-- 
	锚点效果：
	   a超链接默认的效果是实现从1个页面到另外1个页面的跳转
	   目的：如果想要实现当前页面不同位置的跳转，也是用a，但是需要配合id做锚点
 	使用方法
 	   <a href="id值"></a>
  	   <标签 id=""></标签>
  	说明：id在锚点的效果里面，属性值可以随便给
 -->

07列表

无序列表

<!-- 无序列表  ul  li  语法如下 -->
<!-- 默认的列表符号是实心圆 -->
		<ul>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
<!-- 不想要列表符号 用属性type="none"  type类型-->
		<ul type="none">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
<!-- 属性type="square"  square 方形-->
<!-- 属性type="circle"  circle 空心圆-->
<!-- 属性type="disc"  disc 实心圆-->
		

有序列表

<!-- 有序列表 ol  li 语法如下 -->
<!-- ol*6>li{有序列表}*3 -->
<!-- 默认是数字数列 可以添加type属性和start开始书写 -->
<!-- start="数字" -->
		<ol>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>
		<!--
			type="A"大写字母
			type="a"小写字母
			type="I"大写罗马字母
			type="i"小写罗马字母
		-->
			

自定义列表

<!-- 自定义列表 dl  dt dd 适合图文混排的效果 语法如下 -->
<!-- 官方定义中，dd可以有多个，dt只有1个 -->
		<dl>
			<dt>自定义的标题</dt>
			<dd>自定义的描述</dd>
		</dl>

		<dl>
			<dt>什么是HTML？</dt>
			<dd>HTML是超文本标记语言</dd>
			<dd>HTML可以实现网页的结构展示</dd>
			<dd>HTML可以实现网页的结构展示</dd>
			<dd>HTML可以实现网页的结构展示</dd>
			<dd>HTML可以实现网页的结构展示</dd>
		</dl>

其他

<!--段落-->
<p></p>

<!--删除线-->
<s></s>
<del></del>
<strike></strike>

<!--下划线-->
<u></u>

<!--换行-->
<br>

ctrl+k 整理代码格式