html为什么用table分区没用,常用HTML元素小结

htmldog.png

常用HTML元素及其属性：

根元素

1. HTML文档根元素

属性：lang(全局属性),设置整个html文档的语言

lang="en"(英语) lang="zh-CN"(中文)

2.HTML文档元数据

常用于引入外部CSS

属性：rel是relation的缩写。它指定了标签和href之间的关系。

metadata元数据信息。

meta可以包含很多的信息记住一些常用的就行

①

声明当前文档的字符编码方式

②

移动端适配

initial-scale一个0.0 到10.0之间的正数,定义设备宽度(纵向设备宽度或横向设备高度)与视口大小之间的缩放比率。

③

兼容IE(6,7,8)

④

添加页面描述，有利于搜索引擎优化(SEO)

Snip20181226_2.png

⑤

不要发送 HTTP Referer 首部。

3. HTML内容分区

呈现了文档

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

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

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

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

Snip20181227_5.png

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

Snip20181226_10.png

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

4. HTML文本内容

• (常用于页面布局)

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

  • abc
  • abc
  • abc

  

  Snip20181226_3.png

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

  kobe

  NBA champion

  NBA STAR

  

  Snip20181227_7.png

  (常与配合使用)

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

  

  图片的说明/标题

  

  Snip20181226_6.png

  ---

  ---

  一条水平线，可以通过width的值，设置其长度

  5. HTML表格元素

  

  Snip20181226_12.png

  注意区分

  tr：table row(表格行)包裹 th td，

  th：table header cell(表头单元格) td： table data cell(表中的数据单元)

  置于

  中， 的width属性可设置每一列的宽度(html5中已废弃，不建议使用)

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

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

  代码

  6. 表单元素

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

  7. 其他HTML重要常用元素

  很重要 很重要 很重要

  锚(anchor)元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

  href

  1️⃣相对路径

  2️⃣http://

  3️⃣https://

  4️⃣//xxx.com

  5️⃣#

  6️⃣javascript:;

  href="//xxx.com"时，表示无协议，自动继承当前页面的协议。

  href="#"(哈希标记),

  返回顶部 返回顶部

  href="#attr",当某一元素的id的值为attr，点击点击返回元素id为attr所在的区域。

  javascript:; 点击链接的时候不会有任何反应

  点击

  7️⃣a的target的值等于的name属性的值，且的src="#"(即为当前页面地址)

  打开百度

  

  Snip20181227_8.png

  在页面上框架中打开网页。

  target

  _blank (blank空白) 在新开的窗口打开网页。

  blank打开百度

  点击上面的链接新开窗口打开百度。

  a标签target的其他属性_top _self _parent结合的使用

  首先在同一个目录建立三个html文档 son.html papa.html grandfather.html

  代码分别如下：

  我自己

  self

  parent

  top

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

  papa

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

  grandfather

  

  跳转前.png

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

  

  Snip20181227_12.png

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

  

  Snip20181227_13.png

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

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

  download

  href为下载地址，指示浏览器下载URL而不是导航到它

  点击下载

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

  

  页面展示显示的百度的logo

  src：图像的 URL(不是href，不是href)，这个属性对 元素来说是必需的。

  alt：图像的替换文本，如果url地址错误，将会向用户展示alt设置的值，强烈建议不要省略该属性

  

  Snip20181226_14.png

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

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

  

  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，则缝隙又会出现

  */

  }

  

  Snip20181227_4.png

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

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

  
  在文本中生成一个换行(回车)符号

  : emphasize(强调)

  : Italic(斜体)

  字面上就能了解这几个元素的作用：

  标记出需要用户着重阅读的内容；表示文本十分重要，一般用粗体显示；用于表现因某些原因需要区分普通文本的一系列文本用斜体表示。

  参考：

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