常用HTML元素小结

时间: 2020-08-30｜tag： ｜23次围观｜0 条评论

常用HTML元素小结插图
htmldog.png

常用HTML元素及其属性：

根元素

1. <html>HTML文档根元素

属性：lang(全局属性),设置整个html文档的语言
lang="en"(英语) lang="zh-CN"(中文)

2.HTML文档元数据

  • <link>常用于引入外部CSS

<link rel="stylesheet" href="style.css">
属性：rel是relation的缩写。它指定了标签和href之间的关系。

  • <meta>metadata元数据信息。

meta可以包含很多的信息记住一些常用的就行
①<meta charset="utf-8">
声明当前文档的字符编码方式
②<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端适配
initial-scale一个0.0 到10.0之间的正数,定义设备宽度（纵向设备宽度或横向设备高度）与视口大小之间的缩放比率。
③<meta http-equiv="X-UA-Compatible" content="ie=edge">
兼容IE(6,7,8)
④<meta name="description" content="A description of the page" >
添加页面描述，有利于搜索引擎优化(SEO)

常用HTML元素小结插图1
Snip20181226_2.png

⑤<meta name="referrer" content="no-referrer">
不要发送 HTTP Referer 首部。

3. HTML内容分区

<main>

呈现了文档<body>或应用的主体部分，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo等

<header>

不难理解就是头部，主要是用来放置网站的刊头，固定会重覆出现的导航、LOGO、站名等内容。

<aside>

侧栏，网页中非主要区域的地方，常见放广告及导览、全站检索的地方

<footer>

页脚，一般位于网页最后的位置，一个独立的部分，通常包含该章节作者、版权数据或者与文档相关的链接等信息

常用HTML元素小结插图2
Snip20181227_5.png

<nav>

导航栏 (nav) ，一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.

常用HTML元素小结插图3
Snip20181226_10.png

<section>

表示文档中的一个区域（或节），内容中的一个专题组，一般会有包含一个标题(更多是从语义化角度考虑)

4. HTML文本内容

<ul> <li>(常用于页面布局)

ul：unorder list无序列表 li：list 项目

<ul>  <li>abc</li>  <li>abc</li>  <li>abc</li></ul>
常用HTML元素小结插图4
Snip20181226_3.png

<dl> <dt> <dd>

dl：definite list定义列表 dt：definite title定义标题 dd：definite description定义描述

<dl>  <dt>kobe</dt>    <dd>NBA champion</dd>  <dd>NBA STAR</dd></dl>
常用HTML元素小结插图5
Snip20181227_7.png

<figure> <figcaption> (常与<img>配合使用)

figcaption元素 是与其相关联的图片的说明/标题，

<figure>  <img src="url" alt="description">  <figcaption>图片的说明/标题</figcaption></figure>
常用HTML元素小结插图6
Snip20181226_6.png

<hr>

<hr width="200px">
一条水平线，可以通过width的值，设置其长度

5. HTML表格元素

<table> <thead> <tbody> <tfoot> <td> <th> <tr> <colgroup> <col>

常用HTML元素小结插图7
Snip20181226_12.png

注意区分<tr> <th> <td> tr：table row(表格行)包裹 th td，
th：table header cell(表头单元格) td： table data cell（表中的数据单元）

<colgroup>  <col width="100">      <col width="100">  <col width="80">  <col width="50"></colgroup>

置于<table></table>中， <col>的width属性可设置每一列的宽度(html5中已废弃，不建议使用)
<table border="1px" style="border-collapse:collapse">合并边框

border-collapseCSS属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

通过查看下面代码，就能了解常用的表格元素的用法
代码

6. 表单元素

表单元素的重要性不言而喻，请点击查看之前的一篇文章

HTML表单初探

7. 其他HTML重要常用元素

<a> 很重要 很重要 很重要

锚(anchor)元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
href
1️⃣相对路径
2️⃣http://
3️⃣https://
4️⃣//xxx.com
5️⃣#
6️⃣javascript:;
href="//xxx.com"时，表示无协议，自动继承当前页面的协议。
href="#"(哈希标记),
<a href="#">返回顶部</a> 返回顶部
href="#attr",当某一元素的id的值为attr，点击点击返回元素id为attr所在的区域。
javascript:; 点击链接的时候不会有任何反应
<a href="javascript:;">点击</a>
7️⃣a的target的值等于<iframe>的name属性的值，且<iframe>的src="#"(即为当前页面地址)

<iframe name="xxx" src="#"  frameborder="0"></iframe><a href="https://www.baidu.com/"  target="xxx">打开百度</a>

常用HTML元素小结插图8
Snip20181227_8.png

在页面上<iframe>框架中打开网页。
target
_blank (blank空白) 在新开的窗口打开网页。
<a href="https://www.baidu.com/" target="_blank">blank打开百度</a>
点击上面的链接新开窗口打开百度。
a标签target的其他属性_top _self _parent结合<iframe>的使用
首先在同一个目录建立三个html文档 son.html papa.html grandfather.html
代码分别如下：

<body>  我自己  <a href="https://www.baidu.com/"  target="_self">self</a>  <a href="https://www.baidu.com/" target="_parent">parent</a>  <a href="https://www.baidu.com/"  target="_top">top</a></body>

parent.html引入son.html,形成父子引入关系，所以当前页面也就是parent.html所打开的页面

<body>  papa  <iframe src="./son.html"  frameborder="0"></iframe></body>

grandfather.html引入papa.html,加之之前的parent.html引入son.html,所有构成三个html文档的三代关系

<body>  grandfather  <iframe src="./papa.html" frameborder="0"></iframe></body>
常用HTML元素小结插图9
跳转前.png

点击target="_self的son链接，只在son.html页面本身窗口打开。

常用HTML元素小结插图10
Snip20181227_12.png

点击target="_parent的parent链接，会在son.html的父辈parent.html页面打开

常用HTML元素小结插图11
Snip20181227_13.png

点击target="_top的parent链接，会在son.html的祖先grandparents.html页面打开

总结：target="_top(祖先窗口打开)，target="_parent(父亲窗口打开)，target="_self(自身窗口打开)，self="_blank"(新开窗口)，结合字母意思以及自己写一个demo验证，基本不会忘记

download
href为下载地址，指示浏览器下载URL而不是导航到它
<a href="downloading%20address" download>点击下载</a>

<img>元素，代表文档中一个图像(image)

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下">
页面展示显示的百度的logo
src：图像的 URL(不是href，不是href)，这个属性对 <img> 元素来说是必需的。
alt：图像的替换文本，如果url地址错误，将会向用户展示alt设置的值，强烈建议不要省略该属性

常用HTML元素小结插图12
Snip20181226_14.png

title：当鼠标悬停在图上一段时间时会显示title所赋的属性值

注： <img> 是一个替换inline元素。它没有基线，这意味着当在一个行内格式的上下文中使用时，默认是基线(baseline)对齐(vertical-align: baseline),这时候图片下方就会出现缝隙

常用HTML元素小结插图13
Snip20181227_3.png
div {  width: 50%;  font-size: 30px;  border: 1px solid blue;    }img {  width: 200px;  height:100px;  vertical-align:middle;  /* 去掉img样式vertical-align:middle(不为baseline的其他值也行)若是设置为baseline，则缝隙又会出现 */}
常用HTML元素小结插图14
Snip20181227_4.png

<span> 元素是短语内容的通用行内容器

没有任何特殊语义，不会对包裹的文本有任何影响，用户为文本内容隔离出一个单独的不受外界干扰的空间，是行内元素。

<br>在文本中生成一个换行（回车）符号

<strong> <em> <i>

<em>: emphasize(强调)
<i>: Italic(斜体)
字面上就能了解这几个元素的作用：
<em>标记出需要用户着重阅读的内容；<strong>表示文本十分重要，一般用粗体显示；<i>用于表现因某些原因需要区分普通文本的一系列文本用斜体表示。

参考：

www.w3.org
HTML 元素参考
meta MDN
html HEAD

版权声明：本文为博主原创文章，未经博主许可不得转载

文章转载于:https://www.jianshu.com/p/a1c1542cac03

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《常用HTML元素小结》
　 　

还没有人抢沙发呢~