HTML Day2

最新推荐文章于 2024-06-20 11:15:00 发布

JJ_Zhangjian

最新推荐文章于 2024-06-20 11:15:00 发布

阅读量257

点赞数

分类专栏： WEB前端文章标签： HTML

本文链接：https://blog.csdn.net/JJ_Zhangjian/article/details/90722060

版权

WEB前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

课程回顾

day02

超链接a

如果不写href属性则就是纯文本
文本超链接和图片超链接
target="_blank" 从新的窗口显示页面
页面内部跳转如果目的地有标签直接给标签添加id 如果没标签添加猫(空的a标签)

表格table

子标签：tr td th caption thead tbody tfoot
属性： table:border cellspacing cellpadding td:rowspan colspan

表单form

文本框 type=text name value readonly placeholder maxlength
密码框 type=password name value readonly placeholder maxlength
单选 type=radio name value id checked lable标签
多选 type=checkbox name value id checked lable标签
日期 type=date name
文件 type=file name
隐藏域 type=hidden name value
下拉选 select:name 子标签 option:value selected
文本域 textarea:name rows cols placeholder
提交按钮 type=submit value
重置按钮 type=reset value
自定义按钮 type=button value

课程day2详细内容

超链接a

如果a标签不写href属性则就是纯文本
target=_blank 开启新的窗口显示该页面，如果不写默认是从当前窗口跳转
如果a标签包裹文本内容则是文本超链接，如果包裹的是图片则是图片超链接

页面内部跳转

设置锚点用于定位

通过超链接跳转到锚的位置回到顶部
如果跳转的目的地有标签则直接给标签添加id属性即可

 <!--<br>换行显示   -->
 <a> 纯文本 </a>  																  <br>
 <a href="http://www.tmooc.cn"> 纯文本超链接  </a> 描述性文字：图太好看了                                          <br>
 <!--图片超链接  -->
 <a href="../imgs/1.jpg"> <img src="../imgs/img4.jpg"> </a>描述性文字                                 <br>
 <!-- target:目标 -->
 <a href="http://www.tmooc.cn" target="_blank">  超链接可返回   </a>描述性文字                       <br>
 
 <!-- 方式1：设置锚点用于定位 -->
 <a id="top">猫和老鼠：</a>														  <br>
 	这是一个凄凉的爱情故事，Tom爱上了Jerry 然后灯黑了，此处下面描述5千字               <br>
 	...<br>....<br>....<br>......
 	...<br>....<br>....<br>......
 	...<br>....<br>....<br>......
 	最终Jerry 离开了 Tom，故事结束!                                                  <br>
 <a href="#top"> 回到顶部</a>                                                      <br>
 
 <!-- 方式2：通过超链接跳转到锚的位置 -->	
 <a href="#1">1号美女</a>
 <a href="#2">2号美女</a>
 <a href="#3">3号美女</a>
 <a href="#4">4号美女</a>
   <img id="1" src ="../imgs/1.jpg" width=100%> 
   <img id="2" src ="../imgs/2.gif" width=100%> 
   <img id="3" src ="../imgs/j.jpg" width=100%>
   <img id="4" src ="../imgs/k.jpg" width=100%>

注：所有的程序都在body标签里

注意：
在这里插入图片描述

表格table

border边框的粗细
cellspacing：单元格间距和单元格距外边框的距离
cellpadding：单元格的内边距
跨行rowspan 跨列colspan
caption表格的标题
th table head 表头，加粗并居中

分区标签：thead tbody tfoot 对多行进行统一管理（比如统一添加样式）分区标签自身没有显示效果

  <table border="1" cellspacing="0" align="center" width="50%">
  	<!-- 表格标题 -->
  		<caption>订单列表</caption>
  		<thead>
  			<tr>
  				<!-- table head 表头  加粗并居中-->
  				<th>编号</th>
  				<th>名称</th>
  				<th>价格</th>
  			</tr>
  		</thead>
  		<tbody>
  			<tr>
  				<td>1</td>
  				<td>键盘</td>
  				<td>380</td>
  			</tr>
  			<tr>
  				<td>2</td>
  				<td>苹果手机</td>
  				<td>2000</td>
  			</tr>
  		</tbody>
  		<tfoot>
  			<tr>
  				<td>总价</td>
  				<td colspan="2">2380元</td>
  			</tr>
  		</tfoot>
  	</table>

</table>

订单列表
编号	名称	价格
1	键盘	380
2	苹果手机	2000
总价	2380元

表单form

作用：获取用户输入的各种数据把数据提交到服务器
主要学习有哪些控件：文本输入框、密码框、提交按钮、单选、多选、下拉选、日期选择器、文件选择器等
文本输入框 input type=text name value placeholder占位文本最大长度maxlength 只读readonly
密码框 input type=password name
单选 input type=radio name value 默认选中checked 通过label标签扩充点击范围
多选 input type=checkbox name value 属性和单选一样
日期 input type=date name
文件选择 input type=file name
隐藏域当需要给服务器提交数据但是此数据不需要给用户展示的时候使用 input type=hidden name value
下拉选 select:name 子标签 option:value selected默认选中
文本域 textarea:name rows行 cols列占位文本placeholder
提交按钮 input type=submit value修改文本内容
重置按钮 input type=reset value修改文本内容
自定义按钮 input type=button value修改文本内容

代码：

<!-- action：指定提交地址 -->
<form action="http://www.baidu.com">

<!-- name:任何控件都需要写，不写则不提交
	 value:设置默认值 
	 placeholder:占位文本
	 maxlength:最大长度
	 readonly:只读
	 -->

	用户名:<input type="text" name="username"
	value="xxx" placeholder="请输入您的用户名"
	maxlength="5" readonly="readonly"><br>

	密码:<input type="password" name="password"
	placeholder="请输入您的密码" maxlength="10"><br>

	<!-- checked默认选中 -->

	性别:<input type="radio" name="gender" 
	value="nan" id="nan"><label for="nan">男</label>
	<input type="radio" name="gender"
	 value="nv" checked="checked"
	  id="nv"><label for="nv">女</label> <br>

	 兴趣:<input type="checkbox" name="hobby" value="dlq" id="dlq"><label for="dlq">打篮球</label>
	 <input type="checkbox" name="hobby" value="ldm">撸代码
	 <input type="checkbox" name="hobby" value="gdx">搞对象 
	 <input type="checkbox" name="hobby" value="wz" checked="checked">王者农药 <br>

	 生日:<input type="date" name="birthday"><br>

	 靓照:<input type="file" name="pic"><br>

	 <!-- 隐藏域:当需要给服务器提交数据但是此数据
	 不需要给用户展示时使用隐藏域-->
	 <input type="hidden" name="xxx" value="yyy">

	 所在城市:
	 <select name="city">
	 	<option>请选择</option>
	 	<option value="bj">北京</option>
	 	<!-- selected：默认选中 -->
	 	<option value="sh"
	 		 selected="selected">上海</option>
	 	<option value="gz">广州</option>
	 </select><br>

	 个人介绍:
	 <!-- rows行 cols列 -->
	 <textarea name="intro" rows="3" cols="20"
	  placeholder="说点儿啥..."></textarea><br>

	<input type="submit" value="注册">

	<input type="reset" value="还原"> 

	<input type="button" value="这是按钮">
</form>