1-我的第一个html网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title_python学习网页</title> </head> <body> <!-- align：文本的水平对齐方式：left左,center中,right右 --> <h1 align="left"title="提示文本">h1标题:常用于网站的logo，网站标题</h1> <h2 align="center"title="用于提示而已">h2标题:常用于网站的板块标题</h2> <h3 align="right">h3标题:常用于网站的板块标题</h3> <h4>h4标题:常用于网站的附加内容标题，或者文章的标题</h4> <h5>h5标题:基本用不到</h5> <h6>h6标题:基本用不到</h6> <hr> <p align="left"title="用于提示而已">p->段落：<br>Hyper<br> Text Markup Language</p> <a href="http://www.baidu.com">跳转到百度</a> <a href="./assets/html.chm">点击下载手册</a> <a href="./assets/logo.png">点击下载图片[鼠标右键,另存为]</a> <a href="https://www.oldboyedu.com"> <img src="./assets/logo.png"> </a> </body> </html>
2-列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 无序列表, unordered list，简写: ul 列表的单项 list item 简写：li --> <ul type="circle"> <li>列表的第一项</li> <li>列表的第二项</li> <li>列表的第三项</li> </ul> <!-- 有序列表, ordered list，简写：ol 列表的单项 list item li --> <ol> <li>列表的第一项</li> <li>列表的第二项</li> <li>列表的第三项</li> </ol> <!-- 和任何一个双标签一样，标签内部可以嵌套的标签来使用。 --> <ul> <li> <p>第一章：开端</p> <ul> <li>第一节：下山</li> <li>第二节：命案</li> <li>第三节：奇遇</li> <li></li> <li></li> </ul> </li> </ul> <dl> <dt>赵本山</dt> <dd>春晚常驻选手，国内一线大品牌</dd> <dd>乡村爱情故事，二人转，小品</dd> <dt>小明</dt> <dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd> </dl> <menu> <li>首页</li> <li>商品分类</li> <li>购物狂欢节</li> <li>会员中心</li> </menu> </body> </html>
3-表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!-- 表单/ <form> 表单标签，告诉浏览器，form内部的所有输入标签都是表单的内容，后面一并提交。 action 表单数据提交的服务器地址 <input> 输入标签/输入框/输入按钮 type 设置输入框的类型 text 告诉浏览器，当前input属于单行文本框 password 告诉浏览器，当前input属于密码框 submit 告诉浏览器，当前input输入提交表单的提交按钮 radio 告诉浏览器，当前input属于单选框 checkbox 告诉浏览器，当前input属于多选框 reset 告诉浏览器，重置当前表单的数据 <select> 下拉列表 option 告诉浏览器，这是下拉列表中的其中一个选项 textarea 多行文本框 cols 设置框的列数[宽度] rows 设置框的行数[高度] --> <h2>登录表单</h2> <form action=""> 登录帐号：<input type="text"><br><br> 登录密码：<input type="password"><br><br> <input type="submit" value="登录"> </form> <h2>百度搜索</h2> <form action="http://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="百度一下"> </form> <h2>注册表单</h2> <form action=""> 账户：<input type="text" name="username"><br><br> 密码：<input type="password" name="password"><br><br> 邮箱：<input type="emai" name="email"><br><br> 姓别：<label><input type="radio" name="sex" value="1">男</label> <label><input type="radio" name="sex" value="0">女</label> <br><br> 爱好： <label><input type="checkbox" name="lve" value="swimming">游泳</label> <label><input type="checkbox" name="lve" value="pc_game">电脑游戏</label> <label><input type="checkbox" name="lve" value="card">卡牌游戏</label> <label><input type="checkbox" name="lve" value="wark">爬山</label> <br><br> 所在城市： <select name="province"> <option value="">广东</option> <option value="">广西</option> <option value="">湖南</option> <option value="">湖北</option> <option value="">河南</option> <option value="">河北</option> <option value="">北京</option> <option value="">天津</option> <option value="">重庆</option> <option value="">上海</option> </select> <select name="city"> <option value="">广州</option> <option value="">佛山</option> <option value="">深圳</option> </select> <br><br> 备注：<br> <textarea name="remark" cols="60" rows="10"></textarea><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
4-表格相关标签的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--基础单元格--> <table border="1"> <tr> <td>1行1列</td> </tr> </table> <!-- 第二个：多行的表格 --> <table border=""> <tr> <td>1行1列</td> <td>1行2列</td> </tr> <tr> <td>2行1列</td> <td>2行2列</td> </tr> </table> <!-- 第三个：有表头的表格 --> <table border="0" align="center" width="300px;"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>001</td> <td>小龟龟</td> <td rowspan="2">13</td> <td>男</td> </tr> <tr> <td>002</td> <td>小红红</td> <td>女</td> </tr> <tr> <td>003</td> <td colspan="3">17的小男孩</td> </tr> </table> </body> </html>
5-实体字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 假设y=10,x=20,那么z<x并且z>y，z的取值范围？ <p>♠</p> <p>©</p> <p>一个段落 另一个段落</p> </body> </html>
6-css的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./index.css"> </head> <body> 故人西辞黄鹤楼，<br> 烟花三月下扬州。<br> </body> </html>
body { background-color: pink; color: deepskyblue; }
7-元素选择符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 通配选择符 */ * { padding: 0; margin: 0; } /* 类型选择符 */ p{ background-color: #d2594f; color: gray; border: 3px solid #fff; } div{ background-color: black; color: gray; } /* ID选择符 */ #p1{ color: orange; } /* 类选择符 */ .p2{ color: lightblue; } </style> </head> <body> <p>一个段落</p> <p id="p1">一个段落</p> <div class="p2">另一个段落</div> <p class="p2">一个段落</p> </body> </html>
8-关系选择符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 使用了选择符给html元素设置外观效果，但是因为选择符使用不当，出现其他html元素也被设置样式了，这种情况，我们称之为样式污染 */ /* 包含选择符 */ div .ul_first li{ color: red; } /* 父子选择符 */ .div1>.p1{ color: red; } /* 相邻选择符 */ .li_2+li{ background-color: orange; } /* 兄弟选择符 */ .li_2~li{ color: blue; } </style> </head> <body> <div> <ul class="ul_first"> <li class="li_2">第1个li</li> <li>第2个li</li> <li>第3个li</li> <li>第4个li</li> </ul> <ul> <li>第1个li</li> <li>第2个li</li> </ul> </div> <ul class="ul_first"> <li class="li_2">第1个li</li> <li>第2个li</li> <li>第3个li</li> </ul> <div class="div1"> <div> <p class="p1">第一段文本内容</p> </div> <p class="p1">第二段文本内容</p> </div> </body> </html>
9-属性选择符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 属性选择符，根据html元素查找是否具有当前指定属性的元素，添加样式 */ p[title]{ color: red; } p[title="abc"]{ background-color: orange; } p[data-type='a']{ background-color: blue; } </style> </head> <body> <p title="abc" data-type="a">第1个段落</p> <p>第2个段落</p> <p title="">第3个段落</p> <p data-type="b">第4个段落</p> </body> </html>
10-伪类选择符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box2:hover{ color: red; } div:first-child{ color: blue; } a:hover{ color: red; } a:active{ color: yellowgreen; } a:link{ text-decoration: none; } a:visited{ color: blue; } </style> </head> <body> <div>第3个box</div> <div class="box2">第2个box</div> <div>第1个box</div> <div>第4个box</div> <a href="http://www.133313232.com">光标悬放状态</a> <a href="http://www.baidu.com">光标点击状态</a> <a href="">光标平常状态</a> </body> </html>
11-伪对象选择符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter{ font-size: 2rem; } p:first-line{ color: red; } p::selection{ background-color: pink; color: blue; } P:after{ content: "...."; } p:before{ content: "[新华日报：小小米]"; } </style> </head> <body> <p>今天上午，在全国政协委员专题视察团视察情况交流座谈会上，全国政协委员、军事科学院军事医学研究院生物工程研究所所长、中国工程院院士陈薇说，今年1月2</p> </body> </html>
12-样式属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ /* 属性名称:属性值; */ /* 颜色，字体，文本，内容 */ background-color: gray; color: #f00; /* web开发中，颜色的表示一共有3种方式： 单词表达法， red,orange,.... 16进制数值表达法， 屏幕里面所有的颜色都是通过光的三原色来组合产生的，一共有1677万种。 16进制数值表达法采用了屏幕的三种光的光暗程度来表达颜色. 每种颜色的发光程度值从00-FF之间，转换成数值就是0-255 格式： #红色绿色蓝色 例如： 白色：#ffffff #fff 黑色：#000000 #000 红色：#ff0000 #f00 绿色：#00ff00 #0f0 蓝色：#0000ff #00f 紫红：#ff00ff #f0f 黄色：#ffff00 #ff0 灰色：#666666 #666 只要三种光发光程度一样，都是灰色。 16进制数值如果满足 aabbcc 或者 aaaaaa 格式，则可以进行简写： aabbcc ===> abc aaaaaa ===> aaa rgb颜色通道表达法 这里的书写原理和上面的16进制表达法一样，只是书写方式不同。 格式：rgb(红色,绿色,蓝色) 例如： 白色: rgb(255,255,255) 黑色: rgb(0,0,0) 红色: rgb(255,0,0) .... */ /* 透明度 */ opacity: 0.3; } </style> </head> <body> <div class="box1 box2">一个段落</div> </body> </html>
网页的嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 当前网页 <iframe src="http://www.baidu.com"> </body> </html>