web day2 作业
有哪些端?
- Web前端手机也行电脑也行-浏览器
- 移动端在手机
- PC客户端在电脑
- 后端/后台
前端主要负责两个事:
- 负责用户数据的输入
- 负责向用户展示数据
前端主要的知识点
- HTML
- CSS
- JavaScript
第一部分 HTML5
HTML:超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版
1.1 HTML5常见元素与属性
1.1.1 基本元素
- html:HTML文档的根标签
- head:页面的头部,存放的是一些关于页面的设置等信息,不会当成正文显示在网页里
- body:页面的主体,正文,其内容都会呈现在网页中
- title:网页的标题
- meta:主要用于设置网页内容
- style:用于使用CSS样式表
- h1-h6:标题1-标题6,块级元素
- p:段落,块级元素,段前段后间距
- span:一段文字,内联元素,不换行
- font:字体标签,内联
- hr:一条水平线,块级
- div:盒子,容器,文档的节,主要用于页面布局,块级,它可以容纳很多其他元素
<!--声明为HTML5文档-->
<!DOCTYPE html>
<!--HTML的根标签-->
<html><!--页面头部信息--><head><title>01基本元素</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><!--页面主体信息--><body><h1>这是h1</h1><h6>这是h6</h6><!-- #RGB #RRGGBB 0~F --><span><font color="#FF1188">这是一句孤立的话</font></span> <br><span><font color="#00f">这也是一句孤立的话</font></span><p align="center">这是一段话</p><hr><p align="right">这又是一段话<span><font color="#00f">这也是一句孤立的话</font></span></p><div style="background-color: aqua; width: 50%;height: 200px;"><p align="center">这是div1中的一段话</p></div><div style="background-color: brown;"><p align="center" style="color:aliceblue">这是div2中的一段话</p></div></body>
</html>
1.1.2 文本格式化元素
- b/strong:加粗
- i/em:斜体
- sup:上标文本
- sub:下标文本
- small:小号文本
- big:大号文本
- bdo:文本方向 dir属性来标记文本方向 ltr rtl
<!DOCTYPE html>
<html><head><title>02文本格式化元素</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><span><b><i>加粗斜体文本</i></b></span><br><span><small>小号文本</small><br><big>大号文本</big><br></span><!--An=A1+(n-1)*d--><p>A<sub>n</sub>=A<sub>1</sub>+(n-1)*d<br></p><!-- 2^x=n 推出 x=log2n--><p>2<sup>x</sup>=n 推出 x=log<sub>2</sub>n<br></p><bdo dir="ltr">JavaPythonC++</bdo><br><bdo dir="rtl">JavaPythonC++</bdo></body>
</html>
常见的转义字符
<
:<>
:>
:空格¥
:¥"
:"÷
:֩
:©®
: ®
1.1.3 语义相关元素
- abbr:缩写,用title属性来标记全称
- address:地址,块级元素
- blockquote:长段引用,用cite属性标记引用的出处 块级元素
- q:短引用,用cite属性标记引用的出处,默认加双引号
- cite:表示作品的名称
- code:表示一段代码 块级
- pre:预格式化 块级
- kbd:键盘录入标记
- dfn:专业术语
- var:变量标签
- del:删除文本
- ins:插入文本
<!DOCTYPE html>
<html><head><title>03语义相关元素</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><abbr title="西安鸥鹏互联科技有限公司">西安鸥鹏</abbr><br>西安鸥鹏的地址是<address>陕西省西安市自力大厦</address>呵呵呵<br><blockquote>北国风光,千里冰封,万里雪飘,望长城内外,惟余莽莽,大河上下,顿失滔滔,山舞银蛇,原驰蜡象,欲与天公试比高,须晴日,看红装素裹,分外妖娆,江山如此多娇,引无数英雄竞折腰,惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚,一代天骄,成吉思汗,只识弯弓射大雕,俱往矣,数风流人物,还看今朝。</blockquote><q>Java很好学,呵呵~</q>上述话是<cite>鸥鹏张老师</cite>说的<br><code>#include<stdio.h><br>void main(){<br> printf("HelloWorld!");<br>}</code><pre>#include<stdio.h>void main(){printf("HelloWorld!");}</pre>呵呵众所周知<kbd>ctrl + c</kbd>是复制<br>在Linux中<kbd>list -l</kbd>显示当前目录的信息<br><dfn>HTML</dfn>是超文本标记语言<br><var>i</var>+<var>j</var>=10在Java多线程中,<del>stop()</del>方法已经过时,推荐使用<ins>interrupt()</ins></body>
</html>
1.1.4 超链接和锚点
只有一个标签<a>
,有如下几个重要的属性:
- href:所链接到的资源,可以是本地的,也可以是互联网上的
- target:新链接的打开方式,
_self
,_blank
- media:媒体类型
<!DOCTYPE html>
<html><head><title>04超链接与锚点</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><a href="04超链接与锚点.html#end">点击此处到达文章末尾</a><a href="http://www.baidu.com" target="_self">点击打开百度</a><br><a href="http://www.baidu.com" target="_blank">点击打开百度</a><br><a href="C:\Users\HENG\Desktop\WebDay01\01基本元素.html" target="_blank">打开01基本元素.html</a><br><a href="http://www.baidu.com"><img src="logo.jpg" width="100px"></a><br><!--做一个锚点--><a name="end">这是一个页面的结尾锚点</a></body>
</html>
1.1.5 列表相关元素
- ul:无序列表
- type属性:circle、disc、square
- ol:有序列表
- type属性:1,A,I
- start:起始编号
- li:有序和无序列表的子选项
- dl:自定列表
- dt:自定义分类
- dd:自定义的选项
<!DOCTYPE html>
<html><head><title>05列表相关</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><ul type="square"><li>java</li><li>C++</li><li>Python</li></ul><ol type="I" start="2"><li>java</li><li>C++</li><li>Python</li><li>java</li><li>C++</li><li>Python</li></ol><dl><dt>宇智波家族有谁:</dt><dd>啥是gay</dd><dd>一打七</dd><dd>马达拉</dd><dt>千手家族有谁:</dt><dd>大奶牛</dd><dd>哈希他妈</dd></dl></body>
</html>
1.1.6 图形图形相关元素
img标签主要用于表示一个图像,有这么几个重要的属性:
- src:图片的路径 可以是本地的 可以是网络上的
- width:宽度
- height:高度
- alt:如果图片加载不出来,则用alt文本表示
- title:图片的文字说明
- bodder:边框
<!DOCTYPE html>
<html><head><title>06图形图像</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><img src="logo.jpg" width="400px" title="迪丽热巴我爱你"/><br><img src="logo.jpg" height="200px" border=10/><br><img src="https://bkimg.cdn.bcebos.com/pic/37d3d539b6003af33a87a65fc160d15c1038534318f3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5" height="100px"/><br><img src="" alt="图片正在加载"/><p>这位是我的媳妇<img src="logo.jpg" height="200px"><br>这位是我的媳妇<img src="logo.jpg" height="200px" align="center"><br>这位是我的媳妇<img src="logo.jpg" height="200px" align="top"><br>这位是我的媳妇<img src="logo.jpg" height="200px" align="bottom"><br>这位是我的媳妇<img src="logo.jpg" height="200px" align="middle"><br>这位是我的媳妇<img src="logo.jpg" height="200px" align="left"><br>这位是我的媳妇<img src="logo.jpg" height="200px" align="right"><br></p><hr><br><img src="logo.jpg" usemap="#Map"/><map name="Map"><area shape="circle" coords="402,299,23" href="http://www.newcoder.com" target="_blank"><area shape="rect" coords="456,251,485,319" href="http://www.newcoder.com" target="_blank"><area shape="poly" coords="400,365,446,268,446,381" href="http://www.newcoder.com" target="_blank"></map></body>
</html>
电影海报页面
<!DOCTYPE html>
<html><head><title>练习01电影页面</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><!--标题栏--><div style="margin-top: 20px;padding: 20px;"><h1>热门电影版块</h1><hr color="#CCC" size="1"><span><strong>最近热门电影</strong></span><span style="margin-left: 50px;">热门</span><span style="margin-left: 50px;">最新</span><span style="margin-left: 50px;">豆瓣高分</span><span style="margin-left: 50px;">欧美</span><span style="margin-left: 50px;">日韩</span><span style="margin-left: 50px;">国产</span><span style="margin-left: 50px;">冷门佳片</span><span style="margin-left: 50px;">更多>></span><hr color="#CCC" size="1"></div><!--海报行--><div style="height: 400px; margin-top: 20px;"><img src="movie01.jpg" width="23%" height="90%"><img src="movie02.jpg" width="23%" height="90%"><img src="movie03.jpg" width="23%" height="90%"><img src="movie04.jpg" width="23%" height="90%"></div><!--电影名--><div style="height: 50px;margin-top: 10px;"><span style="font-size: 25px;width: 23%;"><a href="magnet:?xt=urn:btih:5c839b8e2f8d73d813353b2c572f4170c2353bde&dn=%e9%98%b3%e5%85%89%e7%94%b5%e5%bd%b1www.ygdy8.com.%e6%88%91%e5%92%8c%e6%88%91%e7%9a%84%e5%ae%b6%e4%b9%a1.HD.1080p.%e5%9b%bd%e8%af%ad%e4%b8%ad%e8%8b%b1%e5%8f%8c%e5%ad%97.mp4&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2fexplodie.org%3a6969%2fannounce&tr=udp%3a%2f%2fexodus.desync.com%3a6969%2fannounce">我和我的家乡</a></span><span style="font-size: 25px;width: 23%;margin-left: 120px;"><a>沐浴之王</a></span><span style="font-size: 25px;width: 23%;margin-left: 170px"><a>雪谷之狼</a></span><span style="font-size: 25px;width: 23%;margin-left: 170px"><a>一秒钟</a></span></div></body>
</html>
1.1.7 表格相关元素
- table:表示表格的标签,最多有一个caption表格标题,最多有一个theader表头,最多有一个tfoot表尾,多个tr行,多个td单元格,多个th加粗的tr
- cellspacing:单元格与单元格之间的间距
- cellpadding:单元格内的内边距
- width:表格的宽度
- align:表格内容的对齐方式
- bgcolor:表格的背景颜色
- background:表格的背景图片
- caption:表格的标题
- tr:表格的行
- td:表格的单元格
- rowspan:跨行
- colspan:跨列
- height:高度
- width:宽度
- th:页眉单元格
- tbody:表格的主体部分
- thead:表头
- tfoot:表尾
<!DOCTYPE html>
<html><head><title>07表格相关元素</title><meta http-equiv="Content-Type" content="text/html;charset=gbk"></head><body><table background="logo.jpg" border="1" width=400 cellspacing=0 cellpadding=0 align="center" style="text-align: center;"><colgroup ><col style="width: 50%;" bgcolor=#0f0><col style="width: 50%;"></colgroup><caption><b>上课安排表</b></caption><thead></thead><th>课程</th><th>老师</th></thead><tbody><tr><td>Web前置课</td><td>HENG</td></tr><tr><td>JavaSE</td><td>HENG</td></tr></tbody><tfoot><td colspan="2" style="text-align: right;">共计两门课程</td></tfoot></table></body>
</html>
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>
C语言
1.语句i=M1+M2;在预编译时将进行宏替换为1=53+52;,因此i的值将是
25.故正确答案是C。
2.C++允许在同一范围中声明几个功能类似的同名函数,但是这些同名函数的形式参数(指参数的个数、类型或者顺序)必须不同,也就是说用同一个运算符完成不同的运算功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。但是重载函数的返回值类型可以不同。
3.cur本为object类型指针 第一个占位符输出时,参数中将cur先强制转化为字符型指针 然后加2,即指向obj_array数组的第一个元素中的字符c,而第二个占位符输出时,参数中先让cur指针加2,即到达obj_array第3个元素的地址处,然后强制转化为字符型指针,再用*获取1个字节的内容即字符g
4.int *const p与int const *p等价 前者是指向整数数据的常量指针,指针不可再被修改,后者是指向数据类型为常量的指针p,p所指向的数据值不可更改
const int *p与int *const p等价 const int 同int const
const int *p与int const *p等价
int *p[10]与int (*p)[10]等价 前者是一个数组,数组里存放十个这样的指向整形数据的指针,后者是一个数组指针,p指向存放整形数据的数组
5.++和*都是第二优先级,但注意是右结合律
6.静态成员是所有对象所共有的
7.A选项中含有非法的空格,所以错误。C语言中十六进制常量以0x开头,所以C正确。实型常量中e的前后必须均有数据,且其后必须为整数,所以B和D错误
8.data[1][5]是数组中第15个元素(1*10+5)24,data[1][5].c之前还存了char a和int b,还要加上这部分存储1+(3)+4,
所以答案是x+(110+5)*24+1+(3)+4=x+368
9.
10.二叉树
数量关系
1.6+5+4+3+2+1=21 最少的一份是1/21 6300*1/21=300
2.(7 - 9)/ 2 =-1
(9 --1)/ 2 = 5
(-1 - 5)/ 2 = -3
在这里插入图片描述
3.分析:首先 将十二个球编号为 1-12。
第一次,先将1-4号放在左边,5-8号放在右边。
称量结果有3种可能:1右重,2平衡,3左重。
下面分别叙述每种可能下的第二步和第三步称量。
1.如果右重 则坏球在1-8号当中。9-12全为好球
第二次将2-4号拿掉,将6-8号从右边移到左边,把9-11号放在右边。就是说,把1,6,7,8放在左边,5,9,10,11放在右边。
1.如果右重则坏球在没有被触动的1,5号。如果是1号,则它比标准球轻;如果是5号,则它比标准球重。
第三次将1号放在左边,2号放在右边。
1.如果右重则1号是坏球且比标准球轻;
2.如果平衡则5号是坏球且比标准球重;
3.这次不可能左重。
2.如果平衡则坏球在被拿掉的2-4号,且比标准球轻。
第三次将2号放在左边,3号放在右边。
1.如果右重则2号是坏球且比标准球轻;
2.如果平衡则4号是坏球且比标准球轻;
3.如果左重则3号是坏球且比标准球轻。
3.如果左重则坏球在拿到左边的6-8号,且比标准球重。
第三次将6号放在左边,7号放在右边。
1.如果右重则7号是坏球且比标准球重;
2.如果平衡则8号是坏球且比标准球重;
3.如果左重则6号是坏球且比标准球重。
---------------------------
2.如果第一次的称量结果是 天平平衡,则1-8号全为好球,坏球在9-12号。
第二次将1-3号放在左边,9-11号放在右边。
1.如果右重则坏球在9-11号且坏球较重。
第三次将9号放在左边,10号放在右边。
1.如果右重则10号是坏球且比标准球重;
2.如果平衡则11号是坏球且比标准球重;
3.如果左重则9号是坏球且比标准球重。
2.如果平衡则坏球为12号。
第三次将1号放在左边,12号放在右边。
1.如果右重则12号是坏球且比标准球重;
2.这次不可能平衡;
3.如果左重则12号是坏球且比标准球轻。
3.如果左重则坏球在9-11号且坏球较轻。
第三次将9号放在左边,10号放在右边。
1.如果右重则9号是坏球且比标准球轻;
2.如果平衡则11号是坏球且比标准球轻;
3.如果左重则10号是坏球且比标准球轻。
-----------------------------
3.如果第一次称量的结果是 左重, 则坏球在1-8号。9-12号均好球。
这种情况与 右重 的情形是对称的。剩下的步骤可以对称执行。不一一列出。
4.分奇数项和偶数项
奇数项:3和11和71规律是(3+1)×3=11+1,(11+1)×6=71+1
偶数项:8和20和168规律是(2×8)+4=20,(20×8)+8=168
5.当出现两个一样过极相似的数字时,可以考虑分奇数项和偶数项来看
判断推理
1.B,C 都是当下正在发生的事情,不算记忆
D就不是自己的
2.B 是第二, 则A只能是第一, 不然AB和超过44
所以 A1, B2, CD3, E5
B + 2C = 44 - 23 - 4 = 17
3B >= B + 2C
3B > 17
B >= 6 → C<= 5
又 C >= E = 4
C = 5
所以 B = 7
该选C
3.甲猜测前三名都是辽宁队,丙猜测山东队或者河北队会拿奖牌,即不会全是辽宁队获得前三名,因此两者的猜测构成矛盾关系,依据排中律,两个猜测中必定有一个是真的,因此乙和丁的猜测一定是假的,由丁的猜测错误可排除A、B、C三项,故本题正确答案为D。 另外,也可以用假设反证法。若A成立,则甲真,乙假,丙假,丁真;若B成立,则甲假,乙真,丙真,丁真;若C成立,则甲假,乙真,丙真,丁真;若D成立,则甲假,乙假,丙真,丁假;由于四人中只有一人言中,故正确答案为D。
4.认真读题
答案为 A
对于一个合格的产品,最终通过双系统测定为合格的产品肯定是合格的产品。
试想如果两个系统联合起来工作,一个不合格产品如果能通过第一个系统的检测,他就一定会被第二个系统检测出来为不合格产品,因为题目的前提条件是:不存在一个产品,会被两个系统都误检。
所以误检率为0.
web day2 作业相关推荐
- HTML5期末大作业:网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- html网页设计作业代码——网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页
HTML5期末大作业:网上鲜花网站设计--网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- HTML5期末大作业:宠物之家网站设计——代码质量好宠之家(5页) HTML+CSS+JavaScript web期末作业设计网页
HTML5期末大作业:宠物之家网站设计--代码质量好宠之家(5页) HTML+CSS+JavaScript web期末作业设计网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- 网页成品——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- HTML5期末大作业:手表商城网站设计——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- 网页作业HTML+CSS+JS大作业——汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品
HTML+CSS+JS大作业--汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- HTML+CSS+JS大作业——汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品
HTML+CSS+JS大作业--汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...
- HTML5期末大作业:化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...
- 老男孩Day2作业:编写购物车程序
作业要求 1.启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 4.可随 ...
最新文章
- 自动化是计算机相关专业英语,自动化专业英语词汇
- Java 条件解析,Java Lambda使用条件检查解析集合
- 链表用java实现简单单链表linkedlist
- 正确使用Core Data多线程的3种方式
- 15_Android中任务栈
- python一直循环怎么写_自学Python,写一个挨打的游戏代码来初识While循环
- c++编写算法判断二叉树是否为完全二叉树_字节面试官:连这90道LeetCode算法题都不会也来面试?...
- 游戏开发之STL库的基础使用(string、vector、list、map、unordered_map)(C++基础)
- 一份来自滴滴运维工程师的监控系统建设心得
- 红旗服务器安装Tuxedo中间件
- python获取本机ip地址_python3 获取本机ip地址
- python自动化弹框_如何使用python自动化处理弹出窗口
- Aurix 多核链接文件 lsl --- 下篇
- html 名人名言源代码,基于JQuery及AJAX实现名人名言随机生成器_咋地 _前端开发者...
- MM模块物料-供应商-PO-表
- 椭圆形印章核心算法浅析及使用GDI+绘制椭圆印章的方法
- mysql nb3 备份_通过Navicat进行Mysql数据库自动备份与还原
- utf8和utf8mb4的区别
- 公式截图快速转换为word公式
- Rules for posting key XX and acct XXXXX set incorrectly for XXXX field
热门文章
- “Win10 无法使用内置管理员账户打开(应用程序)“怎么办
- Linux常见英文翻译
- 机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据
- Nginx的配置与开发学习(五):配置属于自己的HTTPS证书
- 各款浏览器对PDF插件的支持
- Mysql(3):事务、锁及锁级别
- Java基础英语单词表
- keyshot渲染玻璃打光_keyshot打光技巧,教你如何制作汽车自由式布光效果
- npm 安装 局部webpack
- 计算机室内设计绘图,室内设计中手绘和电脑制图的比较