web个人学习笔记（待完善）

#

2.1web标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。

样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。

理想状态我们的源码： .html .css .js

直观上感受：

1.1 HTML 文件基本结构

    
        
    
    
        hello world!
    

​

html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性. body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题 head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签) title 是 head 的子标签. head 是 title 的父标签. head 和 body 之间是兄弟关系.

（1.元素可以提供有关页面的原信息

（2.页面描述

例：

（3.页面定时跳转

例：5秒刷新一次

网页的主体标记body

注意：标记不允许交替出现，否则会出现错误

为主体标记，用于定义html文档所要的内容

页面注释标记

说明代码，浏览器不展示

不区分大小写

允许属性值不加引号

允许部分属性值的属性忽略

特殊文本的添加

在HTML中，特殊符号以&为开头，后面跟相关的特殊字符

尽量不要使用多个“ ”来表示多个空格，因为多数浏览器对空格的距离的实现是不一样的

使用HTML标记添加特殊文本

注：这些都是双标记

作用:

b: 加粗

u: 下划线

i: 倾斜

s: 删除线

建议不要使用, 因为这些标签没有语义

作用:

strong: 加粗

ins: 下划线

em: 倾斜

del: 删除线

文本排版

（单标记）换行：

（单标记）

（双标记）

:段落标签

（双标记）~：标题标记

2.1 注释标签

​

2.2 标题标签

有六个,从 h1 ~ h6,数字越大,则字体越小

一级标题
    二级标题
    三级标题
    四级标题
    五级标题
    六级标题

 -  标签被用来定义 HTML 标题。
 定义重要等级最高的标题。 定义重要等级最低的标题。
    在 HTML 4.01 中， -  的 "align" 属性已被废弃。在 HTML 5 中， -  元素的 "align" 属性不被支持。请使用 CSS 来排列元素

2.3 段落标签

p标签表示一个段落

    
第一段
    
第二段
    
第三段
​

​

2.4 换行标签

br 是一个单标签,不需要结束标志.
是规范写法.

2.5 格式化标签

    加粗1
    加粗2
    倾斜1
    倾斜2
    删除线1
    删除线2
    下划线1
    下划线2
​

可以互相嵌套

####

2.6 图片标签

img 标签 必须带有 src 属性, 表示图片的路径 img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

title: 提示文本. 鼠标放到图片上, 就会有提示.

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

    
​

网页中的图像

在网页中插入图像 img 标签

border:边框

vspace、hspace：上下左右边距

align：左右中对齐

插入图像

相对路径

1.同一文件夹src = “文件名”

2.低一个src = “文件夹名/文件名”

3.高一个 src = “../文件夹名/文件名”

绝对路径

全路径

设置图像的宽度和高度

height和width控制，百分比为相对尺寸，数值为绝对尺寸

设置图像的提示文字

title：当鼠标悬停在图片上时显示属性值

将图片设置为网页背景

GIF和JPG可以用作HTML背景

    
    


  
    
​
        这一段文字是我的 
      e1文字在这
     
         
     
    

2.7 超链接标签 a

标签定义超链接，用于从一个页面链接到另一个页面。

元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。

提示：通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。

提示：请使用 CSS 来改变链接的样式。

a 标签的属性

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

百度
    baidu
    test3
    ###

新建标签页打开链接页面,只需在head里面添加这段代码,对于其它也如此

      _blank,_self......

设置 target 属性时， top 与 parent 的打开方式十分类似，需仔细区分。

比如网 A 中镶嵌了 iframe 网页 B，网页 B 又镶嵌了 iframe 网页C。

如果网页 C 中连接设置 target=_parent，则跳转将网页 B 去掉直接在 A 中嵌入网页 C 中链接页面。

如果网页 C 中 target=_top ，则直接跳出所有 iframe 框架，直接转向 C 中链接页面。

创建锚点

锚跳转到目标id处

实例

    

    
1011
    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    
sdsds


    跳转到头

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)

border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸.

    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
姓名
性别
成绩
张三
男
98
李四
女
97
​

合并单元格

跨行合并: rowspan="n"

跨列合并: colspan="n"

    
        
            
            
            
        
        
            
            
        
        
            
            
            
        
        
            
            
        
    
姓名
性别
成绩
张三
男
李四
女
97
王五
97
​

无序列表

    苹果
    西瓜
    香蕉

有序列表

    星期一
    星期二
    星期三

自定义列表

    我的一天
    吃饭
    睡觉
    打豆豆

ol：

​

​

使用 标签来定义列表选项。

提示: 可以使用 CSS 来渲染，详细查看 CSS 列表。

提示:无序列表，可以使用 标签。

属性：

reversed" 属性是 HTML5 中的新属性。

在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。

ul:

ul> 标签定义无序列表。

将 标签与标签一起使用，创建无序列表。

同样的在无序列表内也可以嵌套有序列表

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.

表单控件: 输入框, 提交按钮等. 重点是 input 标签

form 标签

input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等. name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一. value: input 中的默认值. checked: 默认被选中. (用于单选按钮和多选按钮) maxlength: 设定最大长度.

    --请选择地址--
    北京
    上海
    广州
    深圳
    广西
    西藏

    你好
    你好
    你好


    中国
    中国
    中国

空格:  
小于号: <
大于号: >
按位与: &

details> 标签规定了用户可见的或者隐藏的需求的补充细节。

 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 
 标签里边。

 元素的内容对用户是不可见的，除非设置了 open 属性。
与 
 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

主题内容

标题

xxx

	
	
	打印消息
	
	

    
        页头
        

         
        

        页尾
    

// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {
	
	// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
	// 通过id属性值指定HTML元素时，语法格式是：#id
	"el":"#app",
	
	// data属性设置了Vue对象中保存的数据
	"data":{
		"message":"Hello Vue!"
	}
};

// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);

app.message="new 10";

	
	{}}的表达式 -->
	
	
	{}}告诉Vue这里需要渲染； -->
	
	
{{vueValue}}

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
	"el":"#app",
	"data":{
		"vueValue":"太阳当空照"
	}
});

    
    



    
    {}}的表达式 -->
    

    {}}告诉Vue这里需要渲染； -->
    
    
{{vueValue}}

	
	
	
	
	
{{vueValue}}

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
	"el":"#app",
	"data":{
		"vueValue":"太阳当空照"
	}
});

    
    
    

    
{{vueValue}}

	if
	
	

var app = new Vue({
			"el":"#app",
			"data":{
				"flag":true
			}
		});

    
    
    
    



    用户登录/注册
     注册页
        
        
            用户注册
            
用户名：
            
密码：
            
确认密码：
            
  
         
        
            用户登录
            
用户名：
            
密码：