web前端 第二天总结
案例1:元素显示模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素的显示模式</title> </head> <body> <!--元素显示模式： 块元素：独占一行 div 宽、高、内外边距可以设置 行内元素：一行可以存在多个 span 宽、高、内外边距不可以设置 行内块元素：元素可以以行内形式排列，以块级形式展示 --> <div>我是一个盒子</div> <span>我是span</span> <ul> <li>我是li</li> </ul> </body> </html>
案例2:表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table> <!-- 表头 rows data--> <caption>学生信息</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td>王二</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>李四</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>赵六</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计:4人</td> </tr> </tfoot> </table> </body> </html>
<table>：表示表格标签；
<tr>：表示表格行标签；
<td>：表示表格列标签，意即表格的单元格，用来存放表格数据；
<th>：表示表头标签；
<caption>：表示表格标题；
<thead>：表示表格的页眉；
<tfoot>：表示表格的页脚；
<tbody>：表示表格的主体；
案例3:表格标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="10px" width="900px" height="400px" cellspacing="0"> <!-- 表头 rows data table：border（只控制最外围大小）、width、height(tbody 值是底线，只高不低)、cellspacing(单元格与单元格之间的距离) caption；通过css更改 thead、tr、tbody、tfoot:height\align（水平）\valign（垂直） --> <caption>学生信息</caption> <thead height="200px" align="center" valign="middle"> <tr height="400px" align="center" valign="center"> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <tbody height="600px" align="center" valign="middle"> <tr> <td>王二</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>李四</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>赵五</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> </tbody> <tfoot height="600px" align="center" valign="middle"> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计:4人</td> </tr> </tfoot> </table> </body> </html>
案例4:单元格合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- td 跨行：rowspan 跨列：colspan --> <table border="1px" width="800px" cellspacing="0"> <!-- 表头 rows data--> <caption>学生信息</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td rowspan="2">王二</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> <tr> <td>李四</td> <td>男</td> <td>18</td> <td>汉</td> <td>党员</td> </tr> </tbody> <tfoot> <tr align="right"> <td colspan="5">共计:3人</td> </tr> </tfoot> </table> </body> </html>
案例5:细节标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- details：详情标签 配合summary使用 --> <details> <summary>有志青年</summary> 我们这里都是优秀的有志青年 </details> </body> </html>
案例6:tabindex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- tabindex：让本不能tab遍历获取焦点的元素可以获取 可以为负数，0，正数--> <input type="text"> <a href="#">去百度</a> <div>我是第一个盒子</div> <div tabindex="0">我是第2个盒子</div> <div>我是第3个盒子</div> <div>我是第4个盒子</div> </body> </html>
当tabindex值为负数时:元素无法用tab键获取焦点
当tabindex值为正数时:使用tab键时第一个聚焦到该元素
当tabindex值为0时:非聚焦元素（比如div、span等）也能通过tab键按顺序获得焦点
案例7:表单的基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单的基本结构</title> </head> <body> <!-- 表单：网页交互区，收集用户信息 action:将数据交给谁处理 name：必有属性 method：提交方式 ajax --> <form action="https://www.baidu.com/s"> <input type="text" name="wd"> <button>提交</button> </form> </body> </html>
案例8:常见的表单元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常见的表单元素</title> </head> <body> <form action="#"> <!-- 文本框 maxlength:最大长度 placeholder:默认提示 --> 用户名：<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名："><br /> <!-- 密码 --> 密码：<input type="password" name="pwd"><br /> <!-- 单选框 value:表单元素的值--> <input type="radio" name="gender" value="nan">男 <input type="radio" name="gender" value="nv">女<br /> <!-- 多选框 label标签:对元素的说明--> <input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label> <label><input type="checkbox" name="food">吃臭豆腐</label> <!-- checked默认选中 --> <input type="checkbox" name="food" checked>吃肥肉 <!-- 隐藏域 --> <input type="hidden" name="hid" value="南德斯才能使调查"> <!-- 确认按钮 --> <!-- <button type="submit"></button> --> <!--重置按钮 --> <input type="reset"> <!-- 普通按钮 --> <input type="button"> <!-- 文本域 --> <textarea cols="20" rows="10" maxlength="200 "> </textarea><br /> <!-- 下拉菜单 --> <select name="jiguan" id=""> <option value="南京">南京</option> <!-- selected下拉菜单的默认选中 --> <option value="成都" selected>成都</option> <option value="西安">西安</option> </select> <input type="submit"> </form> </body> </html>
案例9:html的全局属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .pink { color: pink; } </style> </head> <body> <!-- id身份证号，在一个页面中只能出现一次 --> <div id="one">1111</div> <!-- class 一类 可以出现多个--> <div class="pink" style="font-size: 40px;">我是哟个盒子</div> <div class="pink">我是哟个盒子</div> <div class="pink">我是哟个盒子</div> <div class="pink">我是哟个盒子</div> <!-- accesskey 设置快捷键 --> <form action="#"> <input type="text" name="a" id=""> <button accesskey="s">提交</button> </form> <!-- style --> <!-- data-* 自定义属性 --> </body> </html>
alt+快捷键 可生效
案例10:html5语义标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="head"></div> <div class="body"> <div class="nav"></div> </div> <div class="footer"></div> </body> </html>
案例11:html5表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="#"> <input type="number"> <input type="color"> <input type="time"> <button>tijaio</button> </form> </body> </html>
案例12:css体验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css </title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <div>我是盒子1</div> </body> </html>
案例13:css的三种引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 外部样式 推荐！！！！！ --> <link rel="stylesheet" href="./14-样式.css"> <!-- 内部样式 --> <style> /* css基本结构 选择器{ 属性名： 属性值； 属性名： 属性值； } */ .box1 { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <div class="box1">我是盒子</div> <!-- 行内样式：不推荐 --> <div style="width: 300px; height: 300px; background-color: green;"></div> <div class="box2">我是box2</div> </body> </html>
案例14:样式.css
.box2 { width: 300px; height: 300px; background-color: blue; }
案例15:基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 选中所有的p标签*/ p { color: aqua; } /* id选择器 */ #box1 { color: pink; } /* 类选择器 */ .box2 { color: blueviolet; } /* 通配符选择器 *{ } */ </style> </head> <body> <p>我是一段文字</p> <div id="box1">我是盒子一</div> <div class="box2">我是盒子2</div> <div class="box2">我是盒子3</div> <p>我是一段文字</p> </body> </html>
案例16:包含选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 子代选择器 选中亲生儿子*/ .a>li { background-color: pink; } /* 后代选择器 找到后代所有要找的元素*/ .a li { color: blueviolet; } </style> </head> <body> <ul class="a"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <ul> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </ul> </body> </html>
案件17:字体的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体</title> <style> div { cursor: pointer; /* 字体大小 */ /* font-size: 40px; */ /* 字体粗细 */ /* font-weight: bold; */ /* font-weight: 900; */ /* 100-900 400===normal 800===bold 100-900越来越粗 font-weight: 400;*/ /* 字体是否倾斜 */ /* font-style: italic/normal; */ /* font-family: "微软雅黑"; */ /* italic 900可省略，字体大小，font-family必须存在 */ font: italic 900 70px "微软雅黑" } </style> </head> <body> <div> 我是图图小淘气，面对世界很好奇 </div> </body> </html>
CSS cursor:pointer 属性表示鼠标指针在元素上时会变成手型，表示该元素可以被点击或选择。
案例18:复合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* div { color: pink; } p { color: pink; } span { color: pink; } */ div, p, span { color: red; } </style> </head> <body> <div>wisjiajsskmx</div> <p>cndklcdsmc</p> <span>jnckdsmc</span> <ul> <li>吃饱穿暖CNBCCDC</li> </ul> </body> </html>
案例19:属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { background-color: pink; } input[type="password"] { background-color: aquamarine; } div[id] { width: 300px; height: 300px; background-color: blue; } /* type^="te"以te开头 */ input[type^="te"] { background-color: red; } input[type$="l"] { background-color: green; } /* type*="e" type值里边包含e */ input[type*="e"] { background-color: chartreuse; } </style> </head> <body> <input type="text"><br /> <input type="password"><br /> <input type="search"><br /> <input type="url"><br /> <input type="number"><br /> <div id="aquamarine">1</div> <div>2</div> </body> </html>
案例20:首行缩进2格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { /* text-indent: 32px; */ font-size: 20px; text-indent: 2em; } </style> </head> <body> <p> 戕害美的行径，在人类社会中从未消失过，只是从未像今天这样严峻： 一方面，君主时代，艺术和审美，被君王和贵族垄断；今天虽已进入大众民主时代，但各种各样的“政治正确”导致“温和的暴政”，这是最令人绝望的审美专制主义。 另一方面“网红审美”、“娘炮审美”、“土味审美”等恶俗的审美，从未像今天这般盛行；“美被恶制”，从未像今天这样严峻。艺术之美，似乎已然夕阳日落。 但“美的丧失”只不过是一个结果，更重要的是回归她诞生的源泉，因为美的发展，从来不是1+2+3的线性叠加，由0到1的创造新事物，才是美的艺术。越古老的美，反而愈能历久弥新。因此，当下尤有必要回溯美的源泉——欧洲文艺复兴，重新发现艺术大师们创造的艺术之美。 因此，有人说，未来只有两种纸质书不会消亡，第一种是全人类共同的经典，例如《圣经》等。另外一种，就是《欧洲文艺复兴大师》这样的艺术经典。 ◎ 文艺复兴，不仅是美的胜利，更是反抗中世纪黑暗统治的认知觉醒 说到文艺复兴，许多读者自然会想到“文艺复兴三杰”——达芬奇、拉斐尔、米开朗基罗。 然而，三杰的成就虽然突出，却不能代表整个文艺复兴。除了复兴三杰，还有两位大师，对文艺复兴同样重要，却少为人知，一位是博斯，一位是卡拉瓦乔。 《欧洲文艺复兴大师》推出五位艺术大师，时间上，博斯是文艺复兴早期代表，三杰代表的是文艺复兴盛期，卡拉瓦乔则是晚期巴洛克艺术的奠基人。这样的五个人，能够更好反映欧洲文艺复兴的全貌。 </p> </body> </html>
浙公网安备 33010602011771号