前端

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

　　什么是前端：

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

　　前端的工具：

　　　　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. PCL配置即常见问题

    1    下载 把与VS版本对应PCL的AllInOne包下载下来.要下对安装包,需要了解安装包的命名的含义,以下面的一个AllInOne包的名字为例. PCL-1.8.0-AllInOne-msvc ...

  2. Direct2D 第4篇 渐变画刷

    原文:Direct2D 第4篇 渐变画刷 #include <windows.h> #include <d2d1.h> #include <d2d1helper.h> ...

  3. kubernetes1.4新特性：支持sysctl命令

    背景介绍 sysctl是一个允许改变正在运行中的Linux系统内核参数的接口.可以通过sysctl修改Linux系统内核中的TCP/IP 堆栈和虚拟内存系统的高级选项,而且不需要重新启动Linux系统 ...

  4. mkdir、touch、rm和rmdir命令

    一.mkdir命令 mkdir命令用来创建目录.该命令创建由dirname命名的目录.如果在目录名的前面没有加任何路径名,则在当前目录下创建由dirname指定的目录:如果给出了一个已经存在的路径,将 ...

  5. vue @click.native

    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件 ...

  6. Notepad++搜索中的正则应用

    假设要查找文件中所有tppabs="*****" 类型的代码 tppabs="http://www.******.com/templates/Alen/Css/Main. ...

  7. win7 64位下如何安装配置mysql-5.7.4-m14-winx64（安装记录）

    1.   mysql-5.7.4-m14-winx64.zip下载 官方网站下载地址:http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.17 ...

  8. hdu3549 最大流

    #include<stdio.h> #include<string.h> #include<queue> #define MAXN 1010 using names ...

  9. DLA SQL分析函数：SQL语句审计与分析的利器

    1. 简介 Data Lake Analytics(https://www.aliyun.com/product/datalakeanalytics)最新release一组SQL内置函数,用来进行SQ ...

  10. 《DL/T 976-2017 带电作业用工具、装置和设备预防性试验规程》中的样品名称及试验项目