HTML
1、HTML概念
HTML：Hyper Text Mark-up Language超文本标记语言，是一种用于创建网页的标准标记语言。通过元素标签的形式建立Web站点，通过浏览器进行解析。
2、HTML基本语法结构
开始标签 属性 属性值 内容 结束标签；
<h1 id = "h1">hello world 1</h1>
3、HTML文档结构
所用的HTML网页文件都是由、、
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<h1 id = "h1">hello world 1</h1>
<h2>hello world 2</h2>
<h3>hello world 3</h3>
<h4>hello world 4</h4>
<h5>hello world 5</h5>
<h6>hello world 6</h6>
</body>
</html>
小结:
<html>…</html>标识网页文件的开始与结束，所有的Html元素，都要放在这对标记中;
<head>…</head>标识网页文件的头部信息，如标题、搜索引擎关键字等;
<title>…</title>标识网页文件的标题;
<body>…</body>标识网页文件的主体部分;
4、HTML文档的注释结构
<!--注释的内容-->
5、HTML元素块级元素、内联元素
块级元素(block):每一个块级元素默认占据一行，紧跟的块级元素分配在下一行，可以自己定义宽高、边距；常见的HTML块级元素有:
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>、<p>、<table>、<form>、<noform>、<td>等；
内联元素(span):在同一行内可以有多个内联元素，紧跟第一个内联元素的后面，不可以自己定义宽高、边距，要靠内容撑起来；常见的HTML内联元素有:
<a>、<b>、<img>、<input>、<select>、<strong>、<span>、<option>、<em>、<textarea>等；
6、HTML常用元素
a) html标题
<h1>到<h6>,数字越大，级数越小
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<h1>hello world 1</h1>
<h2>hello world 2</h2>
<h3>hello world 3</h3>
<h4>hello world 4</h4>
<h5>hello world 5</h5>
<h6>hello world 6</h6>
</body>
</html>
b) html水平线
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<h1>hello world 1</h1>
<hr></hr><!--水平线-->
<h2>hello world 2</h2>
</body>
</html>
c) html注释
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<h1>hello world 1</h1>
<hr></hr><!--水平线-->
<h2>hello world 2</h2>
<!--<h3>hello world 3</h3>为三级标题-->
</body>
</html>
d) html段落
<p>段落、换行<br/>
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<p>你好！中国</p>
<hr></hr>
<p>hello world</p>
<br/><!--空一行-->
<p>大家好<p/>
</body>
</html>
e) html文本格式化
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<h1>hello world</h1>
<hr></hr>
<b>hello world 定义粗体文字</b>
<hr></hr>
<big>hello world 定义大号文字</big>
<hr></hr>
<em>hello world 定义着重文字</em>
<hr></hr>
<i>hello world 定义斜体文字</i>
<hr></hr>
<small>hello world 定义小号文字</small>
<hr></hr>
<strong>hello world 定义加重语气</strong>
<hr></hr>
<sub>hello world 定义下标文字</sub>
<hr></hr>
<sup>hello world 定义上标文字</sup>
<hr></hr>
<ins>hello world 定义插入文字</ins>
<hr></hr>
<del>hello world 定义删除文字</del>
<hr></hr>
</body>
</html>
f) html超链接
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<a href = "http://www.baidu.com">百度</a>
</body>
</html>
注意:<a>比较重要的属性有两个，分别是href、target；href指定超链接地址；target指定打开方式；_blank 新页面打开；
g) html图像
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<img src = "图片的相对路径"/>
</body>
</html>
h) html表格
<html>
<head>
<meta charset="utf-8"/>
<title>员工表</title>
</head>
<body>
<div class="emp_contaner">
<h3>员工信息表</h3>
<table id="tab">
<tr>
<th>全选<input type="checkbox" id="allcheckbox" οnclick="allCheckboxOne()"/></th>
<th>员工编号</th>
<th>员工名称</th>
<th>员工部门</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
<td>1001</td>
<td>张三</td>
<td>财务部</td>
<td><a href="#">删除</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
<td>1002</td>
<td>李四</td>
<td>人事部</td>
<td><a href="#">删除</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
<td>1003</td>
<td>王二</td>
<td>人事部</td>
<td><a href="#">删除</a></td>
<td><a href="#">修改</a></td>
</tr>
</table>
</div>
</body>
</html>
注意：*colspan =”2” 横跨两列 ， rowspan =”2” 横跨两行； *cellpadding 单元格边距（字与内边框的距离） cellspacing 单元格间距（内外边框的间距）;
i) html列表
<html>
<head>
<meta charset = "utf - 8">
<title>标题测试</title>
</head>
<body>
<h1 id = "h_list">列表演示</h1>
<hr>无序列表</hr>
<ul id = "list">
<li><a href = "department_全选框.html" target = "iframe">全选框</a></li><br/>
<li><a href = "Customer.html" target = "iframe">客户注册</a></li><br/>
<li><a href = "marray.htm" target = "iframe">婚礼承办</a></li><br/>
<li><a href = "floatImage.htm" target = "iframe">浮动布局</a></li><br/>
<li><a href = "TestJavaScript.htm" target = "iframe">练习Javascript</a></li><br/>
</ul>
<hr>有序列表</hr>
<ol>
<li><a href = "department_全选框.html" target = "iframe">全选框</a></li><br/>
<li><a href = "Customer.html" target = "iframe">客户注册</a></li><br/>
<li><a href = "marray.htm" target = "iframe">婚礼承办</a></li><br/>
<li><a href = "floatImage.htm" target = "iframe">浮动布局</a></li><br/>
<li><a href = "TestJavaScript.htm" target = "iframe">练习Javascript</a></li><br/>
</ol>
</body>
</html>
浏览器显示:
j) html表单
form中的属性：
action： 后面加url 指定当提交表单时向何处发送表单数据
method： get/post两个值，get为明文 post为加密
name： 指定表单的名称
target： _blanket _self _parent _top 指定网页打开方式
from标签中较为常用的标签有：
<input> <select> <label> <button>
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 规定用于验证 元素的值的正则表达式。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password
list 值为datalist的id 该属性引用 元素，其中包含 元素的预定义选项。
autofocus 该属性是一个 boolean 属性，让页面载入后，input自动获得焦点
html5中的新特性 标签规定了 元素可能的选项列表。 标签被用来在为 元素提供"自动完成"的特性。
用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。与标签配合使用
定义一个点击按钮
form 所属的form表单
name button名称
type
button 该按钮是可点击的按钮
reset 该按钮是重置按钮
submit 该按钮是提交按钮
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
for 值为某个元素的id 规定 label 与哪个表单元素绑定。
form form_id
name 规定textarea的名称
form form_id 规定从属的表单
cols 规定可见列数
rows 规定可见行数
使用标签定义下拉列表的可用选项.常见的属性：
name：指定select名称
multiple：规定可选择多个选项
用于把相关的选项组合在一起。label 为选项组规定描述。
常见的属性：value：指定送往服务器的选项值
selected：只有一个值–selected 默认选项
定义了表单的密钥对生成器字段
form 所属的表单名称
name 名称
keytype 使用的加密算法
rsa 默认的算法
dsa
es
<html>
<head>
<title>客户信息表</title>
<style>
table,td{
margin-top:50px;
border-collapse:collapse;
margin-left : auto;
margin-right : auto;
}
#tr1,#tr3,#tr5,#tr7,#tr9,#tr11,#tr13{
background-color:#F0F8FF;
}
div{
margin-left:50px;
}
a{
color:red;
}
</style>
</head>
<body>
<form action = "http://www.baidu.com" method = "post">
<table border = "1" >
<tr id = "tr1">
<td align = "right" width = "300" >客户类型:</td>
<td align = "left" width = "800"><select id = "s1" value = ""/>
<option>大客户</option>
<option>小客户</option>
</td>
</tr id = "tr2">
<tr>
<td align = "right"><a>*</a>姓 名:</td>
<td align = "left"><input type = "text" value = "" id = "n1"/>
</td>
</tr>
<tr id = "tr3">
<td align = "right">性 别:</td>
<td align = "left"><select id = "sex" value = ""/>
<option>男</option>
<option>女</option>
</td>
</tr>
<tr id = "tr4">
<td align = "right">出生年月:</td>
<td align = "left"><input type = "text" value = "" id = "d"/></td>
</tr>
<tr id = "tr5">
<td align = "right">所属公司:</td>
<td align = "left"><input type = "text" value = "" id = "c"/></td>
</tr>
<tr id = "tr6">
<td align = "right">职务:</td>
<td align = "left"><input type = "text" value = "" id = "j"/></td>
</tr>
<tr id = "tr7">
<td align = "right">电话:</td>
<td align = "left"><input type = "text" value = "" id = "T"/></td>
</tr>
<tr id = "tr8">
<td align = "right">地址:</td>
<td align = "left"><input type = "text" value = "" id = "a"/></td>
</tr>
<tr id = "tr9">
<td align = "right"><a>*</a>邮箱:</td>
<td align = "left"><input type = "text" value = "" id = "m"/></td>
</tr>
<tr id = "tr10">
<td align = "right">业务往来情况:</td>
<td align = "left"><input type = "textarea" value = "" id = "s"/></td>
</tr>
<tr id = "tr11">
<td align = "right">客户照片:</td>
<td><input type = "file" value = "浏览...." id = "b"/></td>
</tr>
<tr id = "tr12">
<td align = "right">事件提醒:</td>
<td align = "left"><input type = "text" value = "" id = "t"/></td>
</tr>
<tr id = "tr13">
<td align = "right"></td>
<td align = "left"><input type = "submit" value = "提交" id = "sub"/><input type = "reset" value = "重置" id = "r"/></td>
</tr>
</table><br/>
<div>注意:名称前面有<a>*</a>的为必填项</div>
</form>
</body>
</html>
浏览器显示:
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
