【JavaWeb笔记】HTML入门

来源：互联网发布：安装linux u盘坏了编辑：程序博客网时间：2024/05/29 05:53

本期知识点：
HTML介绍
HTML标签

一.HTML介绍

1.概述：

HTML(HyperText Markup Language)超文本标记语言
用它编写出文档的文件扩展名是“.html”或“.htm”（微软的操作系统），他是可供浏览器解释浏览的文件格式。你可以使用记事本，写字板或者是专业的IDE如：Dreamweaver等等编辑工具来编写HTML文件。

2.语言特点：

a.简易性：

超级文本标记语言版本升级采用超级方式，从而更加灵活方便。

b.可扩展性：

超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

c.平台无关性：

虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。

3.html的文档结构

a.<html></html>

<html>标记用于html文件的最前面，用来表示html文件的开始。
</html>标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用

b.<head></head>

<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对。
<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。

c.<body></body>

<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

二.HTML标签

1.META标签

a.概述：

META标记是html语言的head部分的一个辅助性的标记，他位于head和title标记之间，他提供给用户不可见的信息。

b.例：

<meta name="Author" content="作者"><meta name="Keywords" content="关键字"><meta name="Description" content="描述">

2.TITLE标签

a.概述：

在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。

b.例：

<title>百度一下，你就知道</title>

3.文字上的分隔标签

a.常用的分隔标记：

强制断行标记<br>
强制分段标记<p>
空格  

4.排版的标签

a.文字的置左，置右，置中:

分段标记“<p>”在加上一些简单的属性设定，就可以让其的文字置左，置右，置中。

例:

<html><head><title>文字的置左，置右，置中</title></head><body><p align = "left">希望有个如你&nbsp;一般的人</p><p align = "center">如山间清爽的风</p><p align = "right">如古城温暖的光</p></body></html>

b.置中标记:

使用：<center>内容</center>

例:

<html><head><title>文字的置左，置右，置中</title></head><body><center>从清晨到夜晚</center><center>从山野到书房</center></body></html>

c.保持原始数

使用：<pre>内容<pre>据格式标记

例:

<html><head><title>文字的置左，置右，置中</title></head><body><pre>只要最后是你就好是你就是你！</pre></body></html>

5.字体标签

a.标题标记
使用：<h1>内容</h1>
例:
<html> <head><title>标题标记</title> </head>  <body><h1>标题1</h1>  <br><h2>标题2</h2>  <br><h3>标题3</h3>  <br><h4>标题4</h4>  <br><h5>标题5</h5>  <br><h6>标题6</h6>  <br> </body></html>
b.设置字体标记
使用：<font size=“2” color=“red” face=“黑体”>内容</font>
例：
<html><head> <title>文字字体设定</title></head><body><font size="4" face="黑体" color="red">只要最后是你就好</font></body></html>
c.字体变化标记

加粗:<b></b>
斜体:<i></i>
下划线:<u></u>
删除线:<s></s>
上标:<sup></sup>
下标:<sub></sub>
闪烁:<blink><blink>
强调:<em></em>
加强:<strong></strong>

6.背景标签

a.背景颜色
使用：<body bgcolor="red" backgroud="bg.jpg">
例：
<html><head><title>背景颜色</title> </head><body  bgcolor="red"><font  size="4"  face="微软雅黑"  color="red">背景颜色</font></body> </html>

7.分隔线标签

a.使用：上一部分<hr>下一部分

例：

<html><head><title>背景颜色</title></head> <body>abcdefg<br><hr  color="blue" size="2" noshade>higklmn</body></html>

8.<img>标签

a.向网页中插入图片

使用：

<img src="D:\Pictures\Saved Pictures" alt="图片加载失败" align="left" border="0" height="800" width="550" title="帆之亦然工作室">

例：

<html><head><title>图片</title></head><body><img  src="D:\Pictures\Saved Pictures\YF.jpg" alt="图片加载失败" border="0" height="800" width="550" title="帆之亦然工作室"></body></html>

9.序列标签

a.无序列表
<html><head> <title>无序列表</title></head><body>  <ul>  <li>第一赛季  <li>第二赛季  <li>第三赛季  <li>第四赛季  </ul></body></html>
说明：
其中<ul>就是无序列表，没增加一列内容，就需要加一个<li>;
可以为 <ul>添加属性type="disk"(实心点)，type="square"(小正方形)type="circle"(空心点)
b.有序列表
i.
<html><head> <title>有序列表</title></head><body>  <ol>  <li>第一赛季  <li>第二赛季  <li>第三赛季  <li>第四赛季  </ol></body></html>
说明：
其中<ol>就是有序列表，没增加一列内容，就需要加一个<li>;
可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)；
ii.可以指定序列的开始数目。

<html><head> <title>有序列表</title></head><body><ol start="2"><li>第二赛季<li>第三赛季<li>第四赛季</ol></body></html>

c.自定义列表

例：

<html><head> <title>有序列表</title></head><body><dt>第一赛季</dt><dd>第二赛季</dd><dt>第三赛季</dt><dd>第四赛季</dd></body></html>

10.特殊字符标签

html中有很多特殊的字符是需要特殊的处理。

< —— <

> —— >
& —— &
" —— "

11.超链接标签

a.连接到其他的文档

例：

<html> <head>   <title>超链接1</title>  </head><body>   <a href="特殊字符.html" target="_blank" >连接其他文件</a>  </body></html>

注意：target="_self" 在自身窗口打开

绝对路径：是指从根目录到文件的完整路径。
相对路径：是指相对于当前文件的文件位置。
b.网页的内部链接

例：

<html> <head>   <title>超链接2</title> </head>  <body><a  href="#c7">查看章节7</a><h2>章节1</h2> <p>该章节是关于。。。。。。。。。。</p><h2>章节2</h2> <p>该章节是关于。。。。。。。。。。</p><h2>章节3</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节4</h2> <p>该章节是关于。。。。。。。。。。</p><h2>章节5</h2> <p>该章节是关于。。。。。。。。。。</p><h2>章节6</h2> <p>该章节是关于。。。。。。。。。。</p> <a name="c7"><h2>章节7</h2> <p>该章节是关于。。。。。。。。。。</p>  </a><h2>章节8</h2> <p>该章节是关于。。。。。。。。。。</p>  </body></html>

c.网页的外部链接

例：

<html> <head>   <title>链接的外部文件</title> </head> <body>   <a  href="http://www.baidu.com">百度</a>  </body></html>

d.图片的锚点链接

例：

<html><head>  <title>图片的锚点链接</title></head><body><img src="D:\Pictures\Saved Pictures\YF.jpg" usemap="#mymap" width=800 height=550></img><map name="mymap"><area shape="rect" coords="100,20,30,30" href="http://www.baidu.com"/> <!-- 几个数字 代表矩形的 xy 坐标 以及矩形的长宽 --><area shape="circle" coords="300,400,300" href="http://www.baidu.com" target="_blank"/> <!-- 几个数字代表 圆形的xy坐标 以及圆点半径 --></map></body></html>

未完待续...

阅读全文

0 0

【JavaWeb笔记】HTML入门

一.HTML介绍

1.概述：

2.语言特点：

a.简易性：

b.可扩展性：

c.平台无关性：

3.html的文档结构

a.<html></html>

b.<head></head>

c.<body></body>

二.HTML标签

1.META标签

a.概述：

b.例：<meta name="Author" content="作者"><meta name="Keywords" content="关键字"><meta name="Description" content="描述">

2.TITLE标签

a.概述：

b.例：<title>百度一下，你就知道</title>

3.文字上的分隔标签

a.常用的分隔标记：

4.排版的标签

a.文字的置左，置右，置中:

b.置中标记:

c.保持原始数

5.字体标签

a.标题标记

b.设置字体标记

c.字体变化标记

6.背景标签

a.背景颜色

7.分隔线标签

a.使用：上一部分<hr>下一部分

8.<img>标签

a.向网页中插入图片

9.序列标签

a.无序列表

b.有序列表

i.

ii.可以指定序列的开始数目。

c.自定义列表

10.特殊字符标签

11.超链接标签

a.连接到其他的文档

b.网页的内部链接

c.网页的外部链接

d.图片的锚点链接

b.例：
<meta name="Author" content="作者"><meta name="Keywords" content="关键字"><meta name="Description" content="描述">

b.例：
<title>百度一下，你就知道</title>