<!DOCTYPE html> 文件开头统一的标准！

HTML包含了两部分：

　　head与body  固定的格式。

一、head部分：

　　head部分分为两部分：meta标签与非meta标签：

　　　　编码、跳转、刷新、关键字、描述、兼容性

1.1 meta标签：

　　meta有两个属性：name与http-equiv

　     <meta charset="utf-8"> 设置编码

name属性：

  1. <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
  2.  
  3. <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

http-equiv属性：

  1.   刷新与跳转：<meta http-equiv="refresh" content="3;http://www.baidu.com">

1.2 非meta标签：

  1.     <title>oldboy</title>  　　　　　　　　　　　　　　　　　　　 搞标题
  2.     <link rel="icon" href="http://www.jd.com/favicon.ico">  搞图标
  3.     <link rel="stylesheet" href="css.css">　　　　　　　　　　　？
  4.     <script src="hello.js"></script>　　　　　　　　　　　　　　 ？

二、BODY标签

2.1基本标签(块级标签，行内标签)

　　所有的标签都分为：块级标签与内联标签（行内标签）  可以使用谷歌浏览器的开发者来查看，属于哪一种标签。

　　特殊字符与图标： 空格&nbsp &gt &lt &copy 其他查询的时候看

<p><p>  　　　　　　段落标签，段落之间存在间隔

<br>　　　　　　　　换行

<h1></h1>  　　　　  h1-h6之间，加大加粗

<span></span>  　　 是一个白板标签，让css让控制具有变成任何标签的能力

<hr>　　　　　　　  下划线

<div>　　　　　　    也是一个白板标签

　　标签：最重要的作用就是定位

2.2 form表单

　　浏览器与服务器通讯，传输我们的填入的数据，就是使用form表单：  form表单中，有 input，textarea，select三个  这是最最最重要的，其他的都是定义界面位置

form的属性：          name在form表单中是必须的，name是发给服务器的键，服务端就是根据name的键来操作数据！

  • action：   表单的提交地址
  • method：请求方式 get,post----------->两者其实没区别，安全性都一样        只是get把数据加载url中，post是吧数据放在请求体中。

input系列：

　　　　input type='text' -name属性，value='赵凡'(默认显示的数值)
　　　　input type='password' -name属性
　　　　input type='submit' -value 按钮上面的数值
　　　　input type='radio' -单选框 value,name属性(name相同,则互斥) cheked="checked"默认被勾选
　　　　input type='checkbox' -多选框 value,name属性(批量获取属性)
　　　　input type='file' -依赖form表单的属性enctype="multipart/form-data"
　　　　input type='reset' -重置整个表单到默认的值
　　　　input type='botton' -按钮，在学js的时候，会加入

textarea:多行文本

  1. <textarea name="text" rows="10" cols="10">默认文字</textarea>

select：下拉选择框，name在select中定义，value在option中定义：

  • select->name 
  • option->value 
  • selected="selected"; 
  •  size="10"显示多个
  •  multiple="multiple" 多选按住shift
  • optiongrop 分组但是不能选中
  1.         <select name="city1"  size="5">
  2.             <option value="1">河南省</option>
  3.             <option value="2">北京省</option>
  4.             <option value="3">北京省</option>
  5.             <option value="4">北京省</option>
  6.             <option value="5">北京省</option>
  7.         </select>
  8.         <select name="city2" multiple="multiple" size="2">
  9.             <optgroup label="北京">
  10.                 <option value="1">河南省</option>
  11.                 <option value="2">北京省</option>
  12.             </optgroup>
  13.  
  14.         </select>

select

三、a标签

两个作用1.跳转 2.锚

3.1跳转使用

target参数是打开新页面的方式

  1. <a href="http:\\www.baidu.com" target="_blank">百度</a>

3.2锚使用

<a href="#某个标签的id"> id不能重复

  1. <a href="#1">第1章</a>
  2. <a href="#2">第2章</a>
  3. <a href="#3">第3章</a>
  4. <a href="#4">第4章</a>
  5.     <div id="1" style="height: 500px;">第一章</div>
  6.     <div id="2" style="height: 500px;">第2章</div>
  7.     <div id="3" style="height: 500px;">第3章</div>
  8.     <div id="4" style="height: 500px;">第4章</div>

四、图片标签

  1.     <a href="http://www.baidu.com">
  2.     <img src="1.jpg" height="100" title="大美女" alt="图片不显示的时候出现">
  3.     </a>

五、列表与表格

　　　　列表我们一般都是使用css去改造我们想要的。

  1.      <ol>
  2.          <li>were</li>
  3.          <li>12qeq3</li>
  4.          <li>12eqeq3</li>
  5.          <li>1eqeq3</li>
  6.      </ol>
  7.      <ul>
  8.          <li>12wedw</li>
  9.          <li>12wedw</li>
  10.          <li>12wedw</li>
  11.          <li>12wedw</li>
  12.      </ul>
  13.  <dl>
  14.      <dt>ttt</dt>
  15.          <dd>dddd</dd>
  16.          <dd>dddd</dd>
  17.          <dd>dddd</dd>
  18.      <dt>ttt</dt>
  19.          <dd>dddd</dd>
  20.          <dd>dddd</dd>
  21.          <dd>dddd</dd>
  22.      <dt>123</dt>
  23.          <dd>dddd</dd>
  24.          <dd>dddd</dd>
  25.          <dd>dddd</dd>
  26.  </dl>

三种列表

表格

  1. <table border="1">
  2.     <thead>
  3.         <tr>
  4.             <th>主机</th>
  5.             <th>端口</th>
  6.             <th>操作</th>
  7.         </tr>
  8.     </thead>
  9.     <tbody>
  10.         <tr>
  11.             <td>1</td>
  12.             <td colspan="2">1</td>
  13.         </tr>
  14.         <tr>
  15.             <td>1</td>
  16.             <td rowspan="3">1</td>
  17.             <td>1</td>
  18.         </tr>
  19.         <tr>
  20.             <td>1</td>
  21.             <td>1</td>
  22.         </tr>
  23.             <tr>
  24.             <td>1</td>
  25.             <td>1</td>
  26.         </tr>
  27.     </tbody>
  28. </table>

table

六、小特性：

fileset 与lable

1.文字被框围绕

2.点击文本，光标自动进入文本框：通过lable for id来实现

  1. <fieldset>
  2.     <legend>帅炸了</legend>
  3.     <label for="id1">姓名：</label>
  4.     <input id="id1" type="text">
  5.     <br/>
  6.     <label for="id2"> 密码：</label>
  7.     <input id="id2" type="text">
  8. </fieldset>

前段篇：HTML的更多相关文章

  1. TGL站长关于常见问题的回复

    问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...

  2. 一次I/O问题引发的P0重大故障[改版重推] 原创 二马读书 二马读书 8月16日 这是前段时间发的一篇文章，很多读者反馈，文章没有揭示故障发生的详细

    一次I/O问题引发的P0重大故障[改版重推] 原创 二马读书 二马读书 8月16日 这是前段时间发的一篇文章,很多读者反馈,文章没有揭示故障发生的详细

  3. 【插件篇】前段bootstrap-table-treegrid试手，解决无法显示树形列表或者图标不显示问题。

    说明:具体代码操作我就不贴了.官方有正规的例子!bootstrap-table-examples传送 使用注意事项: 传入的id和pid可以是string类型的(我后台返回的是Long类型转换成str ...

  4. 操作系统篇-分段机制与GDT|LDT

    || 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言     在<操作系统篇-浅谈实模式与保护模式>中提到了两种模式,我们说在操作系统中,其实大部分时间是待在保护模式中的. ...

  5. ASP.NET MVC学前篇之Ninject的初步了解

    ASP.NET MVC学前篇之Ninject的初步了解 1.介绍 废话几句,Ninject是一种轻量级的.基础.NET的一个开源IoC框架,在对于MVC框架的学习中会用到IoC框架的,因为这种IoC开 ...

  6. iOS开发——网络实用技术OC篇&网络爬虫－使用青花瓷抓取网络数据

    网络爬虫-使用青花瓷抓取网络数据 由于最近在研究网络爬虫相关技术,刚好看到一篇的的搬了过来! 望谅解..... 写本文的契机主要是前段时间有次用青花瓷抓包有一步忘了,在网上查了半天也没找到写的完整的教 ...

  7. 关于WEB Service&WCF&WebApi实现身份验证之WCF篇（2）

    因前段时间工作变动(换了新工作)及工作较忙暂时中断了该系列文章,今天难得有点空闲时间,就继续总结WCF身份验证的其它方法.前面总结了三种方法(详见:关于WEB Service&WCF& ...

  8. 微信订阅号里实现oauth授权登录，并获取用户信息 (完整篇)

    摘要 这段时间一直有人问我,订阅号实现的oauth授权登录的问题,之前写的比较简单,很多人不明白.众所周知,微信公众号分订阅号.服务号.企业号:每个号的用途不一样,接口开放程度也不一样.微信还有个扯淡 ...

  9. Python之路【第十八篇】：Web框架们

    Python之路[第十八篇]:Web框架们   Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...

随机推荐

  1. Ubuntu环境下IPython的搭建和使用

    1. Ubuntu操作系统版本 说明:Ubuntu 12.04.3 LTS自带的Python 2.7.3版本. 2. 安装IPython 说明: 输入命令sudo apt-get install ip ...

  2. [bzoj1500 维修数列](NOI2005) (splay)

    真的是太弱了TAT...光是把代码码出来就花了3h..还调了快1h才弄完T_T 号称考你会不会splay(当然通过条件是1h内AC..吓傻)... 黄学长的题解:http://hzwer.com/28 ...

  3. 电铸3D18K硬金 电铸易熔合金 电铸中空硬金饰品合金

        俊霖电铸3DK金易熔合金是要求相互关连,互为条件,缺一不可,是产品完整性和完美性的重要体现.    第一.适用性:电铸3DK金易熔合金的性能应适用于电铸.首饰.K金饰品.摆件等工艺品的易熔合金 ...

  4. [国嵌攻略][151][nandflash驱动程序设计]

    初始化 打开/drivers/mtd/nand/s3c2410.c找到nand flash驱动程序代码,找到模块初始化函数s3c_nand_init,找到platform_driver中的probe函 ...

  5. [国嵌笔记][026][ARM伪指令]

    ARM机器码 1.汇编程序通过汇编器变成机器码,然后才能在ARM处理器上运行 2.ARM机器码是一个32位的数,被分成了多个段,每个段都有各自的含义 3.格式: cond:表示条件(4位) I:表示源 ...

  6. 语义化版本控制规范（SemVer）

    摘自: http://semver.org/lang/zh-CN/ 简介 在软件管理的领域里存在着被称作"依赖地狱"的死亡之谷,系统规模越大,加入的套件越多,你就越有可能在未来的某 ...

  7. VN问题：error：请求的名称有效，但是找不到请求的类型的

    把url中的jmsjms-pc换成IP地址试试看 IP地址你用的是外网地址,应该用局域网内网地址,改成内网地址再试试看 还有练习架设SVN服务器初期尽量用http协议,不要上来就用https协议,ht ...

  8. Typescript学习笔记

    什么是 TypeScript TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript. 安装 TypeScript 命令行工具安装: npm install ...

  9. log4j配置文件简要记录

    和大多数配置文件一样,log4j配置文件也有key-value形式和xml形式.这里主要记录一下key-value的形式 我们通过配置,可以创建出Log4j的运行环境.Log4j由三个重要的组件构成: ...

  10. 图文教程:在Mac上搭建Titanium的iOS开发环境

    http://mobile.51cto.com/web-317170_all.htm 跨平台开发工具Titanium的兴起之路:HTML 5是最大威胁 比较Titanium和PhoneGap两大iOS ...