css中的ID选择器以”#”来定义。...:定义了h3>标签中的标签中的标签的样式。...同理:h3和b和i标签不一定是连续紧挨着的,只要保持一个后代的关联即可。 效果: 或者还有下面这种写法: 上面的这种写法,h3>标签和标签并不是紧挨着的,但他们保持着一种后代关系。...h3>我是一个标题h3> 我是一个段落 我是一个段落 我是一个段落 h3>我是一个标题h3> 我是一个段落 我是一个段落... 我是一个段落 h3>我是一个标题h3> 我是一个段落 我是一个段落 我是一个段落 h3>我是一个标题h3> 效果如下
”定义html文档的整体,“”标签和“”标签是它的第一层子元素,“”标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript...常用块元素标签 1、标题标签,表示文档的标题,除了具有块元素基本特性外,还含有默认的外边距和字体大小 一级标题 二级标题 h3>三级标题h3> 四级标题... 五级标题 六级标题 2、段落标签,表示文档中的一个文字段落,除了具有块元素基本特性外,还含有默认的外边距 本人叫张山,毕业于某大学计算机科学与技术专业...元素隐藏且不占位置 2、block 元素以块元素显示 css元素溢出 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。...左右 盒子高度 = height + padding上下 + border上下 无序列表标签 无序列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单,它是含有语义的,标签结构如下:
标签 描述 标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1、H2、H3、H4、H5、H6 用于定义HTML中的段落 和 标签用于插入一个简单换行符,...例子: 一级标题 二级标题 h3>三级标题h3> 四级标题 五级标题 六级标题 P标签 段落标签可以只在块...总的来讲,这意味着段落可以在任何有合适的文本流的地方出现,例如文档的主体中、列表的元素里,等等 例子: 这是一个段落 br和wbr标签 标签的目的是输入空行,不是为了换行; 标签,软换行符;全称是 Word Break Opportunity(单词换行时机),IE并不支持wbr;在浏览网页中,如果文本太长,浏览器会自动对文本换行,如果担心浏览器会在不恰当的位置换行,...常用属性: normal 只在允许的断字点换行(浏览器保持默认处理)。
使用HTML和CSS来制作一个简单的网页 前言 一、HTML 1.1常见元素介绍 1.2借助工具,浏览器开发者工具 二、实现个人名片 1.基本框架 2.使用CSS美化 1.CSS书写位置...1、以元素的style 属性来指定 (内联样式) 2、以style 标签包裹 (内部样式) 3、以外部文件的方式 (外部样式) 2.CSS中的选择器 1.标签选择器 2.id选择器 3.类选择器 4...一、HTML HTML不是一门编程语言,而是用来告知浏览器如组织页面的标记语言,搭建浏览器骨架。 HTML是由元素组成的,元素存在于各种各样的标签中 HTML 注释格式为: 个人评价h3> 有良好的学习能力,希望能够进大厂工作 2.使用CSS美化 1.CSS书写位置 CSS书写的位置: 主要有三种 1、以元素的...="stylesheet" href="(样式表地址)"> 语法是和内部样式是相同的 2.CSS中的选择器 介绍几种常用选择器 1.标签选择器 直接写标签名,表示选中该页面中所有的对应名字的元素。
如使用段落标签p,可以定义一个形如*hello world*的段落元素。...在浏览器窗口中,按F12键打开”开发人员工具“,在名为Elements的标签中,您可以查看到整个页面的HTML代码。...>这是一个标题h3> 这是一个段落。...css"> h3 {color: blue} 这里的样式针对h3元素设置了color属性,效果为h3标签中的文字显示为蓝色。...Web服务器 主要用于解析HTML、图片、CSS、JS等静态资源,如Nginx服务器。有些Web服务器可以通过配置相应的程序模块,实现动态内容的解析,如Apache使用模块解析PHP语言编写的脚本。
###课程回顾 文本标签 内容标题h1-h6: 独占一行 自带上下间距 字体加粗 字体从大到小 段落标签p : 独占一行 自带上下间距 换行 br 水平分割线hr 字体相关: b加粗 i斜体 small...Cascading Style Sheet:层叠样式表,作用:是用于美化页面的 如何在html页面中添加CSS样式代码?...内联样式:在标签的style属性中添加样式代码,不可以复用 使用较少 内部样式: 在head标签里面添加style标签 标签体内写样式代码,可以在当前页面复用,这种写法学习使用较多,工作中使用较少 外部样式...: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将html和css代码分离开 选择器 标签名选择器 格式: 标签名{样式代码} 作用: 选取页面中所有同名标签 id.../“为所在文件夹的上一级,”/"为所在文件夹下,下图为1.jpg的位置 显示效果: 8.显示方式: <!
二、标题标签 在一个 HTML 页面中,一般都包含着各种级别的标题。 1.标题标签的六个级别 在 HTML 中,共有六个级别的标题标签:h1、h2、h3、h4、h5、h6。...(1)标签重要性 这六个标题标签在页面中的重要性是有区别的,其中 h1 标签的重要性最高,h6 标签的重要性最低。 ① h1唯一 一个页面一般只能有一个 h1 标签,而 h2 ~ h6标签可以有多个。...级标签h3> 4级标签 5级标签 6级标签 标题标签.png (2)标题标签的顺序性 从上图可以看到...(3)标题与搜索引擎优化SEO 标题标签看似简单,但是在搜索引擎优化(SEO)中扮演着非常重要的角色,这块在之后的文章中会介绍。...七、自闭和标签 大部分标签都是成对出现的,这些标签都有一个“ 开始符号 ”和一个“ 结束符合 ”。 但有些标签是没有结束符号的,如:、。
比如博客主题文章中 .article-index h3 就是我一般喜欢作为标题的元素,于是尝试使用它来做一个文章目录功能。...初步的做法是讲每一次 each() 函数获取到的 h3 标题的 offset().top 值存入一个数组,在滑动时从第二个下标开始将滑动过的高度与当前 h3 标题高度做对比,大于则跳转至下一个数组值并改变目录指示的样式...== 1) { //若存在h3标签 $(window).scroll(function () { //滑动窗口时 var scroH = $(this).scrollTop()...位置 } if (scroH h3位置,调至上一个h3位置 $('#ti' + (count_sc...再下一级的目录标题的话也可以在 each() 函数中继续执行 each() 函数来获取其他元素 后记 将会加入 Tony 主题 v4 版本,并且支持后台设置标题对应的标签
按格式写文章 在写新博文的时候,注意按照你js脚本里设定的格式来划分章节(这里只设定了h2,h3,对应普通编辑器中的二级标题和三级标题,对应markdown中的##和###)。...添加css代码到“页面定制CSS代码” ?...text-align:left; position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/...div 容器的 id, mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!)...[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签 nodetext = nodetext.replace(
1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如 表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用 表示此处有链接。...CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 4....引入CSS样式表(书写位置) 要书写css样式,那css样式书写的位置在哪呢? 4.1 行内式(内联样式) 概念: 称行内样式、行间样式. ...head头部标签中,并且用style标签定义 其基本语法格式如下: CSS"> 选择器(选择的标签) { 属性1: 属性值.../* 推荐 */ h3{ color: pink; } /* 不推荐 */ H3{ COLOR: PINK; } 5. 总结CSS样式规则 使用HTML时,需要遵从一定的规范。
按格式写文章 在写新博文的时候,注意按照你js脚本里设定的格式来划分章节(这里只设定了h2,h3,对应普通编辑器中的二级标题和三级标题,对应markdown中的##和###)。...添加css代码到“页面定制CSS代码” /*生成博客目录的CSS*/ #uprightsideBar{ font-size:12px; font-family:Arial, Helvetica..., sans-serif; text-align:left; position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置...div 容器的 id, mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!)...[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签 nodetext = nodetext.replace(
不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果...2、img标签显示正方形效果的做法 首先、也是需要设置img标签的宽度和高度是一致的,另外需要用到一个关键的css属性——object-fit:cover。下面还是直接贴出代码: img标签的做法h3> 保持原有尺寸比例。同时保持替换内容原始尺寸大小。 scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。...4、object-position属性 object-position要比object-fit单纯的多,就是控制图片在盒子中显示位置的。
(2)无论这个标签藏的多深,一定能够被选择上。 (3)选择的所有,而不是一个。 2、ID选择器:规定用#来定义 针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。...div1 p 表示.div1的后代所有的p。 这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。..."special zhongyao">标题1h3> h3 class="special">我也是标题h3> 我是段落 效果: ?...h3>我是一个标题h3> 我是一个段落 我是一个段落 我是一个段落 h3>我是一个标题h3> 我是一个段落...我是一个段落 h3>我是一个标题h3> 效果如下: ?
HTML 用于创建网页的标准标记语言 1.1 HTML 语法 标签和属性不区分大小写,但是推荐小写 部分空标签可以不闭合,如 input、meta 属性值推荐使用双引号包裹 属性值为 true 时,可以省略属性值...,如 required、readonly 1.2 HTML 标签 h1-h6:h1 一级标题,h6 六级标题 ol(有序列表): A B 的重要性 em:斜体强调标签,更强烈的强调,表示内容的强调点 1.3 语义化 HTML 中的元素、属性及属性值都拥有某种含义,如有序列表用 ol,无序列表用 ul....语义化好处: 了解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成 1.4 src 和 href 的区别 src 指向的内容会嵌入到文档当前标签所在的位置,而 href 是用于建立这个这个标签与外部资源之间的关系...CSS: 用来定义页面元素的样式(如文字的大小、颜色) 2.1 使用 css 的三种形式 外链 <link rel="stylesheet" href=".
DOCTYPE> 用于声明 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。如: HTML 5 : 标签通常用于链接到样式表: css" href="mystyle.css"> 属性 href:被链接文档的位置...---- 除了上面提到的,还有一些常用的其他标签 标题 - h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。...例: 标题 1 标题 2 h3>标题 3h3> 标题 4 标题 5 标题 6 效果: ?...点击标签后将跳转到的位置(或到指定页面对应id的标签位置)。
而且我们在后续的项目开发当中,也是仅仅只使用这十几个标签而已。 标题标签 在网页中我们经常会看到一篇文章的标题,或是文章中某一段落的标题。...1 一级标题标签 2 二级标题标签 3 h3>三级标题标签h3> 4 四级标题标签 5 五级标题标签 6 六级标题标签...副标题可以使用h2标签。文章中的小标题,我们可以使用h3或h4标签。分别表示三级标题和四级标题。h5和h6这种更低级的标题,用到的情况不是特别多。...例如上面的三个例子,我们可以使用href属性设置不同的a标签链接到不同的位置。...绝对路径:是指完整的网址 alt属性中可以设置文本,当图片无法正常显示的时候,图片位置会显示alt属性中的文本信息。
搜索并采集结果的标题 需求如下: 打开百度搜索主页 在输入框输入搜索内容(比如"爬虫") 点击"百度一下"按钮,进行搜索 把结果页面中的第一页的各个结果的主标题抓取下来 Selenium 的麻烦之处 本系列始终围绕一点开展...: 点击功能区(右区)的左上角的小标签,开启定位模式 此时鼠标移到页面区(左区),鼠标移到的地方,右区会显示此元素在 html 的位置 我们看到,输入框是一个 input 标签,我们要在代码中告诉...有2种常见的方式,css 选择器 或者 xpath selenium 文档中强烈推荐你使用 css 选择器 我们选用 css 选择器,因此,在右区的 input 标签上,按鼠标右键,选 "copy" ,...所有结果的主标题: 这个可能对初学者有点难度,因为我们这次需要一次选择多个元素(多个搜索结果的主标题),看看定位到的标签: 每个搜索结果,都是一个 div标签(上图右区下方红框) 而所有的搜索结果的...h3 标签里面 那么,现在我们要用 css 选择器表达以下语义:在一个div(id=content_left)里面,h3 标签里面的 a 标签的文本。
封闭的标签可以使单词或图像超链接到其他位置,可以斜体化单词,可以使字体变大或变小,等等; 例如,以以下内容行为例: My cat is very grumpy 如果我们希望该行独立存在,我们可以通过将其括在段落标记中来指定它是一个段落...这表示元素开始或开始生效的位置 — 在本例中为段落开始的位置。 结束标记(Closing tag):这与开始标记相同,只是它在元素名称前包含正斜杠。这表示元素的结束位置 — 在本例中为段落结束的位置。...' = HTML标签 在HTML中,标签用于创建元素; HTML 元素的名称是尖括号(如段落)中使用的名称。...,是编写给浏览器查看的内容; :设置字符集 :页面的标题,即在加载页面的浏览器选项卡中显示的标题; :...href属性引入外部的css文件 meta 定义网页源信息keywords关键字搜索description网页描述信息 注意,在html文件中 可以编写html和css以及js,但是实际工作中三者其实是分开存放的
常用的选择器有如下几种: 1、标签选择器 标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。...块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为: 支持全部的样式 如果没有设置宽度,默认的宽度为父级宽度100%...盒子占据一行、即使设置了宽度 内联元素 内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为: 支持部分样式(不支持宽、高、margin...的position属性来设置元素的定位类型,postion的设置项如下: relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素...none 不改变默认行为 forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义) backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值
领取专属 10元无门槛券
手把手带您无忧上云