前端开发之HTML
前端
编程主要就是三部分：使用数据，存储数据和处理数据。
什么是前端：
前端就是使用数据的过程，通过规定的格式将服务端的数据在浏览器上更好的展示给用户。
前端的工具：
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>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
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的更多相关文章
- ＃笔记＃ 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
- 【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之jQuery库
使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...
- 前端开发之jQuery效果篇
主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果 一.显示与隐藏 显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
- 前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
随机推荐
- React 按需加载 - 代码分隔
代码分隔 我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面. 例如: // ...
- 洛谷P1248 加工生产调度
流水作业调度问题 有\(N\)个作业要在两台机器\(M_1\)和\(M_2\)组成的流水线上完成加工.每个作业\(i\)都必须先花时间\(a_i\)在\(M_1\)上加工,然后花时间\(b_i\)在\ ...
- Linux之软件包安装管理
软件包分类: 源码包:脚本安装包(源C代码) 二进制包(rpm包,系统默认包) 源码包 1.源码包优点 开源,如果有足够的能力,完全可以修改源代码 可以自己选择所需要安装的功能 软件是编译安装,所以更 ...
- op应用：官方，wifidog,portal,uci,luci,脚本,框架,usb
http://wiki.openwrt.org/doc/starthttp://downloads.openwrt.org/docs/buildroot-documentation.htmlhttp: ...
- R语言Switch语句
R语言Switch语句 switch语句允许一个变量值的列表来平等进行测试.每个值被称为一个条件(情况),变量被接通检查每个条件(情况). 语法 在R语言中创建switch语句的基本语法是: 以下规则 ...
- 【JZOJ4814】【NOIP2016提高A组五校联考2】tree
题目描述 给一棵n 个结点的有根树,结点由1 到n 标号,根结点的标号为1.每个结点上有一个物品,第i 个结点上的物品价值为vi. 你需要从所有结点中选出若干个结点,使得对于任意一个被选中的结点,其到 ...
- Directx11教程(58) 鼠标控制摄像机
原文:Directx11教程(58) 鼠标控制摄像机 本篇教程我们实现鼠标旋转摄像机的操作.主要就是按下鼠标左键的时候,根据鼠标的移动对摄像机进行pitch, raw的组合旋转.具体修改 ...
- node 写的简单爬虫（一）
安装cheerio npm install cheerio --save 引入http和cheeri var http=require("http"); var cheerio=r ...
- Servlet过虑器
过滤器是在请求的预处理和后处理时调用的对象. 主要用于执行转换,日志记录,压缩,加解密,输入验证等过滤任务. servlet过滤器是可插拔的,即它在web.xml文件中定义,如果从web.xml文件中 ...
- 【JZOJ4859】【NOIP2016提高A组集训第7场11.4】连锁店
题目描述 Dpstr开了个饮料连锁店,连锁店共有n家,出售的饮料种类相同.为了促销,Dpstr决定让每家连锁店开展赠送活动.具体来说,在第i家店,顾客可以用ai个饮料瓶兑换到bi瓶饮料和1个纪念币(注 ...