搜索到
146
篇与
的结果
-
1、css语法规则 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css语法规则</title> <!-- 一、HTML和CSS结合的三种方式 1.行内样式表（不建议使用） 将样式直接写到HTML标签的style属性中 缺点：不易于维护、不可复用、可移植开发 2.内部样式表 在HTML中的head标签中创建style标签 在style标签中利用选择器，去为选中的标签添加样式 语法格式： 选择器{ 属性1：属性值1； 属性2：属性值2； } 选择器：用于选择需要添加样式的标签 {}：称为声明块，需要为元素添加的样式，都写在声明块 样式：样式以键成对的形式呈现，样式名对应着样式值。名和值之间以英文的：连接 以英文的分号；结尾。键直对可以有多个，建议每行写一对。 缺点：仅对当前文档使用，可移植性差 3.外部样式表(推荐使用) 在外部创建一个.css结尾的文件，在该文件中编写css样式表 语法格式： 选择器{ 属性1：属性值1； 属性2：属性值2； } 在需要引入样式的页面的head标签中，利用link标签引入外部样式表 优点： 易于维护 可移植性强 提高复用性 可以利用浏览器的缓存机制，加快网页的加载速度，提高用户体验 "高内聚，低耦合" --> <!--内部样式表--> <!-- /* css注释 注意：在style标签中属于css，而css和HTML的注释不同 */ p{ color:orange; font-size: 30px; } h1{ color:blue; font-size: 80px; } --> <!--外部样式表--> <link rel="stylesheet" href="./hello.css"> </head> <body> <h1>天天好心情</h1> <p>今天天气不错</p> <p>挺风和日丽的</p> <!--行内样式表--> <!-- <h1 style="color:red;font-size: 30px;">天天好心情</h1> <p style="color:red;font-size: 30px;">今天天气不错</p> <p style="color:red;font-size: 30px;">挺风和日丽的</p> --> </body> </html> -
15、表单其他控件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单其他控件</title> </head> <body> <!-- 表单的其他属性 autocomplete="off"关闭自动补全 readonly="readonly"将表单设置为只读，但是数据会提交 disabled="disabled"将表单设置为禁用，数据不会提交 --> <form action="pages/2.html"> 用户名： <input type="text"name="username"value="admin"autocomplete="off"autofocus="autofocus"> <br><br> 颜色： <input type="color"name="color"> <br><br> 邮箱： <input type="email"name="email"> <br><br> 文件上传： <input type="file"> <br><br> <!--隐藏域--> <input type="hidden"name="token"> <input type="submit"> </form> </body> </html>
-
14、表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <!-- 现实生活中的表单：学员 -> 学员信息表 -> 学校 存款人 -> 银行存款单 -> 银行 一、表单：在网页中，用于搜集用户信息，将用户信息提交给后台服务器 一个表单有三个部分组成：表单域、表单控件、提示信息 1.表单域：包含所有要提交表单控件的区域，将该区域的内容交给提交给后台服务器 使用form标签创建表单域 action：用于指定提交到后台服务器地址 method:用于选择请求方式 2.表格控件：也叫表单元素，用于搜集信息的控件 input：关于输入信息的控件 type:属性用于指定输入控件的类型 name：用于设置控件的名字（后台可以通过名字获取对应控件提交的值 value：属性设置控件的值 check属性：设置默认选中状态，单选框和复选框使用checked="checked" select下拉列表 select标签包含一个个的option列表项 selected="selected"设置默认选中状态 cols：行 rows：列 textarea文本域 3.提示信息： label标签：用于选中表单中的提示文字 for属性对应某表单项的id值 --> <!--表单域--> <form action="pages/2.html"method="post"> <!--文本框--> <label for="us">用户名：</label> <input type="text"id="us"name="username"value="请输入用户名"> <br><br> <!--密码框--> 密码：<input type="password"name="password"> <br><br> <!--单选框--> <!--注意：同组单选按钮的name属性值必须相同，单选按钮功能才可以生效--> 性别： <input type="radio"id="ge"name="ren"value="boy"checked="checked"> <label for="ge">男</label> <input type="radio"id="gg"name="ren"value="girl"> <label for="gg">女</label> <br><br> <!--复选框--> 你喜欢的老师： <input type="checkbox"name="teather"value="lls">秃子 <input type="checkbox"name="teather"value="tls">秃子2 <input type="checkbox"name="teather"value="cls">秃子3 <input type="checkbox"name="teather"value="xls"checked="checked">无 <br><br> <!--下拉列表--> <!--注意：name属性为select标签指定，value属性为option指定--> 籍贯： <select name="city"> <optgroup label="北方"> <option value="xinjiang">新疆</option> </optgroup> <optgroup label="有钱人的地方"> <option value="beijing"selected="selected">北京</option> <option value="shanghai">上海</option> </optgroup> <br><br> </select> <br><br> <!--文本域--> <!--注意：文本域没有value属性，若需要默认值写到标签之间--> 自我介绍： <textarea name="self"cols="30"rows="10">请输入2万字的自我介绍</textarea> <br><br> <!--提交按钮--> <input type="submit"value="注册"> <!--重置按钮--> <input type="reset"> <!--普通按钮--> <input type="button"value="普通按钮"> <br><br> <!--创建按钮的方式二--> <!--相较于input创建按钮方式，略微灵活一些，因为是双标签--> <button type="submit">注册</button> <button type="reset">重置</button> <button type="button">普通按钮</button> </form> </body> </html>
-
13、表格标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格标签</title> </head> <body> <!-- 一、表格：以格式化形式展示数据的一种手段，由行和列组成 1.使用table标签创建表格 2.tr创建表格的行 3.td用户创建表格的列 4.th标签用于创建表头列，默认加粗并且居中 二、表格的属性 border：用于设置表格的边框 align：设置表格相对于周围元素的对齐方式 width、height：设置表格宽度和高度 cellpadding:设置单元格边沿与内容之间的空白。默认1px cellspacing：设置每个单元格之间的空白。默认2px 三、合并单元格 rowspan：合并行 colspan；合并列 四、表格和结构标签 thead：表格的头部 tbody：表格的主体 tfoot：表格的底部 注意：table的子标签并不是tr，默认是tbody thead中的内容永远在表格的最上方 tfoot内容永远在表格的最下方 --> <table border="1px" align="center" width="200px" height="200px" cellpaddind="5px" cellspacing="0px"> <thead> <tr> <th>姓名</th> <th>班级</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <td>B1</td> <td>B2</td> <td rowspan="2">B3</td> </tr> <tr> <td colspan="2">C1</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>合计</td> <td>1999</td> </tr> </tfoot> </table> </body> </html>
-
12、音视频标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音视频标签</title> </head> <body> <!-- 一、音视频标签：向页面中引入音频或视频。二者使用方式一样 1.使用audio标签向页面引入一个音频 2.使用video标签向页面引入一个视频 3.二者常用属性： controls：是否允许用户控制播放，不加则不允许 autoplay:控制是否自动播放 loop：控制是否循环播放 注意： HTML5中若属性名和属性值相同时，="属性值"可以省略不写 --> <!--添加音频的方式一：--> <audio src="./photo/So Far Away.MP3"controls="controls"autoplay loop></audio> <!--添加音频的方式二:可以嵌套soure标签引入音频 优点：可以处理浏览器的兼容性问题 --> <audio controls> 对不起,无法播放视频,请升级浏览器！ <source src="photo/So Far Away.MP3"> </audio> <video controls> 对不起,无法播放视频,请升级浏览器！ <source src="photo/2.mp4"> </video> </body> </html>
