码迷，mamicode.com
首页 > 其他好文 > 详细

11.16学习日志

时间：2020-11-26 14:14:28      阅读：5      评论：0      收藏：0      [点我收藏+]

标签：财务部   cin   元素   array   一起   attribute   hyper   html注释   决定   

   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>

 

11.16学习日志

标签：财务部   cin   元素   array   一起   attribute   hyper   html注释   决定   

原文地址：https://www.cnblogs.com/yzfnb/p/14019394.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！