标签：
HTML简介
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果.
主要组成
<!DOCTYPE html> <html> <head> </head> <body> </body> </html> <head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息 <body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果 也就是说这里是网页的主体 <html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束 他包含了之后的两个元素。<head>和</head>|<body>和</body>
DocType
作用:告诉浏览器使用什么样的HTML或者XHTML规范来解析HTML文档
Meta(Metadata Information)
作用：提供有关页面的元数据信息,例如页面的编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1.页面编码(告诉浏览器是什么编码)
<meta charset="UTF-8">
2.刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> #30秒后自动刷新 < meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ /> #5秒后跳转到百度
3.关键词
< meta name="keywords" content="XX、XX、XX" >
Title
作用:网页头部信息
<title>Hello World</title>
效果:
Style
作用：页面的样式
< style type="text/css" > .bb{ background-color: red; } < /style>
标签一般分为两种
P标签
作用:段落标签
<p>段落标签</p>
效果:
br标签
作用:换行符
<p>这个<br>段落<br>演示了分行的效果</p>
效果:
a标签
作用:跳转的作用
<a href="http://www.baidu.com">跳转到百度1</a>
效果:
这里是可点击的,一点就会跳转到百度
h标签
概念:标题通过<h1> - <h6>进行定义
<h1>h1标题</h1> <h2>h2标题</h2> <h3>h3标题</h3> <h4>h4标题</h4> <h5>h5标题</h5> <h6>h6标题</h6> #<h1>最大 #<h6>最小
div标签
作用:没有特定的含义,如果与CSS一同使用可以对大的内容块设置样式属性.另一个作用是用来做文档布局
span标签
作用:没有特定的含义,如果与CSS一同使用可以为部分文本设置样式属性
form表单
作用:
<form> ... input 元素 ... </form>
input标签
作用:用于搜索用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
type属性:
type属性值的实例
1.button、submit、reset
<input type="submit" value="提交" /> <input type="button" value="按钮" /> <input type="reset" value="重置" />
效果:
2.text、password
<input type="text" name="user" /> #明文 <input type="password" name = "pwd"> #密文
效果:
明文: 密文:
3.radio
<form> <!--对于input标签来说只要，radio的name值相同，那么他们就会互斥--> <input type="radio" name="sex" value="male" />男 <br /> <input type="radio" name="sex" value="female" />女 </form>
<!--如果要单选就得把type="radio"name相当于给这个标签取个名字,value是代表的男或女,相当于{‘gender‘:1}-->
效果:
4.checkbox
<form> <h3>爱好</h3> <input type="checkbox" name="bike" /> 足球 <br /> <input type="checkbox" name="car" /> 篮球 <input type="checkbox" checked="checked"/>棒球 <!--这里加一个标识checked="checked，为默认选择"--> </form>
效果:
5.file
<input type="file"/>
效果:
form表单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--如果想把前端数据发送到后太服务器就得用form标签把要发的段圈起来--> <!--action:服务端IP,method:发送数据方式,enctype:如果要发送文件必须加--> <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data" > <input type="text" name="user" /> <input type="password" name = "pwd"> <!--如果要单选就得把type="radio"name相当于给这个标签取个名字,value是代表的男或女,相当于{‘gender‘:1}--> 男<input type="radio" name="gender" value="1" /> 女<input type="radio" name="gender" value="2" /> <p>爱好: <!--如果要想是多选,就得把type="checkbox",给表单设置个名字,--> 篮球<input name="favor" type="checkbox" value="1"> 足球<input name="favor" type="checkbox" value="2"> </p> <p> <select name="city"> <option value="1">上海</option> <option value="2">唐山</option> <input type="submit" value="提交" /> <input type="button" value="按钮" /> <input type="reset" value="重置" /> </select>> </p> </form>> </body> </html>
select标签
作用:创建单选或者多选菜单
select属性
select属性实例
1.select
<select>
<option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">唐山</option> <!--这里默认是北京因为selected="selected" 这里设置了默认的！--> </select>
效果:
2.size
<select size="2"> <option>上海</option> <option>北京</option> <option>锦州</option> <option>阜新</option> </select>
效果:
3.multiple
<select multiple="multiple" size="2"> <option>上海</option> <option>北京</option> <option>辽宁</option> <option>锦州</option> </select>
效果:
4.分组
<select> <optgroup label="辽宁省"> <option>锦州市</option> <option>沈阳市</option> </optgroup> <optgroup label="吉林省"> <option>长春市</option> <option>四平市</option> </optgroup> </select>
效果:
lable标签
<div id=‘t312‘>
<h2>label</h2>
姓名：<input id=‘name1‘ type=‘text‘ />
婚否：<input id=‘marriy1‘ type=‘checkbox‘ />
<br/>
<label for=‘name2‘>姓名：<input id=‘name2‘ type=‘text‘ /></label>
<label for=‘marriy2‘>婚否：<input id=‘marriy2‘ type=‘checkbox‘ /></label>
</div>
效果:
ul标签
概念:无序HTML列表
<ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ul>
效果:
ol标签
概念:有序HTML列表
<ol> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ol>
效果:
dl标签
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
效果:
表格标签
概念:表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义,每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
效果:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表头加粗
<table border="1"> <!--border这里是加上边框--> <tr> <th>标题一</th> <th>标题二</th> </tr> <tr> <!--一个tr是1行，一个td是一列，一行里可能有很多列。--> <!--如果想加多个行就加多个tr即可--> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
效果:
| 标题一 | 标题二 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML和CSS学习网站:
http://www.runoob.com/html/html-tutorial.html4
HTML标签总结:
http://www.w3school.com.cn/tags/index.asp
标签：
原文地址：http://www.cnblogs.com/zhaijunming5/p/5763296.html
