初识Html

一：html结构

工具（HBuilderX）

 二：基本标签

<!-- “常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
		其中 <span> 标签最典型的行内元素。 -->
		
		<!-- “常见的块元素有div，p，ul，li，h1~h6系列标签等。” -->
		
		<!-- <h1>~<h6>
		标题标记，用于表示文档内容的标题内容，以及标题内容的级别 -->
		<h1>大小</h1>
		<h2>大小</h2>
		<h3>大小</h3>
		<h4>大小</h4>
		<h5>大小</h5>
		<h6>大小</h6>
		
		<!-- 行内元素和其他元素都在一行上高，行高及外边距和内边距部分可改变
		行内元素只能容纳文本或者其他行内元素 -->
		<span>无实际意义，起辅助作用</span>
		
		<!-- div块级元素总是在新行上开始，占据一整行；高度，行高以及外边距和内边距都可控制；
		宽带始终是与浏览器宽度一样，与内容无关；它可以容纳行内（内联）元素和其他块元素 -->
		<div>独占一行，通常作为“盒子”使用</div>
		
		<!-- <hr/>水平线 -->
		<!-- <br/>换行标记，用于段落内部的换行 -->
		<!-- p段落标记，用于表示内容是一个段落 -->
		<p>这是一个段落</p>
		<hr>
		<p>这是另外一个段落</p>
		这一段句子需要换行：<br>人生若只如初见,何事秋风悲画扇。<br>

 

运行结果：

 文本标签：

 

<!-- <b></b>样式表现为粗体 -->
		<!-- <strong></strong>主旨是强调，表现为粗体 -->
		<b>b:有加粗效果</b>
		<strong>strong:也有加粗效果，更推荐使用</strong>
		<p>正常字体大小</p>
		
		<!-- <i></i>样式表现为斜体体 -->
		<!-- <em></em>主旨是强调，表现为斜体 -->
		<i>i:斜体效果</i><br>
		<em>em:斜体效果，更加推荐</em><br>
		
		<!-- <big></big>定义大字体的文字 不符合标准网页设计的理念,不赞成使用 -->
		<!-- <small></small>定义小字体的文字 -->
		<big>big：字体变大，了解即可，基本不会使用</big><br><br>
		<small>small：字体变小，了解即可，基本不会使用</small><br><br>
		
		<!-- <u></u>下划线 -->
		<u>下划线效果</u><br>
		
		<!-- <del></del>删除线 -->
		<del>删除线效果</del><br>
		
		<!-- <sup></sup>上标 -->
		正常效果，
		<sup>上标效果</sup>
		
		<!-- <sub></sub>下标 -->
		<sub>下标效果</sub>
		正常效果

 运行结果：

 

 

 列表标签：

<!-- <ul></ul>无序列表标记，表示列表所包含的项是没有先后顺序的列表项使用<li>表示 -->
		有序列表：
		<ul>
			<li>我是个俗气至顶的人</li>
			<li>见山是山</li>
			<li>见海是海</li>
			<li>见花便是花</li>
			<li>唯独见了你</li>
			<li>云海开始翻涌</li>
		</ul>
		
		<!-- <ol></ol>有序列表标记，表示列表所包含的项是有先后顺序的列表项使用<li>表示 -->
		无序列表：
		<ol>
			<li>哥哥们动动小手点点赞</li>
			<li>姐姐们动动小手点点赞</li>
			<li>诶，我也可以给自己点赞-_-</li>
		</ol>
		
		<!-- <dl></dl>自定义列表：是项目及其注释的组合
		<dt></dt>标明一个术语要说明的对象
		<dd></dd>列表项说明 -->
		自定义列表：
		<dl>
			<dt>啥效果？</dt>
				<dd>自己看效果</dd>
				<dd>自己看效果</dd>
				<dd>自己看效果</dd>
			
		</dl>

运行结果：