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的注释:<!--html注释-->  注释不会在网页上显示
3、标题标签、水平线标签和特殊字符
-标题标签
<h1></h1> <h2></h2> <h3></h3> ......<h6></h6>
从h1到h6大小依次变小,同时会自动换行
-水平线标签
<hr/> 在标签内可以修改水平线属性
size:水平线的粗细  取值范围1~7
color:颜色
代码:<hr size="5" color="red"/>
-特殊字符
想要在页面上显示这样的内容  <html>:是网页的开始
需要对特殊字符进行转义(重点记前三个)
<  用&lt;转义
>  用&gt;转义
空格  用&nbsp;转义
"  用&quot;转义
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注释-->
&lt;html&gt;:是网页&nbsp;&nbsp;的&quot;开始&quot;!
<!--列表标签-->
<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值