HTML 简介

什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

html结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

DOCTYPE 

<!DOCTYPE html>　　

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

  • 页面编码（告诉浏览器是什么编码）

<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

  • 刷新和跳转
<meta http-equiv=“Refresh” Content=“30″>

<meta http-equiv="Refresh" Content=5;Url="http://www.autohome.com.cn" />
  • 关键词

<meta name="keywords" content="博客园，IT技术，老男孩" >

  • 描述
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

Title

网页头部信息 

<title>58同城一个神奇的网站!!!</title>

Link

1.css

<link rel="stylesheet" type="text/css" href="css/common.css" >      　　#放置style样式的文件

2.icon

<link rel="shortcut icon" href="image/favicon.ico">　　　　　　　　　　 #放置favicon图片的地方

Style

在页面中写样式

例如

<head>
< style type="text/css" >
.bb{
      background-color: red;
   }
< /style>

</head> 

或者

<body>

<div style="background-color:red">123</div>

<div style="background-color:red">123</div>

</dody>

或者：

common.css #将样式保存在common.css文件中.然后用class引用即可.

.bb{ 
      background-color: red; 
   } 

.aa{ 
      background-color: red; 
   } 

<div class=".bb">123</div>

style样式可以写在单个css文件中，也可以写在<head> <head/>中或在common.css文件中单独配置！

Script

  1. 引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

  1. 写js代码

< script type="text/javascript" > ... </script >

上述这些一般都是在head中设置。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

标签一般分为两种：块级标签 和 行内标签

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.autohome.com.cn">点击跳转</a>
<a target="_blank" href="http://www.9888.cn">点击跳转</a>

target属性，_black表示在新的页面打开

锚：点击标签菜单后页面显示对应的内容
<body>
<!--锚：点击标签菜单后页面显示对应的内容-->
<a href="#a2">书签</a>          <!--表示跳转的位置为a2,#位特殊字符-->
<div id="a1" style="height: 700px;">     <!--id为标签唯一的值-->
    1内容
</div>

<div id="a2" style="height: 500px;">
    2内容
</div>

</body>

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

p表示段落，默认段落之间是有间隔的！

br 是换行

<!DOCTYPE html>
<html>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一<br>个段落。</p>


</body>
</html>

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<!DOCTYPE html>
<html>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

<html>
<body>

<img src="/images/w3cschool.png" width="300" height="120" />

</body>
</html>

HTML <select> 标签

定义和用法

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

提示和注释：

提示：select 元素是一种表单控件，可用于在表单中接受用户输入。

属性

属性值描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
disabled disabled 规定禁用该下拉列表。
form form_id 规定文本区域所属的一个或多个表单。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
required required 规定文本区域是必填的。
size number 规定下拉列表中可见选项的数目。

亲自试一试 - 更多实例

标准实例

<select>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">天津</option>
  <option value="4" selected="selected">西安</option>   <!--selected="selected"表示默认西安是被选中的-->
    <!--value定义什么值提交到后台获取的就是什么值，需要结合form表单一块使用-->
</select>

在浏览器中显示的个数实例：

<select size="2">       <!--size是在浏览器中显示的个数 -->
  <option>北京</option>
  <option>上海</option>
  <option>天津</option>
  <option>西安</option>

</select>

 在浏览器中可以多选：

<select size="2" multiple="multiple">    <!--multiple="multiple"表示可以多选 -->
  <option>北京</option>
  <option>上海</option>
  <option>天津</option>
  <option>西安</option>

</select>

在浏览器中显示成省-市的类型：

<select>
						<optgroup label="陕西省">
							<option>西安</option>
							<option>咸阳</option>
						</optgroup>
						<optgroup label="山西省">
							<option>太原</option>
							<option>平遥</option>
						</optgroup>
					</select>

select <option> 标签

定义和用法

option 元素定义下拉列表中的一个选项（一个条目）。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

option 元素位于 select 元素内部。

提示和注释：

注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。

提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

可选的属性

属性值描述
disabled disabled 规定此选项应在首次加载时被禁用。
label text 定义当使用 <optgroup> 时所使用的标注。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value text 定义送往服务器的选项值。

HTML <input> 系列标签

通过对input标签设置不同的属性，显示不同的效果，input属于自闭合标签

实例

一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：

<html>

<body>

<form>
用户：
<input type="text">
<br />
密码：
<input type="password">
<br />
<input type="submit"/>
</form>

</body>
</html>

定义和用法

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

属性

属性值描述
accept mime_type 规定通过文件上传来提交的文件的类型。
align
  • left
  • right
  • top
  • middle
  • bottom
 不赞成使用。规定图像输入的对齐方式。
alt text 定义图像输入的替代文本。
autocomplete
  • on
  • off
 规定是否使用输入字段的自动完成功能。
autofocus autofocus

规定输入字段在页面加载时是否获得焦点。

（不适用于 type="hidden"）
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form formname 规定输入字段所属的一个或多个表单。
formaction URL

覆盖表单的 action 属性。

（适用于 type="submit" 和 type="image"）
formenctype 见注释

覆盖表单的 enctype 属性。

（适用于 type="submit" 和 type="image"）
formmethod
  • get
  • post

覆盖表单的 method 属性。

（适用于 type="submit" 和 type="image"）
formnovalidate formnovalidate

覆盖表单的 novalidate 属性。

如果使用该属性，则提交表单时不进行验证。
formtarget
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 target 属性。

（适用于 type="submit" 和 type="image"）
height
  • pixels
  • %
 定义 input 字段的高度。（适用于 type="image"）
list datalist-id 引用包含输入字段的预定义选项的 datalist 。
max
  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用，来创建合法值的范围。
maxlength number 规定输入字段中的字符的最大长度。
min
  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用，来创建合法值的范围。
multiple multiple 如果使用该属性，则允许一个以上的值。
name field_name 定义 input 元素的名称。
pattern regexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder text 规定帮助用户填写输入字段的提示。
readonly readonly 规定输入字段为只读。
required required 指示输入字段的值是必需的。
size number_of_char 定义输入字段的宽度。
src URL 定义以提交按钮形式显示的图像的 URL。
step number 规定输入字的的合法数字间隔。
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
 规定 input 元素的类型。
value value 规定 input 元素的值。
width
  • pixels
  • %
 定义 input 字段的宽度。（适用于 type="image"）

Checkbox 对象

Checkbox 对象代表一个 HTML 表单中的 一个复选框.(可以选多个)

在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。

					<h2>Checkbox</h2>
					<input type="checkbox">
					<input checked="" type="checkbox">
					<input checked="checked" type="checkbox">

Radio 对象

Radio 对象代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。

您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。

<div id="0">
					<h2>redio</h2>
					男<input value="man" type="radio">
					女<input value="male" type="radio">
					保密<input value="no" type="radio">
					<br/>
					男<input name="gender" value="man" type="radio">
					女<input name="gender" value="male" type="radio">
					保密<input checked="checked" name="gender" value="no" type="radio">
				</div>

# name属性设置相同时只能选择一个，他们之间就是互斥的关系！

提交按钮标签：

Button 对象

Button 对象代表 HTML 文档中的一个按钮。

该元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。

在 HTML 文档中 <input type="button"> 标签每出现一次，一个 Button 对象 就会被创建。

您可以通过遍历表单的 elements[] 数组来访问某个按钮，或者通过使用 document.getElementById()。

<input  type="button" value="提交" >

Submit 对象

Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。

在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。

在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。

<input  type="submit" value="submit" >

FileUpload 对象

在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被上传，用来上传和提交文件。

该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。

<input  type="file"  >

HTML <textarea> 标签

定义和用法

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

提示：可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式

<textarea>hello world</textarea>

 HTML <form> 标签

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

提示和注释

注释：form 元素是块级元素，其前后会产生折行。

属性值描述
accept MIME_type HTML 5 中不支持。
accept-charset charset_list 规定服务器可处理的表单数据字符集。
action URL 规定当提交表单时向何处发送表单数据。
autocomplete
  • on
  • off
 规定是否启用表单的自动完成功能。
enctype 见说明 规定在发送表单数据之前如何对其进行编码。
method
  • get
  • post
 规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate novalidate 如果使用该属性，则提交表单时不进行验证。
target
  • _blank
  • _self
  • _parent
  • _top
  • framename
 规定在何处打开 action URL。 
<form action="http://192.168.21.128:8080/html/form_action.asp" method="POST">
    <p>
        用户名:<input type="text" name="user"/>
    </p>
    <p>
        密码:<input type="password" name="pwd"/>
    </p>
    <p>
        部门:<select name="depart">
                <option value="1">CEO</option>
                <option value="2">CTO</option>
                <option value="3">COO</option>
    </select>
    </p>
    <input type="submit" value="提交"/>
</form>

<!--请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面,method有get和post两种发送方式--> 
<!--form通过设置action指定我要提交到哪，通过submit执行提交的动作，name等于什么(name="user")作为key，输入什么作为value来接收到  -->　

HTML <label> 标签

定义和用法

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

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

属性

属性值描述
for id 规定 label 绑定到哪个表单元素。
form formid 规定 label 字段所属的一个或多个表单 
<html>
<body>

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>
<label for="male">男</label>
<input type="radio"  id="male" />
<br />
<label for="female">女</label>
<input type="radio"  id="female" />
</form>

</body>
</html>

html三种列表：ul ol dl

<h2>ul ol dl</h2>
<p>ul</p>
<ul>
    <li>ul.li</li>
    <li>ul.li</li>
    <li>ul.li</li>
</ul>

效果如下，前面加个点

ul

       
  • ul.li
    •    
  • ul.li
    •    
  • ul.li
<ol>
			<li>ol.li</li>
			<li>ol.li</li>
			<li>ol.li</li>
		</ol>

<!--#前面标记为1，2，3 -->

<dl>
		<dt>河北省</dt>
		<dd>邯郸</dd>
		<dd>石家庄</dd>
		<dt>山西省</dt>
		<dd>太原</dd>
		<dd>平遥</dd>
	</dl>

<!--会产生自动缩进的样式-->

HTML <table> 标签

定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>籍贯</td>
        </tr>

        <tr>
            <td>saneri</td>
            <td>男</td>
            <td>陕西</td>
        </tr>

        </table>

效果如下:

姓名   性别  籍贯

saneri 男    陕西

显示边框效果：

<table border="1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>籍贯</td>
        </tr>

        <tr>
            <td>saneri</td>
            <td>男</td>
            <td>陕西</td>
        </tr>

        </table>

colspan左右合并单元格 rowspan上下合并单元格

<body>
<table border="1">
        <tr>
            <td colspan="2">1</td>      
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr> 
        </table>

<!--colspan="2"表示1占两个位置，横向占两格-->
<table border="1">
        <tr>
            <td rowspan="2">1</td>      
                        <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr> 
        </table>
<!--rowspan="2"表示1占两个位置，纵向占两格-->
</body>

效果如下：

HTML <fieldset> 标签

定义和用法

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

<fieldset>
			<legend>登录</legend>
			<p>用户名：</p>
			<p>密码：</p>
		</fieldset>

HTML <div> 标签

定义和用法

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

<html>
<body>

<h3>This is a header</h3>
<p>This is a paragraph.</p>

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

</body>
</html>

执行后效果：

This is a header

This is a paragraph.

This is a header

This is a paragraph.

style应用的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <style>
.logo {

    background-color: red;
    font-size: 18px;
    border: 1px;
}
.logo a{                    <!--a标签拥有logo属性,并引用自己的属性 -->
font-size: 56px;

    }
 
.logo a,p{                  <!--a和p标签同时拥有logo属性 -->  
    font-size: 56px;
    background-color:yellow;
    }
#cc {                                           <!-- 以#号开头的应用是用id=cc这种方法引用 -->
font-size: 56px;
background-color:blue;
    }
    </style>
</head>
 
<body>
<div class="logo">              <!--让a标签和p标签同时拥有logo属性 -->
    <div>div标签</div>
    <a>a标签</a>
    <p>p标签</p>
 
    </div>
<div class="logo">hello world</div>
<span id="cc">goodbye</span>                    <!--带#的引用用id -->
</body>
</html>　　　　

HTML <span> 标签

<span>标签和<div>一样是一个容器，默认什么都不是，二者区别在于<div>标签里面有内容后将变成一个块级标签，而<span>标签里面有内容后将变成一个内联标签

<head>
    <style>
        .logo {
            font-size: 56px;
            background-color:yellow;
        }
        .c {
            font-size: 20px;
            background-color:red;
        }
    </style>
</head>

<body>
    <span class="logo">hello world</span>             
    <span class="c">goodbye</span>

</body>　　

.

.

.

参阅文档：http://www.w3school.com.cn/html/

特殊字符文档：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

posted @ 2016-01-25 16:03  梦徒  阅读(444)  评论(0)  编辑  收藏  举报