表格

给表格加入CSS样式,添加表格边框

语法:
  1. <style type="text/css">
    2. 

  2. table tr td,th{border:1px solid #000;}
    3. 

  3. </style>


摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法:
  1. <table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
  1. <table>
    2. 

  2.     <caption>标题文本</caption>
    3. 

  3.     <tr>
    4. 

  4.         <td>…</td>
    5. 

  5.         <td>…</td>
    6. 

  6.         …
    7. 

  7.     </tr>
    8. 

  8. …
    9. 

  9. </table>

举个栗子:
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta charset="UTF-8">
    5. 

  5. 		<title>table</title>
    6. 

  6. 		<style type="text/css">
    7. 

  7. 			*{
    8. 

  8. 				padding: 0;
    9. 

  9. 				margin: 0;
    10. 

  10. 			}
    11. 

  11. 			th,tr{
    12. 

  12. 				border: 1px solid #000;
    13. 

  13. 				width: 100px;
    14. 

  14. 				height: 30px;
    15. 

  15. 			}
    16. 

  16. 			table{
    17. 

  17. 				border-collapse: collapse;
    18. 

  18. 				margin: 100px auto;
    19. 

  19. 			}
    20. 

  20. 		</style>
    21. 

  21. 	</head>
    22. 

  22. 	<body>
    23. 

  23. 		<table>
    24. 

  24. 			<thead>
    25. 

  25. 				<tr>
    26. 

  26. 					<th>1</th>
    27. 

  27. 					<th>2</th>
    28. 

  28. 				</tr>
    29. 

  29. 			</thead>
    30. 

  30. 			<tbody>
    31. 

  31. 				<tr>
    32. 

  32. 					<th>11</th>
    33. 

  33. 					<th>22</th>
    34. 

  34. 				</tr>
    35. 

  35. 			</tbody>
    36. 

  36. 			<tfoot>
    37. 

  37. 				<tr>
    38. 

  38. 					<th>33</th>
    39. 

  39. 					<th>44</th>
    40. 

  40. 				</tr>
    41. 

  41. 			</tfoot>
    42. 

  42. 		</table>
    43. 

  43. 	</body>
    44. 

  44. </html>


链接 <a>标签

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法:
  1. <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系通过使用CSS可以调整这个属性.

在新建的浏览器窗口中打开链接:
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
语法:
  1. <a href="目标网址" target="_blank">click here!</a>
使用mailto在网页中链接Email地址:
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

插入图片 <img>标签

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。

语法:
  1. <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

参数说明：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

表单 与用户交互

表单标签

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法:
  1. <form   method="传送方式"   action="服务器文件">
参数说明:

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

举个栗子:

  1. <form    method="post"   action="save.php">
    2. 

  2.         <label for="username">用户名:</label>
    3. 

  3.         <input type="text" name="username" />
    4. 

  4.         <label for="pass">密码:</label>
    5. 

  5.         <input type="password" name="pass" />
    6. 

  6. </form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。


文本输入框,密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法:
  1. <form>
    2. 

  2.    <input type="text/password" name="名称" value="文本" />
    3. 

  3. </form>
参数说明:

1、type：

   当type="text"时，输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)


举个栗子:
  1. <form>
    2. 

  2.   姓名：
    3. 

  3.   <input type="text" name="myName">
    4. 

  4.   <br/>
    5. 

  5.   密码：
    6. 

  6.   <input type="password" name="pass">
    7. 

  7. </form>

文本域,支持多行文本输入

当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法:
  1. <textarea  rows="行数" cols="列数">文本</textarea>
参数说明:

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

举个栗子:

  1. <form  method="post" action="save.php">
    2. 

  2.         <label>联系我们</label>
    3. 

  3.         <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    4. 

  4. </form>

注意:
注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

使用单选框,复选框.让用户选择

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
语法:
  1. <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
参数说明:
  1. 1、type:
    2. 

    3. 

  3.    当 type="radio" 时，控件为单选框
    4. 

    5. 

  5.    当 type="checkbox" 时，控件为复选框
    6. 

    7. 

  7. 2、value：提交数据到服务器的值（后台程序PHP使用）
    8. 

    9. 

  9. 3、name：为控件命名，以备后台程序 ASP、PHP 使用
    10. 

    11. 

  11. 4、checked：当设置 checked="checked" 时，该选项被默认选中
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用

使用下拉列表框,节省空间

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选

1、value：

2、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

使用下拉列表框进行多选

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

使用提交按钮,提交数据

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮
语法:
  1. <input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字


使用重置按钮,重置表单信息

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法:
  1. <input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字


form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法:
  1. <label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
举个栗子
  1. <form>
    2. 

  2.   <label for="male">男</label>
    3. 

  3.   <input type="radio" name="gender" id="male" />
    4. 

  4.   <br />
    5. 

  5.   <label for="female">女</label>
    6. 

  6.   <input type="radio" name="gender" id="female" />
    7. 

  7.   <label for="email">输入你的邮箱地址</label>
    8. 

  8.   <input type="email" id="email" placeholder="Enter email">
    9. 

  9. </form>










HTML+CSS笔记 表格,超链接,图片,表单的更多相关文章

  1. layui数据表格使用（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）

    表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...

  2. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  3. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  4. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

  5. Django学习笔记（五）—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  6. 使用CSS来渲染HTML的表单元素

    效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> ...

  7. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

  9. 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

随机推荐

  1. HDU 4366 Successor（树链剖分+zkw线段树+扫描线）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=4366 [题目大意] 有一个公司,每个员工都有一个上司,所有的人呈树状关系,现在给出每个人的忠诚值和 ...

  2. UVA-548Tree（二叉树的递归遍历）

    Tree Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu Submit Status Des ...

  3. HDU3415：Max Sum of Max-K-sub-sequence(单调队列)

    Problem Description Given a circle sequence A[1],A[2],A[3]......A[n]. Circle sequence means the left ...

  4. Asp.net 提供程序模型

    需要说明一下几点 1.什么是提供程序? 2.ASP.NET 4.5 中的提供程序 3.配置提供程序 有一下几种存储状态的方式 1.应用程序状态 2.会话状态 3.高速缓存状态 4.cookie 5.查 ...

  5. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  6. [转]Win7、Windows Server 2008下无法在Windows Service中打开一个已经存在的Excel 2007文件问题的解决方案

    昨天,组里一个小朋友告诉我,他写的报表生成服务中无法打开一个已经存在的Excel 2007文件,他的开发环境是Win7.Visual Studio .Net 2008(Windows Server 2 ...

  7. Problem B: Excuses, Excuses!

    Description Judge Ito is having a problem with people subpoenaed for jury duty giving rather lame ex ...

  8. HDU2084-数塔

    描述: 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 代码: 简单的动态规划 ...

  9. input file 模拟

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. [LeetCode]题解（python）：072-Edit Distance

    题目来源: https://leetcode.com/problems/edit-distance/ 题意分析: word1最少通过多少步可以变成word2.word1只能进行一下的操作.a)插入一个 ...