- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>demo01</title>
- <style>
- #nav{
- position: fixed;
- top: 0;
- right: 10px;
- width: 50px;
- height: 120px;
- background-color: orange;
- }
- </style>
- </head>
- <body>
- <!-- 快捷键 -->
- <!--1:ctrl +/ ctrl+shift+/ 快速加注释 -->
- <!--2:tab 代码的自动补全 -->
<!--3:ctrl +d 快速删除 -->
- <!--4:alt + 上下方向键 定位上下行 -->
- <!--5:ctrl+alt + 下方向键 快速复制代码 -->
<!--6:h2*5 tab h2 复制五遍 -->
- <!--
- 块级标签: 独占一行 <p > 烟台大学 </p>
- 行级标签: 占用的空间和内容等宽 <span > 烟台大学, 烟台大学 </span>
- -->
- <span id="top"></span>
- <p > 清华大学 </p>
- <p > 清华大学 </p>
- <span > 清华大学, 清华大学 </span>
- <span > 清华大学, 清华大学 </span>
<!-- 标题标签 -->
- <h1>1</h1>
- <h2>2</h2>
- <h3>3</h3>
- <h4>4</h4>
- <h5>5</h5>
- <h6>6</h6>
- <!-- 水平线标签 -->
- <hr color="green" size="10" align="center" width="50%"/>
- <!-- 段落标签 -->
- <p>
- asasa sas
- <br/>
- asasa
- <br/>
- </p>
- <!-- 预格式 -->
- <pre>
清华大学
计算机学院
计科
- </pre>
- <!-- 无序列表 -->
- <ul>
- <li > 北京大学 </li>
- <li > 清华大学 </li>
- </ul>
- <!-- 有序列表 有序列表与无序列表之间可以相互嵌套 -->
- <ol>
- <li > 北京大学 </li>
- <li > 清华大学 </li>
- </ol>
- <!-- 分区标签 -->
- <p style="height: 100px;background: red">
- </p>
- <p style="height: 100px;background: green">
- </p>
- <!---->
<!--
span 文本 img 图片 em 强调
strong 强调 q 短引用 a 超链接 i 倾斜 b 加粗
-->
- <p > 商品价格:<span style="color: red;font-size: 50px">10</span > 元起 </p>
- <img src="../img/log.jpg" alt="图片加载成功"/>
- <br/>
- <img src="../img/log1.jpg" alt="图片加载失败"/>
- <br/>
- <!--
- 1: 超链接
- 外部资源的链接
- 内部资源的链接
- 2: 锚点链接
- -->
- <a href="https://www.baidu.com"> 我要跳转到百度 (默认的 target 的属性值是_self)</a>
- <br/>
- <a href="https://www.baidu.com"target="_blank"> 我要跳转到百度 </a>
- <br/>
- <a href="../index.html"> 回到首页 </a>
- <br/>
- <p style="height: 2000px;background-color: green";></p>
- <a href="#top"> 返回顶部 </a>
- <h1 id="part1"> 第一章 </h1>
- <p style="background-color: red;height: 300px"></p>
- <h1 id="part2"> 第二章 </h1>
- <p style="background-color: green;height: 300px"></p>
- <h1 id="part3"> 第三章 </h1>
- <p style="background-color: black;height: 300px"></p>
- <h1 id="part4"> 第四章 </h1>
- <p style="background-color: orange;height: 300px"></p>
- <p id="nav">
- <a href="#part1"> 第一章 </a>
- <a href="#part2"> 第二章 </a>
- <a href="#part3"> 第三章 </a>
- <a href="#part4"> 第四章 </a>
- </p>
- <!-- 强调标签 -->
- <em > 版权所有, 侵权必究!(em 的作用是强调, 比 i 着重渲染)</em><br/>
- <i > 版权所有, 侵权必究!</i>
- <strong > 版权所有, 侵权必究!(strong 的作用是强调, 比 b 着重渲染)</strong><br/>
- <b > 版权所有, 侵权必究!</b>
- <br/>
- <!-- 短引用标签 -->
- <q > 谦虚使人进步 (自动加引号)</q>
<!-- 长引用标签 -->
- <br/>
- <blockquote cite="https://www.xiaomi.com"> 站在风口上........(前面有缩进)</blockquote>
- <br/>
- <!-- 变小标签 (比相邻的字体小一号)-->
- <p > 版权所有,<small > 侵权 </small > 必究.</p>
- <br/>
- <!--
- ©
- <table>
- 属性: border - 表格边框
- width: 表格的宽度
- align: 表格的对齐方式
- bgcolor: 背景颜色
- <tr > 代表行
- <td > 代表单元格
- 属性: colspan 列合并
- rowspan 行合并
- <td rowspan="2">
- <td colspan="2">
- <caption > 表格的标题
- 表格的作用: 简单的实现一个表格样式; 进行布局
- -->
- <table border="1" width="50%" align="center">
- <caption > 成绩表 </caption>
- <tr align="center">
- <td></td>
- <td></td>
- <th></th>
- </tr>
- <tr>
- <td></td>
- <td></td>
- <th></th>
- </tr>
- </table>
- <p>
- <table width="100%" bgcolor="green">
- <tr align="right">
- <td>
- <input type="text"/>
- <input type="button" value="搜索"/>
- </td>
- </tr>
- </table>
- </p>
- <!--
- 表单标签: form 标签
- 属性: name - 表单名称
- action - 提交的路径地址
- method - 提交方式 没写是默认 get 提交,
- get 和 post 提交的区别:
- get 提交是将数据加在地址栏的后边, 以? 开始 & 连接, 而 post 提交将数据封装在请求体中
- get 提交相对不安全, post 提交相对安全
- get 提交有大小限制, 限制浏览器不同而不同; post 不限制大小
- input 标签
- 属性: type 的值不同会显示不同功能表单项
- text 普通的文本输入框
- value 是他的默认值
- password 密码输入框, 显示掩码
- radio 单选按钮 注意: 如果想让一组单选按钮互斥, 必须 name 属性相同
- checked: 默认被选中
- checkbox: 复选框 注意: 如果想让一组单选按钮互斥, 必须 name 属性相同
- checked: 默认被选中
- file: 上传文件
- button: 普通按钮 没有任何内置的功能
- submit: 提交按钮 点击表单按照 action 地址进行提交
- reset: 重置按钮 点击会将表单清空
- image: 图片按钮 点击表单按照 action 地址进行提交
- 属性: src: 图片的地址
- alt: 图片的文字信息
- hidden: 隐藏表单 作用: 服务器需要的数据, 但是不需要用户看到
- select 标签
- name: 表单项的名称
- option 标签 代表一个选择项
- 属性: value
- selected: 默认被选中的项
- textarea 标签
- cols: 列数
- rows: 行数
- 注意: 默认文本值在标签体当中
- -->
- <form action="#" name="myform">
- <table>
- <tr>
- <td>
姓名
- </td>
- <td>
- <input type="text" name="username" value="zhangsan"/>
- </td>
- </tr>
- <tr>
- <td>
密码
- </td>
- <td>
- <input type="password" name="password" value=""/>
- </td>
- </tr>
- <tr>
- <td>
性别
- </td>
- <td>
- <input type="radio" name="sex" value="male" checked="checked"/> 男
- <input type="radio" name="sex" value="female"/> 女
- </td>
- </tr>
- <tr>
- <td>
爱好
- </td>
- <td>
- <input type="checkbox" name="hobby" value="basketball" checked="checked"/> 篮球
- <input type="checkbox" name="hobby" value="football"/> 足球
- <input type="checkbox" name="hobby" value="volleyball"/> 排球
- </td>
- </tr>
- <tr>
- <td>
地址
- </td>
- <td>
- <select name="city" id="">
- <option value="bj"> 北京 </option>
- <option value="sh"> 上海 </option>
- <option value="tj" selected="selected"> 天津 </option>
- </select>
- <select name="area">
- <option value="hd"> 海淀 </option>
- <option value="cy"> 朝阳 </option>
- <option value="cp"> 昌平 </option>
- </select>
- </td>
- </tr>
- <tr>
- <td>
邮箱
- </td>
- <td>
- <input type="text" name="email" value=""/>
- </td>
- </tr>
- <tr>
- <td>
上传头像
- </td>
- <td>
- <input type="file" name="file" />
- </td>
- </tr>
- <tr>
- <td>
文本域
- </td>
- <td>
- <textarea name="ta" cols="30" rows="10">this is my page</textarea>
- </td>
- </tr>
- <tr>
- <td>
- <input type="button" value="button"/>
- <input type="submit" value="submit"/>
- <input type="reset" value="reset"/>
- </td>
- </tr>
- <tr>
- <td>
- <input type="image" src="../img/log.jpg" alt="图片提示的文字"/>
- <input type="hidden" name="hide" value="xxx"/>
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
来源: https://www.2cto.com/kf/201804/740273.html