景子墨

2019-7-23 [HTML_CSS] 基本行内/内部/外部格式优先级选择器字体演颜色粗细大小字体对齐

文章目录

0.网页美化技术 CSS
1 css概述

1.1 什么是CSS?
1.2 CSS的发展史
1.3 CSS的优势
1.4 CSS基本使用
1.5 CSS样式的分类

1.5.1 行内样式
1.5.2 内部样式
1.5.3 外部样式(常用)

1.6 CSS样式的引用优先级问题

2.css练习

2.1 任务需求
2.2 代码实现

3 CSS选择器

3.1 什么是选择器呢?

3.2.1 标签选择器
3.2.2 类选择器
3.2.3 ID选择器

3.3 CSS选择器优先级

4 CSS选择器练习题

4.1 业务需求
4.2 代码实现

4.2.1 把图片素材放到项目的img文件夹下
4.2.2 修改页面添加CSS效果

4.2 需求升级

5 其他CSS样式介绍

5.1 字体颜色,粗细,大小CSS
5.2 字体对齐方式CSS

6.总结

0.网页美化技术 CSS

1 css概述

通过昨天的学习我们已经掌握了HTML的基本结构,也能根据不同的需求使用不同的标签来完成不同的功能,但是在写作业的时候我们却发现了一个问题,人家的页面比我们的页面要好看了很多,这是为什么呢?

这就是因为我们的页面是没有加入样式的!

1.1 什么是CSS?

Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

此处大家需要注意的是CSS技术是用来美化现有页面的,在成型的网站中应用也很广泛

那么为了更好的说明CSS对网页的重要性我们可以来简单的写一个对比:

比如我想在页面展示一个标题 : 海牛学院

代码应该是这个样子


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
	head>
	<body>
		
		<h1>海牛学院h1>
		
		<h1 style="color: blue;">海牛学院h1>
	body>

html>

1.2 CSS的发展史

但是它需要高级浏览器的支持。

1.3 CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽

1.4 CSS基本使用

CSS把页面上的所有标签都看成对象,所以如果你想给一组标签或者某一个标签设置样式你就可以通过选择器来选择你想选择的标签

一般常用的选择器

1) 按标签选择
2) 按标签class属性选择
3) 按标签id属性选择

看过了CSS编写的基本语法,那么有一个问题,我们怎么能把CSS融入到我们的网页中呢?

那么这时候你就需要在你的网页中使用style标签引入样式了

代码尝试一下:
先写一个h1标签
代码


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
	head>
	<body>
		<h1>我是一个没有样式的h1h1>
	body>
html>

加入样式:样式一般添加到标签中


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
		<style type="text/css">
			h1{
				color: blueviolet;
			}
		style>
	head>
	<body>
		<h1>我是一个有样式的h1h1>
	body>
html>

这就是样式对我们网页内容的影响,是不是很神奇呢?

样式复制粘贴（表格不折行效果）

<style type="text/css">
    table td,th{
        word-break: keep-all;
        white-space: nowrap;
    }
style>

1.5 CSS样式的分类

1.5.1 行内样式

把样式直接写到HTML标签中的就是行内样式了


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
	head>
	<body>
		<h1 style="color: darkorchid;">我是一个有样式的h1h1>
	body>
html>

行内样式
好处就是简单直接,每次给一个标签赋予某些样式
坏处就是有些相同样式不能复用,并且标签多了的话，样式写起来很乱很麻烦;

1.5.2 内部样式

内部样式就是把样式使用style标签统一写到head标签中,


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
		<style type="text/css">
			h1{
				color: blueviolet;
			}
		style>
	head>
	<body>
		<h1>我是一个有样式的h1h1>
	body>
html>

内部样式的
好处就是本页面的CSS可以得到很好的复用
坏处就是内部样式无法再文件与文件之间共享样式,而且内部样式写多了之后整个页面的可读性变差,内容全都耦合在一起不方便修改和阅读;

1.5.3 外部样式(常用)

编写好一个后缀为css的文件,把样式写到css文件里去,然后哪里需要通过标签引入即可
编写css文件


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<h1>我是一个有样式的h1h1>
	body>
html>

因为我们不是专业的前段和美工,所以一般我们在使用CSS样式的时候都是直接引入别人写好的样式,比如bootstrap就是一个非常优秀的CSS框架(模板),人家写好了我们拿过来用就可以了;

1.6 CSS样式的引用优先级问题

问题 : 如果一个标签同时受行内样式内部样式和外部样式影响的话,它会执行哪个样式呢?

回答 : 就近原则,他们的优先级是这样的:

行内样式优先于内部样式表
内部样式表优先于外部样式表
也就是说CSS采取就近原则,哪个离HTML标签越近哪个就被采用

2.css练习

古寺一首
效果图 :

2.1 任务需求

使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14px

2.2 代码实现

代码


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
		<style type="text/css">
			p{
				font-size: 14px;
				color: green;
			}
		style>
	head>
	<body>
		<h1>望庐山瀑布h1>
		<p>日照香炉生紫烟p>
		<p>遥看瀑布挂前川p>
		<p>飞流直下三千尺p>
		<p>疑是银河落九天p>
	body>
html>

3 CSS选择器

通过上面的小案例我们可以通过CSS来设置标签的样式,那么现在如果需要发生改变,我想前两句一个颜色,后两句一个颜色,或者一句一个颜色怎么办呢?

这时候你就需要使用CSS的选择器功能了;

3.1 什么是选择器呢?

选择器就是CSS可以读取HTML标签的一些属性,来选择哪些标签适用于哪些样式的一种规则;

比如我们刚才写的样式就是设定了 p 标签的字体颜色和样式,其他标签是不会被影响的,这就是选择器的作用;

3.2.1 标签选择器

3.2.2 类选择器

标签的class属性的值可以重复,所以通过class属性可以获取一个或者多个标签,从而来设置他们的样式

比如,现在有一个需求是将刚才的诗前两句蓝色后两句绿色就可以用这个类选择器
代码 :


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
		<style type="text/css">
			/* 标签选择器 */
			p{
				font-size: 14px;
				color: green;
			}
			/* 类选择器 */
			.c1{
				color: cornflowerblue;
			}
			.c2{
				color: greenyellow;
			}
		style>
	head>
	<body>
		<h1>望庐山瀑布h1>
		<p class="c1">日照香炉生紫烟p>
		<p class="c1">遥看瀑布挂前川p>
		<p class="c2">飞流直下三千尺p>
		<p class="c2">疑是银河落九天p>
	body>
html>

3.2.3 ID选择器

这个选择器是通过HTML设置的id属性来获取表单,但是需要注意的是一个HTML页面中每个标签的ID属性是唯一的,所以这个选择器每次只能获取一个标签

这个选择器的用途非常多,比如我们现在希望诗句的每行都拥有一个颜色的话就可以使用这个选择器;

HTML代码:


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例title>
		<style type="text/css">
			/* 标签选择器 */
			p{
				font-size: 14px;
				color: green;
			}
			/* 类选择器 */
			.c1{
				color: cornflowerblue;
			}
			.c2{
				color: greenyellow;
			}
			/* ID选择器 */
			#p1{
				color: green;
			}
			#p3{
				color:rosybrown;
			}
			#p2{
				color: cornflowerblue;
			}
			#p4{
				color: palevioletred;
			}
		style>
	head>
	<body>
		<h1>望庐山瀑布h1>
		<p class="c1" id="p1">日照香炉生紫烟p>
		<p class="c1" id="p2">遥看瀑布挂前川p>
		<p class="c2" id="p3">飞流直下三千尺p>
		<p class="c2" id="p4">疑是银河落九天p>
	body>
html>

通过CSS不同选择器的设置,我们可以灵活的控制页面标签的样式,但是CSS也不要应用过多,因为非专业人事操作CSS,其实就是在浪费时间做五彩斑斓的黑;

3.3 CSS选择器优先级

ID选择器优先于类选择器

类选择器优先于标签选择器

它的特点就是哪个选择器的影响范围小就先执行哪个选择器

问题 :

标签选择器是否也遵循“就近原则”？

不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

4 CSS选择器练习题

开心餐厅页面美化、

4.1 业务需求

设置不同的标题颜色如何做菜为红色,其他的标题都为蓝色
网页素材


<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例title>
	head>

	<body>
		<marquee scrollamount="20" behavior="alternate"><img src="img/game01.jpg" alt="主题图片" />marquee>
		<br />
		<img src="img/game02.jpg" alt="游戏简介" />

		<p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br />
			烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br />
			步步精心经营，细心打理，我们都能成为餐饮大亨哦。p>

		<img src="img/game03.jpg" alt="游戏特色" />

		<h2>如何做菜？h2>
		<p>
			1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br />
			2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br />
			3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br />
			4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。
		p>

		<h2>如何经营餐厅？h2>

		<p>
			1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短
			心情越好；好友间亲密度越高，可雇用的时间越长；<br />
			2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br />
			3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。
		p>

		<h2>如何吸引顾客？h2>

		<p>
			1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；<br />
			2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会
			降低美誉度；<br />
			3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！
		p>

		<h2>如何和好友互动？h2>

		<p>
			1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；<br />
			2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值
			是有上限的；<br />
			3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友
			的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；<br />
			4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。
		p>

		<img src="img/game04.jpg" alt="游戏口碑" />

		<p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br />
			烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br />
			步步精心经营，细心打理，我们都能成为餐饮大亨哦。
		p>
	body>
html>

4.2 代码实现

4.2.1 把图片素材放到项目的img文件夹下

4.2.2 修改页面添加CSS效果


<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例title>
		<style>
			h2{
				color: hotpink;
			}
			#t1{
				color: #8A2BE2;
			}
		style>
	head>

	<body>
		<marquee scrollamount="20" behavior="alternate"><img src="img/game01.jpg" alt="主题图片" />marquee>
		<br />
		<img src="img/game02.jpg" alt="游戏简介" />

		<p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br />
			烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br />
			步步精心经营，细心打理，我们都能成为餐饮大亨哦。p>

		<img src="img/game03.jpg" alt="游戏特色" />

		<h2 id="t1">如何做菜？h2>
		<p>
			1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br />
			2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br />
			3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br />
			4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。
		p>

		<h2>如何经营餐厅？h2>

		<p>
			1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短
			心情越好；好友间亲密度越高，可雇用的时间越长；<br />
			2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br />
			3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。
		p>

		<h2>如何吸引顾客？h2>

		<p>
			1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；<br />
			2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会
			降低美誉度；<br />
			3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！
		p>

		<h2>如何和好友互动？h2>

		<p>
			1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；<br />
			2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值
			是有上限的；<br />
			3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友
			的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；<br />
			4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。
		p>

		<img src="img/game04.jpg" alt="游戏口碑" />

		<p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br />
			烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br />
			步步精心经营，细心打理，我们都能成为餐饮大亨哦。
		p>
	body>
html>

4.2 需求升级

如果想在一段文字中设置不同的样式,或者凸显某些文字的话怎么办呢?
这时你需要一个标签

从代码可以看出,span标签可以将一部分文字包裹住统一设置样式,所以在做一些字体需求的时候用它是再合适不过了;

5 其他CSS样式介绍

5.1 字体颜色,粗细,大小CSS

你可以通过设置一下属性来改变字体的形态:

此处我们常用的有font-size属性,调整字体大小和font-weight属性调整字体粗细

font-size 中需要注意的事就字体大小的值的单位是px

px代表像素的意思

font-weight属性中需要注意的就是如何变成粗体字

color我们已经使用过了,此处就不再细说了;

5.2 字体对齐方式CSS

text-align 这是设置文本的对其方式

6.总结

uni-app实现步骤条夏夏的码农 uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
python转码 Desamond python 开发语言
转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，
UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM 语言模型人工智能自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调
Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号 webpack
引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面
HTML语言剖析混沌破晓
HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签
CDH 启停使用HiveServer2 金刚_30bf
翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模
HTML背景带视频的个人炫酷引导页源码 erthre 源码 php
正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:
vue生命周期涡看你就不是好人呐 vue.js javascript 前端
1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa
C#使用ASP.NET Core Razor Pages构建网站（二）林祖师 C#c#asp.net 开发语言
上一篇文章讲了HTTP协议的基本概念、客户端Web开发技术以及ASP.NETCore框架的关键特点和创建项目方法链接：C#使用ASP.NETCoreRazorPages构建网站（一）接下来继续了解ASP.NETCoreRazorPages构建网站的后续内容了解RazorPagesRazorPages允许开发人员轻松地将HTML标记和C#代码混合在一起，这是使用.cshtml扩展名的原因。默认情况下
vue-pdf 预览pdf (数据流) reembarkation vue.js pdf javascript
页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat
DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动 01空间常见场景解决方案 css html
滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc
【Docker】【nginx】docker安装nginx并映射宿主机配置文件地址小丛的知识窝 nginx docker 运维
dockerrun-d-p80:80-v/root/docker/docker-nginx/nginx.conf:/etc/nginx/nginx.conf-v/root/docker/docker-nginx/html:/usr/share/nginx/html-v/root/docker/docker-nginx/logs:/var/log/nginx--namenginxnginx
Reviewing a fastq_mergepairs report to check for problems 信息搬运代号北极能
信息来源https://www.drive5.com/usearch/manual/merge_report.htmlBelowisanexamplereportproducedbythe-reportoptionoffastq_mergepairs.Thisinformationisalsoshownontheterminal(standarderroroutputstream).Theopti
html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上猫研所 html5 websocket 手机
对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI
JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？智伴科技 javascript html css
下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven
随笔：一件尴尬的小事 Doubt_Fact
今天下午，朋友找我帮忙，想让我帮忙写一个随机点名的程序，我满口答应了下来，不过我不怎么会写窗口应用，就问他可不可以以网页代替，他同意了。我便写了一个html文件，除了中间遇到一个小插曲，一个缺少的英文“,”被漏掉了，到最后一直无法正常显示……在完成后，我到网页上看到了一种把网页制作成程序的方法，只需利用程序nativefier来操作，这个程序最后基于Node.js。我又很快在我的windows机器
【大咖力荐新手必备】软件开发入门，这300篇文章就够了！高校俱乐部软件开发新手必备数据编码 IP
小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助
python flask 表单_python中flask应用（表单处理） weixin_39771260 python flask 表单
本篇文章给大家带来的内容是关于python中flask应用(表单处理)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、为什么使用Flask-WTF？request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。尽管Flask的request对象提供的支持足以处理web表单，但依然有许多任务会变得单调且重复。表单的HTML代码
Java基础知识总结（下） Yonagi833 Java 面经and八股 java 开发语言职场和发展程序人生 spring
本文部分内容节选自JavaGuide,地址:https://javaguide.cn/java/basis/java-basic-questions-03.html基础（上）→基础（中）→基础（下）异常Java异常类层次图概览Exception和Error有什么区别？在Java中，所有的异常都有一个共同的祖先java.lang包中的Throwable类.Throwable类有两个重要的子类:Exc
项目里面引入字体包react 前端小灰灰
项目里面引入字体包：①字体包放在public目录下，②新建一个font.css文件，//font.css@font-face{font-family:AlibabaSans;src:url('./font/AlibabaSans-Black.otf');}③在HTML文件全局引入④然后在less里面就能使用了：例：font-family:AlibabaSans;
CSS-DAY2 i330. 前端 css 前端
CSS-DAY22024/2/4Emmet语法快速生成HTML结构语法如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div如果有父子级关系的标签，可以用>比如ul>li就可以了如果有兄弟关系的标签，用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo或者#twotab键就可以了（默认是div，如需修改其他标签只需在.之前加上标签名即可，如p.color
问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？ zoe_ya 前端 gpt react.js
在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ
react 和vue区别小王学前端️ vue3 react.js vue.js 前端
React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript
速盾：cdn分流是什么意思速盾cdn 服务器安全
CDN分流是一种通过内容分发网络（CDN）来优化网站访问速度和用户体验的技术。通过CDN分流，网站的静态资源可以被缓存到全球不同的CDN节点上，从而减少用户请求原始服务器的次数，提高了网站的响应速度和可靠性。本文将详细介绍CDN分流的原理、优势和应用场景。CDN分流的原理是通过将网站的静态资源（如HTML、CSS、JavaScript、图片、视频等）复制到CDN节点上，并将用户的请求转发到离用户最
centos7 编译安装nginx-1.14.2 YHJ nginx
1.下载nginxhttp://nginx.org/en/download.html选择稳定版本即可Stableversion这里我们选择nginx-1.14.22.上传nginx到linux上上传路径为/usr/local/3.解压tar-xvfnginx-1.14.2.tar.gzcdnginx-1.14.24.安装依赖yuminstallgccgcc-c++pcrepcre-develzli
angular html 文字向上无缝滚动陌归
样式要重新自己写body{font-size:12px}#demo{overflow:hidden;height:80px;width:280px;margin:90pxauto;position:relative;}#demo1{height:auto;text-align:left;}#demo2{height:auto;text-align:left;}#demo1li,#demo2li{l
深入了解嵌入式系统组成小元学妹嵌入式硬件单片机
嵌入式系统是一种专用计算机系统，通常用于控制、监视或执行特定任务。它由硬件和软件组成，具有高度集成、实时性强和资源受限等特点。本文将探讨嵌入式系统的组成，包括硬件和软件方面的内容，以便更深入了解这一领域。以下是我整理的关于嵌入式开发的一些入门级资料，免费分享给大家：https://m.hqyjai.net/emb_study_blue_short.html?xt=zxyhttps://m.hqyj
前端面试题 ===＞【HTML】禁止摆烂-才浅前端面试题前端 html
HTML面试题总结1.对HTML语义化的理解去掉或者丢失样式的时候能够让页面呈现出清晰的结构；代码结构清晰，方便团队的管理和维护，并且语义化更具有可读性，减少差异化；提升用户体验；例如：title、alt用于解释名词或者图片信息、label标签的活用有利于SEO优化，提升搜索引擎排名；和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息；爬虫依赖于标签来确上下文和关键字的权重；方便其他设备的解析（
html行内元素（内联元素），块级元素分别有哪些？王歪歪基础知识 html 前端
html行内元素（内联元素），块级元素分别有哪些？常用的分类包括行内元素（内联元素）和块级元素。下面是它们的示例列表：行内元素（InlineElements）：内联元素（InlineElements）是行内元素的另一个术语，它们的行为和显示方式与行内元素相似。块级元素（Block-levelElements）：到标题和列表列表项表格表单、、等语义化元素、、等语义化元素块级元素在默认情况下会在新行上
插入表主键冲突做更新 a-john
有以下场景：用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。问题：如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。解决： mysql中提供了一个sql语
Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello" 2.引用系统资源。格式：@android:type/name android:textColor="@android:color/opaque_red"
数据结构的基本介绍天子之骄数据结构散列表树、图线性结构价格标签
数据结构的基本介绍数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。经典的数据结构大致如下：一：线性数据结构 (1)：列表 a
通过二维码开放平台的API快速生成二维码一炮送你回车库 api
现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。 html代码如下:(二维码将生成在这div下) ? 1 &nbs
ImageIO读取一张图片改变大小 3213213333332132 java IO image BufferedImage
package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
myeclipse集成svn（一针见血） 7454103 eclipse SVN MyEclipse
&n
装箱与拆箱----autoboxing和unboxing darkranger J2SE
4.2　自动装箱和拆箱基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
ajax传统的方式制作ajax aijuans Ajax
//这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
只用jre的eclipse是怎么编译java源文件的？ avords java eclipse jdk tomcat
eclipse只需要jre就可以运行开发java程序了，也能自动编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
前端模块化 bee1314 模块化
背景：前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。 JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
处理百万级以上的数据处理 bijian1013 oracle sql 数据库大数据查询
一.处理百万级以上的数据提高查询速度的方法： 1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。 2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
mac 卸载 java 1.7 或更高版本征客丶 java OS
卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中第二部，Spark Streaming读取Kafka中的数据，进行实时分析本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
Erlang vs TNSDL bookjovi erlang
TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。相关新闻：（1）IT行业成五大疾病重灾区：过劳死平均37.9岁
读《研磨设计模式》-代码笔记-原型模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
配置管理---svn工具之权限配置 chenyu19891124 SVN
今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos component webapps 在conf里面的auth里赋予的权限配置为 [groups]
浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
浅谈程序员的数学修养
批量执行 bulk collect与forall用法 daizj oracle sql bulk collect forall
BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。有关FORALL语句的用法请参考：批量SQL之 F
Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
Yii CModel中rules验证规格 dcj3sjt126com rules yii validate
Yii cValidator主要用法分析： yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError
基于vagrant的redis主从实验 dcj3sjt126com vagrant
平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从实现思路制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box 制作sentos6.5+redis的box mkdir vagrant_redis cd vagrant_
Memcached(二)、Centos安装Memcached服务器 frank1234 centos memcached
一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]：建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
Remove Duplicates from Sorted List hcx2013 remove
Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
浅谈enum与单例设计模式 247687009 java 单例
在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构造器，导出静态成员变量，以便调用者访问。第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
使用switch条件语句需要注意的几点 openwrt c break switch
1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 spring mybatis JUnit
Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有：单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。第二个问题的具体实例是：
Java 定时任务总结一 tuoni java spring timer quartz timertask
Java定时任务总结一.从技术上分类大概分为以下三种方式： 1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务; 说明： java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank 相似度计算文本相似度词袋模型余弦相似度
本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下： 1、注册多个账号（一般10个以上）。 2、从多个账号中选择一个账号，发表1-2篇博文

2019-7-23 [HTML_CSS] 基本 行内/内部/外部格式 优先级 选择器 字体演 颜色 粗细大小 字体对齐