Html 前端的应用及开发第一记

HTML 超文本标记语言 (Hypertext Markup Language) 目前版本为4.0。

一,html与html5的区别

  html是采用基于xhtml1.0版本的浏览器编辑语言,浏览器可以识别,客户端通过html发送请求(request)到服务端(IIS),如果不涉及到数据交互,则直接返回相应的结果(response)到客户端,如果需要进行数据库访问操作,则在后台通过C#语言对数据库执行相应操作,再将结果返回。

HTML5是为了在移动端更好地支持多媒体,所以加入了一些新的标签,如audio,video,canvas.但现阶段由于对浏览器版本有更高的要求,所以兼容性还有待加强。

二,html的主体结构

  <html>

    <head>

      <title>这是我的第一份日志</title>

      <meta http-equiv="Content-type" content="text/html; charset="utf-8">

    </head>

    <body>

       my zone

       </body>

  </html>

<!-- html默认编码格式是utf-8,还有一种是gb2312.当打开网页时出现乱码,注意查看网页的默认编码方式和编码版本,编码版本不同会造成乱码 -->

三,常用的标签

1,段落标签(块级元素)  <p>title</p>

2,换行标签 <br/> Content

3,水平线 <hr size="20px" width ="500"  Align="center" color="#FF000"/>

4,空格&nbsp

5,字体标签<h1>-<h6> <h1>最大 <h6>最小,常用于页面中标题设置

6,主体标签<body> 属性 <body bgColor="#FF000" text="red" background="image/zero.jpg"></body>

四,有序列表和无需列表

  无序列表(常用于导航,菜单,列表项)

    <ul>

      <li>car</li>

      <li>house</li>

    </ul>

    <ul type>元素属性有三个值:circle,square,disc

  有序

    <ol>

      <li>round</li>

      <li>knight</li>

    </ol>

  无序有序混合

      

五,其他标签

换行标签  <br/>

水平线标签 <hr/>

空格&nbsp;

加粗<b></b>

倾斜<i></i>

下划线<u></u>

删除线<s></s>

p2 p<sub>2</sub>

p2 p<sup>2</sup>

  

六 表格,单独用于制作表单的时候会用到,平常多用div+css

<table>

    <tr>

      <th>name</th>

      <th>age</th>

      <th>sex</th>

    </tr>

    <tr>

      <td>小二</td>

      <td>25</td>

      <td>女</td>

    </tr>

  </table>

  Rowspan :跨行属性, Colspan:跨列属性。不能简写为cols 和rows

七,绝对路径和相对路径, 在实际应用中多写相对路劲,实例为主

  

../../demo3/1.jpg

七,超链接

<a href ="url">title</a>

1, 空链接 <a href="javascript:;"> </a>  同<a href="javascript: void(0);" ,点击不会有任何页面跳转

<a href="#"> 回到页面顶部,页面不刷新

     <a href=" ">  点击后刷新并回到顶部

     <a href="/"> 点击跳转到上一级目录

2,链接打开窗口

     _blank  _parent _self _top

八,图片标签

  <img src=" 路径" alt="描述" title="title" width="xxpx" height="xxpx" />

  alt属性常用于图片打不开的时候文本替代。title属性用于鼠标滑停时候显示。图片加alt属性也利于网页优化,通常加关键词。

摘要来自国民风副班的资料

其他:常用的块级标签和行级标签

一般的 块级元素诸如段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、<div>和<body>等元素。
块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

行级标签:类似文本的显示方式,按“行”逐一显示,常用的行级标签有:

(1)、图像标签<img>:表示用于在网页中显示图片.   (2)、超链接标签<a>:   (3)、范围标签<span>:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.   (4)、换行标签<br />:表示强制换行显示.   (5)、输入框标签<input>   (6)、多行文本域标签<textarea>

时间: 2024-10-06 07:03:23

Html 前端的应用及开发第一记的相关文章

前端样式脚本本地化开发

这里分享两个本地化方案(自整理): 本地服务器(仅内网调试) 在本地架设临时服务器进行样式脚本调试 有道云笔记(外网调试) 利用有道云笔记在本地调试脚本 1.本地服务器方案 有很多经历过前端开发的朋友们肯定知道,前端代码一般并不是在本地进行调试的.大多数都是在本地写好预测试的代码之后,然后复制粘贴到服务器代码库中再来执行的,但是这种方式确实不适合前端的调试, 最麻烦的不是因为要复制粘贴着来进行代码调试,而是因为当有好几个人都在同时改一个样式脚本时复制粘贴着调试,就有可能会出现问题. 调试代码时.

前端到后台ThinkPHP开发整站(5)

今天周五了,这个项目做了五个晚上了,明天周末不用上班有一整天的时间来结束这个项目了,今晚主要把后台界面给弄出来了. 大概的整个后台界面就是这个样子了,接下来的工作就是搬砖了,一个个菜单功能填上去就是了. 还有补充了下多个公共方法,为后面菜单开发而准备. <?php /** * JSON数据返回 */ function jsonResult($status,$message,$data){ $result=array( 'status'=>$status, 'message'=>$mess

前端到后台ThinkPHP开发整站(2)

我这次使用的ThinkPHP版本是:3.2.3版本,还有会使用到一个弹出层插件,叫 layer,官网地址是:http://layer.layui.com/.废话不多说,进入撸码环节. 1.通用方法编写 这个是后端公共方法,现在暂时写两个方法,再往后开发想到有需要的话,就会继续添加更多的公共方法. <?php /** * JSON数据返回 */ function jsonResult($status,$message,$data){ $result=array({ 'status'=>$stat

【转】无后端(nobackend):前端优先的Web开发【译】

每个应用都由两样东西构成:该应用独有的功能和所有应用共有的功能,比方说用户注册.登录.忘记密码等.而从用户的角度出发,那些独有的功能归结起来就是用户界面以及系统的行为模式.而在视觉表象之后的功能,用户并不关心,他们只期望系统能按预期运行就可以了. 前端和后端有各自的侧重点,因此往往也需要不同的技能,由不同的开发人员来负责完成.无后端(nobackend)的开发原则能够进一步解偶这些不同的侧重点,这样两边的开发人员可以更加专注于各自真正热衷的工作. 一个简单的例子 后端经常需要提供API给前端,以

前端到后台ThinkPHP开发整站(4)

今晚继续我的这个项目的开发,今晚也是写的不多,主要写了一个菜单管理功能的CURD方法,前端界面还没有进行编写. 菜单管理Model层的代码: <?php namespace Common\Model; use Think\Model; class MenuModel extends Model{ private $_db=''; public function __construct(){ $this->_db=M("menu"); } /** * 插入菜单数据 */ pu

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了.本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧 内容有些长,这也是我第一次写博客,不足之处还请严厉指出 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的

网页设计、web前端、后台的开发流程和注意事项 -----转

工作2年了,总感觉每次做项目的时候,都是赶时间,赶时间,加班几班,可是最后总结一看,百分之50的时间都浪费在做无用功上面了,甚至因为设计人员的失误,造成了前端和程序大量的返工,休整,加班,造成了开发人员的疲惫. 我个人总结了一下觉得认为比较好的能够节省时间效率的工作流程应该是: 1.产品经理做出整体的构思,提出明确需求,并且形成文档和demo 包括:网站的中心思想,即属于什么类型的,是电子商务还是企业网站还是门户网站等,不同类型的网站风格定位就不一样,一个网站需要注意的地方,例如登录注册的页面,

Android前端人员与后台开发的撕逼(一)

首先表明一下身份,本人是Android前端开发人员,本篇只做合理性探讨,不进行人身攻击: 其次希望各位大神进行点评!点评!点评! 我们讨论一下接口的两种返回方式,直接举例说明一下,假设书籍信息表有30个字段,现在有各种排行榜和列表都需要显示书籍基本信息,但显示的属性一般会有5-8个左右,各个排行榜显示的字段内容有可能不一样,每个版本显示的属性也可能不一样,那么问题来了,是每次排行榜和列表都返回所有的30个字段还是每次按需返回相关字段呢? 方案一:每次列表和排行榜都返回所有字段 优点:接口稳定,不

前端-杂文-数据压缩&amp;模块化开发

数据压缩 如何解决我们服务端的压力问题呢?除了后端服务器架构配置合理之外,如需要做lvs负载均衡.在前端而言,就是减少请求量.还有就是把数据进行压缩.下面就数据的压缩做下简单总结 1.编译化 为什么前端静态文件需要编译? 这里的编译意思是把一种语言翻译成另一种语言而不是像Java中的转成接近机器码的东西.像less转换成css一样并压缩. 2.打包前端打包工具:grant| gulp| webpack 模块化开发 前端中的后端语言 nodejs中的koa. express 后端中 python