1、table标签
<!DOCTYPE html><html lang="cn"><head><meta charset="UTF-8"><title>表格</title></head><body><!--表格 给table 对象添加属性 cellspacing 单元格之间的距离 --><table border="1" cellspacing="0"><!--表格头--><thead><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!--表格主体--><tbody><!--表格主体的每一行--><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr></tbody><!--<tfoot></tfoot>--></table><table border="1" cellspacing="0"><!--表格头--><thead><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!--表格主体--><tbody><!--表格主体的每一行--><tr><td rowspan="3">上午</td><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td rowspan="2">下午</td><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr><tr><td>语文</td><td>数学</td><td>英语</td><td>生物</td><td>化学</td></tr></tbody><tfoot><tr><td colspan="6">课程表</td></tr></tfoot></table></body></html>
2、form标签
<!DOCTYPE html><html lang="cn"><head><meta charset="UTF-8"><title>表单控件</title></head><body><div class="form"><!--form标签是一个块级元素 被提交--><form action="" method="get"><!--label标签行内元素--><!--input是行内块元素--><p><label for="user">用户名：</label><input type="text" name="username" id="user" placeholder="请输入用户名" ></p><p><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="请输入密码"></p><!--单选框 checked 会被默认选中 产生互斥 name 值要相同--><p>用户性别：<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女</p><!--复选框--><p>用户的爱好：<input type="checkbox" name="checkfav" value="吃" checked="checked">吃<input type="checkbox" name="checkfav" value="喝">喝<input type="checkbox" name="checkfav" value="玩" checked>玩<input type="checkbox" name="checkfav" value="乐">乐</p><!--文件上传 file 表单的method的方法是 post 不能是get --><p><input type="file" name="textfile"></p><!--文本域--><p>自我介绍<textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea></p><!--下拉列表 size设置高度 multiple可多选 selected默认选中 --><p><label for="sel">城市：</label><select name="sel" id="sel" size="3" multiple><option value="北京">北京</option><option value="上海" selected>上海</option><option value="广州">广州</option><option value="深圳">深圳</option></select></p><!--按钮--><p><!--显示普通的按钮--><input type="button" name="btn" value="提交" disabled><!--重置按钮--><input type="reset" name="" ><!--提交form表单使用 type=submit 按钮--><input type="submit" name="btn" value="submit"></p></form><button type="button">按钮</button> <!--类似 普通的按钮--><!--总结：按钮： button reset submit文本： label text password radio checkbox file textarea下拉框： select option--><!--总结：html标签：head 标签：title 标签，显示网站的标题meta 标签，提供有关页面的原信息style 标签，定义内部样式表link 标签，链接css资源文件、网站图标script 标签，链接脚本js文件body 标签：h1 - h6 标题标签p 段落标签ul无序列表标签ol有序列表标签div盒子标签table 表格标签th 定义表头tr 定义表行td 定义表单元格数据form表单标签...actionmethodenctype表单控件分类：textareaselect optioninputlabel...img标签br 换行标签hr 分割线标签 空格字符a 超链接标签span标签button 按钮--></div></body></html>
3、标签分类
<!DOCTYPE html><html lang="cn"><head><meta charset="UTF-8"><title>标签分类</title></head><body><!--1.标签属性 注意事项：1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。2.属性值要用引号包裹起来，通常使用双引号也可以单引号。3.属性和属性值不区分大小写，但是推荐使用小写。2.标签分类：HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。常用的块状元素：<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>常用的行内元素<a> <span> <br> <i> <em> <strong> <label>常用的行内块状元素：<img> <input>块级元素特点：display:block;1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。行内元素特点：display:inline;1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。行内块状元素的特点：display:inline-block;1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置注意我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。3.标签嵌套规则：块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：<div><div></div><h1></h1><p><p></div> ✔️<a href=”#”><span></span></a> ✔️ a 可以包含 img<span><div></div></span> ❌某些块级元素不能放在p标签里面，比如<p><ol><li></li></ol></p> ✔️<p><div></div></p> ❌ 个别例外，大家注意有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、pli元素可以嵌入ul，ol，div等标签<ul><li><ul><li><div></div></li><li><ol><li></li><li></li><li></li><li></li></ol></li></ul></li></ul>--><div class="wrapper"><!--块级元素： div p h1~h6 ol ul li table form块状元素：1.独占一行2.可以设宽度和高度，如果设置了宽度和高度，则就是当前的宽度和高度如果没有设置，宽度就是父盒子的宽度，高度根据内容填充--><div class="left">这是路飞学城的战场<div>这是我的段落<div style="width:500px;height: 100px">这是我的爱好</div><ul><li><h2>读书</h2></li><li><ol><li>运动</li><li>学习</li></ol></li></ul></div></div><div class="right"><!--行内标签 a span br i en strong labelhr 可以设置宽高；br 不可设置宽高；行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充--><a href="#" style="width: 200px;height: 100px">百度</a><a href="#">luffy</a><span style="width: 100px;height: 100px">一些文本</span><span>一些文本</span><i>我是i</i><hr style="height: 100px;width: 100px"><em>我是em</em><br style="width: 200px;height: 100px"><strong style="height: 200px;width: 100px;">我是strong</strong></div><div class="inline-block"><!--行内块1.在一行内展示2.可设置宽高--><img src="homesmall1.png" alt="一张图片" style="height: 500px;width: 500px"><label for="txt">测试</label><input type="text" name="username" id="txt" style="width: 200px;height: 50px"></div></div></body></html>
