<!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> <!-- src=""：内嵌的那个页面 scrolling="no"：是否需要滚动条。默认值是true。 name="mainFrame"：窗口名称。公有属性。 --> <a href="https://www.360.com" target="myframe">360</a><br> <a href="https://www.qq.com" target="myframe">qq</a><br> <a href="https://www.sogou.com" target="myframe">sogou</a><br> <iframe src="https://www.baidu.com" width="400" height="400" name="myframe"></iframe> <br> <pre> </pre> <form> <!-- max(min)规定了输入字段的最大(小)值,width规定了inp字段的宽度,required是必输项 --> <input type="text" value="默认内容" required> <input type="text" value="默认内容" disabled><br /> <!-- 单选按钮天生不互斥,当选当且仅当name一致时变成单选选项 <input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。checked表示默认选中 --> <input type="radio" id="1" name="gneder" value="Male" checked>男 <input type="radio" id="0" name="gneder" value="Female">女<br /> <!-- label标签扩大了单选按钮的可选域 让label标签的 for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了。--> <input type="radio" name="sex" id="nan" /> <label for="nan"><img src="Photo.webp" width="10%"></a></label> <input type="radio" name="sex" id="nv" /> <label for="nv"><img src="Photo.webp" width="10%"></a></label><br /> <!-- checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。 --> <input type="checkbox" name="hobby" value="eat" checked>吃饭 <input type="checkbox" name="hobby" value="sleep">睡觉 <input type="checkbox" name="hobby" value="makelove">做爱做的事情<br /> <!-- 复选框也有label：（任何表单元素都有label） --> <input type="checkbox" id="kk" /> <label for="kk">10天内免登陆</label> <!-- 这里的size的单位是字符数 --> Password:<input type="password" value="pwd" size="20"><br /> <input type="button" name="bt" value="按钮"> <input type="submit" value="现在提交!!"> <input type="file"> </form> <pre> </pre> <form> <!-- 有四种按钮:button,submit,reset,img --> <input type="button" value="普通按钮"><br> <input type="submit" value="提交按钮"><br> <input type="reset" value="重置按钮"><br> <input type="image" value="图片按钮1"><br> <input type="image" src="Photo.webp" width="800" value="图片按钮2"><br> <input type="file" value="文件选择框"> </form> <pre> </pre> <!-- select标签和ul、ol、dl一样，都是组标签。 --> <form> <select> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option selected="">研究生</option> </select> <br><br><br> <!-- size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。 --> <select size="3"> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option>研究生</option> <option>博士生</option> </select> <br><br><br> <!-- multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。 也就是说，既可以写成 multiple=""，也可以写成multiple="multiple"。 --> <select multiple=""> <option>小学</option> <option>初中</option> <!-- selected： 预选中。没有属性值。 --> <option selected="">高中</option> <option selected="">大学</option> <option>研究生</option> </select> <br><br><br> </form> <form> <!-- rows="4"：指定文本区域的行数。 cols="20"：指定文本区域的列数。 readonly：只读。 --> <!-- <textarea>标签：多行文本输入框 --> <textarea autofocus name="多行文本输入" id="ta" cols="30" rows="10" placeholder="提示文案"> a b c </textarea> </form> <pre> </pre> <!-- 表单的语义化 --> <form> <fieldset> <legend align="left">账号信息</legend> 姓名：<input value="呵呵">逗比<br> 密码：<input type="password" value="pwd" size="50"><br> </fieldset> <fieldset> <legend>其他信息</legend> 性别：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female">女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </fieldset> </form> </body> <body> <!-- <object>标签：播放多媒体文件（音频、视频等） --> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202"> <param name="movie" value="images/banner.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed> </object> </body> </html> <!-- input标签name与value的区别 id是唯一标识符，不允许有重复值(类似数据表的主键)可以通过它的值来获得对应的html标签对象。(如果在同一页面代码中，出现重复的id，会导致不可预料的错误) name：单独地在一个网页里面，一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name 属性，否则，这个值是没有办法传到服务器上面得到保存的。 name是控件的名称 ，value是控件的值， id是控件的身份标志。 三者的区别： name：控件名称 value：用户输入(或选择)的值 id：用于网页脚本编号(javascript) -->
<!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> <!-- <marquee>：滚动字幕标签 --> <!-- direction="right"：移动的目标方向。 --> <!-- behavior="slide"：行为方式。 属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动） --> <!-- scrollamount="30"：移动的速度 --> <!-- loop="3": 循环多少圈。负值表示无限循环 --> <!-- scrolldelay="1000"：移动一次休息多长时间。单位是毫秒。 --> <marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">我来了</marquee> </body> <body> <!-- 废弃标签汇总 --> <font>字体</font> <frame></frame> <b>加粗</b> <u>下划线</u> <i>倾斜</i> <s>删除线</s> <del>删除线</del> <strong>强调,加粗</strong> <hr /> <br /> <!-- 其他标签 --> <pre>原格式输出</pre> <em>强调,斜体</em> <ins>下划线</ins> <code>代码</code> <abbr title="People's Republic of China">PRC</abbr> <!-- 标准的div+css页面，只会用到种类很少的标签： --> <!-- div p h1 span a img ul ol dl input --> </body> </html> <!-- 前端代码规范 标签名小写 属性名小写,属性值双引号括住 使用四个空格作为一级缩进 class必须单词全字母小写,单词之间以-分隔 id使用驼峰命名法(第二个单词开始首字母大写)-->
