html
一.day01
1.快捷键
（1） Ctrl+x
| <title>快捷键</title> |
| </head> |
| <body> |
| <div></div> |
| Ctrl+x |
| Ctrl+s 保存 |
| 快速复制一整行：Ctrl+c |
| 快速粘贴一整行：Ctrl+v |
| <div></div> |
| |
（2）文本格式
| <title>文本格式</title> |
| </head> |
| <body> |
| <p> |
| 格式化文本<br> |
| <b>加粗</b><strong>强壮</strong><br> |
| <u>下划线</u><ins>插入线</ins><br> |
| <i>倾斜</i><em>倾斜</em><br> |
| <s>删除线</s><del>贯穿线</del> |
| 下标<sub>①</sub><br> |
| 6 <sup>2</sup>上标<br> |
| |
| |
| </p> |
| |
（3）html怎么生成
| |
| |
| |
| |
| <!DOCTYPE html> |
| |
| <html lang="en"> |
| |
| |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <title>第一个页面</title> |
| </head> |
| |
| <body> |
| hello word! |
（4）标题标签
| <title>标题标签</title> |
| </head> |
| <body> |
| <h1>一级标签</h1> |
| <h2>二级标签</h2> |
| <h3>三级标签</h3> |
| <h4>四级标签</h4> |
| <h5>五级标签</h5> |
| <h6>六级标签</h6> |
| 标题特效：加粗，字体大小发生了改变，会自动换行 |
| 普通文字不会自动换行 |
（5）图片
| <title>照片</title> |
| </head> |
| <body> |
| |
| |
| |
| |
| <img src="img/微信图片_20230808143009.jpg" alt=""> |
| |
| <img src="img/微信图片_20230808143009.jpg" alt=""> |
| |
（6）换行
| <title>换行</title> |
| </head> |
| <body> |
| 静夜思 李白<br> |
| 床前明月光<br> |
| 疑是地上霜<br> |
| 举头望明月<br> |
| 低头思故乡<br> |
（7）音频
| <title>Document</title> |
| </head> |
| <body> |
| |
| |
| |
| |
| |
| <audio src="img/1.mp3" controls autoplay loop></audio> |
| <video src="img/2.mp4"controls autoplay loop></video> |
二.day02
（1）表单
| <title>表单</title> |
| </head> |
| <body> |
| |
| |
| |
| |
| |
| |
| |
| <form action="http://www.baidu.com" method="post" enctype="multpart/form-tada"> |
| |
| |
| |
| |
| |
| 56 |
| 文本框：<input type="text" name="user" value="默认值"><br> |
| 密码框：<input type="password" name="pwd" placeholder="请输入密码"><br> |
| |
| |
| |
| |
| |
| 单选： |
| 男<input type="radio" name="sex" value="男" checked> |
| 女<input type="radio" name="sex" value="女"><br> |
| 多选： |
| 唱<input type="checkbox" name="hobby" value="唱"> |
| 跳<input type="checkbox" name="hobby" value="跳" checked> |
| RAP<input type="checkbox" name="hobby" value="RAP"> |
| 篮球<input type="checkbox" name="hobby" value="篮球"><br> |
| |
| |
| |
| |
| 文件：<input type="file" name="file" multiple><br> |
| <input type="button" value="普通按钮"> |
| <input type="submit" value="提交按钮"> |
| <input type="reset" value="重置按钮"> |
| <input type="image" src="img/张爽.jpg" height="30px" width="30px"> |
| </form> |
| <form action="http：//www.baidu.com" method="get"> |
| |
| 用户名：<input type="text" name="user"> |
| <br /> |
| 密码：<input type="password" name="pass"/> |
| <br /> |
| 性别：<input type="radio" value="男" name="sex"/>男 |
| <input type="radio" value="女" name="sex"/>女 |
| <br /> |
| |
| 学历： |
| <select> |
| <option value="小学">小学</option> |
| <option value="中学">中学</option> |
| <option value="大学">大学</option> |
| <option value="研究生">研究生</option> |
| </select> |
| <br /> |
| 评价： |
| <br /> |
| |
| <textarea rows="10" cols="30" placeholder="请输入评价"></textarea> |
| <br /> |
| |
| 爱好： |
| <input type="checkbox" value="体育" />体育 |
| <input type="checkbox" value="音乐" />音乐 |
| <input type="checkbox" value="美术" />美术 |
| <br> |
| <input type="submit" value="提交表单" /> |
| </form> |
（2）其他表单
| <title>其他的表单</title> |
| </head> |
| <body> |
| <form action="#" method="post"> |
| |
| |
| |
| 下拉列表： |
| <select name="address" > |
| <option value="北京">北京</option> |
| <option selected>上海</option> |
| <option>石家庄</option> |
| <option>临汾</option> |
| </select><br> |
| |
| |
| |
| |
| 多行文本： |
| <textarea name="say" cols="30" rows="10" rows="10"></textarea> |
| <br> |
| <button>提交按钮</button> |
| <button type="submit">提交按钮</button> |
| <button type="reset">重置按钮</button> |
| <button type="button">普通按钮</button> |
| <button> |
| <img src="img/张爽.jpg" alt=""> |
| </button> |
（3）lable
| <title>lable</title> |
| </head> |
| <body> |
| <form action="#" method="get"></form> |
| <label> |
| 用户名：<input type="text" name="a"> |
| </label><br> |
| <label for="a">密 码：</label> |
| <input type="password" name="pwd"><br> |
（4）表格
| <title>表格</title> |
| </head> |
| <body> |
| <p> |
| table表格标签<br> |
| tr：行 td：单元格<br> |
| boder:边框 |
| height="200px" width="300px" 不推荐 |
| tr 只能设置高<br> |
| td 只能设置width |
| </p> |
| <table border="1" height="200px" winth="300px"> |
| <tr> |
| <td>序号</td> |
| <td>姓名</td> |
| <td>性别</td> |
| </tr> |
| <tr> |
| <td>1</td> |
| <td>彬彬</td> |
| <td>女</td> |
| </tr> |
| </table> |
| <hr> |
| <h2>带表头的表格</h2> |
| <table border="1" height="200px" width="300px" > |
| <caption> |
| <h3>学生信息表</h3> |
| </caption> |
| <tr> |
| <th>序号</th> |
| <th>姓名</th> |
| <th>性别</th> |
| </tr> |
| <tr> |
| <td>1</td> |
| <td>鑫鑫</td> |
| <td>未知</td> |
| </tr> |
| </table> |
| <hr> |
| <table border="1" height="500px" width="500px" > |
| <tr> |
| <td colspan="2" > 1,1</td> |
| |
| <td colspan="2">1,3</td> |
| |
| <td>1,5</td> |
| </tr> |
| <tr> |
| <td>2,1</td> |
| <td>2,2</td> |
| <td>2,3</td> |
| <td>2,4</td> |
| <td>2,5</td> |
| </tr> |
| <tr> |
| <td>3,1</td> |
| <td colspan="2" rowspan="2" >3,2</td> |
| |
| <td>3,4</td> |
| <td>3,5</td> |
| </tr> |
| <tr> |
| <td>4,1</td> |
| |
| |
| <td>4,4</td> |
| <td>4,5</td> |
| </tr> |
| <tr> |
| <td>5,1</td> |
| <td>5,2</td> |
| <td>5,3</td> |
| <td>5,4</td> |
| <td>5,5</td> |
| </tr> |
| </table> |
（5）列表
| <title>列表</title> |
| </head> |
| <body> |
| <h2>无序列表</h2> |
| <ul> |
| <li>无序列表的特点：</li> |
| <li>没有顺序</li> |
| <li>每一个li都是一个选项</li> |
| <li>每一个li都是独占一行</li> |
| <li>ul里只能写li标签</li> |
| <li>li标签中可以写其他标签</li> |
| <li> |
| <a href="#">这是标签的嵌套</a> |
| </li> |
| </ul> |
| <h2>有序列表</h2> |
| <ol type="I" > |
| <li>特点：</li> |
| <li>和无序列表基本一致</li> |
| <li>但是，选项有顺序</li> |
| <li>符号可以改变，通过type属性</li> |
| <li>但是不能推荐使用type，推荐css</li> |
| </ol> |
| |
| <h2>自定义列表</h2> |
| <dl> |
| <dt>手机品牌:</dt> |
| <dd>华为</dd> |
| <dd>小米</dd> |
| <dd>荣耀</dd> |
| <dd>OPPO</dd> |
| <dt>电脑品牌：</dt> |
| <dd>华为</dd> |
| <dd>小米</dd> |
| <dd>联想</dd> |
| <dd>dell</dd> |
