前端-----html（1）

基本结构

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

<!DOCTYPE html>

bead标签

Title

网页头部信息

Link

css

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon

<link rel="shortcut icon" href="image/favicon.ico">   <!--定义标签页图标-->

Style

在页面中写样式
例如：

< style type="text/css" >

.bb{

background-color: red;

}

< /style>

Script

引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
< script type="text/javascript" > ... </script >

常用标签

分为块级标签，行内标签：

块级标签，div（白板），H系列（加大加粗），p标签（段落与段落之间有间距）

行内标签，span（白板）

标签之间可以嵌套

标签存在的意思，css操作，js操作

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

H 标签

1-6标题从大到小排序

span标签

<span>asd</span>白板标签，方便css调用

div标签

<div>asd</div>白板标签，最常用

input标签

输入：

<form action="http://url">
     <input type="text" name="user">      name属性
     <input type="password" name="passwd">  name属性
     <input type="button" value="提交1">  按钮
     <input type="submit" value="提交2">  提交按钮，表单
</form>

以get方式提交数据，会把内容以拼接url的方式发送
post会把数据放在内容里传输过去，form标签默认以get方式发送数据

例子：

<!DOCTYPE html>  <!--规范化 对应关系-->

<html lang="en"> <!-- html标签，只能有一个-->

<head>           <!-- head标签，只能有一个-->

    <meta charset="UTF-8">   <!--指定字符集-->

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>  <!--标签名-->

</head>

<body>

<form action="https://www.sogou.com/web" method="get">

     <input type="text" name="query">

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

</form>

</body>

</html>

点击提交按钮会自动跳转

选择：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <form>

         <div>

             <p>请输入性别：</p>   <!--单选框测试-->

             男：<input type="radio" name="gender" value="men"/>  <!--name值设置为一样，可以限制为只能选择一个-->

             女：<input type="radio" name="gender" value="women"/>

             <p>爱好：</p>      <!--多选框测试-->

             足球：<input type="checkbox" name="favor" value="football"/>  <!--复选框用同一个name方便后台接收-->

             篮球：<input type="checkbox" name="favor" value="basketball" checked="checked"/> <!--checked可用于默认被选中-->

             网球：<input type="checkbox" name="favor" value="volleyball"/>

         </div>

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

     </form>

</body>

</html>

上传文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <form enctype="multipart/form-data">  <!--文件上传依赖的属性-->

         <div>

             <p>上传文件：</p>      <!--上传文件测试-->

             <input type="file" name="fname">

         </div>

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

     </form>

</body>

</html>

重置：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <form enctype="multipart/form-data">  <!--文件上传依赖的属性-->

         <div>

             <p>上传文件：</p>      <!--上传文件测试-->

             <input type="file" name="fname">

         </div>　　

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

         <input type="reset" value="重置" /> 重置所有填进去的表单内容

     </form>

</body>

</html>

textarea标签

<textarea>默认值</textarea>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <form>

         <textarea name="memo">默认值</textarea>

         <br>

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

     </form>

</body>

</html>

下来框：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <form>

         <div>

             <p>选择家乡：</p>

             <select name="city" size="4" multiple="multiple"> <!--size默认为1,multiple为支持多选，默认不支持-->

                 <option value="beijing">北京</option>

                 <option value="shanghai">上海</option>

                 <option value="nanjing">南京</option>

                 <option value="chongqing" selected="selected">重庆</option> <!--默认选择-->

             </select>

         </div>

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

     </form>

</body>

</html>

a标签

1、target属性，_black表示在新的页面打开

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

2、锚，标签的id不允许重复

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <a href="#i1">第一章</a>

     <a href="#i2">第二章</a>

     <a href="#i3">第三章</a>

     <div id="i1" style="height:600px">第一章的内容</div>

     <div id="i2" style="height:600px">第二章的内容</div>

     <div id="i3" style="height:600px">第三章的内容</div>

</body>

</html>

img标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <a href="http://www.baidu.com">

     <img src="2.JPG" title="图片" style="height: 200px;width: 200px;" alt="图片无法加载会显示这个">

     </a>

</body>

</html>

#图片用a标签包起来，可以实现点击图片跳转网址

列表标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <ul>

         <li>sdfs</li>

         <li>sdfs</li>

     </ul>

     <ol>

         <li>werwer</li>

         <li>werwer</li>

     </ol>

</body>

</html>

表格

第一种实现方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv=“Refresh” Content=“3″>

    <title>这是标题</title>

</head>

<body>

     <table border="1">

         <tr>

             <td>第一行，第一列</td>

             <td>第一行，第二列</td>

             <td>第一行，第三列</td>

         </tr>

         <tr>

             <td>第二行，第一列</td>

             <td>第二行，第二列</td>

             <td>第二行，第三列</td>

         </tr>

     </table>

</body>

</html>

第二种实现方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1">

      <thead>    <!--表头的定义-->

      <tr>

          <th>表头1</th>

          <th>表头2</th>

          <th>表头3</th>

          <th>表头4</th>

      </tr>

      </thead>

      <tbody>  <!--定义表的body-->

      <tr>

          <td rowspan="2">1</td>  <!--占用两个单元格，效果为行合并单元格-->

          <td>1</td>

          <td colspan="2">1</td> <!--占用两个单元格，效果为列合并单元格-->

      </tr>

      <tr>

          <td>1</td>

          <td>1</td>

          <td>1</td>

      </tr>

      </tbody>

</table>

</body>

</html>

fieldset标签和label标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

   <fieldset>

      <legend>登陆</legend>

      <label for="1">用户名：</label>   <!--for跟id搭配实现点击用户名也能自动切换到输入框-->

      <input id="1" type="text" name="user">

      <br />

      <label for="2">密码：</label>   <!--for跟id搭配实现点击用户名也能自动切换到输入框-->

      <input id="2" type="text" name="password">

   </fieldset>

</body>

</html>

实现效果如下：

前端-----html（1）的更多相关文章

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
细说前端自动化打包工具--webpack
背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
前端框架 EasyUI （0）重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

编码标准：ASCII、GBK、Unicode（UTF8、UTF16、UTF32）
英文编码(单字节字符集,码值范围0~127):字节最高位是0 ASCII编码,用于英文字符.中文编码(双字节字符集):首字节(8位)的最高位是1.可依据首字节最高位来判断中英文. GB2312, 旧版 ...
python测试断言
这几天看了一下python的测试,基于函数方法和基于类的测试,主要使用的模块是unittest模块,为特定的方法和类,建立测试模块,测试函数功能是否满足预期.下面是模仿书里面的一个例子. City.p ...
keepalived初次安装体验
keepalived主要有两大功能,一个是LB,一个是VRRP+failover,其中LB功能和LVS的功能类似,都是通过在LB上配置RS,监控RS的状态,将从client来的请求发送给对应算法的RS ...
基本类型（2）：oracle中有4个大对象（lobs）类型可用，分别是blob,clob,bfile,nclob。
1)blob:二进制lob,为二进制数据,最长可达4GB,存贮在数据库中. 2)clob:字符lob,字符数据,最长可以达到4GB,存贮在数据库中. 3)bfile:二进制文件;存贮在数据库之外的只读 ...
JavaSE_坚持读源码_HashMap对象_put_Java1.7
当你往HashMap里面put时,你其实在干什么? /** * Associates the specified value with the specified key in this map. * ...
Nginx记录-nginx 负载均衡5种配置方式（转载）
nginx 负载均衡5种配置方式 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. 2.weight 指定轮询几率,weight和访问比率成 ...
HDU 6400(括号组合 ~)
题意是说在 h 行 w 列的矩阵中,通过设计使得尽可能多的行或列能满足题中的平衡条件. 如果行数(列数)是奇数,那么每一列(行)一定不能平衡,就要按照满足每一行(列)平衡,输出“ () “:若行数和列 ...
Spark整合HBase,Hive
背景: 场景需求1:使用spark直接读取HBASE表场景需求2:使用spark直接读取HIVE表场景需求3:使用spark读取HBASE在Hive的外表摘要: 1.背景 2.提交脚本内容场 ...
自学python 4.
1.li = ["alex","tom","mike","god","merffy"](1)a = ...
flask 文件转为pdf并添加二维码
背景: 宝安区需求,企业会下载表格,打印后填报.填报后收上表格,统一录入PDA.因为某台PDA只能录某个地方的表格,所以他们希望纸质表上有个二维码,扫描出现填报公司的一些信息,以及统计(好像是这样,没 ...