web day2 作业

小窦。

已于 2022-11-03 16:01:50 修改

阅读量577

点赞数 1

文章标签：前端 html css

于 2021-01-08 01:33:10 首次发布

本文链接：https://blog.csdn.net/weixin_51178129/article/details/112342820

版权

有哪些端？

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&lt;stdio.h&gt;<br>
            void main(){<br>
            &nbsp;&nbsp;&nbsp;&nbsp;printf("HelloWorld!");<br>
            }
        </code>
        <pre>
            #include&lt;stdio.h&gt;
            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;">更多&gt;&gt;</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号放在右边。
称量结果有３种可能：１右重，２平衡，３左重。
下面分别叙述每种可能下的第二步和第三步称量。

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.

小窦。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web day2 作业

Web前端手机也行电脑也行-浏览器移动端在手机PC客户端在电脑后端/后台前端主要负责两个事：负责用户数据的输入负责向用户展示数据前端主要的知识点HTMLCSSJavaScript第一部分 HTML5HTML：超文本标记语言将数据进行基础的排版根据标签的定义进行语义或排版1.1 HTML5常见元素与属性1.1.1 基本元素html：HTML文档的根标签head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里body：页面的
复制链接

扫一扫