文章目录
一,HTML
–1,概述
是超文本标记语言,专门用来完成网页的制作
是由大量的 标记/标签 组成的,<???>
结构: 文档声明行, 头部分使用head标签, 体部分使用body标签(控制浏览器要展示的内容)
–2,入门案例
<!DOCTYPE html> <!-- 文档声明行,表示这是一个HTML网页 -->
<html> <!-- HTML网页文件里的,根元素/标签,成对儿出现的标签 -->
<head> <!-- 网页的头部分,用来描述网页的信息 -->
<meta charset="utf-8"> <!-- 网页要使用的编码,防止中文乱码 -->
<title>hello</title> <!-- 网页的标题 -->
</head>
<body><!-- 网页的体部分,用来控制网页中即将展示的数据 -->
test html~~ 你 好 <br />
test html~~ 你好
test html~~ 你好
test html~~ 你好
<!-- br是HTML中的换行符, 是HTML里的空格 -->
</body>
</html>
二,HTML的常用标签
–1,标题 & 列表 & 图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 3.图片标签
总结:src属性用来指定图片的路径,width属性用来指定图片的宽度,
单位是像素px,height属性用来指定图片的高度
-->
<img src="3.jpg" width="200px" height="20%"/>
<img src="3.jpg" width="200px" height="20%"/>
<img src="3.jpg" width="200px" height="20%"/>
<!-- 2.列表标签 有序:ol li 无序:ul li
有序:ol li ,ol用来定义有序列表orderlist ,li是列表项
无序:ul li ,ul用来定义无序列表unorderlist ,li是列表项
-->
<ol>
<li>我是1号元素</li>
<li>我是1号元素</li>
<li>我是1号元素</li>
</ol>
<ul>
<li>我是2号元素</li>
<li>我是2号元素</li>
<li>我是2号元素</li>
</ul>
<!-- 1.标题标签 h1大~h6小,自动换行,字体加粗. -->
<h1>我是1号标题</h1>
<h2>我是1号标题</h2>
<h3>我是1号标题</h3>
<h4>我是1号标题</h4>
<h5>我是1号标题</h5>
<h6>我是1号标题</h6>
</body>
</html>
–2,a & input 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 4.input标签:输入框 -->
普通输入框:<input type="text"/> <br />
密码输入框:<input type="password"/> <br />
日期输入框:<input type="date"/> <br />
星期输入框:<input type="week"/> <br />
数字输入框:<input type="number"/> <br />
邮箱输入框:<input type="email"/> <br />
普通按钮:
<input type="button" value="保存"/>
<button>保存</button><br />
提交按钮:可以提交数据,指把前端的数据提交给后端
<input type="submit" value="提交"/>
<button type="submit">提交</button><br />
单选框:<input type="radio" />男 <br />
多选框:<input type="checkbox" />杨幂
<br />
<br />
<br />
<!-- 1.超链接标签
href属性用来指定跳转路径,target属性用来指定打开方式(默认是当前窗口_self)
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!-- 2.锚定:回到指定的位置,通过#获取name属性的值 -->
<a name="top">我是顶部</a>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<h3>北京富婆通讯录</h3>
<a href="#top">点我,回到顶部</a>
<!-- 3.实现图片的点击跳转 -->
<a href="http://www.baidu.com">
<img src="3.jpg" width="100px" height="80px"/>
</a>
</body>
</html>
–3,table 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 2.练习表格: th:表头标签(加粗.居中) ,colspan:列合并, rowspan:合并行-->
<table border="1px" bgcolor="yellow" cellspacing="0">
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
<!-- 1.表格标签
总结:table是向网页中添加表格,tr是表格里的行,td是行里的列元素
属性:border用来设置边框,width设置宽度,height高度,
cellspacing单元格的间距 ,bgcolor是背景色
-->
<table border="2px" width="500px" height="100px"
cellspacing="0" bgcolor="pink">
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
三,form 表单标签
–1,概述
只有form标签可以提交数据. 表单标签form比表格标签多了提交功能.
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<form>
<h1>注册表单</h1>
<table width="500px" border="1px"
bgcolor="lightgray" cellspacing="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- 下拉框 select option -->
<select>
<option>请选择</option>
<option>北京</option>
<option>上海</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>这是文本域~</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–3,添加name,提交数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签</title>
</head>
<body>
<!-- 1.表单标签用来提交数据:
a,要求:必须用表单标签 + 必须有提交按钮 + 必须有name属性
b,提交的数据的格式:
http://127.0.0.1:8848/cgb2110/test05.html?user=jack&pwd=123
c,?user=jack&pwd=123这些是数据,都别拼接在?之后
user和pwd是网页上name属性的值 ,jack和123是用户在网页中输入的数据
d,提交数据的两种方式? method属性, get 和 post
get方式:是method的默认值,把数据不在地址栏展示了,不安全,数据大小受限.
post方式: method="post"即将使用post方式来提交数据,解决了get的问题.
e,action属性.
指定这次的数据交给谁处理呢?可以写一个路径是一个程序的访问方式
-->
<form method="post" action="#">
<h1>注册表单</h1>
<table width="500px" border="1px"
bgcolor="lightgray" cellspacing="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd"/>
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" name="nick"/>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="mail"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="like"/>篮球
<input type="checkbox" name="like"/>足球
<input type="checkbox" name="like"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- 下拉框 select option -->
<select name="city">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>这是文本域~</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
