javaEE WEB学习笔记day01

Posted lamsey16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaEE WEB学习笔记day01相关的知识，希望对你有一定的参考价值。

网页的组成部分：

 

html :内容（结构），页面看到的数据

css:表现，内容在页面的表现形式

javascript:行为，页面元素与输入设备交互的响应

html:

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面[1]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

第一个html诞生过程（hello world）：

1、开始、闭合标签。

<html>

</html>

<>里的东西叫做标签，在html中是这样的，标签都是成对的，闭合的，也就是说，标签都是一对的，一个是开始标签<html>，它的作用声明html开始，一个是结束标签</html>，它声明html到此结束。

当然，也有非成对的独立的标签，称为自闭合标签，例如<br/>

2、添加头标签

<html>

      <head></head>

</html>

ps:

头标签<head> 主要包含三部分信息,一、标题信息；二、CSS样式信息；三、javascript基本信息

3、添加标题标签，

标题标签<title>

标题标签是子标签，它在头标签里

<html>

      <head><title>欢迎来到这个世界</title></head>

</html>

4、body主体标签，添加经典的hello world!

<html>

      <head><title>欢迎来到这个世界</title></head>

　　<body>

　　　　hello world!

　　</body>

</html>

5、复制到记事本，改后缀名为.html打开即可运行。

 

html几个常用的标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

       

target属性设置连接目标对象

                _self表示当前窗口。进行跳转（默认值）

                _blank 表示打开 一个新窗口进行跳转连接

eg:

<a href="http://www.baidu.com" target="_blank">百度</a>

 

<ol> 标签定义有序列表

<ol>
<li>校长</li>
<li>威武</li>
<li>老虎</li>
</ol>

<ul> 标签定义无序列表。

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<img> 标签

向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性 和 alt 属性。

src 属性:它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

alt 属性:alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

 width 属性设置宽度

 height 属性设置高度

 border属性设置边框大小

eg:

<img src="G:\\个人文档\\photos\\***\\QQ图片20160222102230.jpg"  alt="桂林电子科技大学毕业留念"/>

 

随便弄得一张图哈哈哈（曾经喜欢的女孩子）

<table> 标签：定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，

th 元素定义表头，

td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

eg:

<table border="1"cellspacing="0">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>Jan.</td>
<td>$100</td>
</tr>

<iframe> 标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

eg:

<iframe src="G:\\个人文档\\photos\\***\\QQ图片20160222102230.jpg"  width="1000" height="500" name="***"></iframe>

 <form> 标签：

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

eg:

    <form>

            <input type="hidden" />

        用户名称：<input type="text" value="默认值"/><br/>

        密码：<input type="password" value="abc"/><br/>

        确认密码：<input type="password" value="abc"/><br/>

        性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>

        兴趣爱好：<input type="checkbox" checked="checked"/>Java

                <input type="checkbox" checked="checked"/>C++

                <input type="checkbox" />JavaScript<br/>

        国籍：<select>

                <option>--请选择国籍--</option>

                <option selected="selected">中国</option>

                <option>小日本</option>

                <option>美国</option>

            </select><br/>

        自我评价:<textarea rows="10" cols="30">12341243124</textarea><br/>

        <input type="reset" value="重 置"/> <input type="submit" value="提 交" />

    </form>

 

html学习总结：

1、先跑出hello world  http://jingyan.baidu.com/article/4d58d5410637d69dd4e9c0cd.html

2、基本就是标签往<body></body>填充，标签参考  http://www.w3school.com.cn/tags/tag_iframe.asp

 

 CSS技术

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。

 

CSS语法规则：

选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。

属性(property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号，但尽量在每条声明的末尾都加上分号

编译和解析概念

  • 编译器会事先用比较多的时间把整个程序的源代码编译成另外一种代码，后者往往较前者更加接近机器码，所以执行的效率会更加高。时间是消耗在预编译的过程中。
  • 解释器会一行一行的读取源代码，解释，然后立即执行。这中间往往使用相对简单的词法分析、语法分析，压缩解释的时间，最后生成机器码，交由硬件执行。解释器适合比较低级的语言。但是相对于预编译好的代码，效率往往会更低。如何减少解释的次数和复杂性，是提高解释器效率的难题。

三种选择器：标签、id、Clsss选择器，组合选择器

 

a{
    border: 1px solid red;
 }
#submitBtn{
    border: 1px solid red;
}
.class01{
    border: 1px solid red;
}

#id002{

                color : red;

                font-size: 20px;

                border: 5px blue dotted;

            }

class01,#id01{

            color : blue;

            font-size: 20px;

            border: 1px solid yellow;

        }

   

常用样式：

1、颜色

color：red；

颜色可以写颜色名如：black, blue, red, green等

颜色也可以写rgb值和十六进制表示值：如rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

 

2、宽度

width:19px;

宽度可以写像素值：19px；

也可以写百分比值：20%；

 

3、高度

height:20px;

高度可以写像素值：19px；

也可以写百分比值：20%；

 

4、背景颜色

text-indent:21.0pt"> 

4、字体样式：

color：#FF0000；字体颜色红色

font-size：20px; 字体大小

 

5、红色1像素实线边框

border：1px solid red;

 

7、DIV居中

margin-left: auto;

margin-right: auto;

 

8、文本居中：

text-align: center;

 

9、超连接去下划线

text-decoration: none;

 

10、表格细线

table {

       border: 1px solid black; /*设置边框*/

       border-collapse: collapse; /*将边框合并*/

}

td,th {

       border: 1px solid black; /*设置边框*/

}

 

11、列表去除修饰

ul {

       list-style: none;

}

 

JavaScript

在客户端，JavaScript在传统意义上被实现为一种解释语言，但在最近，它已经可以被即时编译（JIT）执行。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行，如Node.js。

以上是关于javaEE WEB学习笔记day01的主要内容，如果未能解决你的问题，请参考以下文章

《从零开始学Swift》学习笔记（Day 2）——使用Web网站编写Swift代码

ReactJs学习笔记01

Hibernate day01笔记

Python学习笔记-基础Day01

学习笔记：python3，代码片段（2017）

传智168期JavaEE struts2杜宏 day32~day33（2017年2月15日23:27:09）