首页
学习
活动
专区
圈层
工具
发布

html锚点id属性和name属性

最近对模板更新时用到了这一点,举例说一下 // a.html 点击跳转到第一个锚点 点击跳转到第二个锚点 // a.html id...一般情况下,我们会在目标节点上添加id属性或者name属性,这个id或者name属性的值就是我们寻找锚点的依据,推荐使用id属性来标记锚点(因为id能够在各种标签上使用,name属性标记锚点时只能用在a...a标签一般用作定义超链接,用作超链接时它的href属性的值是另一个页面的URL。a标签用作锚点时,href的值是锚点的id值或者name值。...同一页面内的锚点跳转时,给href赋值# + 锚点id的值或者# + 锚点name的值,需要跳转其他页面的锚点位置时,需要在#前面加上跳转的路径,例如:href="b.html#two"

2.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端id属性和span标签

    一.页面的id 1.页面中的id一般是唯一的 不可重复 2.id的命名规则: 驼峰 连字符 因公司而异。。...按照谷歌代码风格指南的说法: ID和class名字有多单词组合的用短破折号“-”分开。 别在选择器名字里用短破折号“-”以外的连接词(包括啥也没有), 以增进对名字的理解和查找。.../* 不推荐:“demo”和“image”中间没加“-” */ .demoimage {} /* 不推荐:用下划线“_”是屌丝的风格 */ .error_status {} /* 推荐 */ #video-id...{} .ads-sample {} 参考文章: https://iischajn.github.io/trans/htmlcss-guide/#ID_and_class_naming 二.页面的span...一般页面不要用font标签 今儿天真好 用span标签来代替: id="all-unreadmessage" style="color: red

    1K40

    css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...list-style:简写属性,用于把下边三个属性声明到一起。 list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。...list-style-type的属性值: none:无标记。 disc:标记实心圆。不设置的时候默认disc。 circle:空心圆。 square:实心方块。 decimal:标记是数字。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...inherit:从父级继承list-style-position属性值。

    2.1K20

    css列表属性和样式控制

    如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...list-style:简写属性,用于把下边三个属性声明到一起。 list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。...list-style-type的属性值: none:无标记。 disc:标记实心圆。不设置的时候默认disc。 circle:空心圆。 square:实心方块。 decimal:标记是数字。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...inherit:从父级继承list-style-position属性值。

    1.9K10

    CSS基础——css 属性

    我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....border-right:10px solid green;border-bottom 设置底边边框,如:border-bottom:10px solid pink;padding 设置元素包含的内容和元素边框的距离...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;

    2.7K21

    html css中id和class的区别比较

    css中 # 和 . 区别 . 用于id #用于class属性 html css中id和class的区别比较 1、语法区别: id对应css是用样式选择符“#”(井号)。...class对应css是用样式选择符“.”(英文半角输入句号)。 2、使用次数区别: id属性,只能被一个元素调用(以“#”选择符命名CSS样式在一个页面只能使用调用一次)。...在同一个页面,只可以被调用一次,在CSS里用“#”表示。...3、语义和使用不同: id作为元素的标签,用于区分不同结构和内容 而class作为一个样式,它可以应用到任何结构和内容 在布局思路上,一般坚持这样的原则: id是先确定页面的结构和内容,然后再为它定义样式...而class相反先定义一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。

    1.8K10

    css属性详解

    颜色是通过CSS最经常的指定:   十六进制值 - 如: #FF0000     一个RGB值 - 如: RGB(255,0,0)   颜色的名称 - 如:  red   还有rgba(255,0,0,0.3...display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...六、css盒子模型 margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。...padding:           用于控制内容与边框之间的距离;    Border(边框):     围绕在内边距和内容外的边框。 Content(内容):   盒子的内容,显示文本和图像。

    3.2K102

    CSS background属性

    属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。...---- “background: cyan url(bg.png) no-repeat left top;”,背景不重复,背景和盒子左上角对齐,盒子其他部分显示背景颜色“cyan”。 ?...---- “background: cyan url(bg.png) no-repeat left center;”,背景不重复,背景和盒子左中对齐,盒子其他部分显示背景颜色“cyan”。 ?...---- “background: cyan url(bg.png) no-repeat right center;”,背景不重复,背景和盒子右中对齐,也就是背景图片的右边对齐盒子的右边,盒子其他部分显示背景颜色

    2.1K10

    CSS外观属性

    line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px 一般情况下,行距比字号大7.8像素左右就可以了。...其可用属性值如下: left:左对齐(默认值) right:右对齐 center:居中对齐 text-indent:首行缩进 text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值...和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。 word-spacing和letter-spacing均可对英文进行设置。...颜色半透明(css3) 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下:    color: rgba(r,g,b,a)  a 是alpha 透明的意思 取值范围 0~1之间    color...: rgba(0,0,0,0.3)   文字阴影(CSS3)  Shadow 影子 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; ?

    1.8K20

    前端学习笔记之CSS属性设置 CSS属性设置

    单位是像素 (0px 0px) 或任何其他的 CSS 单位。  如果只设置了一个值,另一个值就是50%。  可以混合使用%和position值。...但其实一次请求的带宽就足够容纳10张图片的大小 精灵图的作用就是用来较少请求次数,以及降低服务器处理压力 #3、如何使用CSS精灵图 CSS的精灵图需要配合背景图片和背景定位来使用...1、盒子模型的宽度和高度 #1、内容的宽度和高度 通过标签的width和height属性设置 #2、元素的宽度和高度 宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距...css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有标签分为两类,分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...CSS显示模式转换 属性 描述 值 display 可以通过标签的display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素

    7.4K30
    领券