(3)标题与搜索引擎优化SEO 标题标签看似简单,但是在搜索引擎优化(SEO)中扮演着非常重要的角色,这块在之后的文章中会介绍。...br/> 粗体文本 粗体标签.png 去除后,两个加粗字体在同一行显示,且之间有一定的间隙。...在浏览器预览效果,有些元素是独占一行,其它元素不能跟这个元素位于同一行,如:p、div、hr等。 而有些元素不是独占一行,其它元素可以跟这个元素位于同一行,如:strong、em等。... hr/> div>
行内元素有哪些?块级元素有哪些?空(void)元素有哪些? 行内元素有哪些 行级元素是,在HTML文档中可以一行显示的元素,不会换行。...:address(地址)、blockquote(块引用)、center(居中对齐块)、div、h1~h6(标题)、hr(水平分隔线)、p、ul、ol等。...、tr 空(void)元素 空元素就是没有内容的 HTML 元素,是在开始标签中就关闭的元素。...通俗点来讲空元素就是能不成对出现的标签 br、hr、col、area、base、img、input、link、source等等 元素之间的转换 通过给div添加display:inline条件,可以让块级元素变为行级元素...李华 div> 运行结果 从结果上看,可以发现两个元素的内容到了同一行。
CSS入门学习 一、CSS简介 1、什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离...,两个元素的上外边距会发生合并 外边距的合并的好处,让排版在视觉上显得更美观 <!...定位,则会相对于浏览器窗口进行定位 设置元素为绝对定位后,元素会浮到页面上方 4.固定定位 先设置元素的position属性为fixed,然后再设置偏移量 设置元素为固定定位后,元素会浮动在面面上方 5...,在同一行显示, 如果一行显示不下,则会换行显示 常用取值: left左浮动 right右浮动 none不浮动,默认值 设置float属性后,元素会浮在页面上层,此时父容器无法计算自己尺寸,如果我们还想显示父容器通常会在末尾添加一个清除了...将块级元素变为行级元素,不再独占一行 block 显示为块级元素,块级元素的默认值 将行级元素变为块级元素,独占一行 inline-block 显示为内联元素,但是可以设置宽和高 在inline基础上允许设置宽度和高度
在HTML编写的网页中,标记使用有些混乱。由于许多浏览器都有自己的私有标签,而私有标签的大规模应用,就导致了不同浏览器上访问同一个网页的结果不同。举个例子iframe标签,就是IE的私有标签。...主要包括: Ø HTML元素必须正确地嵌套; Ø XHTML元素必须被关闭; Ø 标签名必须用小写字母; Ø XHTML文档必须拥有根元素; Ø...水平分割线标签 hr /> hr />标签用于在网页上插入一条水平分隔线。 hr/> 1.2 标签 标签用于在同一个段落中换行。...div>div> D. 3. 以下标签默认情况下能在同一行显示的是()。
表示类型的意思 hr> div>通配符选择器:*,可以选择页面中所有的标签div> div>慎重使用,一般情况下,使用*来清除页面中的标签的边距div>...">class表示类型的意思 hr/> div>通配符选择器:*,可以选择页面中所有的标签div> div>慎重使用,一般情况下,使用*来清除页面中的标签的边距...默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。...之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
行元素:可以在同一行显示,设置宽高不生效 、、、.....目前行业中的程序员喜欢的划分,分三种 块元素:单独占整行(自带换行符),可以设置宽高属性的 行元素:可以在同一行显示,设置宽高不生效 行内块元素:也可以在同一行显示,既可以设置宽高(img-本身自带了宽高属性...,display属性控制) 嵌套规则 a.行元素之间可以互相嵌套,行元素中不能嵌套块元素(html中是可以的,但是理论上来讲是不允许的) b.块元素中可以嵌套任意的行元素,块元素之间也可以互相嵌套...rel="nofollow" href="http://www.baidu.com">百度首页 hr> div> 在div中嵌套任意的块元素是很常见的 div...> div>在p标签中嵌套任意的块元素都会发生页面结构的变化div> 在一个小的字体中嵌套了一个大的字体 div和span * <
(1)、一般标签 举例: (2)、自闭合标签 举例:、hr/> (四)、块元素和行内元素 (1)、HTML元素根据浏览器表现形式分为两类:①块元素;②行内元素; (...2)、块元素特点: (1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素; (2)块元素内部可以容纳其他块元素或行元素; 常见块元素有:h1~h6、p、hr、div等。...(3)、行内元素特点: (1)可以与其他行内元素位于同一行; (2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果; 常见行内元素有:strong、em、span等。...(五)、练习题 (1)、下面是一个网页在浏览器上的效果,请制作一张一模一样的网页。...image.png HTML段落与文字训练题 1 (6)标签的语意 标签语义对照表 标签名 英文全称 中文解释 div division 分割(块元素) span span
; c、代表标签有div、p、h1-h6、ul、li 2、行内标签(内联标签) a、多个行内标签能同时显示在一行...a、多个行内-块级标签可以显示在同一行 b、能随时设置宽度和高度,代表标签有:input、button CSS中有个display属性,能够修改标签的显示类型:...-- 4、块级标签样式像行内标签一样 --> 块级标签设置display=inline后,样式效果和行内标签一样:每个标签不再独占一行,且宽高设置不再有效!...-- 5、行内标签样式特性像块级标签一样 --> 行内标签设置display=block后,样式效果和块级标签一样:每个标签独占一行,可设置宽高...div> hr/> 2、float浮动:任何类型标签浮动后都变成了行内-块级标签 div class="divTwo
表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。... --> 2.2 关于标签 2.2.1 空元素 不是所有元素都拥有开始标签,内容和结束标记。一些元素只有一个标签,叫做空元素。它是在开始标签中进行关闭的。...块级元素: 独占一行。块级元素(block)在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。比如 ,hr>, ,div>等。...我们经常听说的可能只是中国驾照,但现在芝麻分已经应用到了国际领域,只要你的芝麻分够550就可以免费办理国际驾照,也有不少人非常佩服马云,一个简单的芝麻分居然有如此大的功能,也从侧面反应出来马云在国际上的地位...可以设置指定的字段为off,关闭自动补全 5.2.4 更多表单元素 标签名 作用 备注 **select ** 表单的控件,下拉选项菜单 与option配合实用 optgroup option的分组标签
: 该类设置了浮动和偏移,应用于 元素和 元素中,具体实现可以查看实例 基础示例: 同一行中。 定义列表:在这种类型的列表中,每个列表项可以包含 dt 和 dd 元素。 dt 代表 定义术语,就像字典。....table-condensed #在 内的任一行启用鼠标悬停状态 下表的类可用于表格的行或者单元格: .active 将悬停的颜色应用在行或者单元格上 .success....img-responsive #图片响应式 (将很好地扩展到父元素), max-width: 100%; 和 height: auto; 样式应用在图片上 .caption #div标签 .thumbnail...# 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户) .close #显示关闭按(使用通用的关闭图标来关闭模态框和警告框) .caret #显示下拉式功能(下拉菜单
placeholder 属性 案例4:网站表单页面 【实现思路】: 1.在页面中间添加一个表格 2.10行3列表格 3.在表格中添加表单表单子标签 1.5.7.基础标签7 1.5.7.1.框架标签...8 1.5.8.1.块标签div和行标签span div 标签 span 标签 2.CSS 2.1.为什么要学习CSS CSS 美化网页(样式)!!!...> id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 选择器的权值: 通配选择符(*):0 标签: 1 类: 10 属性: 10 伪类: 10 伪元素: 1 id: 100 important...: 1000 2.6.HTML中标签类型 2.6.1.标签类型分类 HTML有N多标签,根据显示的类型,主要可以分为3大类 块级标签 独占一行的标签 能随时设置宽度和高度(比如div、p、h1、h2、ul...、li) 行内标签(内联标签) 多个行内标签能同时显示在一行 宽度和高度取决于内容的尺寸(比如span、a、label) 行内-块级标签(内联-块级标签) 多个行内-块级标签可以显示在同一行 能随时设置宽度和高度
在页面效果上,使用div> 会自动换行,使用 就会保持同行。...hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。...如果用 id 或 class 来标记 div>,那么该标签的作用会变得更加有效。 div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 div>固有的唯一格式表现。...可以对同一个 div>元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。...我们为什么要使用 div 来嵌套标签?
1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。 w3c就类似于现实世界中的联合国。 3.1 为什么要遵循WEB标准呢?...嵌套关系 空元素 用单标签来表示, 简单点说,就是里面不需要包含内容, 只有一个开始标签不需要关闭。...3)水平线标签hr(认识) 单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上 在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。...div标签 用来布局的,但是现在一行只能放一个div span标签 用来布局的,一行上可以放好多个span 后面后面讲显示模式的时候,会告诉大家 排版标签总结 标签名 定义 说明 div> div标签 用来布局的,但是现在一行只能放一个div span标签 用来布局的,一行上可以放好多个span 1.2 文本格式化标签(熟记) 在网页中,有时需要为文字设置粗体
空元素是在开始标签中关闭的。 就是没有关闭标签的空元素( 标签定义换行)。...在开始标签中添加斜杠,比如 ,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。...size 粗度 color 颜色 align 对齐方式 在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用...在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。请使用样式取代它。...div>div> 行级块标签 行内块标签 作用: (1) div>
空元素是在开始标签中关闭的。 就是没有关闭标签的空元素( 标签定义换行)。...在开始标签中添加斜杠,比如 ,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。... div style="color:#0000FF"> 这是一个在 div 元素中的标题。 这是一个在 div 元素中的文本。...sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。...当用户关闭浏览器窗口后,数据会被删除。 如何创建并访问一个 sessionStorage: <!
div> 匹配E元素之后的F元素 匹配E元素之后的F元素 hr /> div>匹配E元素之后的F元素div> hr /> 匹配E元素之后的F元素 div> 5.6 兄弟选择器 E~F: 选择E元素后的所有兄弟元素F。...div> 匹配E元素之后的F元素 匹配E元素之后的F元素 hr /> div>匹配E元素之后的F元素div> hr /> 匹配E元素之后的F元素 div> 6 元素状态选择器 指定样式只有当元素处于某种状态时才起作用。...super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。
css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有标签分为两类,分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...、em、ins、del #2、CSS中块级与行内 块级:块级元素会独占一行,所有的容器类标签都是块级,文本标签中的p标签也是块级 div、h、ul、ol、dl、li、dt、dd...还有标签p 行内:行内元素不会独占一行,所有除了p标签以外的文本标签都是行内 span、buis、strong、em、ins、del #3、块级元素与行内元素的区别...div一般用于排版,而span一般用于局部文字的样式 1、站在HTML的角度:div是一个块级元素、独占一行,而span是一个行内元素、不会单独占一行 2、站在CSS的角度:div是一个容器级标签...1 给标签设置内边距后,标签内容占有的宽度和高度会发生变化,设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。
绝对地址 —— 网页上的文件或目录在硬盘上的真正路径。优点是定位链接目标文件比较清晰。缺点是它需要完整路径,若该文件被移动了,就需要重新设置所有的相关链接,易出现问题。..._self:在同一窗口打开(默认值) _top:在浏览器的整个窗口打开,将会忽略所有的框架结构 2-4 div>标签和标签的区别是什么?...div>标签可以定义文档中的分区或节。div>占用的宽度是一行,这意味着div>div>中的内容自动地开始一个新行。 标签用来对同一行内的文字分类分组。...占用的宽度与分组内容的宽度一致。 2-5 如何为图片添加链接?...>分组一:使用div标签div> div>分组二:使用div标签div> 分组三:使用span标签 分组四:使用span标签</span
领取专属 10元无门槛券
手把手带您无忧上云