第2天:HTML常用标签

今天学完主要对所学知识点进行了整理。

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打开);_self(当前窗口打开) 二、文件路径 绝对路径: (1)线上:线上绝对路径 (2)线下:完整路径

相对路径: src=../img/bg.jpg(../是上一级目录)

三、HTML常用标签 section :版块 用于划分页面上的不同区域,或者划分文章里不同的节

header :页面头部或者版块(section)头部

footer:页面底部或者(section)底部

nav:导航 (包含链接的的一个列表)

article:用来在页面中表示一套结构完整且独立的内容部分 可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。

aside:元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分 1,被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等 2,在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

h1-h6 标题 ul 无序列表 ol 有序列表 li ul或者ol的列表项 dl 定义列表 dt 定义列表的项目 dd 对dt展开的描述扩展 p 段落 time 时间 em 强调一个词或者一段话 strong 强调一个词或者一段话 img 图片 四、选择器优先级 行间样式>ID>class>类型符>通配符

五、行内、块元素 行内元素: 1、内容撑开宽高 2、不支持宽高 3、一行可以显示同类多个标签 4、不支持上下的margin 5、代码换行被解析

块元素: 1、默认独占一行 2、没有宽度时,撑满一行 3、支持所有class命令

inline-block 1、块在一行显示 2、内联支持宽高 3、默认内容撑开宽高 4、标签之间的换行会被解析(问题) 5、IE6、IE7不支持块属性标签的inline-block(问题)

块级元素(block element): 每个块级元素默认单独占一行高度,块级元素一般可嵌套块级元素或行内元素;

块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。

div是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。 常见块级元素有: address(地址)、blockquote(块引用)、center(居中对齐块)、dir(目录列表)、div、dl(定义列表)、fieldset - form(控制组)、form、h标签、hr、menu、ol、p、pre(格式化文本)、table、ul

行内元素(inline element)

行内元素只能容纳文本或其他内联元素,元素样式display : inline的都是行内元素。例如文字这类元素,各个字母之间横向排列,到最右端自动折行。行内元素转行内块级元素设置display:inline-block;

对行内元素,需要注意如下

设置宽度width 无效。

设置高度height 无效,可以通过line-height来设置。

设置margin 只有左右margin有效,上下无效。

设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。 常见内联元素有: a、abbr、b、acronym(首字)、b(粗体)、big(大字体)、br、cite、code(计算机代码)、dfn、em、font、i、img、input、kbd(定义键盘文本)、label(表格标签)、q、s(中划线)、samp、select(项目选择)、small(小字体文本)、span、strike、strong、sub(下标)、sup(上标)、textarea(多行文本输入框)、tt(电传文本)、u(下划线)、var

 一个小例子:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页码显示效果</title> <style> #div1{ width:100%; height:50px; text-align: center;

} a{ text-decoration: none; color: #000; text-align: center; width:20px; height:20px; display: inline-block; border: 1px solid #11f; } a:hover{ background: #25e; color: #fff; } .prev{ width: 60px; }

</style> </head> <body> <div id="div1"> <a href="#" class="prev">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> <a href="#" class="prev">下一页</a> </div> </body> </html>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

CSS 1.0~3.0选择器(上)

HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将C...

2805
来自专栏偏前端工程师的驿站

CSS魔法堂:那个被我们忽略的outline

 在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性——outline,由于之前对其...

631
来自专栏mukekeheart的iOS之旅

IOS学习——iphone X的适配

  说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了。   首...

3166
来自专栏CRPER折腾记

Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

841
来自专栏HTML5学堂

关于其他选择器以及选择器优先级详解

上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,...

2928
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

1285
来自专栏Android机动车

歌词显示控件的实现(下)——自定义View

在上篇文章中呢,分享了关于lrc歌词文件的解析方法,根据歌词文件格式,解析出对应实体类。但是,怎样才能让让自己的音乐播放器的歌词像网易云音乐一样,随音乐(歌词时...

731
来自专栏hightopo

绘制SVG内容到Canvas的HTML5应用

2043
来自专栏逸鹏说道

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

2918
来自专栏大数据钻研

前端开发面试题总结之——CSS3

---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子...

3494

扫码关注云+社区

领取腾讯云代金券