HTML基础知识概览2

最新推荐文章于 2023-07-10 12:05:48 发布

地铁一号线彭于晏

最新推荐文章于 2023-07-10 12:05:48 发布

阅读量151

点赞数

文章标签： HTM

本文链接：https://blog.csdn.net/weixin_45598486/article/details/100529901

版权

HTML基础知识概览2

一、表格标签及属性
1. table属性
align 对齐方式，后可加center、left、right等。
bgcolor 背景色b
ackground 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距（表格边框与内容的距离）一般情况写0
2.tr属性
Align 水平对齐left/center/ rightvalign
垂直对齐Top（上）/middle（中）/bottom（下）
bgcolor 背景色
3.td的基本属性
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并合并多列
rowspan 垂直合并合并多行
4.表头th标签
<th>是特殊的单元格，文字会自动加粗、居中。它的用法是取代的位置即可，以前对其学习中并不熟悉。详情见下例。
5.表格主体tbody标签
T head 表格页眉（头部）只能出现一次
T body 表格主体可以出现多次
T foot 表格页脚（结尾）只能出现一次
以上三个标签结合使用，可将表格中的一行或几行合成一组。

th,tbody用法例如下：

 <body>
  <table border="1" cellspacing="0" cellpadding="0"height="500px" width="600px">
   <thead>
    <caption align="center">最喜欢的歌曲</caption>
   </thead>
   <tbody>
   <th>歌名</th>
   <th>歌手</th>
   <tr>
    <td>真的爱你</td>
    <td>beyond</td>
    
   </tr>
   <tr>
    <td>红豆</td>
    <td>王菲</td>
   </tr>
   <tr>
    <td>倩女幽魂</td>
    <td rowspan="2">张国荣</td>
    <tr>
    <td>有谁共鸣</td>
    </tr>
   <tfoot>
    <td align="center" colspan="2">总计4收</td>
   </tfoot>
   
   </tbody>
   
  </table>
 </body>

二、表单属性
概念：表单在网页中主要负责数据采集功能，表单的标记是:<form></form>。
表单属性：

action属性：设置表单的提交地址（表单提交的url）指定表单提交后由服务器上的哪个处理程序进行处理。
method属性：设置表单的提交方法，属性值为get、post提交方式，一般为安全起见采用post属性值。
name属性：设置表单的名称。
target属性：设置表单的打开方式，属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank在新窗口打开。
输入标记：
表单元素中输入标签是****,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中）。

三、表单控件少见属性汇总
1.密码框密码长度限制，maxlength。

<label for="mm">密码：</label><input type="password" name="pass" maxlength="5" id="mm" size="4"/><br />

2.分组分块

`<fieldset><!--分组-->	<legend>用户登录</legend`></fieldset>

3.单选框
单选框主要是让网页浏览者在一组选项里选择一个。 Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称如：【name=“gender”】。
代码格式：

    性别：<input type="radio" name="sex"  checked />男

          <input type="radio" name="sex"  />女

隐藏域和文件域：

隐藏域：

图像域：

5.文件域
文件域主要是让网页浏览者上传文件。代码格式如下：

<input type="file" name="fileuplode"  /> <br />

6.按钮

input重置按钮：<input type="reset" value="重置" /><br />
input提交按钮：<input type="submit" value="提交" /><br />
input普通按钮：<input type="button" value="普通按钮"  onclick="alert('hello')"/><br />

7.图片域
图像域标记代码格式如下:<input type=”image” src=”图片的路径” />

8.下拉列表
下拉菜单选中状态给option添加 selected
用法如下：

籍贯：<select name="jg" value="jiguan">
   <option value="">请选择</option>
   <option value="1">上海</option>
   <option  value="2">北京</option>
   <option  value="3">重庆</option>
  </select>

9.文本域
文本域主要用于输入较长的文本信息。
代码格式如下：
<textarea cols="30" rows="5">默认文字</textarea>
效果：Cols属性：定义文本域的宽度（列）
rows属性：定义文本域的高度（行）

四、HTML5文本框及placeholder属性

placeholder
当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
代码格式如下：

2.tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码还包括其他字符（如+ 、-、(、)等），如86-0536-8888888
代码格式如下：
pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式

 <input type="tel" pattern="[0-9]{11}"/>
<input type="tel" pattern="[0-9]{11}" placeholder="输入11位号码" />

3.data
Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示
代码如下：

<input type="date"/><input type="submit" value="提交">

4.音频视频

<video width="320" height="240" controls>  <source src="mydog.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。     </video>

<audio controls>  <source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">  
Your browser does not support this audio format.</audio>

地铁一号线彭于晏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识概览2

**HTML基础知识概览2一、表格标签及属性1. table属性align 对齐方式，后可加center、left、right等。bgcolor 背景色background 背景图片Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0Cellpadding 单元格边距（表格边框与内容的...
复制链接

扫一扫