常用HTML元素小结

常用HTML元素小结_第1张图片
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)

常用HTML元素小结_第2张图片
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
常用HTML元素小结_第3张图片
Snip20181226_3.png

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

kobe
NBA champion
NBA STAR
常用HTML元素小结_第4张图片
Snip20181227_7.png

(常与配合使用)

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

description
图片的说明/标题
常用HTML元素小结_第5张图片
Snip20181226_6.png




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

5. HTML表格元素

常用HTML元素小结_第6张图片
Snip20181226_12.png

注意区分

置于

tr:table row(表格行)包裹 th td,
th:table header cell(表头单元格) td: table data cell(表中的数据单元)

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

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

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


6. 表单元素

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

HTML表单初探


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️⃣atarget的值等于 打开百度

常用HTML元素小结_第7张图片
Snip20181227_8.png

在页面上

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


  grandfather
  

常用HTML元素小结_第8张图片
跳转前.png

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

常用HTML元素小结_第9张图片
Snip20181227_12.png

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

常用HTML元素小结_第10张图片
Snip20181227_13.png

点击 target="_topparent链接,会在 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设置的值,强烈建议不要省略该属性

常用HTML元素小结_第11张图片
Snip20181226_14.png

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

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

常用HTML元素小结_第12张图片
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元素小结_第13张图片
Snip20181227_4.png

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

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


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

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


参考:

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

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

你可能感兴趣的:(常用HTML元素小结)