<!-- Html,CSS,JS 三者的关系 ==> 人，衣服，动作。 以下展示 html 常用基本编码 --><!-- Html 在PyCharm中新建html文件默认给出的基本标签如下： ---------------------- <!DOCTYPE html> 表示标准的html解析格式 w3c <html lang="en"> html文档 en 英文， zh中文 <head> 页面的头，是一对主动闭合标签 <head></head> <meta charset="UTF-8"> 自闭和标签 <title>Title</title> 页面标题 </head> <body> 页面主体 <body></body> </body> </html> ------------------------><!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> <!--此对标签之间都是定义页头外观及行为的--> <meta charset="UTF-8"> <!--<meta http-equiv="refresh" content="1"> <!--页标题左侧的图标每隔1秒刷新一次--> <!--<meta http-equiv="refresh" content="2;http://www.baidu.com"> <!--页面2秒时刷新并跳转到指定链接--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容到IE浏览器的最高版本--> <meta name="keywords" content="大师兄"> <!--检索关键字，通常是一个词语，要查看网页源代码才能看到--> <meta name="description" content="大师兄是个低调的攻城狮"> <!--检索摘要，通常是一个句子，要查看网页源代码才能看到--> <title>网页标题名称</title> <link rel="shortcut icon" href="title_icon.jpg"> <!-- 链接导入shortcut icon title图标 --> <!--<link rel="stylesheet" href="XXX"> <!--链接导入css样式表--> <!--<script src="xxxxx"></script> <!--导入js文件--> <style> <!--写css样式的地方>
</style> </head><body> <p>年轻,就是拿来折腾的。</p> <!-- p是段落标签，段间有明显的距离；br是换行标签，行间没有距离--> <p>让自己具备一技之长的资本，<br>是需要无数个夜晚的静思，</br>无数寂寞时光的堆积而成的。</p> <h1>白羊座</h1> <!-- h是页内标题标签，标题会区分开正文字体 --> <h2>白羊座</h2> <h3>白羊座</h3> <h4>白羊座</h4> <h5>白羊座</h5> <h6>白羊座</h6> <div> <!-- 块级标签的宽度占整个页面宽度--><!--div是块级标签的白板，只有一种属性--> 块级标签 </div> <span> <!-- 行内标签的宽度随标签内容变化，是包裹标签内容的大小--><!--span是行内标签的白板，没有属性--> 行内标签 </span> <!-- <form> 标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。 action 提交到那个接口 method post 还是 get enctype="multipart/form-data" 指定上传文件类型 --> <form action="/login" method="post" enctype="multipart/form-data"> <span>是否让页面记住密码</span> <input type="checkbox" checked="checked"> <!--复选框，默认选中--> <input type="radio" checked="checked"> <!--单选钮，默认选中--> <input type="radio" name="r1" checked="checked"> <input type="radio" name="r1" > <!--互斥的一对单选钮，第一个默认选中，用相同name实现互斥--> </form> <div> <input type="text"> <!--普通文本输入框，输入可见字符--> <input type="password"> <!--密文文本输入框，输入字符以掩码显示--> <input type="submit" > <!--提交按钮，表单数据直接提交到后台--> <input type="file" > <!--实现上传文件功能--> <input type="reset" > <!--重置按钮，把表单数据重置--> <input type="text" id="i1"> <label for="i1">用户名</label> <!--label是标签，用for绑定控件id,实现点击控件的标签即如点击控件一样的效果--> </div> <textarea> <!--可滚动显示的多行文本显示区域，也可通过拖拽右下角调整区域的大小--> 标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后， 后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展， 一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。 WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。 </textarea> <div> <select > <!--下拉选框，显示选中的单项--> <option>乌鲁木齐</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>天津</option> <option>重庆</option> <option>郑州</option> </select> <select size="2" multiple="multiple"> <!--滚动选框，显示指定个数的多个选项--> <option>乌鲁木齐</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>天津</option> <option>重庆</option> <option>郑州</option> </select> <select size="4" multiple="multiple"> <!--滚动选框，分组显示指定个数的多个选项--> <optgroup label="直辖市"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>天津</option> <option>重庆</option> </optgroup> <optgroup label="省会城市"> <option>成都</option> <option>郑州</option> <option>乌鲁木齐</option> </optgroup> </select> </div> <div> <a href="http://www.baidu.com" target="_blank">跳转到百度主页</a> <!--target="_blank"是在新页面打开跳转的链接--> <img src="title_icon.jpg" alt="加载失败" title="白羊座"> <!-- img 图片标签 src 图片地址 alt 当图片加载失败的时候 显示文案 title 鼠标悬浮到图片上时 显示的文案 --> </div> <div> <!-- ul 定义无序列表 不指定 type 默认圆点 指定type则按type显示 --> <ul> <li>第一天学习ui自动化</li> <li>第二天学习ui自动化</li> </ul> <ul type="square"> <li>HTML</li> <li>XHTML</li> <li>CSS</li> </ul> <!-- ol 定义有序列表 不指定 type 默认阿拉伯数字升序 指定type则按type a A 1 I i 显示 --> <ol type="1" reversed="reversed"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </div> <div> <!-- table 表格标签 thead 表头 tr 行 th 列 th 的属性 colspan="2" 代表一列占几列 tbody 表体 tr 行 td 列 --> <table border="1">r <thead> <tr> <th>id</th> <th>姓名</th> <th>班级</th> <th>课程</th> <th>分数</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <tr> <td rowspan="3">1</td> <td rowspan="3">张三</td> <td>白羊座</td> <td>语文</td> <td>100</td> <td>编辑</td> <td>保存</td> </tr> <tr> <td>白羊座</td> <td>数学</td> <td>100</td> <td>编辑</td> <td>保存</td> </tr> <tr> <td>白羊座</td> <td>英语</td> <td>100</td> <td>编辑</td> <td>保存</td> </tr> </tbody> </table> </div></body></html>
时间： 2025-01-02 02:55:49