HTML
(1)head内常用标签
在书写HTML比代码的时候,只需要写标签名,然后tab就能自动补全
| <title>test</title> 网页标题 |
| |
| <style> </style> 内部用来书写css代码 |
| |
| <script> </script> 内部用来书写js代码 |
| |
| <script src='myjs.js'> </script> 还可以引入外部js文件 |
| |
| <link rel='stylesheet' href='mycss.css'> 引入外部css文件 |
| |
| <meta http-equiv="refresh" content="2;URL=www.baidu.com"> 提供了一种在 HTML 文档中嵌入元数据的方式 元数据是描述数据的数据 |
(2)body内常用标签
(1)基本标签
| <h1>我是h1</h1> 标题标签 1~6级标题 |
| |
| <b>加粗</b> |
| |
| <i>斜体</i> |
| |
| <u>下划线</u> |
| |
| <s>删除线</s> |
| |
| <p>我是p标签</p> 段落标签 |
| |
| <br> 换行标签 |
| |
| <hr> 水平分割线 |
(2)标签的分类
| 1、块级标签:独占一行 |
| h1-h6 p div |
| 1.块级标签可以修改长宽 行内标签不可以 修改了也不会变化 |
| 2.块级标签内部可以嵌套任意的块级标签和行内标签 |
| 但是p标签虽然是块级标签 但是只能嵌套行内标签 不能嵌套块级标签 |
| |
| 2、行内标签:自身文本多大就占多大 |
| i u s b span |
| 行内标签不能嵌套块级标签 可以嵌套行内标签 |
(3)标签具有的两个重要属性
| 1.id值 |
| 类似于标签的身份证号 在同一个html页面上id值不能重复 |
| |
| 2.class值 |
| 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值 |
(4)特殊符号 &
| 空格 |
| > > 大于号 |
| < < 小于号 |
| & & and符 |
| ¥ 钱 ¥ |
| © 版权 © |
| ® 商标 ® |
(5)常用标签 div span
(6)img标签
- 高度和宽度当你只修改一个的时候,另外一个参数会等比例缩放
- 如果修改了两个参数,并且没有考虑比例的问题,那么图片就会失真(错误的缩放)
| |
| <img src="" alt=""> |
| |
| src |
| |
| |
| |
| alt='这是我的img' |
| |
| |
| title='heart' |
| |
| |
| height='100px' |
| |
| |
| width='100px' |
| |
| |
(7)a标签
| <a href=""></a> |
| |
| """ |
| 当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色 |
| 如果点击过了就会是紫色(浏览器记忆了) |
| """ |
| |
| href |
| 1.放url,用户点击就会跳转到该url页面 |
| 2.放其他标签的id值 点击即可跳转到对应的标签位置 |
| |
| target |
| 默认a标签是在当前页面完成跳转 _self |
| 你也可以修改为新建页面跳转 _blank |
| |
| |
| |
| |
| <div id="d1">我是d1</div> |
| <a href="#d1">点击我跳转到d1</a> |
(8)列表标签
(1)无序列表
- 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
| <ul type="circle"> |
| <li>1</li> |
| <li>2</li> |
| <li>3</li> |
| <li>4</li> |
| </ul> |
| |
| type |
| 可以设置无序列表前的样式(实心圆点 空心圆点 方) |

(2)有序列表
| <ol type="1" start="5"> |
| <li>1</li> |
| <li>2</li> |
| <li>3</li> |
| </ol> |
| |
| type |
| 可以设置有序列表前的样式 |
| start |
| 可以设置起始值 |

(3)标题列表
| <dl> |
| <dt>标题1</dt> |
| <dd>内容1</dd> |
| <dt>标题2</dt> |
| <dd>内容2</dd> |
| <dt>标题3</dt> |
| <dd>内容3</dd> |
| </dl> |

(9)table表格标签
| <table> |
| <thead> |
| <tr> |
| <th>username</th> |
| <th>password</th> |
| <th>hobby</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>heart</td> |
| <td>123</td> |
| <td>read</td> |
| </tr> |
| <tr> |
| <td>zeus</td> |
| <td>123</td> |
| <td>run</td> |
| </tr> |
| <tr> |
| <td>god</td> |
| <td>123</td> |
| <td>music</td> |
| </tr> |
| </tbody> |
| </table> |

| <table border="1" cellpadding="5" cellspacing="5"> |
| <thead> |
| <tr> |
| <th>username</th> |
| <th>password</th> |
| <th>hobby</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>heart</td> |
| <td>123</td> |
| <td>read</td> |
| </tr> |
| <tr> |
| <td colspan="2">zeus</td> |
| <!-- <td>123</td>--> |
| <td rowspan="2">run</td> |
| </tr> |
| <tr> |
| <td>god</td> |
| <td>123</td> |
| <td>music</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <table border="1"> 加外边框 |
| <td rowspan="2">run</td> 水平方向占多行 |
| <td rowspan="2">run</td> 垂直方向占多行 |

- 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
| <form action=""></form> |
| |
| |
| action:控制数据提交的后端路径(给哪个服务端提交数据) |
| 1.什么都不写 默认就是朝当前页面所在的url提交数据 |
| 2.写全路径:https://www.baidu.com 朝百度服务端提交 |
| 3.只写路径后缀 action="/index/" |
| 自动识别出当前服务端的ip和port拼到前面 |
| host:port/index/ |
| |
| |
| <input type="submit" value="注册"> |
| <button>我是一个按钮</button> |
| text : 普通文本 |
| password : 密文 |
| date : 日期 |
| submit : 用来触发form表单提交数据的动作 |
| button : 就是一个按钮 本身没有任何的功能 但是它是最有用的 |
| reset : 重置输入的内容 |
| radio : 单选按钮 |
| 1.默认选中要加 checked="checked" |
| 2.<input type="radio" name="gender" checked="checked">男 |
| 3.当标签的属性名和属性值一样的时候可以简写 |
| 4.<input type="radio" name="gender" checked>男 |
| checkbox : 多选框 |
| file : 上传文件 |
| multiple 上传多个 |
| hidden : 隐藏 |
| |
| |
| |
| <label for="d1"> |
| username:<input type="text" id="d1"> |
| </label> |
| |
| |
| <label for="d2">password:</label> |
| <input type="password"> |
| |
| |
| |
| |
| |
| name就类似于字典的key |
| 用户的数据就类似于字典的value |
| |
| <p>gender: |
| <input type="radio" name="gender">男 |
| <input type="radio" name="gender">女 |
| <input type="radio" name="gender">其他 |
| </p> |
| |
| <p>hobby: |
| <input type="checkbox" checked>music |
| <input type="checkbox">run |
| <input type="checkbox">listen |
| </p> |

(12)select标签
- 默认是下拉单选,可以加mutiple参数变多选,默认选中selected
| <p>province1: |
| <select name="" id=""> |
| <optgroup label="上海"> |
| <option>浦东</option> |
| <option>黄埔</option> |
| <option>青浦</option> |
| </optgroup> |
| <optgroup label="浙江"> |
| <option>宁波</option> |
| <option>台州</option> |
| <option>丽水</option> |
| </optgroup> |
| </select> |
| </p> |
| |
| <p>province: |
| <select name="" id="" multiple> |
| <option value="">上海</option> |
| <option value="">北京</option> |
| <option value="">深圳</option> |
| <option value="" selected>浙江</option> |
| </select> |
| </p> |

(13)textarea文本输入框
| <p>文本输入框: |
| <textarea name="" id="" cols="30" rows="10"></textarea> |
| </p> |
本文作者:ssrheart
本文链接:https://www.cnblogs.com/ssrheart/p/18028097
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步