前端-----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 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

SSH整合redis和MongoDB错误笔记
由于毕设中做的是图片搜索网站,选择前端框用SSH,因为之间接触过SSH框架,略有了解,但没有深究,现在在整合redis和mongodb的过程中遇到很多错误,也是十分痛苦,只能通过百度和一步步尝试着解决 ...
OpenRefine
无论是现今的大数据还是企业内部的小数据,都存在一些普遍的问题,如数据格式不对需要转换,一个单元格内包含多个含义的内容,包含重复项等等,虽然我们也可以使用excel解决,但是excel天生有诸多限制,比 ...
Linux基础入门教程
Linux基础入门教程 --------- Linux学习路径 Linux学习者,常常不知道自己改怎么学习linux:Linux初级,也就是入门linux前提是需要有一些计算机硬件相关的知识或是有一下 ...
springboot学习之maven多环境打包的几种方式
在应用部署的时候,往往遇到需要发布到不同环境的情况,而每个环境的数据库信息.密钥信息等可能会存在差异. 1.在默认的application.properties或者yaml中设置profile spr ...
flume常见异常汇总以及解决方案
flume常见异常汇总以及解决方案作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 实际生产环境中,我用flume将kafka的数据定期的往hdfs集群中上传数据,也遇到过一系列的坑 ...
java 可设置最大内存
测试方法:在命令行下用 java -XmxXXXXM -version 命令来进行测试,然后逐渐的增大XXXX的值,如果执行正常就表示指定的内存大小可用,否则会打印错误信息. 堆(Heap)和非堆(N ...
SecureCRT for ubuntu 菜单消失
两种解决方案. 1.先说网上查到的复杂的: 编辑CRT安装目录下的Global.ini 找到 D:"Show Menu Bar"=00000000 改成 D:"Show ...
使用Ruby处理大型CSV文件
处理大型文件是一种内存密集型操作,可能导致服务器耗尽RAM内存并交换到磁盘.让我们看一下使用Ruby处理CSV文件的几种方法,并测量内存消耗和速度性能. Prepare CSV data sample ...
Linux下C语言连接MySQL
本文出自 http://blog.csdn.net/shuangde800 首先保证安装: 1:安装MySQL:sudo apt-get install mysql-server mysql-cl ...
jspdf简单使用
安装 npm install jspdf --save 英文输出 import jsPDF from 'jspdf-customfonts' let doc = new jsPDF() doc.tex ...