web前端

Internet：是一个全球性的计算机互联网络，中文名称“因特网”、“国际互联网”、“网际网”等等；

Internet提供的服务：http、ftp、Telnet、email、www、bbs等等；

基本实现技术：分组交换原理--信息在Internet上被分成许多的小数据包（分组）进行传输，到达目的地后将数据包组装成信息；
TCP/IP协议簇

Web和Internet的关系：web是运行在Internet上最流行的应用之一，Internet为web提供了网络环境；
因为web的出现，从而极大地推动了Internet的普及与推广；

web的优势：传输快、成本低、用户多、方便易用、形式多样、便于反馈......
web的劣势：虚假信息、病毒、网瘾、数据丢失......

web：称为万维网或环球网，www（world wide web），上世纪90年代由欧洲核子研究中心的Bener.Lee，1992年正式上网；
把各类信息和服务无缝连接，提供生动的图形用户界面；
信息--文字、图片、视频、音频...
服务--Telnet、email、ftp......
万维网就是无数文档的集合，驻留在因特网的某个地方

web的工作原理：
基于浏览器/服务器；由web服务器、浏览器和通信协议三部分组成；
通信协议采用的是http协议：超文本传输协议（hypertext transfer protocol）
通过浏览器发送请求到服务器，服务器响应请求将数据发送到请求的浏览器，中间的过程是通过http协议执行；

开发人员共具：
F12；右键--审查元素（检查）

在web主要以网页的形式来发布多媒体信息；
网页采用超文本标记语言HTML（hypertext markup language）编写；
编辑--记事本、word、editplus、hbuilder、dw、sublime text、webstrom......

web服务器：
存储web页面上的信息，并提供管理环境；响应浏览器的请求，执行服务器端的程序；

主要的web服务器产品：
Tomcat、Apache、IIS

web浏览器：
提交请求；解析HTML和内嵌脚本（js）；用图形化的方式显示HTML文档；

主流的浏览器：
IE、firefox、chrome、opera、safari

服务器端技术：php、jsp、asp（asp.net）

前端技术（客户端技术）：
HTML、CSS、JS(JavaScript)；

web是一个超文本文件的集合；超文本文件即是网页/HTML文档；通常是以.html或.htm为后缀的文档

什么是HTML：
超文本标记语言，一种纯文本类型的语言；使用带“尖括号”的“标记”将网页中的内容标识出来；

标记语法：
HTML用于描述功能的符号称为“标记”；
标记在使用时必须用“尖括号”括起来；

封闭标记：
封闭标记又叫双标记，必须成对出现；<标记>内容</标记>；

非封闭标记：
又叫空标记或者单标记；<标记 /> 或者 <标记>

Xhtml于2000年1月成为W3C标准；Xhtml是更严格更纯净的HTML版本；

HTML文档结构：
1、声明--文档类型声明；声明必须写在文档的最开始部分；
2、页面/文档--<html></html>
3、页面头部--<head></head>主要装载页面的信息；
4、页面主体--<body></body>
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

文档标题：<title></title>给页面起一个名字；

每一个标签都有属性，属性可以是一个或者多个，多个属性之间用空格隔开；
属性的组成：属性名=“属性值”；
属性必须写在开始标记内部；

HTML注释：只有程序员自己看得见，而不会再网页中显示的内容；
<!--注释内容-->
注释内容中一定不要存在--
<!--fjlwaijf--waefwefa-->

再HTML页面中无论敲多少空格，都只会显示一个空格；
要想有多个空格，必须使用转义字符；
转义字符：
空格--&nbsp;
左尖括号<--&lt;
右尖括号>--&gt;
版权©--&copy;
注册商标--&reg;

换行标记：<br />

强制不换行标记：<nobr>不换行内容</nobr>

标题标记：<hn></hn> n=1,2,3,4,5,6

段落标记：<p></p>

文本样式标签：
<b></b>文本加粗；
<i></i>文本倾斜；
<u></u>添加下划线；
<s></s>添加删除线；
以上标签全部不推荐使用，已经被废弃；
<strong></strong>强调文本，表现为文本加粗；
<em></em>强调文本，表现为文本倾斜；
<sup></sup>上标标记；
<sub></sub>下标标记；

标签分类：
块级标签：默认情况下，块级标签回独占一行，元素的前后内容都会自动换行；
<hn></hn>、<p></p>
行内标签：不会换行，可以和其他行内元素位于同一行；
b、i、u、s、strong、em、sup、sub

分区标签：
<div></div>
<span></span>

预格式化标签：
<pre></pre>
写在该标签内的内容会按照编写时的格式展示在网页中；

页面属性：
背景颜色--bgcolor;
页面文本颜色--text;

字体标签：
<font></font>
字体颜色--color；
字体--face；
字体大小--size；最小1，最大7；
该标签已被废弃；

目录结构：
一个项目（web站点）下的所有文件所在的位置；一个web站点包含多个目录，每个目录包含站点的不同部分；web站点的主目录称为根目录；位于根目录下的其他文件夹称为子目录；每个子目录都会包含具体功能的下一级子目录；

所有的文件命名必须是英文、数字、下划线（_）和连接线(-)组成；

URL：
uniform resource location 统一资源定位器；
用来标识网络中的任何资源
即路径，指从当前位置到目标位置所经过的路线；

URL分类：
1、绝对路径：192.168.101.111
http:// www.baidu.com /images /img01.jpg
协议名 主机名 目录路径 文件名
用于指向其他设备上的文件；
2、相对路径:
指目标文件的位置是相对于当前文件的位置；
目标文件和当前文件在同一个目录下，直接写文件名--img01.jpg
目标文件所在的文件夹和当前文件在同一个目录下--文件夹名/文件名 images/img01.jpg
目标文件和当前文件不在同一目录下，用../表示返回上一级目录，一个../表示返回一级
../images/img01.jpg
../../images/img01.jpg
3、根相对路径：
用于服务器

水平居中标签：
<center></center>
该标签已被废弃；

标签的对齐属性：
align="left"
align="right"
align="center"

水平分割线标签：<hr />
宽度--width，最好带上单位px
高度--size，不用带单位
对齐--align
颜色--color

图像标签：<img />
链接图像地址--src="路径"；
宽度--width，只给宽度表示定宽，高度自动等比变化；
高度--height，只给高度表示定高，宽度自动等比变化；
title--鼠标移入后的提示文字，用于描述图片；
alt--当图片无法正常显示时所用的替代文字；

超链接标签：<a></a>
链接属性--href="路径"
空链接：1、href="#",会有返回顶部的效果；
2、href="javascript:;"
图片：href="图片路径"，可以将链接指向一张图片；
压缩包：href="XXX.rar",指向一个压缩包，点击之后会下载；
发邮件：href="mailto:邮箱地址"，可以给该邮箱发送邮件；
target--链接打开的目标位置；
target="_blank",在新窗口打开链接；
target="_self",在当前页面打开链接；
锚点名称--name，标记，可以将链接指向该标记，以达到跳转到页面指定位置的效果；

表格标签：<table></table>
表格--背景色：bgcolor
边框：border
宽度：width
高度：height
边框色：bordercolor
边框深色：bordercolordark（废弃）
边框浅色：bordercolorlight（废弃）
单元格间距：cellspacing，不用带单位
内边距：cellpadding，要带单位
对齐：align
单元行--高度：height，百分比
水平对齐：align；left、center、right
垂直对齐：valign；top、middle、bottom
单元格--宽度：width，百分比
水平对齐：align；left、center、right
垂直对齐：valign；top、middle、bottom
跨行：rowspan
跨列：colspan

表格分区：
<thead></thead>:划分出表格的头部
<tbody></tbody>:划分出表格的主体
<tfoot></tfoot>:划分出表格的底部

表格标题：<caption></caption>
为表格定义一个标题，默认在表格外的最上方水平居中显示；
caption必须位于table的正下方，紧挨着table；

表头：<th></th>
不能包含td，表头只能包含在tr中，默认表头内的文字居中显示并加粗；

表单：
用于显示、收集信息，并提交信息到服务器；
组成部分：
1、实现数据交互的可见的用户界面，比如：文本框、提交等；
2、提交后的表单处理；
使用<form></form>标记创建表单；在该标记中添加其他表单可以包含的控件；

<input />：用于收集用户信息；
类型--type：text文本类型；
password密码类型
radio单选类型
checkbox多选类型
submit提交按钮
reset重置按钮
button普通按钮
输入框（文本类型和密码类型）--name设置输入框提交后对应的信息的名称
value一般是用于设置提示信息，也可以用于填写的信息的收集
maxlength限制输入的最大字符长度
readonly设置为“只读”
required设置为“必填”
disabled设置为“禁用”

单选和多选--name设置选项组的名称，单选的name必须一样，多选的name可以不同（最好相同）
value确认和收集选项信息，提交到服务器
checked设置默认选择项

按钮--value设置按钮的文本
name设置按钮名称

<label></label>:将文本于控件联系在一起，点击文本就可以触发控件；
for=“控件的id”就可以和控件绑定；

选项框：<select></select>
name--设置选项框的名称
size--设置显示的选项数目，大于1则变为滚动列表
multiple--设置多选，按住Ctrl多选
选项：<option></option>
value--确认和收集选项的信息，提交到服务器
selected--设置默认选项

多行文本框：<textarea></textarea>
name--设置名称
cols--设置内容的列数，相当于设置了宽度
rows--设置内容的行数，相当于设置了高度
readonly--只读
required--必填
disabled--禁用

input其他类型：email--邮箱类型，输入错误的邮箱地址，提交时会报错，只会检测有没有“@”；

form表单属性：
enctype：指定表单的数据类型（数据进行编码的方式）
method：指定表单数据提交的方式；
get--将数据附加在地址中提交；最大缺点是缺乏安全性、上传的信息不完全；优点是数据的传输速度快；
post--将数据打包提交到服务器；安全性非常好、数据传输完整；传输速度相对较慢；
action：定义表单提交时发生的动作，包含服务器脚本的URL（jsp、php...）

控件分组：<fieldset></fieldset>为控件分组
<legend></legend>为分组指定标题

有序列表：<ol></ol>
列表项：<li></li>
代码：<ol>
<li></li>
</ol>
属性--type：1，数字类型；
a，小写字母类型；
A，大写字母类型；
i，小写罗马数字类型；
I，大写罗马数字类型；
start：设置序列号的起始；

无序列表：<ul></ul>
列表项：<li></li>
属性--type：disc实心圆（默认）；
circle空心圆（圆圈）；
square实心举行；

定义列表：<dl></dl>用于给出一类实物的定义，如：名词解释、解释说明、字典等等
<dt></dt>指定一个名词或术语
<dd></dd>对dt当中的内容进行解释说明
dt下面的dd是对该dt的解释说明，一个dt下面可以有多个dd；一个dl中可以有多个dt；

结构标记
<header></header>用于定义页面头部或者某一个区域的头部
<nav></nav>用于定义页面的导航信息
<section></section>定义某一个区域的主体
<article></article>用于定义某一篇文章、博客、论坛帖子等等
<article>
<h1></h1>
<p></p>
<img />
</article>
<footer></footer>定义页面的底部或者某一个区域的底部
<aside></aside>定义页面的额外信息，比如：侧边栏、广告栏等等

摘要与细节
<details></details>用于定义细节
<summary></summary>用于定义细节的标题

度量标记：
<meter></meter>
value设置电量的值
min设置最小取值范围
max设置最大取值范围

文本高亮显示标记：
<mark></mark>

HTML 简单归纳 -- 前端知识的更多相关文章

  1. jquery 简单归纳 -- 前端知识

    jquery 什么是jQuery? jquery是轻量级的JavaScript库,核心是javascript,兼容css和各种浏览器,核心理念是写得少做得多(write less do more). ...

  2. AJAX 简单归纳 -- 前端知识

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  3. HTML5 简单归纳 -- 前端知识 （一）

    HTML5简介 1.h5不是一个新语言,它是HTML语言第五次重大修改--版本 2.   2014年  h5 3.支持:目前所有的主流浏览器都支持h5,IE8以下不支持 4.特性: a:抛弃了h4中不 ...

  4. HTML5 简单归纳 -- 前端知识 （二）

    HTML5 全屏事件 全屏事件:requestFullScreen 关闭全屏:cancelFullScreen 判断是否全屏:fullScreenElement 注意:现各大主流浏览器中由于内核不同的 ...

  5. CSS 简单归纳 -- 前端知识

    CSS:cascading style sheets层叠样式表,用于美化页面 css的三种表现形式:1.行内样式(内嵌样式):结构的内部,即写在标签内的样式:写在标签的开始部分内部,style属性当中 ...

  6. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  9. Web前端知识技能大汇总

    项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以 ...

随机推荐

  1. Matlab实现《追光者》简谱

    MATLAB除了生孩子,其他全都能做系列. 使用MATLAB进行播放<追光者>,纯文本内容哦. Fs = ; load y; sound(y, Fs); 加载的y是哪里来的呢?当然是调用函 ...

  2. Java的组合排列问题

    从4个人中选2个人参加活动,一共有6种选法. 从n个人中选m个人参加活动,一共有多少种选法?C(m/n)=C((m-1)/(n-1))+C(m/(n-1))数学算法 public class Main ...

  3. Servlet-获取页面的元素的值的方式以及区别

    request.getParameter() 返回客户端的请求参数的值:request.getParameterNames() 返回所有可用属性名的枚举: request.getParameterVa ...

  4. 【xsy1300】 原题的旅行 最短路+倍增

    题目大意:有一个$n$个点,$m$条边的无向图,玩家走过第$i$条边,血槽中的血会下降$v_i$点,如果不足$v_i$点,这人会当场去世. 这$n$个点中,有若干个是关键点,在这些关键点可以将血槽补满 ...

  5. 为什么(2.55).toFixed(1)等于2.5？

    上次遇到了一个奇怪的问题:JS的(2.55).toFixed(1)输出是2.5,而不是四舍五入的2.6,这是为什么呢? 进一步观察: 发现,并不是所有的都不正常,1.55的四舍五入还是对的,为什么2. ...

  6. eclipse连接远程服务器

    eclipse里有一个强大的插件,可以直接在本地编辑远程服务器代码,Eclipse Remote System Explorer (RSE) 下载安装方法: 一.下载,高版本的eclipse可以直接下 ...

  7. Java第三方支付接入案例（支付宝）

    开源项目链接 Kitty 开源权限管理系统 项目地址:https://gitee.com/liuge1988/kitty 演示地址:http://139.196.87.48:9002/kitty 用户 ...

  8. Jenkins 批量删除历史构建

    在一次巡查 Jenkins 时,发现很多个项目的历史构建比较多,这些历史构建对于现在来说又没有什么用处,那么想把它删除,但是一个一个删除很累,毕竟总共加起来有上千个,历史构建,而且还不只是一个项目.那 ...

  9. ArrayBlockingQueue 阻塞队列 生产者 与消费者案例

    package com.originalityTest; import java.net.UnknownHostException; import java.util.ArrayList; impor ...

  10. 深入理解L1、L2正则化

    过节福利,我们来深入理解下L1与L2正则化. 1 正则化的概念 正则化(Regularization) 是机器学习中对原始损失函数引入额外信息,以便防止过拟合和提高模型泛化性能的一类方法的统称.也就是 ...