1.head标签
<!DOCTYPE html> <!--文档声明H5 html--> <html lang="en"> <head> <meta charset="UTF-8"> <!--标签属性--> <title>30期皇家赌场</title> <!--浏览器标题--> </head> <body> </body> </html>
2.body中的基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <b>加粗</b> <i>斜体</i> <br> <!--换行--> <u>下划线</u> <hr> <!--长横线--> <s>删除</s> <!--中横线删除 --> <p>段落&nbsq;标签</p> <!--&nbsq;空格--> <h1>标题1</h1> <!--字体最大，依次往下变小--> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>
3.div标签和span标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>xx0</div> <!--独占一行--> <span>xx1</span> <!--全部都在一起--> <span>xx2</span> <span>xx3</span> </body> </html>
4.img标签和a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--埋点 两种方式都可以,a标签name属性，其他标签id属性，属性的值是不可重复的--> <div id="xx">顶部位置</div> <!-- <a name='xx'>这是顶部</a> --> <!--相对路径引入--> <!--title是鼠标放到图片上显示的信息--> <!--alt是图片加载不出来给出的提示信息--> <!--width宽度 height高度--> <img src="0.jpg" alt="这是加载不出来显示的信息" title="蜡笔小新" width="200" height="800"> <br> <!-- 远程路径引入 --> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593367686132&di=9d65ff1b339ef41f00881a988076ca0c&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111113%2F1111131811fe8b6d1575c620d7.jpg" alt="这是一个美女" title="美女" width="300" height="300"> <!-- 超链接标签 --> <!-- target=_blank是在另外一个窗口打开 --> <a href="http://www.baidu.com" target="_blank">点一下试试</a> <!-- 跳转锚点作用点击回到顶部可以跳转到对应的标签属性，herf可以绑定对应a标签中的name属性值和div标签id属性值 --> <a href="#xx">回到顶部</a> </body> </html>
5.列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--ul无序列表标签，type控制前面显示的点 --> <ul type="disc"> <li>小白</li> <li>小红</li> <li>小绿</li> </ul> <!-- 有序列表 前面标记了123等 start起始值 type属性表示前面已什么显示 --> <ol start="2" type="1"> <li>小白</li> <li>小红</li> <li>小绿</li> </ol> <!-- 标题列表 dd有缩进效果 --> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> </dl> </body> </html>
6.table表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- border边框 cellpadding内边框与内容距离 --> <!-- cellspacing外边框和内边框距离 --> <table border="1" cellpadding="10" cellspacing="10"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>小白</td> <td>23</td> <td>男</td> </tr> <tr> <td>小黑</td> <td>25</td> <td rowspan="2">女</td> <!--rowspan合并行--> </tr> <tr> <td colspan="2">小红</td> <!--colspan合并列--> <!-- <td>34</td> --> <!-- <td>男</td> --> </tr> </tbody> </table> </body> </html>
7.input标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- readonly 只读 不能写 --> 用户名:<input type="text" readonly="readonly"> <!-- disabled 表示选择框置灰 --> 密码:<input type="password" disabled="disabled"> 日期选择框:<input type="date"> <br> <!-- 多选框 也需要加name属性 表示一组 --> <!-- checked="checked"意思是默认选中 --> 爱好: <input type="checkbox" name="hobby" checked="checked">男人 <input type="checkbox" name="hobby">女人 <input type="checkbox" name="hobby">人妖 <br> <!-- 单选 name属性值相同时是一组才有单选效果 --> <!-- checked="checked"意思是默认选中 --> 性别: <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <br> <!-- 提交按钮 value属性可以更改，显示默认是提交 --> <input type="submit" value="确定"> <br> <!-- 重置按钮 放在form标签里面才有效果 --> <input type="reset"> <br> <!-- 普通按钮 也可以用value修改显示 --> <input type="button" value="滚犊子"> <br> <!-- 隐藏输入框 页面不显示 f12中可以查看 --> <input type="hidden"> <br> <!-- 文件选择框上传文件 --> <input type="file"> </body> </html>
8.下拉框select标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 下拉框选项 --> <select name="" > <option value="">男人</option> <option value="">女人</option> </select> <!-- 多选下拉框选项 multiple="multiple"多选 --> <select name="" multiple="multiple"> <option value="">男人</option> <option value="">女人</option> </select> </body> </html>
9.label标签和textarea标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 绑定id 作用是点击用户名可以把光标显示在文本框中 --> <label for="username">用户名:</label> <input type="text" id="username"> <!-- 多行文本输入框 用在留言评论 --> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html>