[说明]今天因为看到了前端的js页面和html页面，觉得有必要熟悉一下他们的基本语法，所以花了一天的时间去复习巩固了一下（之前学习过），包括html语法，css语法，javascript语法，对象、BOM（浏览器对象模型），json（javascript 对象表示法） PS：了解的只是基本用法，大概能看到简单的语句，达不到实用的程度。

一：今日完成

1）HTML

标签，元素和属性

标题 段落 粗体 斜体 删除效果 下划线

各种框框和按钮

2）CSS

css的语法 
selector {property: value} 
即 选择器{属性:值} 
学习css即学些有哪些选择器，哪些属性以及可以使用什么样的值

各种布局（头晕）

3）JAVASCRIPT

JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。

完整的javascript由语言基础，BOM和DOM组成。

五种基本对象和自定义对象

4）BOM

BOM即 浏览器对象模型(Brower Object Model)

浏览器对象包括
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

5）JSON

JSON JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式。

创建JSON对象
 访问JSON对象

创建JSON数组
访问JSON数组

JSON对象与JavaScript对象
 字符串转为JSON对象

二；明日计划

明天再稍微了解一下  AJAX，JQuery  ,  BootStrap（真的只是了解）

三：疑难问题

因为前端语言都是所见即所得，对着网上的教程很少出问题，，

四：思考总结

看到js的语法时候发现和java是有一点点相似的地方的，，

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);
 
p("主机加端口号 location.host:"+location.host);
p("访问的路径  location.pathname:"+location.pathname);
 
p("锚点 location.hash:"+location.hash);
p("参数列表 location.search"+location.search);
 
</script>
<script>
 
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
 
document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var gareen = eval("("+s3+")");
 
document.write("这是一个JSON对象: " + gareen);
  
</script>

<html>
用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
var  elements= document.getElementsByName("userName");
  
for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
}
  
</script>
</html>
getElementsByName，通过标签属性值得到标签，这个不用了解吗？
有这个用法，但是并不建议在工作的时候用到。
因为他即不能像getElementById这样定位一个唯一的
也不能像getElementsByClassName这样获取 预先被分类在一起的元素。
进一步讲解，name属性用于被提交到服务端，如果服务端代码发生调整，name需要跟着调整，相应的getElementsByName也需要进行同步改动才能保证正常运行，这就加大了维护成本和出错的几率。
而getElementById和getElementsByClassName 中的id和class只会出现在前端页面，和后端无关，相比较而言，没有潜在的维护成本的增加。
nodeType表示一个节点的类型所对应的值‘，要不然很容易和”节点值（nodeValue）“概念混淆

html ； css ； javascript ； json ；的更多相关文章

  1. css实现自适应屏幕高度；

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  2. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  3. Chrome 红色和 Chromium蓝色 区别：logoChrome 红色和 Chromium蓝色；Chrome闭源和 Chromium开源；

    我们知道Chromium采用的BSD开源协议(Chromium首页.文档和下载),google chrome是闭源的("9.2 根据第 1.2 条规定,除非法律明确允许或要求,或经谷歌明确书 ...

  4. 言未及之而言，谓之躁；言及之而不言，谓之隐；未见颜色而言，谓之瞽(gǔ)

    前言 一个高效的团队离不开leader和组员之前,组员和组员之前的通力合作.而合作的基础便是彼此之间的商讨与协调,意见的统一,进而在达成共识的前提下行动.那么如何才能和组员达成共识呢? 和组员之间的沟 ...

  5. (折扣计算)需求说明：普通顾客购物满100元打9折；会员购物打8折；会员购物满200元打7.5折（判断语句if-else和switch语句的嵌套结

    package com.summer.cn; import java.util.Scanner; /** * @author Summer *折扣计算 需求说明:普通顾客购物满100元打9折:会员购物 ...

  6. excel提取一类具有相似结构的部分数据，2种方式；数据——分列——分割符号/固定宽度；

    1.数据如同下图,这里我们需要提取 ￥...￥,也就是2￥及其中的内容: 鼠标选种某条数据,然后按Ctrl+A,则选种需要的所有数据:点击数据——分列:  2.根据分割符号分列:  3.选择合适的分隔 ...

  7. 数据库周刊28│开发者最喜爱的数据库是什么？阿里云脱口秀聊程序员转型；MySQL update误操作；PG流复制踩坑；PG异机归档；MySQL架构选型；Oracle技能表；Oracle文件损坏处理……

    热门资讯 1.Stackoverflow 2020年度报告出炉!开发者最喜爱的数据库是什么?[摘要]2020年2月,近6.5万名开发者参与了 Stackoverflow 的 2020 年度调查,这份报 ...

  8. Python自动化 【第十五篇】：CSS、JavaScript 和 Dom介绍

    本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...

  9. javascript：json对象和json字符串的相互转换

    json对象和字符串的相互转换 //使用json中的parser方法转换: var str='{"name":"fendouer", "age&quo ...

随机推荐

  1. MongoDB Query 判断为空 取值为空的时间

    if (!string.IsNullOrEmpty(STATES)) { DateTime? dtnull = null; //Return if (STATES == "Return&qu ...

  2. Android数据格式解析对象JSON用法

    1.JSON概念: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性,从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON可以将 ...

  3. MySQL主从（MySQL proxy Lua读写分离设置，一主多从同步配置，分库分表方案）

    Mysql Proxy Lua读写分离设置 一.读写分离说明 读写分离(Read/Write Splitting),基本的原理是让主数据库处理事务性增.改.删操作(INSERT.UPDATE.DELE ...

  4. atitit. 管理哲学 大毁灭--- 如何防止企业的自我毁灭

    atitit. 管理哲学 大毁灭---  如何防止企业的自我毁灭 1. 为什么企业组织的生命力 普遍不如国家组织的长久 2 2. 企业的不稳定因子如下:: 2 3. 决策制度 2 3.1. 我们老大说 ...

  5. java 容器结构

    先来看下层次关系. 如图所示:图中,实线边框的是实现类,折线边框的是抽象类,而点线边框的是接口 Collection(接口)├──List(接口)│   ├──LinkedList(实现类)│   ├ ...

  6. 设计模式_EventObject和EventListener

    一.事件机制基本概念 java中的事件机制的参与者有3种角色: 1.event object:事件状态对象,用于listener的相应的方法之中,作为参数,一般存在与listerner的方法之中 2. ...

  7. 3.2 Zend_Db_Select

    10.4. Zend_Db_Select 你能够使用该对象和它的对应方法构建一个select查询语句,然后生成 字符串符用来传送给zend_db_adapter进行查询或者读取结果. 你也能够在你的查 ...

  8. CCNA2.0笔记_路由分类

    直连路由:当在路由器上配置了接口的IP地址,并且接口状态为up的时候,路由表中就出现直连路由项 静态路由:静态路由是由管理员手工配置的,是单向的. 默认路由:当路由器在路由表中找不到目标网络的路由条目 ...

  9. python学习笔记3----正则表达式

    正则表达式(RE)是通过re模块来实现的. 字符匹配: --普通字符: *大多数字母和字符一般都会和自身匹配. --元字符:. ^ $ * + ? {}  [] \ | () []: 通常用来指定一个 ...

  10. webservice统一认证

    service package cn.edu.hbcf.privilege.ws; import javax.jws.WebParam; import javax.jws.WebService; @W ...