网页基本标签
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
字体样式标签
-
注释和特殊符号
<!--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>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
