1  html标题

　　<h1> to <h6>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

</body>

</html>

h1到h6演示代码

2  html水平线 <hr/>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h6>h6</h6>

<hr/>

</body>

</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  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>

段落演示代码

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

段落换行使用<br/>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>hello world</p>

<p>hello     <br/>     world</p>

<hr/>

</body>

</html>

段落换行演示代码

5  html文本格式化

6  html超链接<a>

<a>比较重要的属性有两个，分别是href、target

href指定超链接地址

target指定打开方式

　　_blank  新页面打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>hello world</p>

<a href="http://www.baidu.com">百度</a>

<hr/>

</body>

</html>

超链接演示代码

另提供了较为全面的<a>标签使用方法链接：http://blog.csdn.net/ao_xiaoqiang/article/details/44345565

7  html的图像<img>

使用格式：<img src="url">

　　alt  定义当图片无法加载时，显示什么信息

　　width 定义宽度，单位可以为像素  也可以为百分比

　　height 定义高度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>hello world</p>

<a href="http://www.baidu.com"><img src="l.jpg"/></a>

<hr/>

</body>

</html>

8  html的表格<table>

表格由<table>来定义，每行<tr> 有许多单元格<td>。表头可以使用<th>

<table>标签属性：

　　border  定义边框

在<table>中可以嵌入<th>  <tr>  <td>等标签

　　<tr>   定义行

　　<th>   定义表头

　　　　colspan  定义表头单元格可以横跨的列数。

　　　　rowspan  定义表头单元格横跨的行数

　　　　heardes  定义与表头单元格相关联的一个或者多个单元格。(html5新增)　　　

　　<td>   定义单元格

　　　　colspan  定义单元格可以横跨的列数。

　　　　rowspan  定义单元格横跨的行数

　　　　heardes  定义与单元格相关联的一个或者多个单元格。(html5新增)　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1px">

    <tr>

        <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>

在浏览器中显示如下：

另外，若某个单元格为空，浏览器可能无法显示出这个单元格的边框。为了防止这种情况，可以在该单元格加一个空格占位符&nbsp。

9  html列表<ul> <ol>

列表分为

　　无序列表<ul>

　　有序列表<ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

<ul>

    <li>male</li>

    <li>female</li>

</ul>

<hr/>

<ol>

    <li>male</li>

    <li>female</li>

</ol>

浏览器显示为：

10  html表单<form>

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

<form>中的属性：

　　action：后面加url  指定当提交表单时向何处发送表单数据

　　method：get/post两个值，get为明文  post为加密

　　name：指定表单的名称

　　target：_blanket  _self  _parent  _top 指定网页打开方式

　　<from>标签中较为常用的标签有<input>  <select>  <label>  <button>

　　<fieldset> 标签可以将表单内的相关元素分组。 会在相关表单元素周围绘制边框。

　　　　name  规定fieldset的名称

　　　　form  值：form_id   规定fieldset所属的表单

　　　　

　　　　<legend>  定义了 <fieldset> 元素的标题。

　　<input>中最为常用的几个属性:

　　　　form  后面跟所属form的id。规定所属的form

　　　　required    值：required    规定必需在提交表单之前填写输入字段。

　　　　disabled   值： disabled   disabled 属性规定应该禁用的 <input> 元素。

　　　　type:决定输入类型

　　　　　　text  文本域

　　　　　　radio  单选按钮

　　　　　　checkbox  复选框

　　　　　　submit  提交按钮

　　　　　　password  密码输入

　　　　　　reset  重置

　　　　　　color  设置拾色器   html5

　　　　　　number  定义用于输入数字的字段（您可以设置可接受数字的限制）

　　　　　　range  定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制

　　　　name:input元素的名称

　　　　value：input元素的值

　　　　size：输入字段的宽度

　　　　pattern  规定用于验证 <input> 元素的值的正则表达式。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password

　　　　list  值为datalist的id   该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

　　　　autofocus  该属性是一个 boolean 属性，让页面载入后，input自动获得焦点

　　

　　　　<datalist>  html5中的新特性  标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。

　　　　　　用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

　　　　　　与<option>标签配合使用

　　<button>  定义一个点击按钮

　　　　form   所属的form表单

　　　　name  button名称

　　　　type　　

　　　　　　button  该按钮是可点击的按钮

　　　　　　reset  该按钮是重置按钮

　　　　　　submit  该按钮是提交按钮

　　<label>标签为 input 元素定义标注（标记）

　　　　label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

　　　　就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

　　　　for  值为某个元素的id   规定 label 与哪个表单元素绑定。

　　　　form  form_id

　　<textarea>

　　　　name  规定textarea的名称

　　　　form    form_id  规定从属的表单

　　　　cols　规定可见列数

　　　　rows   规定可见行数

　　<select>使用<option>标签定义下拉列表的可用选项.常见的属性：

　　　　name：指定select名称

　　　　multiple：规定可选择多个选项

　　　　<optgroup>  用于把相关的选项组合在一起。

　　　　　　label  为选项组规定描述。

　　　　<option> 常见的属性：

　　　　　　value：指定送往服务器的选项值

　　　　　　selected：只有一个值--selected   默认选项

　　<keygen>  定义了表单的密钥对生成器字段

　　　　form  所属的表单名称

　　　　name  名称

　　　　keytype  使用的加密算法

　　　　　　rsa   默认的算法

　　　　　　dsa

　　　　　　es

<!DOCTYPE html>

<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="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><br/><br/>

    请选择熟悉的编程语言:<br/><br/>

    <fieldset>

        <legend>编程语言</legend>

            <input type="checkbox" name="python" />python

            <input type="checkbox" name="c" />c

            <input type="checkbox" name="swift" />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="USA">

            <option value="ny">纽约</option>

            <option value="lsj">洛杉矶</option>

        </optgroup>

    </select><br/><br/>

    请选择颜色:<input type="color"><br/><br/>

    name:<input type="text" name="name" value="slyoyo"/>

    password:<input type="password" name="passwd" value="hahaha"/>

    <input type="submit"  value="login"/><br/><br/>

    系统：<input list="xuanze" type="text">

    <datalist id="xuanze">

        <option value="windows">Windows</option>

        <option value="linux">Linux</option>

    </datalist>

</form>

</body>

</html>

演示实例

浏览器显示：

html常用标签的使用方法的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. [Java] JSP笔记 - EL、JSTL 常用标签

    一. 什么是 EL 语言 表达式语言(EL)是 JSP 2.0 引入的一种计算和输出 Java 对象的简单语言. 二.EL 语言的作用 为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMASc ...

  3. Struts2常用标签

    Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...

  4. jsp学习--JSP运行原理,九大隐式对象和JSP常用标签

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

  5. WP主题制作常用标签代码

    WordPress模板结构 style.css : CSS文件index.php : 主页模板archive.php : Archive/Category模板404.php : Not Found 错 ...

  6. struts2视频学习笔记 29-30（Struts 2常用标签，防止表单重复提交）

    课时28 Struts 2常用标签解说 property标签 property标签用于输出指定值: <s:set name="name" value="'kk'&q ...

  7. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  8. jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

    jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大 ...

  9. html常用标签学习笔记

    本文内容: 前言:本文讲述的内容包括几类常用标签,以及这些标签的一些常用属性(有一些属性由于已经有CSS样式来代替,所以对于一些不重要的这里选择不讲) 排版标签 段落标签:p div span 标题标 ...

随机推荐

  1. HDInsight 路径问题

    HDInsight中..上传文件的路径是要区分大小写的.. 很变态吧.. 所以项目中要求全部路径使用小写..

  2. Hibernate 查询MatchMode的四种模式

    Hibernate 查询MatchMode的四种模式 MatchMode.START:字符串在最前面的位置.相当于"like 'key%'" MatchMode.END:字符串在最 ...

  3. ESI 动态缓存技术

    任何一个Web网站的内容都是在不断更新和变化,但这并不意味这这个网站的内容就是动态内容,事实上,动态的内容是指用户每次点击 相同的链接时取的的内容是由Web服务器应用程序生成的,如常见得ASP,JSP ...

  4. Materialize一款不错的框架（装逼必备，想想一帮渣渣们还在说bootstrap的时候，你用materialize，高端洋气，别人仰望着，同事们鄙视的看着你还能不能愉快的玩耍的时候，那种孤高的感觉！-_-//意淫结束）

    这个materialize感觉比bootstrap好一点 当然啦中文文档还木有!所以想搞个materialize中文网的可以抢先咯! materialize是谷歌设计制作的一款框架. HOHO,出去别 ...

  5. java 读取pdf、word、Excel文件

    用到的jar: itextpdf-5.5.8.jar   (PDF) poi.jar public class FileUtils { /** * 判断文件是否存在 * * @Title: isExc ...

  6. R入门<二>-时间序列研究

    续之前那篇随笔 前天写完随笔后,很自豪的拿出来去跟带我入数据挖掘和SAS基础的大牛@八公炫耀,然后收获了一堆时间序列的材料,非常感谢大牛! ARIMA就是看图形,ACF和PACF,原理不需要知道,因为 ...

  7. PHP截取中文无乱码函数——cutstr

    转载:http://blog.sina.com.cn/s/blog_694c144f010179wj.html 真正好用的PHP截取中文无乱码函数——cutstr (2012-07-09 11:17: ...

  8. Logistic 回归(sigmoid函数，手机的评价,梯度上升，批处理梯度,随机梯度，从疝气病症预测病马的死亡率

    (手机的颜色,大小,用户体验来加权统计总体的值)极大似然估计MLE 1.Logistic回归 Logistic regression (逻辑回归),是一种分类方法,用于二分类问题(即输出只有两种).如 ...

  9. servlet过滤器实现维护项目

    最近公司需要系统维护,提出要建一个维护系统,要求: 1.访问公司域名跳到系统首页 2.点击首页的任意按钮给出维护提示信息 3.用户访问之前收藏的任意系统链接跳转到首页 下面介绍下用过滤器实现上述需求 ...

  10. Javascript高级程序设计——引用类型

    对象在javascript中被称为引用类型的值,而且有一些内置的引用类型可以创建特定的对象: 引用类型与传统面向对象中的程序设计的类相似,但实现不同: Object是一个基础类型,其他所有类型都从Ob ...