HTML02

最新推荐文章于 2024-07-23 23:43:36 发布

PPDY小芽

最新推荐文章于 2024-07-23 23:43:36 发布

阅读量726

点赞数

文章标签： html html5 c语言

本文链接：https://blog.csdn.net/PPDY93/article/details/112295459

版权

1-10_C语言10-15_数量关系16-20_判断关系Web前置课笔记

在int p[][4]={{1},{3,2},{4,5,6},{0}};中，p[1][2]的值是()
正确答案: B 你的答案: B (正确)
A.1
B.0
C.6
D.2
解析：数组中没有写出来的部分默认值为0
若变量a是int类型，并执行了语句a=’A’+1.6；，则正确的叙述是（）。
正确答案: D 你的答案: D (正确)
A.a的值是字符C
B.a的值是浮点型
C.不允许字符型和浮点型相加
D.a的值是字符’A’的ASCⅡ值加上1
解析：a=’A’+1.6；其功能是将字符’A’的ASCⅡ的值加上1.6，然后将运算结果的整
数部分赋值给整型变量a，所以a的值是字符’A’的ASCⅡ值加上1。正确答案为D。
若有定义int x=3,y=2和float a=2.5,b=3.5，则表达式：(x+y)%2+(int)a/(int)b的值是
正确答案: D 你的答案: D (正确)
A.0
B.2
C.1.5
D.1
解析：5%2得出余1，而a和b被强制转换成整型，得出0，所以结果为1
算式 3<<2|3 的结果是（）
正确答案: C 你的答案: A (错误)
A.1
B.0
C.15
D.3
解析：因为左移运算符优先级大于或运算符，所以0011（3）左移两位之后变成1100 然后与3 做| 运算之后结果是 1111 十进制就是15.
假设数原型和变量说明如下：
void f4(int **p);
int a[4]={1,2,3,4};
int b[3][4]={{1,2,3,4},{5,6,7,8},{9,10,11,12}};
int *q[3]={b[0],b[1],b[2]};
下面哪个调用是合法的？
正确答案: C 你的答案: D (错误)
A.f4(a)；
B.f4(b)；
C.f4(q)；
D.f4(&a);
解析：根据题干void f4(int **p); f4的参数为指向指针的指针，即p为一个指针的地址。指向指针的指针是一种多级间接寻址的形式。
选项A f4(a)，参数为一维数组名，即首元素的地址&a[0]。
选项B f4(b)，参数为二维数组名，及首元素的地址。
选项C f4(q)，参数q为一个指针数组，元素为int类型的指针，数组名为首元素b[0]的地址。
选项D f4(&a)，参数转化为&a[0]。等同于选项A。
设有语句int b[3][5];下面哪一条语句是正确的？
正确答案: A 你的答案: B (错误)
A.int (*p)[5]=b;
B.int *p[]=b;
C.int *p[2]={b[0],b[1],b[2]};
D.int *p[]=(int *[])b;
解析：题干语句int b[3][5];声明一个名为b的二维数组。
A表示数组指针，一个指向5个元素的指针。将二维数组的首地址赋值给指针p
B表示指针数组，一个存放int类型指针的数组。将二维数组的首地址赋值给指针数组。类型不匹配。
C表示指针数组，一个存放两个int类型指针的数组。结果将三个元素赋值给数组，所以溢出。
D将数组首地址强制转换成指针数组，不合法。
以下代码编译有错误，哪个选项能解决编译错误？
class A {
public:
int GetValue() const {
vv = 1;
return vv;
}
private:
int vv;
};
正确答案: D 你的答案: C (错误)
A.改变成员变量"vv"为"mutable int vv"
B.改变成员函数"GetValue"的声明，以使其不是const的
C.都不能修复编译错误
D.都可以修复编译错误
解析：mutalbe的中文意思是“可变的，易变的”，跟constant（既 C ++中的const）是反义词。
在C++中，mutable也是为了突破const的限制而设置的。被mutable修饰的变量，将永远处于可变的状态，即使在一个const函数中。
我们知道，如果类的成员函数不会改变对象的状态，那么这个成员函数一般会声明成const的。但是，有些时候，我们需要在const的函数里面修改一些跟类状态无关的数据成员，那么这个数据成员就应该被mutalbe来修饰。
下面程序运行后，输出的结果是（）
#include“studio.h”
void main(void)
{union{char c: int i:}u;
u.c=‘A’； u.i=0×0143;
printf("%d,%d",u.c,u.i);
}
正确答案: B 你的答案: B (正确)
A.65,323
B.67,323
C.65,65
D.323,323
解析：union共用体是一种特殊的数据类型，允许在相同的内存位置存储不同的数据类型，同一时间只用到一个成员。
所以共用体的C成员的值有损坏，因为最后赋给变量的i值占用了内存位置，所以十六进制转换十进制结果为：323。而int类型i的后八位（01000011）转化十进制为67取代原来的A（01000001）.
单选】假定x=500，下面函数的返回值是（）
int fun(int x)
{
int countx = 0;
while (x)
{
countx++;
x = x & (x – 1);
}
return countx;
｝
正确答案: D 你的答案: B (错误)
A.2
B.3
C.5
D.6
解析：offersandboys
x = 500时，x-1=499，用二进制表示
111110100
x-1为
111110011
当他们执行&运算并赋值给x，结果x为
111110000
x-1
111101111
x
111100000
如此类推到结果为000000000，应该发现x = x&(x-1)就是将x二进制位1变为0。x为500时二进制为1的位有6个，所以结果为6
以下程序#include
using namespace std;
template
T Max(T* a, int n) {
T max=___________;
for(int i=1;i<n;i++)
if(a[i]>max) max=a[i];
return max;
}
int main() {
int a[10]={3,7,5,0,2,1,8,4,9,6},*p=a+3;
cout<<Max(p,7);
return 0;
}
运行结果是9,请为横线处选择合适的程序（）
正确答案: A B C D 你的答案: C D (错误)
A.a
B.a[0]
C.0
D.a[3]
解析;这题就是耍流氓。main函数中调用的时候，p就指向a数组的第三个元素了，也就是a[3]了。然后进入函数，a指针现在就指向原数组的a[3]，也就是0值这个位置。而for循环中明显从1开始循环，暗示初始的最大值应给设置为a[0]，这个a代表Ta中的a。
C和D选项是知道整个数组所有元素的情况下才可以这样做。既然一眼就看出就知道最大值是9，这样赋值这题还有啥意义。选A，B更具有通用性，即使数组元素变化了，只要长度不变就没问题。
给你一个数列。但其中缺少一项，要求你仔细观察数列的排列推理。然后从四个供选择的选项中选择你认为最合理的一项，来填补空缺，使之符合数列的排列规律。
4 2 12 28 80 （）
正确答案: C 你的答案: C (正确)
A.124
B.96
C.216
D.348
解析：(4+2)*2
(2+12)*2
(12+28)*2
(28+80)*2
1 , 13 , 45 , 169 , ( )
正确答案: B 你的答案: D (错误)
A.443
B.889
C.365
D.701
解析:
1x1= 1 即：1
2x2= 4 =1+3 即：13
3x3= 9 =4+5 即：45
4x4=16 =1+6+9 即：169
5x5=25 =7+9+9=8+8+9 即：799和889
小张需在5个长度分别为15秒、53秒、22秒、47秒和23秒的视频片段中选取若干个，合成为一个长度在80~90秒之间的宣传视频。如果每个片段均需完整使用且最多使用一次，并且片段没有空闲时段，问他按照要求可能做出多少个不同的视频？
正确答案: A 你的答案: C (错误)
A.18
B.24
C.6
D.12
解析：满足要求的视频有3种，①53秒、22秒和15秒；②47秒，23秒和15秒；③47秒、22秒和15秒。每种有6种排法，可做出3×6=18种不同视频。
先找规律：其中有三个较小的数：15、22、23；两个较大的数：47和53。由此可以确定组合）15、22、53；15、22、47；15、23、47；
再由排列组合：每组又有六种组合方式，则共有18种。
有30个需要渡河，只有一条船，船每次最多载4人（包括划船的人），往返一次需要5分钟。那么，21分钟后，还有几个人在等待过河？（）
正确答案: D 你的答案: D (正确)
A.10
B.11
C.15
D.14
解析：0分:26,
5分:23,
10分:20,
15分:17,
20分:14,
25分:11
【单选】有15瓶一样的可乐，其中有一瓶变质了，喝了一口之后2小时会闹肚子。最少需要多少只小白鼠做实验，才能在2小时时间内找到有变质的一瓶？
正确答案: D 你的答案: B C (错误)
A.7
B.6
C.5
D.4
解析：把15个瓶子编号1-15，然后转换为2进制数，如下
15：1111
14：1110
13：1101
12：1100
…
3：0011
2：0010
1：0001
然后第一位为1的所有可乐给一个小白鼠、第二位为1的可乐给一个小白鼠、第三位为1的给一个小白鼠、第四位为1的给一个小白鼠。
最后根据中毒和没中毒的小白鼠逆推出哪瓶是有毒的可乐。
岩石：矿物：成分
正确答案: C 你的答案: C (正确)
A.森林：树木：木材
B.粘土：沙子：石头
C.器官：组织：功能
D.酒精：饮料：果
解析：一定成分的矿物就是岩石，一定功能的组织叫做器官。
服从：是指个体按照社会要求、团体规范或别人的意志而作出的行为，这种行为是来自外界的影响而被迫发生的。根据以上定义，下列属于服从的是( )
正确答案: D 你的答案: A (错误)
A.一位司机在马路上驾驶汽车时，由于有警察的监督，能听指挥，按规定速度行驶，一旦处于无人管辖的郊外，就超速行驶
B.一位职工口头上表示拥护单位的决定，但在实际上背道而驰
C.一人迫于社会压力或困难压力下表现出来的从众行为
D.在一个犯罪团伙中，有的成员是误上贼船，并不是死心塌地愿意去干坏事，只是被迫而为的
解析：AB项属于“不服从”的例子；C项中的“从众行为”不是“服从”（比如,有些人为赶时间而闯红灯）,故正确符案为D.
美国扁桃仁于上世纪70年代出口到我国，当时被误译为“美国大杏仁”。这种误译导致大多数消费者根本不知道扁桃仁、杏仁是两种完全不同的产品。对此，尽管我国林果专家一再努力澄清，但学界的声音很难传达到相关企业和普通大众。因此，必须制定林果的统一行业标准，这样才能还相关产品以本来面目。
以下哪项最可能是上述论证的假设?( )
正确答案: D 你的答案: B (错误)
A.美国扁桃仁和中国大杏仁的外形很相似。
B.进口商品名称的误译会扰乱我国企业正常的对外贸易活动。
C.我国相关企业和普通大众并不认可我国林果专家的意见。
D.长期以来，我国没有关于林果的统一行业标准。
解析：消费者不知道应该是因为误译的原因吧，所以相比之下D更适合作为答案。
隐性广告是指将产品或品牌及其代表性的视觉性符号甚至服务性内容策略性地融入电影、电视剧或其他电视节目及其他传播内容中（隐藏于载体并与载体融为一体），使观众在接受传播内容的同时，不自觉地接受商品或品牌信息，继而达到广告主所期望的传播目的。
根据上述定义，下列属于隐性广告的是：
正确答案: B 你的答案: D (错误)
A.电视台在转播世界杯足球比赛中场休息时播放的某知名饮品的广告
B.某知名运动品牌赞助奥运会某国体育代表团运动员的领奖服
C.某电子产品生产商赞助拍摄电影，电影放映前播放该产品广告
D.某电视台知名女主播穿着某品牌提供的服装参加亲戚的婚礼
解析：D错在缺少曝光，不是在媒体场合
从世界经济的发展历程来看，如果一国或地区的经济保持着稳定的增长速度，大多数商品和服务的价格必然随之上涨，只要这种涨幅始终在一个较小的区间内就不会对经济造成负面影响。
由此可以推出，在一定时期内：
正确答案: C 你的答案: A (错误)
A.如果大多数商品价格上涨，说明该国经济正在稳定增长
B.如果大多数商品价格涨幅过大，对该国经济必然有负面影响
C.如果大多数商品价格不上涨，说明该国经济没有保持稳定增长
D.如果经济发展水平下降，该国的大多数商品价格也会降低
解析：如果……那么……，只要……就……均为充分条件假言命题的连接词，肯前就能肯后，否后就能否前
<A.错误，肯后，无法推出肯前
<B.错误，否前，无法推出否后
<C.正确，否后，能推出否前
<D.错误，否前，无法推出否后

1.1.8 表单相关元素

之前所说的标签元素，都是以展示数据为主，为了增强网页的交互效果，让用户从网页上提交一些数据给服务器，就需要表单相关的元素

form标签：表单标签，form当中的其他控件当做整体去提交给我们的服务器的。

对于form的属性而言：

action属性：我们将表单的数据提交到哪里去？一般会去提交到服务器上的一个专门处理数据提交的文件。
method属性：数据的提交方式，post和get。get提交的数据是明文的，post提交的数据经过封装的。

常见的一些控件

input：其中有type属性，type属性的不同，则会导致input表现的形式也会不同
- text：文本框
- password：密码框
- radio：单选框
- checkbox：复选框
- submit：提交按钮
- reset：重置按钮
- button：按钮
- image：图像
- file：文件上传
select
textarea

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>01表单相关元素</title>
	</head>
	<body>
		<!--定义表单-->
		<form action="#" method="get">
			单行文本框:<input type="text" placeholder="请输入XXX"><br>
			不可编辑的文本框:<input type="text" readonly><br>
			密码框：<input type="password"><br>
			隐藏文本框：<input type="hidden"><br>
			第一组单选框：<br>
			<input type="radio" name="wife">迪丽热巴<br>
			<input type="radio" name="wife">哈妮克孜<br>
			<input type="radio" name="wife">马尔扎哈<br>
			第二组单选框：<br>
			<input type="radio" name="boyfirend">王一博<br>
			<input type="radio" name="boyfirend">朱一龙<br>
			<input type="radio" name="boyfirend">吴彦祖<br>
			复选框：<br>
			<input type="checkbox" name="myboy">王一博<br>
			<input type="checkbox" name="myboy">朱一龙<br>
			<input type="checkbox" name="myboy">吴彦祖<br>
			文件上传：<input type="file"><br>
			图像域：<input type="image" src="logo.jpg"><br>
			下面是常见的四个按钮：<br>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
			<input type="submit" value="取消" disabled >
			<input type="button" value="按钮">
			<button>登录</button>
		</form>
	</body>
</html>

使用label标签

扩大当前控件的点击空间，当前控件+文字说明

			<label for="username">单行文本框:</label>
			<input id="username" type="text" placeholder="请输入XXX"><br>
			不可编辑的文本框:<input type="text" readonly><br>
			<label>密码框：<input type="password"><br></label>
			隐藏文本框：<input type="hidden"><br>
			第一组单选框：<br>
			<label><input type="radio" name="wife">迪丽热巴</label><br>
			<label><input type="radio" name="wife">哈妮克孜</label><br>
			<label><input type="radio" name="wife">马尔扎哈</label><br>

select标签下拉框

			<!--展开+多选-->
			<select name="高级编程语言" multiple size="3">
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
			</select>
			<br>
			<select name="城市选择" >
				<optgroup label="西安">
					<option value="高新区">高新区</option>
					<option value="雁塔区">雁塔区</option>
					<option value="碑林区">碑林区</option>
				</optgroup>
				<optgroup label="咸阳">
					<option value="渭城区" selected>渭城区</option>
					<option value="秦都区">秦都区</option>
				</optgroup>
			</select>

textarea标签

用于输入一段文字的

cols：横向的宽度
rows：纵向的高度

			<textarea cols="50" rows="50">

			</textarea>

HTML5新增的一些表单属性

placeholder：作为文本框的输入提示
autofocus:自动获取焦点
required：提交后的检查，必须填写
list：是将下拉框和文本框进行结合

		<form>
		请输入书名:<input type="text" list="books"><br>
		</form>
		<datalist id="books">
			<option>Java从入门到放弃</option>
			<option>深入浅出Java</option>
			<option>7天精通Java</option>
		</datalist>

HTML5新增的一些input的类型

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>02新增input类型</title>
	</head>
	<body>
		<form action="#" method="get">
        选择颜色：<input type="color"><br>
        选择日期：<input type="date"><br>
        选择时间：<input type="time"><br>
        选择月份：<input type="month"><br>
        选择周期：<input type="week"><br>

        <!--输入类型检测 在提交数据的时候检测-->
        检测邮箱：<input type="email"><br>
        检测网址：<input type="url"><br>
        
        选择数字：<input type="number"><br>
        选择区间：<input type="range"><br>
        <button type="submit">提交</button>
        </form>
    </body>
</html>

1.2 HTML5 新增的属性

1.2.1 contentEditable属性

将那些原本不可编辑的元素，变成可编辑的状态，该属性具有继承性，上层元素如果定义了该属性，则下层元素都可被编辑

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>03新增属性</title>
	</head>
	<body>
        <div contenteditable="true">
            <table border="1" width=400 cellspacing=0 cellpadding=0>
                <tr>
                    <th>商品名</th>
                    <th>价格</th>
                </tr>
                <tr>
                    <td>Java</td>
                    <td>123.32</td>
                </tr>
                <tr>
                    <td>C++</td>
                    <td>267.76</td>
                </tr>
            </table>
        </div>
        <div ondblclick="this.contentEditable=true">
            <table border="1" width=400 cellspacing=0 cellpadding=0>
                <tr>
                    <th>商品名</th>
                    <th>价格</th>
                </tr>
                <tr>
                    <td>Java</td>
                    <td>123.32</td>
                </tr>
                <tr>
                    <td>C++</td>
                    <td>267.76</td>
                </tr>
            </table>
        </div>
    </body>
</html>

1.2.2 designMode属性

相当于全局的contentEditable属性，designMode不属于html中的属性，在js中调用

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>03新增属性</title>
	</head>
	<body ondblclick="document.designMode='on'">
        <div>
            <table border="1" width=400 cellspacing=0 cellpadding=0>
                <tr>
                    <th>商品名</th>
                    <th>价格</th>
                </tr>
                <tr>
                    <td>Java</td>
                    <td>123.32</td>
                </tr>
                <tr>
                    <td>C++</td>
                    <td>267.76</td>
                </tr>
            </table>
        </div>
        <div>
            <table border="1" width=400 cellspacing=0 cellpadding=0>
                <tr>
                    <th>商品名</th>
                    <th>价格</th>
                </tr>
                <tr>
                    <td>Java</td>
                    <td>123.32</td>
                </tr>
                <tr>
                    <td>C++</td>
                    <td>267.76</td>
                </tr>
            </table>
        </div>
    </body>
</html>

1.2.3 hidden属性

隐藏属性

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>03新增属性</title>
	</head>
	<body>
        <div id="target" hidden="true">
            文字内容
        </div>
        <button onclick="var target=document.getElementById('target');target.hidden=!target.hidden">显示/隐藏</button>
    </body>
</html>

1.2.4 spellcheck属性

拼写检查，主要用于输入框

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>03新增属性</title>
	</head>
	<body>
        <form>
            <textarea cols="10" rows="10" spellcheck="true">

            </textarea>
        </form>
    </body>
</html>

1.3 HTML5新增常用元素

1.3.1 文档结构元素

article：表示一遍独立的文章
- 内部用header来表示标题
- 内部用footer表示脚注
- 内部用section表示段落/文章
- 内部用article表示回复的文章
section：文章的段落
nav：导航栏
aside：附属信息
header：文章头部信息
footer：文章脚注信息
figure：表示一块独立的图片区域，可以包含多image图片
figcation：图片区域的标题

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
	</head>
	<body>
        <!--一篇独立的文章-->
        <article>
            <header>
                <h1>高考750分和750w那个重要？</h1>
                <div>作者:HENG</div>
            </header>
            <p>
                一年前，你选了750分，我选了750万人民币。<br>
                11个月前，你成为全国家喻户晓的考神；我成为鼠目寸光的笑柄。
            </p>
            <!--第一个回答-->
            <section>
                <article>
                    <header>
                        <h3>我觉得750分很重要</h3>
                        <div>作者：啦啦</div>
                    </header>
                    <p>
                        高考750，如果是裸分，你将会是历史上第一个真正高考拿满的人，<br>
                        这样的奇迹在几百年内也很难说会再次出现。<br>
                        你会立刻登顶各平台热搜榜，全国人民愿称你为真正的考神，<br>
                        几十年后营销号还会不依不饶拿你开刀。拥有这样的流量，<br>
                        你的潜在财富难道没有750w吗？高考750，<br>
                        意味着你拥有一颗极其聪明而严谨的大脑，<br>
                        能够拿下所有难题并且保证细节上也不丢一分，<br>
                        还能写出满分语文和英语作文。拥有这样强大的大脑，<br>
                        你难道想不出几百种办法去赚够750w吗？
                    </p>
                </article>
            </section>
            <!--第二个回答-->
            <section>
                <article>
                    <header>
                        <h3>我觉得750w很重要</h3>
                        <div>作者：嘻嘻</div>
                    </header>
                    <p>
                        当然是考750分的能力。我考了750分，肯定成网红。<br>
                        <img width=200px src="https://pic1.zhimg.com/80/v2-9841b837264cd8eda4ba282193bae9f0_1440w.jpg?source=1940ef5c">
                    </p>
                </article>
            </section>
            <footer>
                以上言论仅代表作者自身观点，与本平台无关！
            </footer>
            <aside>
                <h3>关于楼主</h3>
                <section>
                    <div>用户组：管理员</div>
                    <div>注册日期：2020-02-02</div>
                </section>
            </aside>
        </article>
        <aside>
            <h3>页面导航</h3>
            <nav>
                <ul>
                    <li><a href="http://www.baidu.com">首页</a></li>
                    <li><a href="http://www.baidu.com">最新</a></li>
                    <li><a href="http://www.baidu.com">热门</a></li>
                </ul>
            </nav>
        </aside>
        <figure style="border: 2px solid black;padding:5px;width:500px;">
            <figcaption>我的媳妇们</figcaption>
            <img src="logo.jpg">
            <img src="logo.jpg">
            <img src="logo.jpg">
        </figure>
    </body>
</html>

1.3.2 语义相关元素

mark：重点标记
meter：已知最大值和最小值的计数器
- value属性：当前值
- min：最小值
- max：最大值
- low：最小范围
- high：最大范围
- optimum：最佳范围
progress：进度条
- max：最大值
- value：当前值

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
	</head>
	<body>
        <mark>HTML5</mark>是非常简单的技术<br>
        <meter min="0" max="100" low="30" high="80" value="10">10</meter><br>
        <progress value="30" max="100"></progress>
        <progress ></progress>
    </body>
</html>

第二部分 CSS3

Cascading Style Sheet 层叠样式表CSS：负责显示逻辑

Hyper Text Marked Language 超文本标记语言HTML：负责数据逻辑

CSS主要有两大类的功能：

对页面的字体、颜色、外观控制的非常细腻，让网页更加有活力
通过CSS来控制整个网页的风格

CSS可以向HTML一样单独成文件使用，xxx.css，或者嵌入到html当中使用

2.1 CSS样式表的基本使用

2.1.1 链接外部样式文件

通过link标签将外部的css文件导入到我们当前的html文件中。

好处：将数据和显示分离，同一份css文件也可以被多个html共用。

坏处：浏览器先加载数据信息，再读取数据信息中的link标签，再加载link所导入的文件，相对而言比较慢

/*将来 在使用该css文件的html中 所有的table都是背景黄色 宽度为400px*/
table {
    background-color: #ff0;
    width: 400px;
}
td {
    background-color: #00f;
    font-family: "楷体";
    font-size: 20px;
    text-shadow: 20px 6px 2px #333;
}

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <link href="outer.css" rel="stylesheet" type="text/css">
    </head>
	<body>
        <table>
            <tr>
                <td>一行一列</td>
                <td>一行二列</td>
            </tr>
            <tr>
                <td>二行一列</td>
                <td>二行二列</td>
            </tr>
        </table>
    </body>
</html>

2.1.2 导入外部样式文件

通过@import导入，但是不推荐这么使用，有些浏览器不支持此操作的。

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            @import url("outer.css");
        </style>
    </head>
	<body>
        <table>
            <tr>
                <td>一行一列</td>
                <td>一行二列</td>
            </tr>
            <tr>
                <td>二行一列</td>
                <td>二行二列</td>
            </tr>
        </table>
    </body>
</html>

2.1.3 使用内部样式定义

好处：统一加载，相对较快

坏处：数据和样式揉在一起，不方便管理，而且css样式也不方便变共享

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            table {
                background-color: #ff0;
                width: 400px;
            }
            td {
                background-color: #00f;
                font-family: "楷体";
                font-size: 20px;
                text-shadow: 20px 6px 2px #333;
            }
        </style>
    </head>
	<body>
        <table>
            <tr>
                <td>一行一列</td>
                <td>一行二列</td>
            </tr>
            <tr>
                <td>二行一列</td>
                <td>二行二列</td>
            </tr>
        </table>
    </body>
</html>

2.1.4 使用内联样式

直接写在相对应的标签style属性中

坏处：冗余过大

好处：针对性最强，总有几个特别的不跟大部队走

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <link href="outer.css" rel="stylesheet" type="text/css">
        <style>
            table {
                background-color: rgb(255, 0, 13);
                width: 400px;
            }
        </style>
    </head>
	<body>
        <table >
            <tr>
                <td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">一行一列</td>
                <td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">一行二列</td>
            </tr>
            <tr>
                <td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">二行一列</td>
                <td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">二行二列</td>
            </tr>
        </table>
    </body>
</html>

2.2 CSS选择器

名称 {
	属性：属性值;
	...
}

选择器的作用是啥？指定符合要求的一些元素进行样式的变化

2.2.1 元素选择器

选择元素标签

标签名 {
	属性：属性值;
	...
}

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            table {
                background-color: #ff0;
                width: 400px;
            }
            td {
                background-color: #00f;
                font-family: "楷体";
                font-size: 20px;
                text-shadow: 20px 6px 2px #333;
            }
        </style>
    </head>
	<body>
        <table>
            <tr>
                <td>一行一列</td>
                <td>一行二列</td>
            </tr>
            <tr>
                <td>二行一列</td>
                <td>二行二列</td>
            </tr>
        </table>
    </body>
</html>

2.2.2 属性选择器

根据标签中属性的特点来进行选择的

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <link href="outer.css" rel="stylesheet" type="text/css">
        <style>
            /*所有的div们*/
            div {
                width: 300px;
                height: 30px;
                background-color: #eee;
                border: 1px solid black;
                padding: 10px;
            }
            /*具有id属性的div们*/
            div[id] {
                background-color: #aaa;
            }
            /*具有id属性且id属性值中包含xx的div们*/
            div[id*=xx] {
                background-color: #999;
            }
            /*具有id属性且id属性值中以xx开头的div们*/
            div[id^=xx] {
                background-color: #555;
            }
            /*具有id属性且id属性值中以xx结尾的div们*/
            div[id$=xx] {
                background-color: #333;
            }
            /*具有id属性且id属性值等于xx的div们*/
            div[id=xx] {
                background-color: #111;
                color: aliceblue;
            }
        </style>
    </head>
	<body>
        <div>没有任何属性的div</div>
        <div id="a">带id属性的div 属性和xx无关</div>
        <div id="zzxxyy">带id属性但包含xx的div</div>
        <div id="xxyy">带id属性且以xx开头的div</div>
        <div id="zzxx">带id属性且以xx结尾的div</div>
        <div id = "xx">带id属性且等于xx的div</div>
    </body>
</html>

2.2.3 id选择器

通过id值来进行选择

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div {
                width: 200px;
                height: 30px;
                background-color: #ddd;
                padding: 10px;
            }
            /*id为xx的标签们*/
            #xx {
                border: 2px dotted lightblue;
                background-color: tomato;
            }
            /*id为xx的p标签*/
            p#xx {
                border: 2px dotted aqua;
                background-color: indigo;
            }
            /*id为yy的p标签*/
            p#yy {
                border: 2px dotted rgb(0, 255, 157);
                background-color: rgb(235, 252, 8);
            }
        </style>
    </head>
	<body>
        <div>
            和我啥关系也没有
        </div>
        <div id="xx">
            我的id是xx
        </div>
        <p id="xx">
            我是p
        </p>
        <div id="yy">
            我是yy的div
        </div>
        <p id="yy">
            我是p
        </p>
    </body>
</html>

2.2.4 类选择器

类选择器主要看的是class属性，基本上每个标签都有id、class、style属性

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            /*所有class属性为myclass的标签们*/
            .myclass {
                width: 240px;
                height: 40px;
                background-color: #ddd;
            }
            /*class属性为myclass的div标签*/
            div.myclass {
                border: 1px double black;
                background-color: #888;
            }
        </style>
    </head>
	<body>
        <div class="myclass">
            class属性为myclass的div
        </div>
        <p class="myclass">
            class属性为myclass的p
        </p>
    </body>
</html>

2.2.5 包含选择器

指的是在某一个元素之下的所有元素的选择

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div {
                width: 300px;
                background-color: #ddd;
                margin: 5px;
            }
            /*在div之下所有class为a的标签*/
            div .a{
                width: 200px;
                background-color: #888;
                border: 1px dotted lightcoral;
            }
            /*在div之下所有section标签*/
            div section {
                border: 10px solid yellow;
            }
        </style>
    </head>
	<body>
        <div>
            没有任何元素的div
        </div>
        <div>
            <p class="a">
                在div中的p，class为a
            </p>
            <section>
                <div class="a">
                    在seciton中的div class为a
                </div>
            </section>
        </div>
        <section>
            <div>
                在section中的div
            </div>
        </section>
    </body>
</html>

2.2.6 子选择器

父子关系

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div {
                width: 350px;
                height: 60px;
                background-color: #ddd;
                margin: 5px;
            }
            /*div标签下所有class属性为a的子标签*/
            div>.a {
                width: 200px;
                height: 35px;
                border: 1px dotted black;
                background-color: #888;
            }
            /*div标签下所有span子标签*/
            div>span{
                font-family: "楷体";
                font-size: 20px;
                background-color: aqua;
            }
        </style>
    </head>
	<body>
        <div>
            <p class="a">
                我是div中的p class为a
            </p>
        </div>
        <div>
            <section>
                <p class="a">
                    我是div中的seciton中的p class为a
                </p>
            </section>
        </div>
        <div>
            <span>我是span1</span>
            <span>我是span2</span>
            <p>
                <span>我是span3</span>
            </p>
        </div>
    </body>
</html>

2.2.7 兄弟选择器

同级别

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            #android ~ .long {
                background-color: khaki;
            }
        </style>
    </head>
	<body>
        <div class="long">呵呵1</div>
        <div id="android">呵呵2</div>
        <div class="long">呵呵3</div>
        <p class="long">呵呵4</p>
        <p class="long">呵呵5</p>
    </body>
</html>

2.2.8 选择器组合

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div , #xx , .myclass {
                width: 200px;
                height: 20px;
                background-color: aquamarine;
            }
        </style>
    </head>
	<body>
        <div>div</div>
        <p id="xx">p</p>
        <span class="myclass">span</span>
    </body>
</html>

2.2.9 伪元素选择器

不是元素，但是也可被更改的一些内容

:first-letter：首字母，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
:first-line：首行，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
:before：在元素之前
:after：在元素之后

变首字母的

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            span {
                display: block;
            }
            span::first-letter {
                color: #f00;
                font-size: 50px;
            }
            p::first-letter {
                color: #f00;
                font-size: 50px;
            }
        </style>
    </head>
	<body>
        <span>这是span</span>
        <p>这是p</p>
    </body>
</html>

变首行的

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            span {
                display: block;
            }
            span::first-line {
                color: #f00;
                font-size: 50px;
            }
            p::first-line {
                color: #f00;
                font-size: 50px;
            }
        </style>
    </head>
	<body>
        <span>这是span第一行<br>第二行</span>
        <p>这是p第一行<br>第二行</p>
    </body>
</html>

before与after结合content属性来使用

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div::before {
                content:"这是一个div"
            }
            div::after {
                content: url("logo.jpg");
            }
            div>div.no:after {
                content:"牛B Plus";
            }
            p {
                counter-increment: pcounter;
            }
            p::before {
                content: "第" counter(pcounter) "页";
            }
            p::after {
                content: counter(pcounter,lower-roman);
            }
            /*decimal lower-alpha lower-roman upper-xx*/
        </style>
    </head>
	<body>
        <div>div01</div>
        <div>div02</div>
        <div>div03</div>
        <div>
            <div class="no">
                是不是我？
            </div>
        </div>
        <p>这是第1端</p>
        <p>这是第2端</p>
        <p>这是第3端</p>
        <p>这是第4端</p>
    </body>
</html>

2.2.10 伪类选择器

标签的状态！

:link：超链接点击之前
:visited：超链接访问之后
:hover：鼠标悬浮的时候
:active：当点击的时候
:focus：当获取焦点时

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            a:link {
                color: red;
                font-size: 30px;
            }
            a:visited {
                color: gray;
                font-size: 30px;
            }
            a:hover {
                color: greenyellow;
                font-size: 50px;
            }
            a:active {
                color: yellow;
                font-size: 30px;
            }
            img:hover {
                width: 100px;
            }
        </style>
    </head>
	<body>
        <a href="http://www.123.com">呵呵呵呵呵呵呵</a>
        <div>
            <img src="logo.jpg" width="80px">
            <img src="logo.jpg" width="80px">
            <img src="logo.jpg" width="80px">
            <img src="logo.jpg" width="80px">
            <img src="logo.jpg" width="80px">
            <img src="logo.jpg" width="80px">
        </div>
    </body>
</html>

PPDY小芽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML02

在int p[][4]={{1},{3,2},{4,5,6},{0}};中，p[1][2]的值是()正确答案: B 你的答案: B (正确)A.1B.0C.6D.2解析：数组中没有写出来的部分默认值为0若变量a是int类型，并执行了语句a=’A’+1.6；，则正确的叙述是（）。正确答案: D 你的答案: D (正确)A.a的值是字符CB.a的值是浮点型C.不允许字符型和浮点型相加D.a的值是字符’A’的ASCⅡ值加上1解析：a=’A’+1.6；其功能是将字符’A’的ASC.
复制链接

扫一扫