1、HTML中常用标签

4591566 · 发表于 2017-6-22 07:00:29

1、HTML简介(Hyper Test Markup Language)：
　　1) HTML主要负责的是页面展示，浏览器自上而下的顺序依次解释执行HTML代码，最终展示在浏览器上一个效果。
　超文本：有流媒体的存在，有图片的存在，有声音的存在，这些都可以称为超文本
标记语言：所有标记语言都是由标签组成，有开始标签也有结束标签，开始和结束是一对。浏览器是按照固定的标记去展示的。里面的标签不区分大小写，如果掉了标签号也照样可以运行，语法比较松散。
2) HTML的版本：
HTML4.0规范
HTML规范是w3c负责制定的规范；w3c(world wide web:www)是世界万文网联盟
HTML5.0将成为主流，是近制定的规范，里程碑
HTML5.0和HTML4.0虽然只差一个版本，但是差距很大，特点是跨客户端
3) HTML规范是给谁用的
浏览器的开发商必须遵守HTML规范
开发网页的程序员，例如：美工、web前端工程师，都需要遵守HTML规范进行进行开发
　　2、常用标签
　　<title> 设置网页的标题
<center> 居中
<table> 表格
  其属性有：border表格边框的宽度、width表格的宽度、height表格的高度、align表格的对齐方式、bgcolor表格的背景颜色
　　表格中的子标签

<thead> 表格头
  <tbody> 表格体
  <tfood> 表格脚
  <tr>表格中的行标签
其属性有：align表格的对其方式
  <td>表格中的标准单元格标签
其属性有：align表格的对其方式、rowspan(行向)将几个单元格合并、colspan(纵向)将几个单元格合并
  <th>表格中的标题栏标签
　|表格简单示例:|
  <table border="1px" width="500px" heigth="300px" align="center">
<tr align="center">
<td>打</td>
<td>辉</td>
<td>哥</td>
</tr>

<body> 网页主体
  其属性有：
  bgcolor：设置整个网页主体的背景颜色
  background：设置整个网页的背景图片（属性后面为图片资源的路径）

  网页主体中的子标签：
  <font>网页主体中的字体
其属性有：color字体颜色、size字体大小
  <center> 居中
  <hr>行线，其也是一个独目标签
其属性：color设置行线的颜色、width设置横线的宽度
  <img>图片
  其属性：src设置图片的来源路径、width宽度、height高度、align对齐方式、alt提示信息、titile设置鼠标悬停时显示的提示文本
  <a> 超链接/热链接hot references
其属性：href设置连接的路径（可以为相对路径、绝对路径、也可是网络中某个资源的路径）
target设置资源最终的显示位置：
可选值：
   _blank 在新窗口中显示
   _self 在当窗口中显示，这是一种可以缺省的方式
   _parent 在当前窗口的父窗口中显示，
   _top  在当前窗口的最顶层窗口中显示
href和name属性一起使用可以作为锚点：
<a href="#one">第一回</a>
<a name="one">第一回</a>
  <h1>标题字  其具体为h1 ~ h6
  <h1>标题字</h1>
  <h2>标题字</h2>
  <h3>标题字</h3>
  <h4>标题字</h4>
  <h5>标题字</h5>
  <h6>标题字</h6>
  <p>段落标签

  <pre>预留文本格式
  pre标签中文本的格式和最终显示到网页上的格式是相同的。
  常见的实体符号：
< 小于号
>大于号
 标示一个空格
备注：后面点;不能少
<ul>无序列表，内含列表项<li> li标签用于定义列表项目（unordered:无序的意思，list：列表）
<ol>有序列表,内含列表项<li>
  <i>斜体字
  <del>删除字
  <ins>插入字
  <b>粗体字
  10<sup>2</sup> 
  10<sub>m</sub>内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

  <form> 表单
  其属性：name设置表单的名称、action用来设置表单发送请求时的请求路径（超链接中的href相同）
method设置表单提交数据的方式，可选址为get和post，默认值为get
  其子标签：
<input> 标签用户搜集用户的信息
input控件：
   1、input是输入域
   2、每个input控件都有name属性，用来设置输入域控件的名称
   3、每个input控件都有type属性，用来设置输入域的类型
   4、每一个input控件都有type属性，用来设置输入域的类型
   type可选的值：规定input元素的类型（控件类型可选的值）
   text 显示为表格框(文本字段) 其value是不需要提供的，用户填写的就是value
   password 显示为表格框(密码字段) 其value是不需要提供的，用户填写的就是value
   radio 表单中的单选按钮其name属性相同、value属性不同 checked为默认的意思
   checkbox 表单中的一个选择框同一组的checkbox的name是相同的，value不同,checked表默认
   button 普通按钮，普通按钮不具有提交表单的功能，button类型的控件有value属性
   submit 提交按钮，还需要编写到form标签内部，submit类型的控件有value属性
   reset 重置当前表单按钮，让当前表单回归到原始状态，编写在form标签内部重置的是当前表单
   file    文件上传
   hidden 隐藏控件
   .....

文件： <input type="file" name="filename"/>


<input type="hidden" value="提交" />
<input type="submit" value="提交" />


<input type="text" name="username" value="zhangsan" readonly />

<input type="text" name="username" value="zhangsan" distable />
size：设置文本框的宽度，设置文本框的可视文本长度
maxlength：设置文本框中最多可编写的字符长度
   <input type="text" name="username" size="100" maxlength="10"/>
<select>下拉列表其属性name，其子标签<option> option属性有value
例如：  <select name="grade">
   <option value="gz">高中</option>
   <option value="dz">大专</option>
   <option value="db">大本</option>
   <option value="ss">硕士</option>
   <select>
<textarea>文本域其属性cols为列、rows为行、name为名字
textarea标签之间的文本或用户在文本域中填写的内容就是该name属性对应的value
 表示空格　　3、Http协议
　　浏览器和服务器之间是解耦和的，浏览软件和服务器软件之间通讯的时候，有特定的通讯协议（这个协议是w3c制定的。浏览器和服务器之间的通讯协议是http协议，是超文本传输协议）。
HTTP协议包括请求协议和响应协议
服务器有：tomcat、weblogic(oracle)、jboss、websphere(ibm)
　　4、数据传输格式
　  数据传输格式是w3c组织制定的HTTP超文本传输协议的一部分：
   1)  get请求数据传输的格式：其提交的数据会显示在地址栏上面
  　　  action?name=value&name=value&name=value
　 2)  POST请求提交的数据格式还是：name=value&name=value&name=value....
  　　  采用POST请求提交数据不会显示在浏览器地址栏上面，相对安全
　　|表单示例:|
　　<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form name="username" action="http://www.baidu.com" method="post">


用户名：<input type="text" name="username"  size="100" maxlength="10" readonly="readonly">
<br>

密码    ：<input type="password" name="userpassword" disabled="disabled">
<br>

性别：<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female" >女
<br>
兴 趣 ：

运动<input type="checkbox" name="interest" value="sport"/>
音乐<input type="checkbox" name="interest" value="music" />
美食<input type="checkbox" name="interest" value="food" checked/>
旅游<input type="checkbox" name="interest" value="travel" />
睡觉<input type="checkbox" name="interest" value="sleep" />
<br>

学历：<select name="garde">
  <option value="gz">高中</option>
  <option value="dz">大专</option>
  <option value="bk">本科</option>
  <option value="yjs">研究生</option>
</select>
<br>

<input type="button" value="按钮">
<br>
<input type="reset" value="重置">
<br>

<input type="file" value="上传文件">
<br>
<input type="submit" value="注册">
</form>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] 1、HTML中常用标签

扫码加入运维网微信交流群