前端

　　编程主要就是三部分：使用数据，存储数据和处理数据。

　　什么是前端：

　　　　前端就是使用数据的过程，通过规定的格式将服务端的数据在浏览器上更好的展示给用户。

　　前端的工具：

　　　　HTML CSS 和 JavaScript

　　　　jQuery 和 bootstrap

　　web服务的本质：

　　　　浏览器发送请求 --> 服务端接收请求 --> 服务端返回数据 --> 浏览器展示数据，但是不是任何类型的数据浏览器都能识别，浏览器和服务器之间有规定好的数据格式：HTTP协议

　　HTML是什么？

　　　　HTML：超文本标记语言

　　　　　　1，一种用于创建网页的标记语言

　　　　　　2，通过各种标签来进行数据不同形式的表现

　　　　　　3，扩展名：.html或.htm

　　　　HTML文件的结构：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>网页标题</title>

</head>

<body>(浏览器显示给用户的部分)

</body>

</html>

　　　　1，<!DOCTYPE html>声明为HTML5文档。

　　　　2，<html lang="zh-CN">、</html>是文档的开始和结束标记，他们之间的是文档的head和body。

　　　　3，<head>、</head>为文档的头部，它之间的内容不会在浏览器窗口里显示。主要声明一些和文档的相关的一些属性。

　　　　4，<body>、</body>为文档的主体，里面就是在浏览器网页上要展示的内容。

　　HTML的标签格式：

　　　　1，使用<>包裹，里面放规定的关键字

　　　　2，标签里面还可以有属性，可以根据需求来使用

　　　　3，标签通常是成对存在的，如<div></div>，前面是开始后面是结束

　　　　4，也存在单独的标签，<br>,<hr>等等

　　标签中三个比较重要的属性：

　　　　1，id：定义标签的唯一ID

　　　　2，class：为HTML元素定义一个或多个类名（配合css文件使用）

　　　　3，style：规定元素的行内样式（配合css文件使用）

　　标签的分类：

    标签按标签使用格式分为：双标签和单标签

    双标签：<h1></h1> <a></a>等等

    单标签：<img>等等

    标签按标签占用的长度分为：块级标签和内联标签

    块级标签：一个标签就占用浏览器的一行长度 例如：div p h1

    内联标签：一个标签只占用其自身的长度，多个一行显示 例如：span a img

　　

　　HTML注释

<!-- 注释内容 -->

　　HTML常用标签

　　head内常用标签：

标签 意义
<title></title>  定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

　　body内常用标签

　　基本标签

<!--内容黑体和加粗显示，h1~h6型号逐渐减小-->

<h1>hello html</h1>

<h2>hello html</h2>

<h3>hello html</h3>

<h4>hello html</h4>

<h5>hello html</h5>

<h6>hello html</h6>

<!--加粗-->

<b>加粗</b>

<!--斜体-->

<i>斜体</i>

<!--下划线-->

<u>下划线</u>

<!--删除线-->

<s>删除线</s>

<!--换行-->

<br>

<!--水平线-->

<hr>

　　特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

　　div和span标签

　　　　1，div标签：没有特殊意义，块级标签，主要和其他标签组合使用，css文件来为其指定样式。

　　　　2，div标签：没有特殊意义，内联标签，主要和其他标签组合使用，css文件来为其指定样式。

　　ps：块级标签可以嵌套内联标签或块级标签，内联标签不能嵌套块级标签

　　　　但是p标签不能嵌套块级标签

　　img标签：图片展示

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高">

　　a标签：超链接标签

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

　　href：指定跳转的网页地址。

　　　　1，可以指定绝对地址：www.baidu.com

　　　　2，可以指定相对地址：index.html

　　　　3，可以通过id指定页面中的标签：#top

　　target：指定网页打开方式。

　　　　1，_blank表示在新标签页中打开目标网页

　　　　2，_self表示在当前标签页中打开目标网页

　　列表

　　　　1.有序列表

<!--有序号列表-->

<ol>

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ol>

　　　　2.无序列表

<!--无序号列表-->

<ul>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

</ul>

　　　　3.标题列表

<!--标题列表-->

<dl>

    <dt>标题1</dt>

    <dd>内容1</dd>

    <dd>内容2</dd>

    <dt>标题2</dt>

    <dd>内容1</dd>

    <dd>内容2</dd>

</dl>

　　表格

<!--表格-->

<table border="" cellspacing="0">

    <thead>

    <tr>

        <th>序号</th>

        <th>姓名</th>

        <th>年龄</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>1</td>

        <td>zxc</td>

        <td>18</td>

    </tr>

    <tr>

        <td>2</td>

        <td>zzy</td>

        <td>16</td>

    </tr>

    </tbody>

</table>

　　form表单

　　功能：用于向服务器发送数据，从而实现用户和服务器程序进行交互 。
　　表单属性：

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

　　input标签：

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked"  />
radio 单选框 <input type="radio"  />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置"  />
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file"  />

　　select标签：下拉菜单，一般用于多级菜单。

　　label标签：和input配套使用，用于标记input标签。

<form action="">

  <label for="username">用户名</label>

  <input type="text" id="username" name="username">

</form>

　　textarea：多行文本框

前端开发之HTML的更多相关文章

  1. ＃笔记＃ 移动前端开发之viewport

    一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport  ...

  2. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  3. Sea.js创始人玉伯的前端开发之路

    在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...

  4. 【开源专访】Sea.js创始人玉伯的前端开发之路

    摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...

  5. 前端开发之JavaScript篇

    一.JavaScript介绍  前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...

  6. 前端开发之jQuery库

    使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...

  7. 前端开发之jQuery效果篇

    主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果 一.显示与隐藏 显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...

  8. 前端开发之javascript BOM篇

    主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...

  9. 前端开发之JavaScript基础篇三

    主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...

  10. 前端开发之JavaScript基础篇一

    主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换   ...

随机推荐

  1. day38 16-Spring的Bean的装配：注解的方式

    Struts 2和hibernate也使用注解,但是使用注解在以后的开发中应用不多.但是可以说在整合的时候如何进行注解开发.在Spring中,注解必须会玩. package cn.itcast.spr ...

  2. window10下载安装jieba

    下载安装jieba的过程如下: 1 下载jieba 2 将其解压到E:\python2,如图所示: 3 在桌面左下角搜索框中输入"运行",之后输入"cmd".再 ...

  3. css 不大常见的属性(不断更新中...)

    1 英语或数字强制换行 word-break:break-all; 2 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果 -webkit-overflow-scroll ...

  4. iOS支付宝2.0 SDK集成整理

    https://cshall.alipay.com/enterprise/help_detail.htm?help_id=473890 http://wenku.baidu.com/link?url= ...

  5. 如何用好消息推送（push）做APP运营

    作为移动端APP产品运营最重要的运营手段,消息推送(push)被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越来越多,小小的手机屏幕每天收到的消息推送也越来越多,站在用 ...

  6. 2019-5-25-win10-uwp-win2d-入门-看这一篇就够了

    title author date CreateTime categories win10 uwp win2d 入门 看这一篇就够了 lindexi 2019-5-25 20:0:52 +0800 2 ...

  7. 【ToReadList】六种姿势拿下连续子序列最大和问题，附伪代码（以HDU 1003 1231为例）（转载）

    问题描述:       连续子序列最大和,其实就是求一个序列中连续的子序列中元素和最大的那个. 比如例如给定序列: { -2, 11, -4, 13, -5, -2 } 其最大连续子序列为{ 11, ...

  8. 【LINUX】降级安装低版本GCC，G++

    由于要制作crosstool,需要用到gcc 4.1.2来编译,而Ubuntu 12.04下的gcc版本是gcc 4.6.3,高版本的gcc也不是好事啊. 下面介绍gcc 4.1.2的编译安装方法: ...

  9. 如何不让EditText不获得焦点

    http://blog.csdn.net/get123/article/details/9004661

  10. Audio Session Programming Guide

    http://www.cocoachina.com/ios/20150615/12119.html