HTML常用的标签及使用总结._第1页
HTML常用的标签及使用总结._第2页
HTML常用的标签及使用总结._第3页
HTML常用的标签及使用总结._第4页
HTML常用的标签及使用总结._第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML标签由一对尖括号“<”和“>”，以及标签名组成。标签分为“起始标签”和“结束标签”两种。有些标签可以不必关闭，标签可以有自己的属性，不区分大小写，不能输入多余的空格，<!- * - >表示注释。1.HTML标题<html><head><title>标题类元素</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4&g

2、t;<h5>五级标题</h5><h6六级标题</h6></body></html>2.HTML水平线<hr/><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h6>h6</h6><hr/></body&

3、gt;</html>3.HTML注释<!comment->注释并不会显示在网页上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h6>h6</h6><!- hello world -><hr/></body></html>4.

4、HTML段落<p>以及段落换行<br/><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p>hello world</p><p>hello world</p><hr/></body></html>当显示页面时，浏览

5、器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。段落换行使用<br/><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p>hello world</p><p>hello &l

6、t;br/> world</p><hr/></body></html>5.HTML文本格式化6.HTML超链接<a><a>比较重要的属性有两个，分别是href、targethref指定超链接地址target指定打开方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head>&l

7、t;body><p>hello world</p><a href="">百度</a><hr/></body></html>7.HTML的图像<img>使用格式：<img src="url">alt  定义当图片无法加载时，显示什么信息width 定义宽度，单位可以为像素  也可以为百分比height 定义高度<!DOCTYPE html><html lang="en"><h

8、ead> <meta charset="UTF-8"> <title>Title</title></head><body><p>hello world</p><a href=""><img src="l.jpg"/></a><hr/></body></html>8.HTML的表格<table>表格由<table>来定义，每行<tr> 有许多

9、单元格<td>。表头可以使用<th><table>标签属性：border  定义边框在<table>中可以嵌入<th>  <tr>  <td>等标签<tr>   定义行<th>   定义表头colspan  定义表头单元格可以横跨的列数。rowspan  定义表头单元格横跨的行数heardes  定义与表头单元格相关联的一个或者多个单元格。(html5新增)<td> 

10、  定义单元格colspan  定义单元格可以横跨的列数。rowspan  定义单元格横跨的行数heardes  定义与单元格相关联的一个或者多个单元格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table border="1px"> <t

11、r> <th colspan="2" >name</th> <th rowspan="2">list</th> </tr> <tr> <th headers="name">first name</th> <th headers="name">last name</th> </tr></table>在浏览器中显示如下：namelistfirstnamelastname另

12、外，若某个单元格为空，浏览器可能无法显示出这个单元格的边框。为了防止这种情况，可以在该单元格加一个空格占位符&nbsp。9.HTML的列表<ul>、<ol>列表分为无序列表<ul>有序列表<ol>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等<ul> <li>male</li> <li>female</li></ul><hr/><ol> <li>male</li> <li>female</l

13、i></ol>浏览器显示为：·male1.male·female2.female10.HTML表单<from>表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素<form>中的属性：action：后面加url  指定当提交表单时向何处发送表单数据method：get/post两个值，get为明文  post为加密name：指定表单的名称target：_blanket  _self  _parent  _top 指定网页

14、打开方式<from>标签中较为常用的标签有<input>  <select>  <label>  <button>   <fieldset> 标签可以将表单内的相关元素分组。 会在相关表单元素周围绘制边框。name  规定fieldset的名称form  值：form_id   规定fieldset所属的表单<legend>  定义了 <fieldset> 元素的标题。&

15、#160;<input>中最为常用的几个属性:form  后面跟所属form的id。规定所属的formrequired    值：required    规定必需在提交表单之前填写输入字段。disabled   值： disabled   disabled 属性规定应该禁用的 <input> 元素。type:决定输入类型text  文本域radio  单选按钮checkbox  复选框submit  提交按钮password  密码

16、输入reset  重置color  设置拾色器   html5number  定义用于输入数字的字段（您可以设置可接受数字的限制）range  定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制name:input元素的名称value：input元素的值size：输入字段的宽度pattern  规定用于验证 <input> 元素的值的正则表达式。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 passwordlist&#

17、160; 值为datalist的id   该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。autofocus  该属性是一个 boolean 属性，让页面载入后，input自动获得焦点<datalist>  html5中的新特性  标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户

18、的输入数据。与<option>标签配合使用 <button>  定义一个点击按钮form   所属的form表单name  button名称typebutton  该按钮是可点击的按钮reset  该按钮是重置按钮submit  该按钮是提交按钮 <label>标签为 input 元素定义标注（标记）label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动

19、将焦点转到和标签相关的表单控件上for  值为某个元素的id   规定 label 与哪个表单元素绑定。form  form_id   <textarea>  name  规定textarea的名称form    form_id  规定从属的表单cols规定可见列数rows   规定可见行数 <select>使用<option>标签定义下拉列表的可用选项.常见的属性：name：指定select名称multipl

20、e：规定可选择多个选项 <optgroup>  用于把相关的选项组合在一起。label  为选项组规定描述。 <option> 常见的属性：value：指定送往服务器的选项值selected：只有一个值-selected   默认选项 <keygen>  定义了表单的密钥对生成器字段form  所属的表单名称name  名称keytype  使用的加密算法rsa   默认的算法dsaes<!DOCTYPE html>&

21、lt;html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form name="biaoge" action="/return/" method="get"> 请选择语言: <br/><br/><input type="radio" name="

22、;language" id="jtzw" value="chinese"/><label for="jtzw">简体中文</label><br/><br/> <input type="radio" name="language" value="english" id="eng"/><label for="eng">English</label&

23、gt;<br/><br/> 请选择熟悉的编程语言:<br/><br/> <fieldset> <legend>编程语言</legend> <input type="checkbox" name="python" />python <input type="checkbox" name="c" />c <input type="checkbox" name="swift&qu

24、ot; />swift<br/><br/> </fieldset><br/> 请选择地区： <select name="district"> <optgroup label="China"> <option value="shandong">山东</option> <option value="zhejiang" selected="selected">浙江</option> <option value="guangdong">广东</option> </optgroup> <optgroup label

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论