发布于2022年10月15日2年前 准备阶段： 前端软件：visual studio code 笔记软件：Typora 安装插件： 前端的框架代码 <html> <head> <title>标题</title> </head> <body> 主要内容 </body> </html> 说明： <html></html>可以比喻成一个人 <head></head>是人的头部 <title><title>是人的眼睛，里面主要写页面的头部标题，如下图所示位置 <body></body>是人的身体，人最重要的部位，html5的主要代码就是写在这里面，也是页面上显示的内容。 一般代码格式都是：<代码>书写内容</代码> 标签： 标题标签 <h1>一级标题标签</h1> <h2>二级标题标签</h2> 效果图： 介绍常用标签(普通标签) <p>今天天气怎么样？</p> 文本加粗标签 <b>今天天气怎么样？</b> 强调文字标签(加粗) <strong>今天天气怎么样？</strong> 斜体标签 <i>今天天气怎么样？</i> 一般强调标签(斜体) <em>今天天气怎么样？</em> 下划线标签 <u>今天天气怎么样？</u> 超链接标签 <a href="跳转的页面名称">超链接</a> href后面的引号中可以放： 1、网址，比如百度连接 <a href="http://www.baidu.com">百度</a> 2、自己制作的页面名称 <a href="HelloWorld.html">跳转</a> 3、某个标签的id名称(锚点的使用，点击可以直接跳转锚点内容所在的位置) <a href="demo">跳转锚点</a> 换行标签 </br> 特殊符号： 空格： (空半格)  (空一格) (不断行空格) <(小于号) >(大于号) &(符号&) "(引号) ®(已注册) ©(版权) ™(版权) 图片 <img src="图片存放路径" /> 移动图片位置： 1、style="margin: 15px 20px 25px 30px;"四个数字分别代表上下左右的距离 <img src="图片存放路径" style="margin: 15px 20px 25px 30px;"/> 2、style="padding: 15px 20px 25px 30px;" 3、style=" position:absolute; top:200px; left: 900px;" 音频标签 controls:控制按钮 loop:循环播放 autoplay:自动播放 src后面的引号里是音乐存放的地址路径 <audio src="music/aa.mp3" controls loop autoplay alt=""> 视频标签 <video src="视频存放路径" controls height="400px" width="400px"></video> height：高度。width：宽度。 排版类型标签： 1、ol有序列表 type:规定列表的项目符号的类型： A a 1 I <ol type="I"> <li>111</li> <li>2222</li> <li>333</li> </ol> 2、ul无序列表 list-style:none:去掉圆点 circle圆圈 disc实心圆 square正方形 <ul style="list-style:none"> <li type="circle">111</li> <li type="disc">222</li> <li type="square">333</li> </ul> 表格 1、格式 <table> <thead> <tr> <th>内容</th> </tr> </thead> <tbody> <tr> <td>内容</td> </tr> </tbody> </table> table：表格标签 thead：表头单元格（头，可不要） th：表头中的单元格 tbody：表格的主体（身体，主要部分） tr：表格中的行（纵行） td：标准单元格（横行） 主要格式(其余可要可不要) <table> <tr> <td>内容</td> </tr> </table> 2、举例 两行三列的表格 <table> <tr> 第一行 <td>1</td> 第一列 <td>2</td> 第二列 <td>3</td> 第三列 </tr> <tr> 第二行 <td>4</td> 第一列 <td>5</td> 第二列 <td>6</td> 第三列 </tr> </table> 3、表格中简单属性 align：水平位置 valign：垂直位置(top、middle、bottom) colspan：横向合并单元格 rowspan：纵向合并单元格 cellpadding：单元格之间的距离 cellspacing：单元格边框与内容之间的距离 border：设置边框(boeder="") border-top：设置上边框 dashed：虚线 bycolor：背景颜色 background：背景图片(background="img/bb.jpg") <table cellpadding="5px" cellspacing="5px"> <thead> <tr> <th>111</th> <th>222</th> <th>333</th> </tr> </thead> <tbody> <tr> <td colspan="2">444</td> <td rowspan="2">666</td> </tr> <tr> <td>777</td> <td>888</td> </tr> </tbody> </table> 练习题： 用代码画出下图样式的表格 表单 type可以改变表单的样式 文本框 <input type="text" value="aaaa" /> value：初始显示内容 效果图： 密码框(输入的内容会被加密) <input type="password"/> 数字框(只能输入数字) <input type="number"/> 最右边的小三角可以调数字的大小 日历框(根据你电脑上的日期显示日历) <input type="datetime-local"/> 颜色框 <input type="color"/> 单选框 <input type="radio" checked />男 <input type="radio" />女 checked：初始就勾选上 复选框 选择 <input type="checkbox" checked/>苹果 <input type="checkbox" />香蕉 <input type="checkbox" />西瓜 <input type="checkbox" />桃子 滑块(可滑动) <input type="range" /> 选择框 <select> <option">城市</option> <option>武汉</option> <option>成都</option> <option>重庆</option> </select> 搜素框 <input type="search"/> 文本框(带滑轮) <textarea name="" id="" cols="30" rows="10"></textarea> 文件框 <input type="file" name="image" id=""/> 既要数据可以绑定 同时这个框不被人看到 <input type="hidden" /> 按钮(无功能，点击无效) value：显示文字 disabled：禁用按钮 <input type="button" value="添加" disabled> <button type="button">删除</button> 按钮(有功能) <input type="submit" value="跳转"/> 重置按钮 <input type="reset" value="重置"/> <fieldset> <legend>个人资料</legend> <!-- 搜素框 --> <input type="search"> </fieldset> 页面框架 可以把两个页面放在同一个页面中 <iframe src="demo02.html" frameborder="0" style="width: 500px;height: 500px;"></iframe> <iframe src="demo03.html" frameborder="0" style="width: 500px;height: 500px;"></iframe> 常用快捷键 ctrl+S 保存 ctrl+C 复制 ctrl+V 粘贴 ctrl+X 剪切 ctrl+A 全选 ctrl+Z 后撤 Alt+B 运行 最后注意事项 保持良好的习惯： 1、html5中的代码大部分都是成对出现的，在写代码的时候最好成对的写出，以防漏写。 比如<a></a>，以<a>开头，必须以</a>结尾，两者缺一不可。 2、在书写代码的时候最好注意代码排版，确保代码的整洁，以防排版不好容易混乱。 3、代码写完后必须保存才能不会丢失，保存快捷键ctrl+S，最好写一行代码就保存一次，以防电脑突然关机，以至于代码没有保存而白忙活了好久。
创建帐户或登录后发表意见