前端

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

　　什么是前端：

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

　　前端的工具：

　　　　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. Spring Boot → 01：概要

    背景 大约20年前,程序员们使用“企业级Java Bean”(EJB)开发企业应用,需要配置复杂的XML. 在二十世纪初期,新兴Java技术——Spring,横空出世.使用极简XML和POJO(普通J ...

  2. 继续对dubbo源代码进行maven builder

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/enson16855/article/details/32073981 原文地址:http://dtb ...

  3. DirectX11笔记(一)--配置DirectX工程

    原文:DirectX11笔记(一)--配置DirectX工程 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article/d ...

  4. HTML小技巧：按钮中的文字换行 .

    一般按钮的文字都是一行的.但是有的时候画面需要按钮中的文字换行. 刚开始有个开发人员说没法实现.\r\n 都用过了没有效果.其实google这个老师是非常强大的. 直接换行的方法:<input ...

  5. 2018-12-29-WPF-如何建立自己的-3d-gis-程序

    title author date CreateTime categories WPF 如何建立自己的 3d gis 程序 lindexi 2018-12-29 14:11:11 +0800 2018 ...

  6. fusion-io工具--更换fusion-ioSSD无法识别及升级指引

    centos6.5系统,(含fusion-io共7块盘)库存的fusion-io卡需要升级固件才能识别 现在只认到6个盘 fdisk -l 2>/dev/null | grep 'Disk /d ...

  7. python的数据类型和变量

    数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...

  8. 六.基本数据结构-双端队列（Deque）

    一.双端队列(Deque) - 概念:deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. - 特性:deque 特殊之处在于添加和删除项是非限制 ...

  9. Spring Boot 学习填的坑一

    1.关于springBoot自动扫描规则: SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描! "Application"类是指 ...

  10. 在Struts2里面嵌入Spring

    第一步:在web.xml中增加以下的listener <listener> <listener-class>org.springframework.web.context.Co ...