1.万维网(www)和w3c组织
WWW是环球信息网的缩写，英文全称为World Wide Web，中文名字为"万维网"，常简称为Web。
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构，又称W3C理事会(就是我们常说的w3c组织).
W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。
w3c的: www.w3school/
网站中有w3c组织推出的各种的技术的标准的使用及其开发教程.
2.什么是HTML
HTML 是用来描述网页的一种语言(开发网页)
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)例如:<table></table>等等
HTML 使用标记标签来描述网页
jsp中文全称HTML属于web开发中前端技术的一种:
HTML + CSS + JavaScript + Ajax + (JQeury)等等
3.什么是网页
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件。不同的后缀，
分别代表不同类型的网页文件，例如以 ASP 、 PHP 、 JSP 等等。
不同后缀名的网页中都是由 HTML的标签语言+其他语言或标签 组成的
例如:
.html结尾的网页文件内容中全部是html标签
.jsp结尾的网页文件内容中一般是由 html标签+java代码 组成
.php结尾的网页文件内容中一般是由 html标签+php代码 组成
4.html和xml对比
虽然都是标记语言，但是它们有本质的区别.
4.1 xml中的标记/元素/标签是用来描述数据的
<student>
<id>1</id>
<name>zs</name>
<age>20</age>
</student>
4.2 html中的标记/元素/标签是用来显示数据的.
<font color="red">1 zs 20</font>
控制数据的显示格式(大小、颜、形状、字体、位置等)
4.3 xml中的标签是可以扩展的(用户自定义，如果没有dtd或者scheme约束的话),html中的标签是固定的,
不能扩展(w3c组织制定的标准，固定的标签有着固定的含义).
4.4 语法上面:html中标签的大小写不敏感，只有开始标签没有结束标签话浏览器也能识别
5.使用什么来运行html文件
5.1 浏览器可以直接执行html文件
5.2 html文件不需要编译，浏览器可直接运行
5.3 不同的浏览器可能对html的支持有些差异
6.html页面的运行方式:
6.1.本地运行
编写完html页面之后就可以直接用浏览器打开运行这个html文件。
6.2.远程访问
使用浏览器访问并运行网络中另外一台计算机中的html页面。(http协议)...
7.用什么编写html文件
7.1.文本/代码编辑器(记事本、EditPlus、notepad++、sublime等)
7.2 Dreamweaver 专业网页设计工具、可视化网页开发工具
7.3 IDE工具(如果Eclipse、Myeclipse、Brackets等)
注:IDE(Integrated Development Environment)，集成开发环境，可以辅助开发程序的应用软件，就是我们平时用来编程的软件。
8.HTML页面内容的基本结构
1.指定HTML版本
2.指定dtd的版本
3.指定dtd的语言
html的版本信息，如果在页面头部不加版本信息，那么浏览器将使用杂乱模式，或者使用向后兼容模式进行解析
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
html根元素
<html>
<head>
meta 表示页面的元信息
指定浏览器以什么样的解码方式对文档进行解码
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
该页面告诉搜索引擎页面的关键字
<meta name="keywords" content="java,birup,jd14XX"></meta>
<title>页面的标题</title>
</head>
<body>
页面的内容
</body>
</html>
注：浏览器中显示的页面内容都是写在<body>标签中的内容
9.HTML中的常用的基本标签
HTML 标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
HTML 水平线
<hr/>
HTML 注释
<!-- This is a comment -->
HTML 段落
<p>This is a paragraph</p>
HTML 换行
<br>
HTML 文本格式化
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
H<sub>2</sub>O
10<sup>2</sup>
HTML 预格式文本
<p>
for(int i=0;i<10;i++){
System.out.println("hello world");
}
</p>
对比俩个效果
<pre>
for(int i=0;i<10;i++){
System.out.println("hello world");
}
</pre>
HTML 鼠标放上去提示完整信息
<abbr title="United Nations">UN</abbr>
<acronym title="World Wide Web">WWW</acronym>
HTML right to left显示内容
<bdo dir="rtl">hello world</bdo>
HTML 删除标记和下划线
<del>过时的API</del>
<ins>带下划线的</ins>
10.超链接
//默认把当前页面跳转到这个指定的url地址
<a href="url">点击跳转</a>
//#号代表当前页面
<a href="#">点击跳转</a>
//使用 Target 属性，可以让跳转到的新页面在新窗口打开
<a href="www.baidu" target="_blank">点击访问百度</a>
11.锚点
<a name="test1">第一个锚点的位置</a>
...
.
.
..
<a name="test2">第二个锚点的位置</a>
....
...
...
...
...
<a href="#test1">转到当前页面的test1描点</a>
<a href="#test2">转到当前页面的test2描点</a>
14.html页面中的实体 $名字;
一些特殊符号在html中不好表示出的可以是实体来表
示
空格
< 小于号 <
> 大于号 >
& 和号 &
" 引号 "
' 撇号 '
13.表格 table
一个两行三列的表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
headfirst教程</tr>
</table>
<caption> 解释表的作用
<tr> 表格中的行
<td> 行中的列
<th> 定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体且居中。
border 边框的宽度
rowspan 合并在一起行数
colspan 合并在一起的列数
同时可以对table中区域划分
<thead> 表格的页眉
<tbody> 表格的主体
<tfoot> 表格的页脚
这样将来做样式控制的时候可以控制的更加精确
14.列表
14.1 无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
14.2 有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
14.3 定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
15.表单
主要用于提交用户的信息
<form action="提交到地址">
.
..
...
</form>
(1)文本输入框
<input id="" name="" type="text" />
(2)密码输入框
<input id="" name="" type="password" />
(3)单选按钮
<input id="" name="" type="radio" />
(4)复选框
<input id="" name="" type="checkbox" />
(5)下拉框
<select id="" name="">
<option value=""></option>
</select>
下拉框的选项在option中设置
(6)文本域
<textarea id="" name="" rows="10" cols="30"></textarea>
(7)提交按钮
<input type="submit" value="" />
(8)重置按钮
<input type="reset" value="" />
(9)文件上传框
<input type="file" name=""/>
(10)隐藏框(页面不显示，可以用来隐藏数据)
formate函数<input type="hidden" name=""/>
16.显示图片
<img src="boat.gif" alt="不到图片">
17.背景颜 背景图片
背景颜属性将背景设置为某种颜。属性值可以是十六进制数、RGB 值或颜名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
背景属性将背景设置为图像。属性值为图像的URL。
<body background="clouds.gif">
<body background="..../clouds.gif">
18.字体
<font size="33" face="Times" color="red">
this is my test！
</font>
face的值一般可以为:
"times"、"courier"、"arial"、
waif翻译中文"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
19.marquee 走马灯
标签中常用属性:
behavior: scroll|alternate|slide
direction: left|right|up|down
同时认识俩个标签中事件属性:
onmouseout: 鼠标移入
onmouseover：鼠标移出
//鼠标移入到走马灯区域则走马灯效果停止
//鼠标移出到走马灯区域则走马灯效果
开始
<marquee onmouseout="this.start()" onmouseout="this.stop()">hello world</marquee>
注意:this.start()和this.stop() 属于javascript语言的代码，之后会学习到.
20.span和div
span是行内元素
div是块元素
作用及特点:
1.使用span和div可以在页面划分区域，将来可以方便我们使用css对页面中不同区域进行特定的css样式渲染
2.一个div在页面中默认是会独占一行的(所以是块元素)，而span则是可以多个span在同一行(所以是行内元素)
注意：用span或者div在页面上划分区域其实就是在设计页面中的布局
其实用table也是可以在页面布局的，只不过到后期页面比较复杂的话，页面就会出现很多tr和td标签以及它们之间的嵌套，这样的页面开发人员非常难以维护，以至于满眼的tr和td看的头都大了...
21.Frame框架
通过使用框架，我们可以在同一个浏览器窗口中的不同区域中分别显示出不同的页面。
例如:
<frameset cols="25%,50%,25%">
<frame noresize="noresize" src="frame_a.html" />
<frame noresize="noresize" src="frame_b.html" />
<frame noresize="noresize" src="frame_c.html" />
</frameset>
注意：页面中使用了frameset标签就不用再使用body标签
frameset之间还可以嵌套:
<frameset rows="20%,80%">
<frame noresize="noresize" src="frameA.html"></frame>
<frameset cols="15%,85%">
<frame noresize="noresize" src="frameB.html" />
<frame noresize="noresize" src="frameC.html" />
</frameset>
</frameset>
21.Frame中的name属性 结合 超链接<a>中的target属性
我们使用name属性可以给frame起名字
<frame src="" name="area1" />
<frame src="" name="area2" />
我们使用target属性可以指定超链接跳转的内容显示在哪一个区域
默认是把跳转的内容显示在当前的整个页面
target="_blank" 表示把跳转的内容显示在新打的浏览器窗口中
target="area2" 表示把跳转的内容显示在名字为area2的frame中
<a href="url" target="">点击跳转</a>
22.CSS
css 指层叠样式表 (Cascading Style Sheets)
css 样式定义如何显示 HTML 元素内容
css 主要为了解决内容与表现分离的问题
即:html标签只负责展现内容，但是内容具体表现的每一个小细节都又css样式来控制
例如:html中的table标签只是负责告诉浏览器下面的内容是要放在一个表格中显示的，但是具体显示的细节是css来告诉浏览器的(表格的边框大小颜、数据在td中的位置颜大小等等细节)
23.CSS样式的分类
1.浏览器缺省设置(不用设置，浏览器有默认的显示方式)
2.外部样式表 (css样式写在外部的一个.css结尾的文件中)
3.内部样式表 (位于 <head> 标签内部)
4.内联样式 (在 HTML 元素内部的style属性中定义样式)
1234四种情况的css样式，他们的优先级也依次
增加，即浏览器最优先以第四种内联样式为准来显示html标签中的内容.
开发中我们都会以第二种外部样式表为主(必要的时候也会用其他的方式)，来控制页面内容显示的样式。原因:
1.把css的样式代码抽离到外部的一个css文件中，要用的话可以把这个文件引入到任何一个html页面中，这样写的一些通用的样式可以在多个html中反复的使用(像java中的import导包一样)
2.由于html页面中的样式控制的代码都抽离到一个外部文件中了，使我们原本很复杂的页面看起来很简洁易读，便于维护.
24.CSS每种写法样例
1.浏览器缺省设置(浏览器用默认的样式显示)
<div>hello world</div>
2.内联样式(每个标签中都有一个style属性)
<div >hello world</div>
3.内部样式表
<html>
<head>
<style type="text/css">
div {
font-family: serif;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
4.内联样式
test.css文件的内容为:
div {
font-family: serif;
font-size: 30px;
color: green;
}
test.html文件内容为:
<html>
<head>
<!-- test.css和test.html在同一个文件夹下，这里写的是相对路径 -->
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
做软件用什么编程语言
nullpointerexception下载<div>hello world</div>
</body>
</html>
25.CSS的语法
css 语法由三部分构成：选择器、属性和值：
例如:
div {
font-family: serif;
font-size: 30px;
color: green;
}
选择器:
div表示使用的是标签选择器，说明当前的样式对页面中的所有div的标签都起作用
属性:
font-family
font-size
color
这三个分别指的是控制div显示样式的不同属性(div中的字体样式/大小/颜)
值:
serif
30px
green
三个值分别对应各自左边的属性
所以在css中要学习的是：我们如何使用不同的选择器来选择到页面中的某一类标签、某几个标签、某一个标签等来设置这些标签的属性为指定的值，从而到达我们想象中的显示效果.
26.CSS中的选择器
1.标签选择器 获得页面中所有这个名字的标签
table{
...
}
h1{
...
}
2.类选择器 获得页面中所有class="myline"的标签
<div class="myline"></div>
<div class="myline"></div>
<div class="yourline"></div>
.myline{
...
}
.yourline{
...
}
3.后代选择器 获得页面中所有table标签里面的td标签
table td{
font-size:14px;
}
.myTab td{
font-size:14px;
}
4.ID选择器 获得页面中id="head1"的标签
<h1 id="head1"></h1>
#head1{
....
}
5.通用选择器 获得页面中所有的标签
* {
....
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论