HTML常用的标签和属性.doc_表单常用属性资源-CSDN文库

2星需积分: 14 39 浏览量 2010-09-08 13:24:26 上传评论收藏 60KB DOC 举报

### HTML常用标签与属性详解 #### 一、网页标题标签 `<title>` - **用途**：定义文档的标题，显示在浏览器的标题栏或标签页上。 - **示例**： ```html <title>我的网站</title> ``` #### 二、主体标签 `<body>` - **用途**：定义文档的主体部分。 - **属性**： - `text`：设置文档文本的颜色。 - `bgcolor`：设置文档背景颜色。 - `background`：设置文档的背景图片。 - `bgproperties`：设置背景图片是否固定。 - `link`：设置未访问过的链接颜色。 - `alink`：设置活动链接（即被点击时）的颜色。 - `vlink`：设置已访问过的链接颜色。 - `topmargin`：设置文档顶部的空白区域。 - `bottommargin`：设置文档底部的空白区域。 - `leftmargin`：设置文档左侧的空白区域。 - `rightmargin`：设置文档右侧的空白区域。 #### 三、内容标题标签 `<H1>－<H6>` - **用途**：定义标题，其中 `<H1>` 定义最大的标题，`<H6>` 定义最小的标题。 - **属性**： - `align`：定义标题的对齐方式，可以是 left、center 或 right。 - **示例**： ```html <h1 align="center">欢迎来到我的网站</h1> ``` #### 四、字体标签 `<font>` - **用途**：定义文档中的文本字体。 - **属性**： - `face`：设置字体类型。 - `size`：设置字体大小。 - `color`：设置字体颜色。 - **示例**： ```html <font face="宋体" size="4" color="#FF0000">这是一段红色的宋体字体。</font> ``` #### 五、段落标签 `<p>` - **用途**：定义文档中的段落。 - **属性**： - `align`：设置段落文本的对齐方式，可以是 left、center 或 right。 - **示例**： ```html <p align="center">这是一个居中的段落。</p> ``` #### 六、换行标签 `<br>` - **用途**：在不关闭当前段落的情况下插入一个换行。 - **示例**： ```html <p>第一行<br>第二行</p> ``` #### 七、图片标签 `<img>` - **属性**： - `src`：指定图片文件的路径。 - `width` 和 `height`：设置图片的宽度和高度。 - `border`：设置图片边框的厚度。 - `align`：设置图片的对齐方式。 - `vspace` 和 `hspace`：设置图片的垂直和水平间距。 - `alt`：当图片无法显示时提供替代文字。 - **示例**： ```html <img src="example.jpg" width="200" height="150" alt="示例图片"> ``` #### 八、水平线标签 `<hr>` - **用途**：定义水平分隔线。 - **属性**： - `width`：设置水平线的宽度。 - `size`：设置水平线的厚度。 - `color`：设置水平线的颜色。 - `align`：设置水平线的对齐方式。 - `noshade`：设置是否去掉水平线的阴影。 - **示例**： ```html <hr width="30%" color="#0000FF" size="2"> ``` #### 九、预格式文本标签 `<pre>` - **用途**：预格式化文本，保留空格和换行。 - **示例**： ```html <pre> 这是一个预格式化的文本 </pre> ``` #### 十、链接标签 `<a>` - **属性**： - `href`：指定链接的目标URL。 - `name`：为锚点指定名称。 - `title`：提供有关链接的额外信息。 - `target`：指定链接目标窗口的打开方式。 - **示例**： ```html <a href="https://www.example.com" target="_blank">访问示例网站</a> ``` #### 十一、滚动标签 `<marquee>` - **属性**： - `direction`：设置滚动的方向。 - `behavior`：设置滚动的方式。 - `scrollamount`：设置滚动的速度。 - `scrolldelay`：设置滚动的延迟时间。 - `loop`：设置滚动的次数。 - `width` 和 `height`：设置滚动区域的宽度和高度。 - `bgcolor`：设置滚动区域的背景颜色。 - `hspace` 和 `vspace`：设置滚动区域的水平和垂直间距。 - **示例**： ```html <marquee direction="right" behavior="slide" scrollamount="5" scrolldelay="100" loop="infinite"> 欢迎访问我们的网站！ </marquee> ``` #### 十二、多媒体标签 `<embed>` - **属性**： - `src`：指定多媒体文件的路径。 - `width` 和 `height`：设置多媒体文件的宽度和高度。 - `hidden`：设置是否隐藏多媒体文件。 - `autostart`：设置多媒体文件是否自动播放。 - `loop`：设置多媒体文件是否循环播放。 - **示例**： ```html <embed src="example.mp3" width="200" height="30" autostart="true" loop="true"> ``` #### 十三、背景音乐标签 `<bgsound>` - **属性**： - `src`：指定背景音乐文件的路径。 - `loop`：设置背景音乐是否循环播放。 - **示例**： ```html <bgsound src="music.mp3" loop="infinite"> ``` #### 十四、表格标签 `<table>` - **属性**： - `border`：设置表格边框的宽度。 - `width` 和 `height`：设置表格的宽度和高度。 - `bordercolor`：设置表格边框的颜色。 - `bordercolorlight` 和 `bordercolordark`：设置表格亮边框和暗边框的颜色。 - `bgcolor`：设置表格背景颜色。 - `background`：设置表格背景图片。 - `cellspacing`：设置单元格之间的间距。 - `cellpadding`：设置单元格内内容与边界的距离。 - `align`：设置表格的水平对齐方式。 - **示例**： ```html <table border="1" width="50%" cellspacing="0" cellpadding="5" align="center"> <tr> <td>单元格1</td> <td>单元格2</td> </tr> </table> ``` #### 十五、行标签 `<tr>` - **属性**： - `height`：设置表格行的高度。 - `align`：设置表格行的水平对齐方式。 - `valign`：设置表格行的垂直对齐方式。 - `bgcolor`：设置表格行的背景颜色。 - `bordercolor`、`bordercolorlight` 和 `bordercolordark`：设置表格行的边框颜色。 - **示例**： ```html <tr bgcolor="#FFFFCC" align="center" valign="middle"> <td>单元格1</td> <td>单元格2</td> </tr> ``` #### 十六、列标签 `<td>` - **属性**： - `height`：设置表格单元格的高度。 - `align`：设置表格单元格的水平对齐方式。 - `valign`：设置表格单元格的垂直对齐方式。 - `bgcolor`：设置表格单元格的背景颜色。 - `bordercolor`、`bordercolorlight` 和 `bordercolordark`：设置表格单元格的边框颜色。 - `width`：设置表格单元格的宽度。 - **示例**： ```html <td width="100" align="center" valign="middle" bgcolor="#FFFFCC">单元格1</td> ``` #### 十七、表单标签 `<form>` - **属性**： - `name`：设置表单的名字。 - `action`：设置表单提交的URL。 - `method`：设置表单数据提交的方式，如 `GET` 或 `POST`。 - `enctype`：设置表单数据的编码方式。 - **示例**： ```html <form name="myForm" action="/submit.php" method="post" enctype="multipart/form-data"> <input type="text" name="username"> <input type="submit" value="提交"> </form> ``` #### 十八、文字域标签 `<input type="text">` - **属性**： - `name`：设置输入字段的名字。 - `size`：设置输入字段的大小。 - `value`：设置输入字段的默认值。 - `maxlength`：设置输入字段允许的最大字符数。 - **示例**： ```html <input type="text" name="username" size="20" maxlength="50"> ``` #### 十九、密码域标签 `<input type="password">` - **属性**： - `name`：设置输入字段的名字。 - `size`：设置输入字段的大小。 - `value`：设置输入字段的默认值。 - `maxlength`：设置输入字段允许的最大字符数。 - **示例**： ```html <input type="password" name="password" size="20" maxlength="20"> ``` #### 二十、文件域标签 `<input type="file">` - **属性**： - `name`：设置输入字段的名字。 - **示例**： ```html <input type="file" name="uploadFile"> ``` #### 二十一、普通按钮标签 `<button>` - **属性**： - `name`：设置按钮的名字。 - `value`：设置按钮显示的文字。 - **示例**： ```html <button name="submitBtn" value="提交">提交</button> ``` #### 二十二、隐藏按钮标签 `<input type="hidden">` - **属性**： - `name`：设置隐藏字段的名字。 - `value`：设置隐藏字段的值。 - **示例**： ```html <input type="hidden" name="userId" value="12345"> ``` #### 二十三、提交按钮标签 `<input type="submit">` - **属性**： - `name`：设置按钮的名字。 - `value`：设置按钮显示的文字。 - **示例**： ```html <input type="submit" name="submitButton" value="提交"> ``` #### 二十四、单选按钮标签 `<input type="radio">` - **属性**： - `name`：设置单选按钮的名字。 - `value`：设置单选按钮的值。 - `checked`：设置单选按钮是否默认被选中。 - **示例**： ```html <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 ``` #### 二十五、重置按钮标签 `<input type="reset">` - **属性**： - `name`：设置按钮的名字。 - `value`：设置按钮显示的文字。 - **示例**： ```html <input type="reset" name="resetButton" value="重置"> ``` #### 二十六、图像域标签 `<input type="image">` - **属性**： - `name`：设置图像域的名字。 - `src`：指定图像文件的路径。 - **示例**： ```html <input type="image" name="submitImg" src="submit.png"> ``` #### 二十七、菜单和列表标签 `<select>` - **用途**：定义下拉列表。 - **属性**： - `name`：设置下拉列表的名字。 - `<option>`：定义下拉列表中的选项。 - **示例**： ```html <select name="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> ``` 以上是HTML中常用的标签及其属性的详细介绍，这些标签和属性能够帮助开发者构建出功能丰富且美观的网页。随着HTML5的发展，许多新的标签和属性被引入，使得网页的设计更加灵活多变。希望这些知识点能够对你有所帮助。

资源推荐

资源详情

资源评论