作者:一首老歌L_798 | 来源:互联网 | 2023-05-19 07:36
开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.一.HTML中head标签1.<meta>标签:meta标签里是一些基础
开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆....
一. HTML中head标签
1. 标签:
meta标签里是一些基础的辅助信息,一般不在页面上显示出来。
(1)charset=" utf-8" /> 定义的页面字符集。
(2)name="keywords" cOntent="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /> 这里是为爬虫方便提供的关键字信息,在使用搜索引擎的时候保护这些关键字的会被索引到然后被搜索到。
(3)name="description" cOntent="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" /> 这里是会显示在搜索引擎摘要里的一些内容。
(4) 用于告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
(5)特别要注意的http-equiv属性,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。比如:
A) 间隔 content的秒数时间后刷新页面,可以重定向到其他URL。
B) 设置socket值和过期时间等。
C) 设置页面过期时间,过期以后需要从新从服务器获取信息。
2. 在head中其他的重要标签:
(1)rel=" shortcut icon" href="//common.cnblogs.com/favicon.ico" type=" image/x-icon" /> 是设置页面在浏览器标签栏上的小图标,如图所示。
(2) 设置标签上的文字信息,也可以参考上图。
二. HTML中body标签
1. 内联标签和块标签的概念
html的标签主要可分类为内联和块标签两种,可以通过css样式里的display来设置,内联的值为inline,块为block,还有一种inline-block。
(1)块级标签示例:
特点包括:总是在新行上开始;高度,行高以及外边距和内边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度。它可以容纳内联元素和其他块元素。
(2)内联标签示例:
特点包括:和其他元素都在一行上,直到该行填满;高,行高及外边距和内边距不可改变;宽度就是它的文字或图片的宽度,不可改变;内联元素只能容纳文本或者其他内联元素。
设置height,上下的margin和padding无效,或可通过line-height来设置。
(3)inline-block:就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
三. CSS
1. 选择器!
赶脚选择器应该是CSS的核心了,如果不是直接在行内元素处写css,则我们必须在外部的css中定义所有内容,那么势必会面对定义的属性如何与HTML内的元素关联起来的问题。选择器就是告诉CSS属性对哪些元素起作用的。主要包括如下的选择方式:
(1)* 通配选择器,可以匹配所有的元素;如 * {margin 0},就会给所有的标签加上这个样式。
(2)通过标签选择,即给所有的某标签加上属性;如 p {margin 0},就会给所有的p标签加上这个样式。
(3)通过class来选择,我们在定义HTML的时候可以给元素加上class命名,多个元素可以有相同的class;如有一些标签我们命名其 class="aaa",通过 .aaa{margin 0},就可以给所有class为aaa的加上样式。
(4)通过id来选择,HTML的标签还可以定义id,这个id必须是唯一的;如我们命名一个标签 id="bbb",通过 #bbb{margin 0},就可以添加样式。
(5)限定后代的组合选择:上述除了通配符意外,任意的选择方法,我们都可以通过空格的方式组合起来,组合多次,其意思就是从最前面的标签开始找,找到最后面都符合的标签设定样式。最前面的表示在最外层,然后依次向里面推进;如 .aaa ul li .bbb a {color:white},意思就是从所有class aaa的标签开始找,到里面的ul,再到li,再到class为bbb的里面的所有超链接标签,设定其颜色。
(6)我们还可以给多个选择赋予同样的样式,通过","逗号来讲所有要加上同样样式的放在一起,可以节省很多空间和人力...比如 body,p,ul,li,h1,h2,h3 {margin:0px;}。
(7)通过子元素选择;这个方式和(5)有点像,但是这个子元素是严格限定了必须是直接子元素才会被选择,如果被嵌套在了其他子元素里面(类似孙子之类的...)就选择不到了。比如This is very very important. 和 This is really very important. ,如果通过 h1 > strong {color:red;}来选择,前者是可以添加上样式的,后者就不行了,因为后者的string嵌套在了内层的em里面。
(8)通过相邻元素来选择:这个描述起来比较抽象,示例如下:h1 + p {margin-top:50px;} 会给所有紧接在h1标签后面的p标签设定样式。
未完待续....
还需要些其他一些选择器,css的继承和覆盖原则,盒子模型...
推荐阅读
本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ...
[详细]
蜡笔小新 2023-12-13 17:08:24
web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ...
[详细]
蜡笔小新 2023-10-17 20:40:03
本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 12:01:13
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ...
[详细]
蜡笔小新 2023-12-10 19:31:50
本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ...
[详细]
蜡笔小新 2023-12-14 19:45:47
本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ...
[详细]
蜡笔小新 2023-12-14 16:49:01
本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ...
[详细]
蜡笔小新 2023-12-14 16:17:05
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
本文介绍了使用国外开源码PHPMailer邮件类实现邮件发送功能的简单教学,同时提供了一些注意事项。文章涵盖了字符集设置、发送HTML格式邮件、群发邮件以及避免类的重定义等方面的内容。此外,还提供了一些与PHP相关的资源和服务,如传奇手游游戏源码下载、vscode字体调整、数据恢复、Ubuntu实验环境搭建、北京爬虫市场、进阶PHP和SEO人员需注意的内容。 ...
[详细]
蜡笔小新 2023-12-13 11:56:08
本文介绍了在CentOS/RHEL 7/6,Fedora 27/26/25上安装JAVA 9的详细步骤和方法。首先需要下载最新的Java SE Development Kit 9发行版,然后按照给出的Shell命令行方式进行安装。详细的步骤和方法请参考正文内容。 ...
[详细]
蜡笔小新 2023-12-13 09:26:47
本文介绍了Python爬虫技术基础篇面向对象高级编程(中)中的多重继承概念。通过继承,子类可以扩展父类的功能。文章以动物类层次的设计为例,讨论了按照不同分类方式设计类层次的复杂性和多重继承的优势。最后给出了哺乳动物和鸟类的设计示例,以及能跑、能飞、宠物类和非宠物类的增加对类数量的影响。 ...
[详细]
蜡笔小新 2023-12-12 16:19:02
php教程|php手册xml文件php教程-php手册Linux下部署Symfoy2对appcache和applogs目录的权限设置,symfoy2logs黑色记事本源码,vsco ...
[详细]
蜡笔小新 2023-10-17 20:32:59
( ̄▽ ̄)~又得半夜修仙了,作为一个爬虫小白,花了3天时间写好的程序,才跑了一个月目标网站就更新了,是有点悲催,还是要只有一天的时间重构。升级后网站的层次结构并没有太多变化,表面上 ...
[详细]
蜡笔小新 2023-10-17 19:24:48
前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ...
[详细]
蜡笔小新 2023-10-17 17:47:27