1.初始html
1 <!--DOCTYPE:告诉浏览器，我们要使用什么规范 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <!--head标签表示网页头部--> 5 <head> 6 <!--meta描述性标签，它用来描述我们网站的一些信息--> 7 <!--meta一般用来做SEO--> 8 <meta charset="UTF-8"> 9 <meta name="keywords" content="你一定可以的"> 10 <meta name="description" content="你不能放弃"> 11 <!--title:网页标题 --> 12 <title>第一个网页</title> 13 </head> 14 <!--body代表网页主体--> 15 <body> 16 hello,world! 17 </body> 18 </html>
2.html的基本标签
- 标题标签<h></h>
1 <h1>一级标签</h1> 2 <h2>二级标签</h2> 3 <h3>三级标签</h3> 4 <h4>四级标签</h4> 5 <h5>五级标签</h5> 6 <h6>六级标签</h6>
- 段落标签<p></p>
1 <p>两只老虎，两只老虎</p> 2 <p>跑得快，跑得快</p> 3 <p>一只没有耳朵</p> 4 <p>一只没有尾巴</p>
- 换行标签</br>
1 两只老虎，两只老虎<br/> 2 跑得快，跑得快<br/>
- 水平线标签<hr/>
- 字体样式标签
1 粗体： <strong>你可以的</strong> 2 斜体： <em>你可以的</em>
- 注释和特殊符号
1 注释的快捷键：ctrl + / 2 <!--特殊符号--> 3 空格：你 好 4 大于符号> > 5 小于符号< < 6 版权©:©
3.图像、超链接、网页布局
- 常见图片格式：JPG、GIF、PNG 、BMP位图
1 <!--img学习 2 src:图片地址，推荐使用相对地址（必填） 3 alt:图片名字，进行图片的错误提示（必填） 4 title"鼠标放在图片上显示的文字 5 width:宽 6 height：高 7 ../ 返回上一级目录 8 / 根目录 9 ./ 当前目录 10 --> 11 <img src="../resources/image/1.jpg" alt="错误提示" title="悬停文字" width="300" height="300">
- 超链接
1 <!--a标签 2 href:必填，表示要跳转到哪个页面 3 target:表示窗口在哪里打开 4 _blank:在新标签中打开 5 _self:在自己的网页中打开（默认） 6 --> 7 8 <a href="1.我的第一个网页.html" target="_blank">点击我跳转到我的第一个网页</a> 9 <a href="2.基本标签.html" target="_self">点击我跳转到我的第二个网页</a> 10 <a href="https://www.baidu.com">点击我跳转百度</a> 11 <br/> 12 <a href="1.我的第一个网页.html"> 13 <img src="../resources/image/1.jpg" alt="错误提示" title="悬停文字" width="300" height="300"> 14 </a>
- 锚链接
1 <!--锚链接 2 1.需要一个锚标记 3 2.跳转到标记 4 使用 # 5 --> 6 7 <a href="#top">回到顶部</a> 8 <!--使用name作为标记--> 9 <a name="top">顶部</a>
- 功能性链接
1 <!--功能性链接 2 邮件链接：mailto: 3 --> 4 5 <a href="mailto:2593585093@q.com">点击联系我</a>
4.列表、表格、媒体元素
-
列表：
-
块元素：无论内容多少，该元素独占一行（p、h）
-
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a,strong,em）
-
列表：使信息结构化和条理化，并以列表的样式显示出来。分为无序列表、有序列表、自定义列表
-
1 <!--有序列表--> 2 <ol> 3 <li>前端</li> 4 <li>后端</li> 5 <li>测试</li> 6 </ol> 7 <hr/> 8 <!--无序列表--> 9 应用范围：导航、侧边栏 10 11 <!--无序列表--> 12 <ul> 13 <li>前端</li> 14 <li>后端</li> 15 <li>测试</li> 16 <li>运维</li> 17 </ul> 18 <hr/> 19 20 <!--自定义列表 21 dl:标签 22 dt:列表名称 23 dd:列表内容 24 应用方案：公司底部 25 --> 26 <dl> 27 <dt>就业方向</dt> 28 <dd>前端</dd> 29 <dd>后端</dd> 30 <dd>测试</dd> 31 </dl>
-
表格：
-
单元格
-
行
-
列
-
跨行
-
跨列
-
1 <!--表格table 2 行：tr 3 列：td 4 --> 5 6 <table border="1px"> 7 <tr> 8 <!--colspan:跨列--> 9 <td colspan="3" align="center">学生成绩</td> 10 </tr> 11 <tr> 12 <!--rowspan:跨行--> 13 <td rowspan="2">狂神</td> 14 <td>语文</td> 15 <td>100</td> 16 </tr> 17 <tr> 18 <td>数学</td> 19 <td>99</td> 20 </tr> 21 <tr> 22 <td rowspan="2">秦疆</td> 23 <td>语文</td> 24 <td>99</td> 25 </tr> 26 <tr> 27 <td>数学</td> 28 <td>98</td> 29 </tr> 30 </table>
- 媒体元素
1 <!--音频和视频 2 src:资源路径 3 controls:控制条 4 autoplay:自动播放 5 -->
5.页面结构分析
-
header:标题头部区域的内容
-
footer:标记脚部区域的内容
-
section:web页面中的一块独立区域
-
article:独立的文章内容
-
aside:相关内容或应用
-
nav:导航类辅助内容
6.iframe内联框架
1 <iframe src="引用页面地址" name="框架标识名"</iframe> 2 3 <!--iframe内联框架 4 src:地址 5 width:宽度 6 height:高度 7 --> 8 9 <iframe src="" name="go" frameborder="0" width="1000" height="800"></iframe> 10 <a href="https://www.bilibili.com/" target="go"> 点击跳转</a>
7.表单及表单应用
表单元素格式：
-
type:指定元素类型，text（默认）,password,checkbox,radio,submit,reset,file,hidden,image,button
-
name:指定表单元素的名称
-
value:元素的初始值，type为radio时必须指定一个值
-
size：指定表单元素的初始长度，当type为text或password时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位。
-
maxlength:type为text或password时，输入最大的字符数
-
checked:type为radio或checkbox时，指定按钮是否是被选中
表单的应用：
隐藏hidden,只读readonly,禁用disabled
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录注册</title> 6 </head> 7 <body> 8 <h1>注册</h1> 9 <!--表单form 10 action:表单提交的位置,可以是网站,也可以是一个请求处理地址 11 method:post,get提交方式 12 get方式提交:可以在url中看到我们提交的信息,不安全但是高效 13 post方式提交:比较安全,可以传输大文件 14 --> 15 <form action="1.我的第一个网页.html" method="get"> 16 <!--文本输入框:input type="text" 17 value=" "默认初始值 18 maxlength="" 最长能写几个字符 19 size= "" 文本框的长度--> 20 <p>名字:<input type="text" name="username"></p> 21 <!--密码框:input type="password" --> 22 <p>密码:<input type="password" name="pwd"></p> 23 <!--单选框标签 24 input type="radio" 25 value="girl" 单选框的值 26 name:表示组,每个name一样 27 默认选择加checked 28 --> 29 <p>性别: 30 <input type="radio" value="girl" name="sex"/>女 31 <input type="radio" value="boy" name="sex"/>男 32 </p> 33 <!-- 多选框 34 input type="checkbox 35 默认选择加checked 36 --> 37 <p>爱好: 38 <input type="checkbox" value="run" name="go">跑 39 <input type="checkbox" value="jump" name="go" checked>跳 40 <input type="checkbox" value="hang" name="go">走 41 </p> 42 <!-- 按钮 43 input type="button" 普通按钮 44 input type="image" 图片按钮 45 input type="submit" 提交按钮 46 input type="reset" 重置 47 --> 48 <p>按钮: 49 <input type="button" name="btn1" value="点击领取"> 50 <!-- <input type="image" src="../resources/image/1.jpg">--> 51 </p> 52 <!-- 下拉框 53 --> 54 <p>下拉框: 55 <select name="列表名称" > 56 <option value="apple">苹果</option> 57 <option value="orange">橙子</option> 58 <option value="ban" selected>香蕉</option> 59 <option value="watermelon">西瓜</option> 60 </select> 61 </p> 62 <!-- 文本域: 63 cols="40" rows="10"--> 64 <p>反馈 65 <textarea name="textarea" id="" cols="40" rows="10">文本内容</textarea> 66 </p> 67 <!-- 文件域 68 input type="file" name="files" 69 --> 70 <p> 71 <input type="file" name="files"> 72 <input type="button" value="上传" name="upload"> 73 </p> 74 <!-- 邮箱验证 --> 75 <p>邮箱: 76 <input type="email" name="email"> 77 </p> 78 <!-- url --> 79 <p>url: 80 <input type="url" name="url"> 81 </p> 82 <!-- 数字 --> 83 <p>商品数量: 84 <input type="number" name="num" max="100" min="0" step="10"> 85 </p> 86 <!-- 滑块 --> 87 <p>音量: 88 <input type="range" name="voice" min="0"max="100" step="2"> 89 </p> 90 <!--搜素框 --> 91 <P>搜索 92 <input type="search" name="search"> 93 </P> 94 <input type="submit"> 95 <input type="reset"> 96 </form> 97 </body> 98 </html>>
8.表单初级验证
常用方式：
placeholder：提示信息
1 placeholder="请输入用户名" 可用在所有输入框中
required：非空判断
pattern：正则表达式
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
