body
常用标签
body分为块级和行内
块级 独占整行行内 内容有多少就占多少文本格式化标签
br 换行
<p>qwer<br/>zxcv</p>p和span
p 块级标签样式<p style="background-color: green;">qwer</p>span 行内标签样式span style="background-color: green;">zxcv</span>p 段落
<p>hahahahah</p> <p>hahahahahaaa</p> h 标题
h1~h6y依次变小
<p>默认文字字体</p> <h1>再再再再再粗一点</h1> <h2>再再再再粗一点</h2> <h3>再再再粗一点</h3> <h4>再再粗一点</h4> <h5>再粗一点</h5> <h6>粗一点</h6>链接
a 超链接，跳转到指定的地址<a href="http://www.baidu.com" title="baidu">百度</a>锚点，点击后跳转到指定位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>野鸡平台</title></head><body><h1>章节</h1><a href="#i1" title="第一章">第一章 寂寞的春天</a><a href="#i2" title="第二章">第二章 寂寞的夏天</a><a href="#i3" title="第三章">第三章 寂寞的秋天</a><a href="#i4" title="第四章">第四章 寂寞的冬天</a><h1>内容</h1><p style="height: 1000px;" id="i1"> <h3>第一章 寂寞的春天</h3> <p>春暖花开,万物复苏,又到了交配的季节。
</p></p><p style="height: 1000px;" id="i2"> <h3>第二章 寂寞的夏天</h3> <p>夏天夏天悄悄过去留下小咪咪</p></p><p style="height: 1000px;" id="i3"> <h3>第三章 寂寞的秋天</h3> <p>今年的秋天真是寂寞呀！！！</p></p><p style="height: 1000px;" id="i4"> <h3>第四章 寂寞的冬天</h3> <p>下雪</p></p></body></html>ul ol dl 列表展示
ul 无序列表ol 有序列表dl 层级列表li 列表项目<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>野鸡平台</title></head><body> <ul> <li>周杰伦</li> <li>林俊杰</li> <li>王力宏</li> </ul> <ol> <li>铁锤</li> <li>钢弹</li> <li>狗蛋</li> </ol> <dl> <dt>河北省</dt> <dd>邯郸</dd> <dd>石家庄</dd> <dt>山西省</dt> <dd>太原</dd> <dd>平遥</dd> </dl></body></html>table 表格
table表格标题thead表格标题tr 行标签th 列名tbody表格内容tr 列标签td 列内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>6666</title></head><body> <table border="3"> <!--border 选择表格样式-->> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>xxxx</td> <td>18</td> <td>看书</td> </tr> <tr> <td rowspan="3">aaaa</td> <!--rowspan 合并单元格-->> <td>18</td> <td>吃饭</td> </tr> <tr> <td>33</td>> <td>heiheihei</td>> </tr>> </tbody> </table></body></html>img 图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>6666</title></head><body> <!--显示本地图片，找不到图片则显示alt中的文字--> <img src="img/lover.png" alt="美女"> <!--显示网络图片--> <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子"></body></html>用户交互
按钮标签
type
buttom: 普通submit: 提交reset: 重置 <button type="button"> 按钮 </button>input
text，文本框。
password，密码框。
radio，单选框（必须设置name属性相同，否则无法实现）。
checkbox，复选框。
file，文件上传。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>666666</title></head><body> <h3>文本框</h3> <input type="text"> <h3>密码框</h3> <input type="password"> <h3>单选框</h3> <input type="radio" name="ger">男 <input type="radio" name="ger">女 <h3>复选框</h3> <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">橄榄球 <h3>上传文件</h3> <input type="file"></body></html>select下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML学习</title></head><body> <h3>单选</h3> <select> <option>上海</option> <option>北京</option> <option>深圳</option> </select> <h3>多选</h3> <select multiple> <option>上海</option> <option>北京</option> <option>深圳</option> </select></body></html>textarea多行文本框
<!DOCTYPE html>卧槽，无情呀<html lang="en"><head> <meta charset="UTF-8" /> <title>HTML学习</title></head><body> <textarea>文本内容写在这里...</textarea></body></body></html>form表单
用于提交数据到后台
提交时，只会提交form标签内部【用户交互】相关的标签。
<input type="submit" value="提交"> 用于提交当前所在的表单。
<input type="reset" value="重置"> 用于重置当前标签中的选项。
form标签内置属性action="/xx/" ，表示表单要提交的地址。
method="get"，表示表单的提交方式。
enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置form内部【用户交互】相关标签必须设置name，不然提交数据后后端无法获取// 提交表单之后，实际上会将表单中的数据构造成一种特殊的结构，发送给后台，类似于：{ user:用户输入的姓名, pwd:用户输入的密码, ...}radio、checkbox、select 除了要设置name属性以外，还必须设置value属性，因为这三中标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML学习</title></head><body> <form action="http://www.x.cn" method="get"> <p>用户名：<input type="text" name="user"></p> <p>密 码：<input type="password" name="pwd"></p> <p>性别： <input type="radio" name="ger" value="2">男 <input type="radio" name="ger" values="3">女 <p/> <p>爱好： <input type="checkbox" name="favor" value="2">篮球 <input type="checkbox" name="favor" value="8">足球 <input type="checkbox" name="favor" value="10">橄榄球 </p> <p>城市： <select name="city"> <option value="1">上海</option> <option value="2">北京</option> </select> </p> <p>备注：<textarea> name="memo"></textarea></p> <input type="submit" value="提交"> <input type="reset" value="重置"> </form></body></html>
html基础-2
下一篇：返回列表
