网页基本标签
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
字体样式标签
-
注释和特殊符号
<!--DOCTYPE:告诉浏览器,使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页的头部--> <head> <!-- meta描述性标签,它用来描述网站的一些信息 --> <!-- meta一般用来做SEO--> <meta charset="UTF-8"> <meta name="keywords" content="666666666666666666"> <meta name="description" content="88888888888888888"> <!--title标签代表网页的标题--> <title>网页标题</title> </head> <!--body标签代表网页的主体--> <body> Hello,World! </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!--段落标签--> <p>后视镜里的世界</p> <p>越来越远的告别</p> <p>你转身向背</p> <p>侧脸还是很美</p> <p>我用眼光去追</p> <!--水平线标签--> <hr/> <!--换行标签--> 竟听见你的泪<br/> 在车窗外面徘徊<br/> 是我错失的机会<br/> 你站的方位<br/> 跟我中间隔着泪<br/> 街景一直在后退<br/> 你的崩溃在窗外零碎<br/> <!--粗体 斜体--> <h1>字体样式标签</h1> 粗体: <strong>i love you !</strong> 斜体: <em>i love you !</em> <br/> <!--特殊符号--> 空格:空 格 <br/> 大于:> <br/> 小于:< <br/> 版权符号:© <br/> </body> </html>
图像标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> <!--img学习 src:图片地址 相对地址,绝对地址 ../ --上一级目录 alt:图片名字 --> <img src="../resources/image/1.jpg" alt="测试图片" title="悬停文字" width="300" height="300"> <a href="4.链接标签.html#down">跳转</a> </body> </html>
链接标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <a id="top">顶部</a> <!--a标签 href:必填,表示要跳转到哪个页面 target:表示窗口在哪里打开 _blank:在新标签页中打开 _self:在自己的网页中打开 --> <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a> <a href="https://www.baidu.com" target="_self">点击我跳转到百度</a> <br/> <a href="1.我的第一个网页.html" target="_blank"> <img src="../resources/image/1.jpg" alt="测试图片" title="悬停文字" width="300" height="300"> </a> <!--锚链接--> <a href="#top">回到顶部</a> <a id="down">down</a> <!--功能性链接 邮件链接:mailto --> <a href="mailto:1957518874@qq.com">点击联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:1954994881:53" alt="你好" title="你好"/> </a> </body> </html>
行内元素和块元素
-
块元素:无论内容多少,该元素独占一行
-
行内元素::内容撑开宽度
列表
-
什么是列表
-
列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并且以列表的样式展示出来,以便浏览者能够更快捷的获得相应信息
-
-
列表的分类
-
无序列表
-
有序列表
-
定义列表
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表--> <ol> <li>JAVA</li> <li>PYTHON</li> <li>C</li> <li>C++</li> </ol> <hr/> <!--无序列表--> <ul> <li>JAVA</li> <li>PYTHON</li> <li>C</li> <li>C++</li> </ul> <!--自定义列表 dl:标签 dt:列表名称 dd:列表内容 --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>c</dd> <dd>c++</dd> <dt>位置</dt> <dd>成都</dd> <dd>自贡</dd> <dd>乐山</dd> <dd>西昌</dd> </dl> </body> </html>
表格
-
为什么使用表格
-
简单通用
-
结构稳定
-
-
基本结构
-
单元格
-
行
-
列
-
跨行
-
跨列
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格table 行 tr 列 td --> <table border="1px"> <tr> <!-- colspan:跨列 --> <td colspan="4">1-1</td> </tr> <tr> <!-- rowspan:跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr> </table> </body> </html>
媒体元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素</title> </head> <body> <!--音频和视频 src:资源路径 controls:控制条 autoplay:自动播放 --> <!--<video src="../resources/video/最伟大的作品.mp4" controls autoplay></video>--> <audio src="../resources/audio/越界.mp3" controls autoplay></audio> </body> </html>
页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关文章或应用(常用于侧边栏) |
nav | 导航类辅助应用 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> </head> <body> <header><h2>网页头部</h2></header> <section><h2>网页主体</h2></section> <footer><h2>网页脚部</h2></footer> </body> </html>
iframe内联框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <!--<iframe src="//player.bilibili.com/player.html?aid=80128837&bvid=BV1hJ41147EE&cid=137230470&page=1"--> <!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">--> <!--</iframe>--> <!--name:框架标识名--> <iframe src="" name="hello" width="1000px" height="800px"></iframe> <a href="1.我的第一个网页.html" target="hello">点击跳转</a> </body> </html>
表单语法
属性 | 说明 |
---|---|
type | 指定元素的类型。test、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值,type为radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否被选中 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可容易是一个请求处理地址 method:post,get提交方式 get方式:我们可以在url中看到所提交的信息,不安全但是高效 post方式:比较安全,可以提交大文件 --> <form action="1.我的第一个网页.html" method="post"> <!-- <input type="text">:文本输入框 value="初始值" maxlength="8" 最长能写几个字符 size="30" 文本框的长度 readonly:只读 required:非空 --> <p>名字:<input type="text" name="username" placeholder="请输入用户名" required></p> <!--<input type="password" name="password">:密码框--> <p>密码:<input type="password" name="password" hidden></p> <!--单选框标签 input type="radio" value:单选框的值 name:表示组 --> <p>性别: <input type="radio" value="boy" name="sex" checked disabled/>男 <input type="radio" value="girl" name="sex"/>女 </p> <!--多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="code" name="hobby" checked>敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">打篮球 </p> <!--按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交 input type="reset" 重置 --> <p>按钮: <input type="button" name="btn1" value="点击"> <!-- <input type="image" src="../resources/image/1.jpg">--> </p> <!--下拉框,列表框 --> <p>国家: <select name="列表名称"> <option value="选项的值" selected>中国</option> <option value="选项的值">俄罗斯</option> <option value="选项的值">美国</option> <option value="选项的值">英国</option> </select> </p> <!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!--文件域--> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p> <!-- 邮件验证--> <p>邮箱: <input type="email" name="email"> </p> <!-- URL--> <p>URL: <input type="url" name="url"> </p> <!-- 数字--> <p>数字: <input type="number" name="num" max="100" min="0" step="10"> </p> <!-- 滑块--> <p>滑块: <input type="range" name="voice" min="0" max="100" step="2"> </p> <!-- 搜索--> <p>搜索: <input type="search" name="search"> </p> <!-- 增强鼠标可用性--> <p> <label for="mark">点击</label> <input type="text" id="mark"> </p> <p> <input type="submit" value="提交"> <input type="reset"> </p> </form> </body> </html>