html样式css整理,HTML & CSS 知识点梳理（内涵大量Demo噢~）

参考文献《JavaWeb 从入门到精通》

另推相关博文一则

1.HTML的文档结构

1.标记

标记是HTML文件的开头。所有HTML文件都是以标记开头，以标记结束,HTML页面的所有标记都要放置在与标记中，标记并没有实质性的功能，但却是HTML文件不可缺少的内容。

另外，HTML标记是不区分大小写的。

2.

标记

文件的头标记，放置HTML文件的信息，

如：

-

-

-

3.

标记

定义网页页面的标题。

4.

标记

HTML页面的主题标记。

2.HTML的常用标记

1.换行标记

demo：

应用换行标记实现页面文字换行

黄鹤楼送孟浩然之广陵

故人西辞黄鹤楼，烟花三月下扬州。

孤帆远影碧空尽，唯见长江天际流

运行结果如图：

2.段落标记

开头，

标记结束。段落标记在段前段各添加一个空行，而定义在段落标记中的内容不受该标记的影响。

3.标题标记

~

6个标题标记，分为6级标题。

demo：

设置标题标记

Java开发的3个方向

Java SE

主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。

Java EE

主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自 己的官方网站，其中不乏世界500强企业。

Java ME

主要用于嵌入式系统程序的开发。

运行结果如图：

image.png

4.居中标记

。标记中的内容为居中显示。

demo:

设置标题标记

java开发的3个方向

Java SE

主要用于桌面程序的开发。它是学习Java EE和Java ME 的基础，也是本书的重点内容。

Java EE

主要用于网页程序的开发。随着互联网的发展，越来越 多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。

Java ME

主要用于嵌入式系统程序的开发。

运行结果如图：

image.png

5.文字列表标记

1)无序列表：

• demo:

  无序列表标记

  编程词典有以下几个品种

  • Java编程词典
  • VB编程词典
  • VC编程词典
  • .net编程词典
  • C#编程词典

  运行结果如图：

  

  image.png

  1)有序列表：

  1. demo:

     有序列表标记

     编程词典有以下几个品种

     1. Java编程词典
     2. VB编程词典
     3. VC编程词典
     4. .net编程词典
     5. C#编程词典

     运行结果如图：

     

     image.png

     3.HTML表格标记

     

     image.png

     demo:

     学生考试成绩单

     姓名	语文	数学	英语
     张三	89	92	87
     李四	93	86	80
     王五	85	86	90

     运行结果如图：

     

     image.png

     4.HTML表单标记

     对于经常上网的人来说，对网站中的登录等页面肯定不会感到陌生。在登录页面中，网站会提供

     给用户用户名文本框与密码文本框，以供访客输入信息。这里的用户名文本框与密码文本框就属于

     HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。

     1.

     ...表单标记

     基本语法如下：

     

     

     2.表单输入标记

     表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、

     按钮等。

     基本语法如下：

     readonly="" size="digit" src="uri" alt="" name="checkbox" value="checkbox">

     

     

     demo:

     <input>标记的典型应用

     用 户 名： 密    码： 确认密码： 性    别： 男  女 爱    好： 体育 旅游 听音乐 看书 E-mail：

     Demo中的图片资源我放在码云上面了，链接在这里，点击前往；

     3....下拉列表框标记

     标记可在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用

     标记向列表中添加内容。

     标记的语法格式如下：

     

     image.png

     demo:

     select标签Demo

     下拉列表框：

     数码相机区

     摄影器材

     MP3/MP4/MP5

     U盘/移动硬盘

      多行列表框(不可多选)：

     数码相机区

     摄影器材

     MP3/MP4/MP5

     U盘/移动硬盘

      多行列表框(可多选)：

     数码相机区

     摄影器材

     MP3/MP4/MP5

     U盘/移动硬盘

     运行结果：

     

     image.png

     CSS样式表

     1. CSS规则

     选择符{属性：属性值；}

     

     image.png

     2. CSS选择器

     1.标记选择器

     demo：

     a{

     font-size:9px;

     color:#F93;

     }

     2.类别选择器

     "."配合“class"属性

     demo：

     .one{

     font-family:宋体;

     font-size:24px;

     color:red;

     }

     .two{

     font-family:宋体;

     font-size:16px;

     color:red;

     }

     .three{

     font-family:宋体;

     font-size:12px;

     color:red;

     }

     应用了选择器one

     正文内容1

     应用了选择器two

     正文内容2

     应用了选择器three

     正文内容3

     运行结果如下：

     

     image.png

     3.id选择器

     "#"配合“id"属性

     demo：

     #one{

     font-family:宋体;

     font-size:36px;

     color:red;

     }

     #two{

     font-family:宋体;

     font-size:16px;

     color:red;

     }

     #three{

     font-family:宋体;

     font-size:12px;

     color:red;

     }

     id选择器1

     id选择器2

     id选择器3

     运行结果如下：

     

     image.png

     4.CSS2和CSS3的自适应特性比较

     demo(CSS2)：

     使用CSS2对页面中的文字添加彩色边框

     #boarder {

     margin:3px;

     width:180px;

     padding-left:14px;

     border-width:5px;

     border-color:blue;

     border-style:solid;

     height:104px;

     }

     文字一

     文字二

     文字三

     文字四

     文字五

     文字二

     文字三

     文字四

     文字五

     demo(CSS3)：

     #boarder {

     border:solid 5px blue;

     border-radius:20px;

     -moz-border-radius:20px;

     padding:20px;

     width:180px;

     }

     文字一

     文字二

     文字三

     文字四

     文字五

     文字二

     文字三

     文字四

     文字五

     运行结果如下：

     

     CSS2(左)&CSS3 (右)