1.HTML的文档结构参考文献《JavaWeb 从入门到精通》
1.标记
标记是HTML文件的开头。所有HTML文件都是以标记开头,以标记结束,HTML页面的所有标记都要放置在与标记中,标记并没有实质性的功能,但却是HTML文件不可缺少的内容。
另外,HTML标记是不区分大小写的。
2.标记
文件的头标记,放置HTML文件的信息,
如:
- --
3.
定义网页页面的标题。
4.标记
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)有序列表:
demo:有序列表标记 编程词典有以下几个品种- Java编程词典
- VB编程词典
- VC编程词典
- .net编程词典
- C#编程词典
运行结果如图:
image.png
3.HTML表格标记image.png
demo:
学生考试成绩单 姓名 语文 数学 英语 张三 89 92 87 李四 93 86 80 王五 85 86 90 运行结果如图:
image.png
4.HTML表单标记对于经常上网的人来说,对网站中的登录等页面肯定不会感到陌生。在登录页面中,网站会提供
1.表单标记
给用户用户名文本框与密码文本框,以供访客输入信息。这里的用户名文本框与密码文本框就属于
HTML中的表单元素。表单在HTML页面中起着非常重要的作用,是用户与网页交互信息的重要手段。基本语法如下:
2.表单输入标记表单输入标记是使用最频繁的表单标记,通过这个标记可以向页面中添加单行文本、多行文本、
按钮等。
基本语法如下:demo:
<input>标记的典型应用 Demo中的图片资源我放在码云上面了,链接在这里,点击前往;
3.下拉列表框标记image.png
demo:
select标签Demo 下拉列表框: 多行列表框(不可多选): 多行列表框(可多选): 运行结果:
image.png
CSS样式表1. CSS规则选择符{属性:属性值;}image.png
2. CSS选择器1.标记选择器demo:
2.类别选择器a{ font-size:9px; color:#F93; } "."配合“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 (右)
作者:凌川江雪
链接:https://www.jianshu.com/p/a84df2ad609e



