【JavaWeb笔记】HTML入门

最新推荐文章于 2024-09-10 10:21:38 发布

追云的帆

最新推荐文章于 2024-09-10 10:21:38 发布

阅读量433

点赞数

分类专栏： JavaWeb 文章标签： java html

本文链接：https://blog.csdn.net/fanfan_yang/article/details/77718810

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本期知识点：
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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb笔记】HTML入门

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

扫一扫