JavaWeb自学之html学习笔记 Day-1

本文主要是介绍JavaWeb自学之html学习笔记 Day-1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

*html的规范(遵循)
1、一个html文件开始标签和结束标签<html> </html>表示作用范围,就像java中方法的作用范围用{ }表示一样
2、html包含两部分内容
(1)<head>设置相关信息</head>
(2)<body>显示在页面上的内容都写在body里面</body>
(3)html的标签有开始标签，也要有结束标签
<head></head>
(4)html的代码不区分大小写
(5)有些标签没有结束标签，在标签内结束(后面加/)
比如换行 <br/>
水平线<hr/>

*html的操作思想(*****理解)
网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来(封装起来)，
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

html中常用的标签
文字标签和注释标签
1、文字标签：修改文字的样式
-<font></font>
-属性：
size：文字的大小，取值范围为1~7，超出了7，默认还是7
color:文字颜色
-两种表示方式
**英文单词：red,green,blueblack,white,yellow,gray...
**使用十六进制数表示 #ffffff :RGB 每两个f表示一种颜色
通过工具实现不同的颜色 #66cc66
2、注释标签
-java注释有三种：单行，多行，文档
-html的注释： 注释不会在网页上显示
3、标题标签、水平线标签和特殊字符
-标题标签
<h1></h1> <h2></h2> <h3></h3> ......<h6></h6>
从h1到h6大小依次变小，同时会自动换行
-水平线标签
<hr/> 在标签内可以修改水平线属性
size:水平线的粗细取值范围1~7
color:颜色
代码：<hr size="5" color="red"/>
-特殊字符
想要在页面上显示这样的内容 <html>:是网页的开始
需要对特殊字符进行转义(重点记前三个)
< 用<转义
> 用>转义
空格用 转义
" 用"转义
4、列表标签
-比如现在显示这样的效果
广西大学
财务部
学工部
人事部
<dl></dl> 表示列表的范围
在dl里面 <dt></dt>表示上层内容 (如广西大学)
在dl里面 <dd></dd>表示下层内容 (如财务部学工部人事部)
代码： <dl>
<dt>广西大学</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>

-现在想要在页面上显示这样的效果
1.财务部
2.学工部
3.人事部
<ol></ol> 表示有序列表的范围
属性type：设置排序方式，1(默认按1、2、3排序) a(a b c) i(i ii iii)
在ol标签里面 <li>具体内容</li>
代码： <ol type="a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>

-现在想要在页面上显示这样的效果
特殊符号(方框) 财务部
特殊符号(方框) 学工部
特殊符号(方框) 人事部
<ul></ul> 表示无序列表的范围
属性type：空心圆circle、实心圆disc、实心方块squar，默认disc
在ul里面<li>具体内容</li>
代码： <ul>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>

</ul>

界面如下图：

html代码如下：

<html>
<title>标题标签示例1</title>
<body>
<h1>这是第一个标题标签</h1>
<font size="5" color="red">这是标题1</font><br/>
<h2>这是第二个标题标签</h2>
<font size="4" color="##eb0aee">这是标题2</font><br/>
<h3>这是第三个标题标签</h3>
<font size="3" color="#0feeda">这是标题3</font><br/>
<hr size="5" color="red"/>

<html>:是网页  的"开始"！

<dl>
<dt>广西大学</dt>
<dd>财务部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
<hr/>

<ol type="a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
<hr size="5" color="#42FF00"/>

<ul type="circle">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
</body>
</html>