一: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>
运行结果: