【html标签复习】

Html基础标签

html标签复习
table标签
form表单

html标签复习

html语言是解释型语言，不是编译型。浏览器是容错的。
html页面中由一对标签组成：

<html></html>
<html> 称之为 开始标签
</html>称之为 结束标签

3.title表示网页的标题
4. 可以在meta标签中设置编码方式
5. <br/>表示换行。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面
6. p 表示段落标签
7.img标签图片标签

src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示

h1~h6 : 标题标签
列表标签:

ol 有序列表
start 表示从*开始，type 显示的类型：A a I i 1(deafult)
ul 无序列表
type disc(default) , circle , square

u 下划线 b 粗体 i 斜体
上标 sup 下标 sub
HTML中的实体：小于号 < 大于等于号 ≥ 版权 ©
span 不换行的块标记
a 表示超链接

href 链接的地址
- target:
  - _self 在本窗口打开
  - _blank 在一个新窗口打开
  - _parent 在父窗口打开
  - _top 在顶层窗口打开

<html><head><title>这是我的第一个网页</title><meta charset="UTF-8"></head><body><!--HELLO WORLD!<br/>你好，HTML！<p>这里是一个段落</p><p>这里是第二个段落</p><img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/><h1>标题一</h1><h2>标题一</h2><h3>标题一</h3><h4>标题一</h4><h5>标题一</h5><h6>标题一</h6>-->武林高手排行榜:<ol type="i" start="3"><li>扫地僧</li><li>萧远山</li><li>慕容博</li><li>虚竹</li><li>阿紫</li></ol>武林大会人员名单：<ul type="circle"><li>乔峰</li><li>阿朱</li><li>马夫人</li><li>白世镜</li></ul>你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？<br/>水分子的化学式： H<sub>2</sub>O <br/>氧气的化学式： O<sup>2</sup><br/>5&lt;1010&gt;55&le;1010&ge;5注册商标 &reg;版权符号 &copy;<span>赵又廷</span>，夺妻之仇。<a href="http://www.baidu.com" target="_self">百度一下</a></body>
</html>

居中的图片:

table标签

表格 table
行 tr
列 td
表头列 th

table中有如下属性（虽然已经淘汰，但是最好了解一下）
- border：表格边框的粗细
- width:表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
tr中有一个属性： align -> center , left , right

rowspan : 行合并
colspan : 列合并

<html><head><title>表格标签的学习</title><meta charset="UTF-8"></head><body><table border="1" width="600" cellspacing="0" cellpadding="4"><tr align="center"><th>姓名</th><th>门派</th><th>成名绝技</th><th>内功值</th></tr><tr align="center"><td>乔峰</td><td>丐帮</td><td>少林长拳</td><td>5000</td></tr><tr align="center"><td>虚竹</td><td>灵鹫宫</td><td>北冥神功</td><td>15000</td></tr><tr align="center"><td>扫地僧</td><td>少林寺</td><td>七十二绝技</td><td>未知</td></tr></table><hr/><table border="1" cellspacing="0" cellpadding="4" width="600"><tr><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr align="center"><td>苹果</td><td rowspan="2">5</td><td>20</td><td>100</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>菠萝</td><td>15</td><td>45</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>西瓜</td><td>6</td><td>6</td><td>36</td><td><img src="imgs/del.jpg" width="24" height="24"/></td></tr><tr align="center"><td>总计</td><td colspan="4">181</td></tr></table></body>
</html>

form表单

1.input type=“text” 表示文本框，其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
2. input type=“password” 表示密码框
3. input type=“radio” 表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
4. input type=“checkbox” 表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
5. select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项
6. textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
7. input type=“submit” 表示提交按钮
8. input type=“reset” 表示重置按钮
9. input type=“button” 表示普通按钮

<html><head><title>表单标签的学习</title><meta charset="UTF-8"></head><body><form action="demo04.html" method="post">昵称：<input type="text" value="请输入你的昵称"/><br/>密码：<input type="password" name="pwd"/><br/>性别：<input type="radio" name="gender" value="male"/>男<input type="radio" name="gender" value="female" checked/>女<br/>爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football" checked/>足球<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>星座：<select name="star"><option value="1">白羊座</option><option value="2" selected>金牛座</option><option value="3">双子座</option><option value="4">天蝎座</option><option value="5">天秤座</option></select><br/>备注：<textarea name="remark" rows="4" cols="50"></textarea><br/><input type="submit" value=" 注 册 "/><input type="reset" value="重置"/><input type="button" value="这是一个普通按钮"/></form></body>
</html>