您的位置：首页 > 编程语言 > Java开发

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

2015-12-13 19:18 477 查看

*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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航