11.16学习日志
作者:互联网
11.16学习日志
HTML运用
1、HTML概念
HTML:Hyper Text Mark-up Language超文本标记语言,是一种用于创建网页的标准标记语言。通过元素标签的形式建立Web站点,通过浏览器进行解析。
2、HTML基本语法结构
开始标签 属性 属性值 内容 结束标签;
<h1 id = "h1">hello world 1</h1>
3、HTML文档结构
所用的HTML网页文件都是由<html></html>、<head></head>、<title></title>、<body></body>四对元素标签构成的;
- <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图像<img>
- <html>
- <head>
- <meta charset = "utf - 8">
- <title>标题测试</title>
- </head>
- <body>
- <img src = "图片的相对路径"/>
- </body>
- </html>
h) html表格<table>
- <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列表<ul><ol>
- <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>
<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
- <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>
标签:定义,form,11.16,元素,表单,学习,world,日志,hello 来源: https://www.cnblogs.com/yzfnb/p/14019394.html