HTML基础（二）

程序员文章站 2022-03-07 18:12:24

...

表格标签 table

<table></table> 用来定义表格
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
表格相关的属性如下：
HTML基础（二）

   <!DOCTYPE html>
    <html lang="en">
    	<head>
       	 	<meta charset="UTF-8">
        	<title>大云汉IT表格</title>
    	</head>
    	<body>
    		<table cellspacing="3" cellpadding="2" border="1" align="left">
        		<tr>
            		<td>大云汉IT教育第一行第1列</td>
            		<td>大云汉IT教育第一行第2列</td>
            		<td>大云汉IT教育第一行第3列</td>
        		</tr>
       		    <tr>
            		<td>大云汉IT教育第二行第1列</td>
            		<td>大云汉IT教育第二行第2列</td>
            		<td>大云汉IT教育第二行第3列</td>
        	    </tr>
    		</table>
    	</body>
    </html>

表头标签

表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
下图即是设置了表头的表格。
HTML基础（二）

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>大云汉IT教育表头</title>
	</head>
	<body>
		<table border="1" cellspacing="1" cellpadding="10" align="center">
    		<caption>caption标签是啥？大云汉IT？</caption>
    		<tr>
        		<th>属性</th>
        		<th>含义</th>
        		<th colspan="2">取值</th>
   	  	    </tr>
        	<tr>
        		<th>border</th>
        		<td>单元格边框</td>
        		<td>像素值，默认0</td>
        		<td rowspan="3">rowspan从当前单元格向下跨三行</td>
    		</tr>
    		<tr>
        		<th>cellspacing</th>
        		<td>单元格与单元格边框的间距</td>
        		<td>像素值，默认2</td>
   	 		</tr>
    		<tr>
        		<th>cellpadding</th>
        		<td>单元格内容与单元格边框的间距</td>
        		<td>像素值，默认1</td>
    		</tr>
		</table>
	</body>
</html>

表格结构(了解)

使用表格时，可以将表格分为头部、主体、页脚（页脚有兼容问题）
<thead></thead> 用来定义头部。必须位于 <table></table> 中，一般包含网页的logo和导航等头部信息。
<tbody></tbody> 用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容。
HTML基础（二）

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>thead+tbody</title>
	</head>
	<body>
		<table cellspacing="2" cellpadding="10" align="center" border="1">
    		<thead>
    			<tr>
        			<th>属性名称</th>
        			<th>含义</th>
        			<th>取值</th>
    			</tr>
   		    </thead>
    	    <tbody>
    			<tr>
        			<td>colspan</td>
        			<td>向右横跨几列</td>
        			<td>数值</td>
    			</tr>
    			<tr>
        			<td>rowspan</td>
        			<td>向下竖跨几行</td>
        			<td>数值</td>
    			</tr>
    		</tbody>
		</table>
	</body>
</html>

网页元素检查（开发者模式）

基于 chrome 浏览器，在页面中右击，然后选择 “检查”
HTML基础（二）
表格标题标签 caption
<caption></caption> 标签用来定义标题的标签
必须写在 <table></table> 中，和 <thead></thead>平级
相关代码可以参考表头标签的代码。

单元格合并
适用于 <td></td>、<th></th>
colspan 跨列合并（水平合并）
rowspan 跨行合并（垂直合并）
相关代码可以参考表头标签的代码。

表单标签

html 中一个完整的表单通常由表单元素、提示信息、表单域（即多个表单的父容器）三部分组成。
HTML基础（二）
（1）input 输入标签
<input/> 为单标签（自闭合标签）
type 是其基本属性，用来控制输入的类型
input 、br、hr 、img、 base 都是单标签

多个 radio 使用相同的 name ，则表示这是一组数据，这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>input标签</title>
 	</head>
	<body>
    	用户名：<input type="text" maxlength="15"/>
    	<br/>
    	<!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
    	密　码：<input type="password"/>
    	<br/>
    	<!--使用name 限定了一组内容，从而实现单选-->
    	性　别：
    	<input type="radio" name="sex" checked="checked"/> 男
    	<input type="radio" name="sex"/> 女
    	<br/>
    	爱　好：
    	<input type="checkbox" name="hobby"/> 看电影
    	<input type="checkbox" name="hobby"/> 读书
    	<br/>
    	<input type="button" value="普通按钮"/>
    	<br/>
    	<input type="submit" value="提交按钮"/>
    	<br/>
    	<input type="reset" value="重置按钮"/>
    	<br/>
    	<input type="image" src="../image/imgButton.png"/>
    	<br/>
    	请选择文件：<input type="file"/>
	</body>
</html>

效果图如下：
HTML基础（二）
(2）label 标签(理解)
label 标签为 input 标签定义标注/标签
用来绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获取焦点
通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>label的使用</title>
 	</head>
	<body>
    	<!--label 中直接包裹 input,可以实现绑定-->
    	<label>点击此处文本，用户名输入框会获取焦点 <br> 用户名：<input type="text"/></label>
    	<br/>
    	<hr/>
    	<!--使用 label 的 for 属性绑定input-->
    	<label for="#two">点击此处文本，密码输入框会获取焦点</label>
    	<br/>
    	用户名：<input type="text"/>
   	 	<br/>
    	密　码：<input type="text" id="#two"/>
	</body>
</html>

(3）textarea 文本域标签
<textarea></textarea>用来做大量文本的输入，支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>textarea标签</title>
	</head>
	<body>
    	请输入评论内容：
    	<br/>
    	<textarea ></textarea>
	</body>
</html>

效果图如下：
HTML基础（二）
（4）下拉菜单 <select></select>
<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
<select></select> 中至少包含一对 <option></option>
在 option 中定义了属性 selected=“selected” 之后，表示该项被默认选中

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>select标签</title>
	</head>
	<body>
    	设置家乡
    	<select >
        	<option>选择省份</option>
        	<option>山东</option>
        	<option>内蒙古</option>
        	<option>黑龙江</option>
        	<option>山西</option>
    	</select>
   	 	<select>
            <option>济南</option>
            <option selected="selected">临沂</option>
            <option>聊城</option>
            <option>莱芜</option>
            <option>青岛</option>
    	</select>
	</body>
</html>

效果图如下：
HTML基础（二）
(5）表单域 <form></form>
该标签用来定义表单域，以实现用户信息的收集和传递，form 中的内容通常都会被提交到服务器。
基本语法格式：

   <form action="url地址" method="提交方式" name="表单名称">
         ...各种表单控件...
     </form>

常用属性有action、method、name
action : 指定接收并处理表单信息的服务器url地址
method : 表单数据的提交方式。分为 post / get
name : 指定表单名称，用来区分页面中的多个表单

每个表单都应该有自己的表单域
使用form 包裹之后点击提交按钮才有提交的动作

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>form表单域</title>
    </head>
    <body>
        <!--使用 form 包裹之后，提交按钮和图片按钮点击时就有效果了-->
        <form action="https://www.baidu.com" method="post" name="userInfo">
            用户名：<input type="text" maxlength="15"/>
            <br/>
            <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小-->
            密　码：<input type="password"/>
            <br/>
            <!--使用name 限定了一组内容，从而实现单选-->
            性　别：
            <input type="radio" name="sex" checked="checked"/> 男
            <input type="radio" name="sex"/> 女
            <br/>
            爱　好：
            <input type="checkbox" name="hobby"/> 看电影
            <input type="checkbox" name="hobby"/> 读书
            <br/>
            <input type="button" value="普通按钮"/>
            <br/>
            <input type="submit" value="提交按钮"/>
            <br/>
            <input type="reset" value="重置按钮"/>
            <br/>
            <input type="image" src="../image/imgButton.png"/>
            <br/>
            请选择文件：<input type="file"/>
        </form>
	</body>
</html>

六、HTML5新标签及新特性
HTML基础（二）

HTML演变

1、文档类型设定
即 <!Doctype > 对应的属性值。
HTML , 对应早期的 HTML4.0.1, 基本结构如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Document</title>
     </head>
     <body>
     </body>
 </html>

XHTML ，其基本结构如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  	<head>
      	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      	<title>Document</title>
  	</head>
  	<body>
  	
  	</body>
  </html>

HTML5 ，其基本格式如下

  <!DOCTYPE html>
  <html lang="en">
  	<head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  	</head>
  	<body>
  
  	</body>
  </html>

在webStorm 中，如果想查看上述三种类型的基本格式，可以按如下步骤：new > file > 输入文件名为 xxx.html > 分别输入 html:4s / html:xt / html:5 然后回车即可
如果想查看某个页面使用了两种 HTML，可以右击，然后选择查看网页源码，然后查看<!Doctype > 中的信息即可
2、字符设定
XHTML、HTML中设置字符集时使用：

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5 中设置字符集时使用：

3、常用新标签

HTML基础（二）
(1）datalist 示例
datalist 中包裹 option
datalist 与 input 关联后，input 就具备的 select 的效果，同时具有了输入联想功能。

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>inputlist</title>
	</head>
	<body>
    	<input type="text" value="请输入姓名" list="names">
    	<datalist id="names">
        	<option>张三</option>
        	<option>李四</option>
        	<option>王五</option>
    	</datalist>
	</body>
</html>

（2）fieldset 示例
fieldset 默认宽度满屏
效果图如下：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190531105807240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RheXVuaGFuSVQ=,size_16,color_FFFFFF,t_70)
<!DOCTYPE html>
	<html lang="en">
		<head>
    		<meta charset="UTF-8">
    		<title>fieldset</title>
		</head>
		<body>
    	<fieldset>
        	<legend>用户登录</legend>
        	用户名:<input type="text"/>
        	<br/>
        	密　码:<input type="password"/>
    	</fieldset>
	 </body>
</html>

HTML基础（二）

表格标签 table

表头标签

表格结构(了解)

网页元素检查（开发者模式）

表单标签

HTML演变

浅析C# 基础语法的使用

Android-Zxing实现二维码的扫描与生成

二叉树的遍历算法(详细示例分析)

2020年高考录取分数线一本二本大学最全汇总（2021年参考）

Java class文件格式之数据类型（二)_动力节点Java学院整理

HTML学习之轮播图

Java语法基础之函数的使用说明

python框架django基础指南

oracle逐步学习总结之oracle分页查询（基础三）

iOS10推送之基础知识(必看篇)