其他分享
首页 > 其他分享> > 11.16学习日志

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>四对元素标签构成的;

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <h1 id = "h1">hello world 1</h1>
  8.   <h2>hello world 2</h2>
  9.   <h3>hello world 3</h3>
  10.   <h4>hello world 4</h4>
  11.   <h5>hello world 5</h5>
  12.   <h6>hello world 6</h6>
  13.   </body>
  14.   </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>,数字越大,级数越小)

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <h1>hello world 1</h1>
  8.   <h2>hello world 2</h2>
  9.   <h3>hello world 3</h3>
  10.   <h4>hello world 4</h4>
  11.   <h5>hello world 5</h5>
  12.   <h6>hello world 6</h6>
  13.   </body>
  14.   </html>

 

b) html水平线

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <h1>hello world 1</h1>
  8.   <hr></hr><!--水平线-->
  9.   <h2>hello world 2</h2>
  10.   </body>
  11.   </html>

 

c) html注释

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <h1>hello world 1</h1>
  8.   <hr></hr><!--水平线-->
  9.   <h2>hello world 2</h2>
  10.   <!--<h3>hello world 3</h3>为三级标题-->
  11.   </body>
  12.   </html>

 

d) html段落<p>及段落换行<br/>

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <p>你好!中国</p>
  8.   <hr></hr>
  9.   <p>hello world</p>
  10.   <br/><!--空一行-->
  11.   <p>大家好<p/>
  12.   </body>
  13.   </html>

 

e) html文本格式化

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <h1>hello world</h1>
  8.   <hr></hr>
  9.   <b>hello world 定义粗体文字</b>
  10.   <hr></hr>
  11.   <big>hello world 定义大号文字</big>
  12.   <hr></hr>
  13.   <em>hello world 定义着重文字</em>
  14.   <hr></hr>
  15.   <i>hello world 定义斜体文字</i>
  16.   <hr></hr>
  17.   <small>hello world 定义小号文字</small>
  18.   <hr></hr>
  19.   <strong>hello world 定义加重语气</strong>
  20.   <hr></hr>
  21.   <sub>hello world 定义下标文字</sub>
  22.   <hr></hr>
  23.   <sup>hello world 定义上标文字</sup>
  24.   <hr></hr>
  25.   <ins>hello world 定义插入文字</ins>
  26.   <hr></hr>
  27.   <del>hello world 定义删除文字</del>
  28.   <hr></hr>
  29.   </body>
  30.   </html>

 

f) html超链接

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <a href = "http://www.baidu.com">百度</a>
  8.   </body>
  9.   </html>

 

 

注意:<a>比较重要的属性有两个,分别是href、target;href指定超链接地址;target指定打开方式;_blank  新页面打开;

g) html图像<img>

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <img src = "图片的相对路径"/>
  8.   </body>
  9.   </html>

 

h) html表格<table>

 

  1.   <html>
  2.   <head>
  3.   <meta charset="utf-8"/>
  4.   <title>员工表</title>
  5.   </head>
  6.   <body>
  7.   <div class="emp_contaner">
  8.   <h3>员工信息表</h3>
  9.   <table id="tab">
  10.   <tr>
  11.   <th>全选<input type="checkbox" id="allcheckbox" οnclick="allCheckboxOne()"/></th>
  12.   <th>员工编号</th>
  13.   <th>员工名称</th>
  14.   <th>员工部门</th>
  15.   <th colspan="2">操作</th>
  16.   </tr>
  17.   <tr>
  18.   <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
  19.   <td>1001</td>
  20.   <td>张三</td>
  21.   <td>财务部</td>
  22.   <td><a href="#">删除</a></td>
  23.   <td><a href="#">修改</a></td>
  24.   </tr>
  25.    
  26.   <tr>
  27.   <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
  28.   <td>1002</td>
  29.   <td>李四</td>
  30.   <td>人事部</td>
  31.   <td><a href="#">删除</a></td>
  32.   <td><a href="#">修改</a></td>
  33.   </tr>
  34.    
  35.   <tr>
  36.   <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
  37.   <td>1003</td>
  38.   <td>王二</td>
  39.   <td>人事部</td>
  40.   <td><a href="#">删除</a></td>
  41.   <td><a href="#">修改</a></td>
  42.   </tr>
  43.   </table>
  44.   </div>
  45.   </body>
  46.   </html>

 注意:*colspan =”2” 横跨两列 , rowspan =”2” 横跨两行; *cellpadding 单元格边距(字与内边框的距离) cellspacing 单元格间距(内外边框的间距); 

 

i) html列表<ul><ol>

 

  1.   <html>
  2.   <head>
  3.   <meta charset = "utf - 8">
  4.   <title>标题测试</title>
  5.   </head>
  6.   <body>
  7.   <h1 id = "h_list">列表演示</h1>
  8.   <hr>无序列表</hr>
  9.   <ul id = "list">
  10.   <li><a href = "department_全选框.html" target = "iframe">全选框</a></li><br/>
  11.   <li><a href = "Customer.html" target = "iframe">客户注册</a></li><br/>
  12.   <li><a href = "marray.htm" target = "iframe">婚礼承办</a></li><br/>
  13.   <li><a href = "floatImage.htm" target = "iframe">浮动布局</a></li><br/>
  14.   <li><a href = "TestJavaScript.htm" target = "iframe">练习Javascript</a></li><br/>
  15.   </ul>
  16.   <hr>有序列表</hr>
  17.   <ol>
  18.   <li><a href = "department_全选框.html" target = "iframe">全选框</a></li><br/>
  19.   <li><a href = "Customer.html" target = "iframe">客户注册</a></li><br/>
  20.   <li><a href = "marray.htm" target = "iframe">婚礼承办</a></li><br/>
  21.   <li><a href = "floatImage.htm" target = "iframe">浮动布局</a></li><br/>
  22.   <li><a href = "TestJavaScript.htm" target = "iframe">练习Javascript</a></li><br/>
  23.   </ol>
  24.   </body>
  25.   </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

  1.   <html>
  2.   <head>
  3.   <title>客户信息表</title>
  4.   <style>
  5.   table,td{
  6.   margin-top:50px;
  7.   border-collapse:collapse;
  8.   margin-left : auto;
  9.   margin-right : auto;
  10.   }
  11.   #tr1,#tr3,#tr5,#tr7,#tr9,#tr11,#tr13{
  12.   background-color:#F0F8FF;
  13.   }
  14.   div{
  15.   margin-left:50px;
  16.   }
  17.   a{
  18.   color:red;
  19.   }
  20.   </style>
  21.   </head>
  22.   <body>
  23.   <form action = "http://www.baidu.com" method = "post">
  24.   <table border = "1" >
  25.   <tr id = "tr1">
  26.   <td align = "right" width = "300" >客户类型:</td>
  27.   <td align = "left" width = "800"><select id = "s1" value = ""/>
  28.   <option>大客户</option>
  29.   <option>小客户</option>
  30.   </td>
  31.   </tr id = "tr2">
  32.   <tr>
  33.   <td align = "right"><a>*</a>姓 名:</td>
  34.   <td align = "left"><input type = "text" value = "" id = "n1"/>
  35.   </td>
  36.   </tr>
  37.   <tr id = "tr3">
  38.   <td align = "right">性 别:</td>
  39.   <td align = "left"><select id = "sex" value = ""/>
  40.   <option>男</option>
  41.   <option>女</option>
  42.   </td>
  43.   </tr>
  44.   <tr id = "tr4">
  45.   <td align = "right">出生年月:</td>
  46.   <td align = "left"><input type = "text" value = "" id = "d"/></td>
  47.   </tr>
  48.   <tr id = "tr5">
  49.   <td align = "right">所属公司:</td>
  50.   <td align = "left"><input type = "text" value = "" id = "c"/></td>
  51.   </tr>
  52.   <tr id = "tr6">
  53.   <td align = "right">职务:</td>
  54.   <td align = "left"><input type = "text" value = "" id = "j"/></td>
  55.   </tr>
  56.   <tr id = "tr7">
  57.   <td align = "right">电话:</td>
  58.   <td align = "left"><input type = "text" value = "" id = "T"/></td>
  59.   </tr>
  60.   <tr id = "tr8">
  61.   <td align = "right">地址:</td>
  62.   <td align = "left"><input type = "text" value = "" id = "a"/></td>
  63.   </tr>
  64.   <tr id = "tr9">
  65.   <td align = "right"><a>*</a>邮箱:</td>
  66.   <td align = "left"><input type = "text" value = "" id = "m"/></td>
  67.   </tr>
  68.   <tr id = "tr10">
  69.   <td align = "right">业务往来情况:</td>
  70.   <td align = "left"><input type = "textarea" value = "" id = "s"/></td>
  71.   </tr>
  72.   <tr id = "tr11">
  73.   <td align = "right">客户照片:</td>
  74.   <td><input type = "file" value = "浏览...." id = "b"/></td>
  75.   </tr>
  76.   <tr id = "tr12">
  77.   <td align = "right">事件提醒:</td>
  78.   <td align = "left"><input type = "text" value = "" id = "t"/></td>
  79.   </tr>
  80.   <tr id = "tr13">
  81.   <td align = "right"></td>
  82.   <td align = "left"><input type = "submit" value = "提交" id = "sub"/><input type = "reset" value = "重置" id = "r"/></td>
  83.   </tr>
  84.   </table><br/>
  85.   <div>注意:名称前面有<a>*</a>的为必填项</div>
  86.   </form>
  87.   </body>
  88.   </html>

 

标签:定义,form,11.16,元素,表单,学习,world,日志,hello
来源: https://www.cnblogs.com/yzfnb/p/14019394.html