超链接、列表、Input、form
1.超链接
<body>
<!--
开始标记和结束标记中间的内容,是点击触发的内容,页可以是图片文字等
注意 必须有href属性,才可以点击
只要该链接在页面中是不可点击的状态,说明要么没有href属性,要么拼写错误
默认当前页面打开该链接,可以通过target指定 _blank是新窗口打开
title属性 悬停提示文字
-->
<a title="百度一下你就知道" href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="./test.html">test</a>
</body>
2.base标签
在head中设定
<head>
<base target="_blank">
</head>
<body>
<a href="" target="_self">6</a>
</body>
3.锚点
返回到选定id的行
<body>
<p id="top"></p>
<a href="#a1">早年经历</a><a href="#a2">演艺经历</a><a href="#a3">主要作品</a>
<h2 id="a1">早年经历</h2>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<h2 id="a2">演艺经历</h2>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<h2 id="a3">主要作品</h2>
<p>111</p><p>111</p><p>111</p><p>111</p><p>111</p>
<a href="#top">回到首部</a>
</body>
4.特殊字符
5.列表
<body>
无序列表 :
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
有序列表 :
<ol type="A">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ol>
城市 :
<dl>
<dt>河北</dt>
<dd>石家庄</dd>
<dd>沧州</dd>
<dd>保定</dd>
<dt>北京</dt>
<dd>朝阳区</dd>
<dd>房山</dd>
</dl>
</body>
6.table
<body>
<!--
cellspacing:设置单元格之间的距离
cellpadding:内容到单元格之间的距离
align:水平方向对齐
-->
<table border=1 cellspacing="0" cellpadding="10" width=500 align="center" >
<caption><h2>学生信息表</h2></caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
</table>
</body>
7.合并单元格
colspan 列合并
rowspan 行合并
<th colspan="3">个人信息</th>
<th colspan="2">成绩</th>
<td rowspan="2">Java</td>
8.Input
<body>
<table border="1" align="center" width="500" cellspacing="0" cellpadding="10">
<!--
action:把数据提交到哪去
method:提交的方式,get/post
get:get请求方式,明文传输,相对不安全,传递数据较少,效率高
post:post请求方式,不是明文传输,相对安全,传递数据较多,效率低
向服务器索要数据,使用get <模糊查询就行>
向服务器发送数据,使用post <安全的数据>
-->
<form action="http://www.baidu.com" method="GET" >
<!--
name 和 value 用于数据提交的时候传递数据
name=value
name :就是定义的名字,比如我们这里写的username
那么服务端就可以通拓username获取我们输入的数据
value:就是输入框中的数据,用户的输入最终会赋值给value属性
type : 定义输入框的类型
text 普通输入域
password 密码输入域
radio 单选,如果有多个radio,他们的name属性必须一致
checked="checked" 单选框的默认选择项
checkbox 复选框
checked="checked" 复选框的默认选择项和单选一样
file 选择文件,比如文件上传等
button 普通按钮,没有提交功能
submit 提交按钮,会执行action提交数据
reset 重置按钮
imgage 图片代替提交按钮
button标签,按钮,放到form中,会提交表单
label: 无语义标签,加不加不会有任务样式上的变化
当for的值和对应的输入框的id值一致的时候
点击label标签中的内容就会在对应的输入框中获取焦点(输入状态)
-->
<tr>
<td align="right">
<label for="username">用户名:</label>
</td>
<td align="letf"><input size="50" type="text" name="username" value="" placeholder="请输入用户名"><br></td>
</tr>
<tr>
<td align="right">密码:</td>
<td align="left"><input type="password" name="" id=""><br></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" checked="checked" value="女">女
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<input type="checkbox" name="like" id="" value="篮球">篮球
<input type="checkbox" name="like" id="" value="学习">学习
<input type="checkbox" name="like" id="" value="打游戏">打游戏
</td>
</tr>
<tr>
<td align="right">图片:</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td align="right">个性签名</td>
<td>
<!-- 多行文本域,cols显示的列数,rows显示的行数-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right">出生年月日:</td>
<td>
<!--
一个select中至少有一个option
select定义下拉列表,option是下拉选项
select进行数据传递的时候,使用的是select的name=option的value
y=3
selected="selected" 默认选项
multiple:支持选择多个,按ctrl
-->
<select multiple name="y" id="">
<option value="">选择年份</option>
<option value="1">1991</option>
<option value="2" selected="selected">1992</option>
<option value="3">1993</option>
<option value="4">1994</option>
</select>
<select name="m" id="">
<option value="">选择月份</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<button>button按钮(能提交)</button>
<!-- <input type="button" value="普通按钮"> -->
<input type="submit" value="submit提交">
<input type="reset" value="重置"
</td>
</tr>
<tr>
<td><button>提交</button></td>
</tr>
</form>
</table>
</body>
9.百度搜索
可以在输入框中输入内容后直接跳转到百度搜索
<body>
<form action="https://www.baidu.com/s">
<input type="text">
<button>搜索</button>
</form>
</body>