Part 1-3 常用的基本元素
2018-09-14 本文已影响0人
那谁_
常用元素
严格来说，单纯的<p>就是标签，而<p>一个段落</p>则是元素.
标题元素(Header 1~Header 6)
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
- <h1 ~ h6>标签用来定义标题，其大小依次减小，<h1>是最大的标题，<h6>是最小的标题.
- 标题标签包裹的内容会单独占一行.
- 标题标签最多只能到
<h6>，超出无效.
段落元素(paragraph)
<p>标签定义段落，每一个<p>
- 被段落标签包裹的内容会独占一行.
图片元素(image)
<img src="logo.png" alt="加载失败~" height="150px" width="300px">
<img>标签用来嵌入图片，该标签没有结束标签，也可以称之为“空元素（empty element）”.<img>标签有两个必备的属性.src="图片的地址/路径"与alt="图片加载失败显示的文字".height和width属性是分别用来设置图片的高度与宽度.
参考资料：
更多关于<img>元素知识可参看：<img>.
超链接元素(anchor)
<a href="http://www.baidu.com" target="_blank">我是一个超链接，指向百度.</a>
<a>标签定义为超链接，href="指定链接目标".target属性用来告诉浏览器是否保留原始界面.
<a href="http://www.baidu.com" target="_blank">
<img src="logo.png" alt="百度">
</a>
- 如果图片也需要超链接，则可以通过元素嵌套实现.
a标签的必备属性
| 属性名称 | 值 | 作用 |
|---|---|---|
href |
目标链接 | 转跳到目标指定链接 |
target |
_blank、_self、_parent、_top |
为_blank时保留当前页面，为_self时不保留当前页面，为_parent时表示在当前框架的父框架打开，为_top时表示顶层框架打开，后两种一般用于iframe中. |
页面内锚点
当<a>元素用于页面内的锚点跳转时，应该先为该页面设置一些锚点，而定义锚点有两种办法：
-
通过
<a>元素的name属性来定义，<a name="anchor-name">中name属性的值就是锚点的名称</a> -
通过其他元素的id属性来定义，
<div id="anchor-name">id属性值可以作为锚点的名称</div>
设置好了锚点之外，就可以通过<a>元素链接到该锚点位置，其href取值为“# + 锚点名称”
<a href="#anchor1">锚点链接一</a>
<a href="#anchor2">锚点链接二</a>
<div>
<div>我这里有很多内容...</div>
<!-- 使用a的name属性定义锚点 -->
<a name="anchor1">点击锚点链接一，会跳到我这里</a>
<div>我这里有很多内容...</div>
<!-- 使用元素的id属性定义锚点 -->
<p id="anchor2">点击锚点链接二，会跳转到我这里</p>
</div>
发送电子邮件
<a href="mailto:vacca@mail.com">发送邮件给我</a>
- 当其用于邮件链接时，href属性的值为“mailto: + 邮件地址"
更多参考：
更多关于<a>元素知识可参看：<a>.
行内换行元素(Break)
<p>锄禾日当午，<br/>
汗滴禾下土。</p>
- 在行内进行换行.
列表元素(list)
有序列表(ordered list)
<ol>
<li>首先把冰箱门打开</li>
<li>然后把大象关进去</li>
<li>最后把冰箱门关上</li>
</ol>
-
用于给一些内容添加排序， 列表中的条目
有先后之分.
无序列表(unordered list)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
-
这里的无序是指对于主体来说内容
没有先后之分. <li>标签不能单独存在, 必须包裹在<ul>里.
定义列表(definition list)
<dl>
<dt>北京</dt>
<dd>国家的首都, 看升国旗的地方</dd>
<dt>上海</dt>
<dd>魔都, 遍地是黄金的地方</dd>
</dl>
- 给内容添加列表语义, 通过
dd(definition description)给每个dt(definition title)进行相应的描述. dt和dd标签不能单独存在, 必须包裹在dl里面，且dl里面不推荐包裹其它标签.- 可以给一个
dt配置多个dd,dd的语义是描述离它最近的一个dt, 所以不要出现多个dt对应一个dd.
参考资料：
div元素
<div>
<h2>区块标题</h2>
<p>区块描述文字</p>
</div>
<div>标签用来分割为独立的、不同的部分，一般用来分配网页的的布局.- 每一个
<div>标签默认都另起一行.
span 元素
<div>
<p><span>作者：</span><span>xxx</span></p>
<p><span>发布时间：</span><span>xx-xx-xx</span></p>
<p><span>浏览量：</span><span>xxxx</span></p>
</div>
<span>标签被用来组合文档中的行内元素.- 每一个
<span>标签默认不会另起一行.
