Day13Day14_学点儿HTML_基本标签、div和span、table、form

1 基本标签

HTML：超文本标记语言定义页面结构
CSS：层叠样式表页面显示的样式、排版 BootStrap
JS： JavaScript 界面交互(动态交互、逻辑) JQuery

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/28 下午9:41 ~ 2024/3/29 上午9:24~ Modified date: 2024/3/29 上午9:24--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello Html11</title>
</head>
<body><!--标题 headline--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--p:paragraph--><p>京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官 [1]  。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。</p><p>王老师是Java讲师,朱老师是Java讲师</p><img src="img/baidu.png"/><img src="img/baidu.png" width="100px" height="100px"/><!-- <br></br> --><br/><!-- 换行 --><!--a:超链接--><a href="http://www.baidu.com">跳转到百度</a><a href="http://www.baidu.com" target="_blank">跳转到百度</a><!--无序列表  ul：unordered listli：list item--><ul><!-- 用的多 --><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ul><!--有序列表    ol：ordered list    --><ol><li>北京</li><li>上海</li><li>广州</li><li>深圳</li></ol>
</body>
</html>

在这里插入图片描述

2 div和span

div division：div里面所有的元素都在div区域里面 div里面可以嵌套别的标签
div独占一行
两个div并列一行显示的多种方法
在这里插入图片描述
span:功能类似于div，但是不能独占一行

块级元素block： 单独成为一行。h、ul、ol、div
行内元素inline： 不能独占一行，可以和其他元素并排。img、a、span、input
u(underline): 下划线
i(italic): 斜体
b(bold): 粗体

3 空格折叠

常用符号
< less than <
> great than >
© ©
<h1> 在html页面输出： <h1>
  空格
&ensp; 长空格

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 上午9:26 ~ 2024/3/29 上午10:14~ Modified date: 2024/3/29 上午10:13--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style><!-- 在这里写样式 --></style>
</head>
<body>锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦<div>Hello Div1</div><div>Hello Div2</div><div><div>Hello Div1</div><div>Hello Div2</div></div><span>Span1</span><span>Span2</span><br/><span style="color: red;">山东省青岛市城阳区春阳路大润发</span><br/><!--    u(underline):下划线  i(italic):斜体  b(bold):粗体--><span><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span><div><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></div><br/><span style = "color: green"><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span><!-- 现在不建议了，耦合   后期用CSS做  --><!--样式   和   内容  分开--><!--水平线--><div><!-- 空格折叠现象普通的空格在html里面如果连续出现多个会被当成一个空格，如果想显示多个连续的空格就需要使用特殊的符号&nbsp;    Non-breaking Space--><hr/>锄禾日&nbsp;&nbsp;当午<br/><!--自己写的回车换行最后成了空格-->汗滴禾&ensp;下土<br/>谁知盘    中餐<br/>粒粒皆    辛苦<br/>&copy;&copy;&copy;<hr><h1>fasfas</h1>&lt;h1&gt;asda&lt;/h1&gt;</div>
</body>
</html>

在这里插入图片描述

4 表格table

th：table head
tr：table row
td：table data 单元格
在这里插入图片描述

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 上午10:16 ~ 2024/3/29 上午10:29~ Modified date: 2024/3/29 上午10:29--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table width="500px" border="1" cellspacing="0"><tr><th>讲师名称</th><th>所教班级</th></tr><tr><td>讲师名称</td><td>所教班级</td></tr><tr><!--table rou--><td>朱老师</td><td>Java</td></tr><tr><!--table rou--><td>王老师</td><td>UI</td></tr><tr><!--table rou--><td>李老师</td><td>H5</td></tr></table><hr><table width="500px" border="1" cellspacing="0"><tr><th>讲师名称</th><th>所教班级</th></tr><tr><td>讲师名称</td><td>所教班级</td></tr><tr><!--table rou--><td rowspan="2">朱老师</td><td>Java</td></tr><tr><!--table rou-->
<!--            <td>王老师</td>--><td>UI</td></tr><tr><!--table rou--><td>李老师</td><td>H5</td></tr></table><br><table width="500px" border="1" cellspacing="0"><tr><th>讲师名称</th><th>所教班级</th></tr><tr><td>讲师名称</td><td>所教班级</td></tr><tr><!--table rou--><td colspan="2">朱老师</td>
<!--            <td>Java</td>--></tr><tr><!--table rou--><td>王老师</td><td>UI</td></tr><tr><!--table rou--><td>李老师</td><td>H5</td></tr></table><br><table border="1" cellspacing="0" width="500px"><tr><td>ID</td><td>name</td><td>age</td><td>gender</td></tr><tr><td>1</td><td>lisi</td><td>24</td><td>male</td></tr><tr><td>2</td><td>wangwu</td><td>24</td><td>female</td></tr><tr><td>3</td><td>wangwliu</td><td>24</td><td>male</td></tr></table>
</body>
</html>

在这里插入图片描述

5 表单form

<!--~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。~ Copyright @TangXJ~ Created by TangXJ~ Created&Used date: 2024/3/29 上午10:43 ~ 2024/3/29 上午11:24~ Modified date: 2024/3/29 上午11:24--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="http://"><table border="1" cellspacing="0"><tr><td>用户名: </td><td><input type="text" value="只读默认名" readonly="readonly"/></td></tr><tr><td>密码: </td><td><input type="password"/></td></tr><tr><td>性别: </td><td><input type="radio" name="gender"/>男<!--radio 本身就是互斥  name实现具体的类之间互斥--><input type="radio" name="gender"/>女<input type="radio" name="gender" checked="checked"/>n</td></tr><tr><td>城市: </td><td><select><option>青岛</option><option>济南</option><option selected="selected">临沂</option></select></td></tr><tr><td>兴趣爱好: </td><td><input type="checkbox" name="likes" checked>音乐<br/><input type="checkbox" name="likes">爬山<br/><input type="checkbox" name="likes">看书<br/></td></tr><tr><td>自我介绍</td><td><textarea>默认内容</textarea></td></tr><tr><td colspan="2"><input type="checkbox"> 同意该协议</td></tr><tr><td><button>注册bt</button><input type="submit" value="注册sbmt"></td><td><button>重置bt</button><!--恢复默认值---><input type="reset" value="重置sbmt"></td></tr></table>用户名: <input type="text"/><!--行内元素--><br/>密码: <input type="password"/></form>
</body>
</html>