标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：div>里嵌套，那么必须放在div>的前面。如下图所示。 4....HTML标签不区分大小写，h1>和H1>是一样的，但建议小写，因为大部分程序员都以小写为准。 HTML标签 标签 如果想在网页上显示文章，就需要标签，把文章的段落放到标签中。...div> 标签 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div>标签中，这个div>标签的作用就相当于一个容器。 1. div和span类似，都没有特殊的语义。... 标签 使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。...所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 标签之间 5. get请求会把表单提供的参数放到URL中，而post请求会把参数放到http请求体中 文本
#网页中的正文部分是在之中;与 是并列关系 HTML基本结构标签 每一个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写的...,当我们添加了对应的标签,显示就会发生变化,合理的标签(像分段,换行,字体大小,字体颜色等)会使页面的结构更加的美观清晰; 1>标题标签h1>~ 标题在html中分为六级,h1是字体最大的同时也是最重要的... 特点:1.每行的字数会随着网页的宽度,自动调整; 2.分段后段与段之间会有空隙; 换行标签是一个单标签;使用起来也很简单,类似于编程语言中的/n;这个就不解释了...>图像标签的使用:h1> 标签)" /> 我们把鼠标放在图片上...> 图像标签总结 1.图像标签可以拥有多个属性; 2.属性之间不分先后顺序,标题名与属性,属性与属性之间均可以用空格分开; 3.属性采取键值对的格式,即key="value"的格式
二、标题标签 在一个 HTML 页面中，一般都包含着各种级别的标题。 1.标题标签的六个级别 在 HTML 中，共有六个级别的标题标签：h1、h2、h3、h4、h5、h6。...（1）标签重要性 这六个标题标签在页面中的重要性是有区别的，其中 h1 标签的重要性最高，h6 标签的重要性最低。 ① h1唯一 一个页面一般只能有一个 h1 标签，而 h2 ~ h6标签可以有多个。...1.划分区域 div，用来划分一个区域。div标签内部可以包容所有其它标签，例如：p标签、strong标签、hr标签等。 使用 div 标签来划分区域，使得代码更具有逻辑性。...若想要让每一个段落首行都缩进2个字符的距离，我们会下意识的在代码中按下空格以达到目的，但是这种做法是无效的。 在 HTML 中，空格也需要代码来实现，空格代码为 。... 网页中的空格.png 2.网页中的特殊符号 （1）以&开头;结尾 在 HTML 中，若想要显示一个特殊符号，同样需要通过输入代码来实现。
「①层级选择器」 格式为：div+空格+标签名{} 标签与标签之间是用空格隔开的。 在HTML中有一个div标签，这个标签和CSS结合起来很有用。...比如上述例子中，同样是h1标签，但是只渲染div标签中的h1标签。 ?...「②并集选择器」 格式为：div+逗号+标签名{} 标签与标签之间是用逗号隔开的，也就是相当于将标签选择器并起来了，同时修改多个标签的样式。 ?...「④伪类选择器」 格式为：标签名+冒号+对应的状态 link：也就是鼠标未点击时为黑色。 hover：悬浮的意思，也就是鼠标放在上面时为紫色。...active：行为的意思，也就是鼠标点击时的颜色为红色。 visited：访问过的意思，也就是鼠标点击后的颜色为蓝色。 所以为什么叫伪类？
前言 在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔 HTML结构 认识HTML标签 HTML 代码是由 “标签” 构成的....html 内容首尾处的换行, 空格均无效. 在 html 中文字之间输入的多个空格只相当于一个空格. html 中直接输入换行不会真的换行, 而是相当于一个空格....属性之间用空格分割, 可以是多个空格, 也可以是换行....属性之间不分先后顺序 属性使用 “键值对” 的格式来表示. 关于目录结构： 对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好....文本域标签，又称文本区，即有滚动条的多行文本输入控件 文本域中的内容, 就是默认内容, 注意, 空格也会有影响
为什么显示在一行？ 空白折叠现象，HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示 下划线标记 中划线标记（已废弃） 示例： 中你将知道，这两个东西，都是最最重要的“盒子” div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。 div标签的属性： align="属性值"：设置块儿的位置。...div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。...上图中，好像pre标签部分的字体变小了，而且还出现了缩进，好吧， 这个其实是浏览器搞的鬼。 为什么要有这个标签呢？ 答案是：所有的浏览器默认情况下都会忽略空格和空行。...在写图片的路径时，有两种写法：相对路径、绝对路径 写法一：相对路径 下载一个图片命名为2.jpg，放在当前目录下 相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。
; 实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择 ，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。...-- 默认IE兼容模式 --> 同样分享页面到QQ的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。为什么区别这么明显呢？...h1>我是一个一级标题h1> 7、什么是HTML注释？ “当我写下这段代码的时候，只有我和上帝能看懂。现在只有上帝能了。”...一个以block形式展现的块级元素不会被嵌套进行内元素中，但可以嵌套在其它块级元素中，如(p、div、hn、ul、ol、li)。...空格 浏览器总是会截短 HTML 页面中的连续空格。所以如果你在HTML代码中连续输入多个空格，最后也只会显示一个空格。 那么如何才能实现连续多个空格呢？这就需要用到我们的\ 字符实体了。
标记语⾔: 由标签构成的语⾔（注意在后面经常会使用到这个标签） 例如以下： h1>我是⼀级标题h1> 我是⼆级标题 我是三级标题 这里的h1,h2就是标签；...html ⽂件的根标签(最顶层标签) • head 标签中写⻚⾯的属性...• html 内容⾸尾处的换⾏, 空格均⽆效. • 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格....因为小编将这个保存到本地了，然后直接放在项目的文件夹里了，如下所示： 这样的好处就是：放在当前项⽬中....，可以发现html内容包含了标签，而文本内容就只有文本，不包含其他的标签； 当然这里还有其他的操作，例如添加，删除，以及CSS属性的操作；小编就不再过多的演示了；这里还有一个猜数字的前端小游戏，小编将代码放在下面的
《为了让文字与文字之间不会粘在一起》，所以文字大小以高为准） 8、空格大小：字体格式为宋体时，空格大小是当前文字大小的一半；字体格式不一样，空格大小不一样！...，那么第二个盒子会距离第一个盒子10px，如果设置为0，那就会紧挨着第一个（当然第二个的margin-top也是设为0时），margin-bottom是设置同级元素间的间隔，并不是设置它在父元素中的位置...4.如果把H1标签加在LOGO图片，图片ALT信息上要加上网站名或品牌词，这样才能更加突出首页的关键词，不然给一个图片加H1，你觉得有什么效果？...5.H1标签尽量靠近在html中的body标签，越近越好，以便让搜索引擎最快的找到主题。从上面的例子就可以发现H1标签都在body代码的最前面，为什么?...，选择当前页面所有该标签 标签名（div{……}） 4、群组选择器，用逗号隔开 p, h1, div{……} 5、包含选择器，用空格表示包含 div a{..
保持良好的简洁的树形结构 每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。 使用4个空格代替1个Tab（大多数编辑器中可设置）。...比如在这样一个列表中，li标签中的itm应去除： HTML规范 - 代码格式...强调文本 表单 action,target,method,name h1>h1> 标题 从h1到h6，不可嵌套块级元素 内嵌一个网页...这些环境可能是以下某几种情况： 可能是个iframe，你的内容是被放在body里面的；可能只是个div，你的内容就被放在这个div里面。 可能邮箱自身设置了些css，他可能对你产生未知的影响。.../div> div> 发现的问题及解决方案 问题：部分智能手机的邮件客户端可能会有只显示部分的bug（宽度被截）。
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”； css是用来调节标签样式的 那为什么需要学选择器呢?...例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。...特征为+加号，这个查找的是同级别下面紧挨着的第一个span /*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/ div + span { color: pink...[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。...[attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
1.第二次学习的感受 我最开始在学习HTML中，和大多数初学者一样觉得这也太简单了，觉得没有多少东西，只要记住这些个标签就可以了。当我第二次学习时才发现，HTML并没有我想象中的那么简单。...在W3C标准中，没有明确规定一个页面不能有多个h1标签，但是我们还是要遵循 “一个页面只能有一个h1标签” 的原则。 因为，如果一个页面出现多个h1，对搜索引擎是不友好的。...你也不要纠结，想想高中我们写作文时，一篇作文都是只写一个标题。 2.h1~h6之间不要出现断层 搜索引擎对h1~h6标签比较敏感，尤其是h1和h2。...4.不要用div来代替h1~h6 从语义上讲，页面中的标题应该使用h1~h6标签，不要使用 div 来代替。...增强了鼠标可用性，当我们点击label中的文本时，其所关联的表单元素也会获得焦点。（也就是说for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性） Ⅱ.示例 <!
---- 标签，网页上显示的内容放在这里 在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。 ?...如果用以前的方法，回车需要输入签，空格需要输入 注意： 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是标签的一个常见应用就是用来展示计算机的源代码...---- 初识div 认识div在排版中的作用 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div>标签中，这个div>标签的作用就相当于一个容器。...如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用div>标签作为容器。 ? 给div命名，使逻辑更加清晰 在上一小节中，我们把一些标签放进div>里，划分出一个独立的逻辑部分。...使用标签，链接到另一个页面 使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
如右侧代码编辑器中的、、h1>、、 ---- 类选择器 1、英文圆点开头 2、其中类选器名称可以任意起名（但不要起中文噢） 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来...中任意标签元素字体颜色全部设置为红色： * {color:red;} ---- 伪类选择符 更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式 ----...分组选择符 当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为编辑器中的h1、span标签同时设置字体颜色为红色： h1,span{color:red;} ---- 总结...ul-li无序标签 ol-li有序标签 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div>标签中，这个div>标签的作用就相当于一个容器。...通用选择器 通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素 伪类选择器 a:hover{color:red} 分组选择器 当你想为html中多个标签元素设置同一个样式时
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。...试着把h放到p到里： 1 2 我是一个小段落 3 h1>我是一个主标题h1> 4 浏览器不允许你这么做，我们使用Chrome的F12审查，你会发现...，浏览器自己把p封闭掉了，不让你去包裹h1。...> div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。...--注释的内容--> Sublime中按ctrl+/ 就是注释 字符实体 我们想在页面上输出“h1>”这些字符，但是HTML认为这是一个标签，还没封闭。
n size属性：多选时，可见选项的数目。 n 子标签：下拉列表中的一个选项（一个条目）。 u selected ：勾选当前列表项 u value ：发送给服务器的选项值。...多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。...h1{ font-size:20 px; } /* 20和单位px之间有空格 */ 1.2.3.4 引入CSS样式 CSS使用非常灵活，及可以嵌入在HTML文档中，也可以是一个单独的文件...内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。...3) 外部样式 外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将样式连接到HTML文档中。 <!
作用： 标签选择器可以把某一类标签全部选择出来，比如所有的div>标签和所有的标签 优点 能快速为页面中同类型的标签统一设置样式 缺点 不能设计差异化样式，只能选择全部的当前标签... 一个标签元素可以同时拥有多个类，但必须使用空格分隔： 一个明确值大小，不要默认大小 我们可以给 body指定整个页面文字的大小，当然这对标题的字体大小是没影响的，它优先级高于body的字体大小优先级，必须指定对 h标签 进行修改才会有所改变。...; } 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值)，但必须保留font-size和 font-family属性，...可以控制文字 行与行之间的距离。 p{ line-height:26px; } 当我们设置行间距为26px时，字体大小为16px，行间距代表如下： 那么怎么精准测量好行间距呢？
我们为什么要学html标签呢？ 我们把文字内容直接添加到body标签内，网页中就可以展示内容了，为什么要学标签呢？那图片怎么添加？链接怎么添加？网页中带有的颜色大小等怎么控制呢？...示例代码： div> div>1div> 2 div> 标题：通过h1>--标签来进行定义...h1>This is a headingh1> ... This is a heading 段落：使用标签来定义。段落内容 定义预格式化的文本。...通常会保留空格，换行。 链接：常见的点击某个链接、图片或文字进入网页，就需要使用标签。...水平线：属于单标签。 框架： 元素会创建包含另外一个文档的内联框架（即行内框架）。
2.嵌入式css样式，就是可以把css样式代码写在标签之间。...3.外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css ”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到...;} 5-7 伪类选择符 更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： a:hover...5-7 分组选择符 当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），h1、span标签同时设置字体颜色为红色： h1,span{color:red;} 它相当于下面两行代码：...h1{color:red;} span{color:red;} 层叠 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的
RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。...属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。...CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。 div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。...div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。...但在PHP中用于打印一个数组时使用。 字体标签 标题 标题使用h1>至标签进行定义。 具有align属性，属性值可以是：left、center、right。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
