专栏首页前端知识分享第2天:HTML常用标签

第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 条评论
登录 后参与评论

相关文章

  • 第20天:京东nav、footer部分制作

    cursor:pointer; 鼠标变成小手 cursor:default;小白 cursor:move;移动 cursor:text;文本输入

    半指温柔乐
  • 第71天:jQuery基本选择器(二)

    半指温柔乐
  • 第213天:12个HTML和CSS必须知道的重点难点问题

    这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮...

    半指温柔乐
  • CSS3常用选择器

    Leophen
  • jQuery中常用的函数和属性详细解析

    $("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map

    公众号php_pachong
  • 元素节点(附考题)

    setAttribbute(attrname.attrvalue)--用来设置元素节点的属性名和属性值,可以替代属性节点的设置

    生南星
  • 使用mkdocs管理你的博客或者文档

    其实我是想找一个文档管理的东西,无意间知道了mkdocs,感觉还不错,是使用python做的一个静态网站生成器

    bboysoul
  • 数据结构的基本概念

    我是攻城师
  • Css3之高级-5 Css转换(简介、2

      - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转、缩放、移动或倾斜

    py3study
  • OpenGL ES(三) 纹理

    用户2215591

扫码关注云+社区

领取腾讯云代金券