JavaWeb基础HTML

1.什么是HTML？

HTML是一种超文本标记语言
超文本：比普通文本功能更加强大
标记语言：使用一组标签对内容进行描述的语言。不是编程语言，直接被浏览器所解析。

2.HTML能用来干什么？

HTML用来编写网页，平时上网通过浏览器我们看到的大部分页面都是由HTML编写的
网页内容包括：HTML代码、CSS代码、JavaScript代码等内容。
HTML代码：用于展示需要显示的数据
CSS代码：使显示的数据更加好看
JavaScript代码：使整个页面显示的数据具有动画效果
网页根据内容是否改变可分为：静态页面和动态页面
静态页面：编写之后在浏览器不会再改变的网页。HTML就是用于编写静态网页的
动态页面：会根据不同的情况显示不同的内容，如：登录成功的用户名显示

3.HTML语言的特点

HTML不需要编译，直接使用浏览器就可以阅读
HTML文件的后缀名都是.html或者.htm
HTML结构都是由标签组成
标签预先定义好，我们只需要了解其功能即可
标签不区分大小写
通常标签都是由开始标签和结束标签组成
如果没有结束标签，建议用/结尾。如：<img />

4.HTML创建模板

 
<html>
 
<head>
 
<title>
 
这里用来表示标题！
 
</title>
 
</head>
 
<body>
 
这里用来表示网页的身体！
 
</body>
 
</html>

一般的一个最简单的HTML模板就是由<head>标签和<body>标签来书写的，<head>标签里面用来书写的是该网页的标题，需要用<title></title>来声明，要不然标题在<head>中无法显示，<body></body>标签里面用来写的是网页的内容.

5.常用标签

5.1标题标签：<hn>
   eg:<h1>标题一</h1> <h2>标题二</h2> 这里字体大小依次递减一直到<h6>
5.2分隔线标签：<hr />   换行标签<br />   段落标签<p>
5.3字体标签：<font>
   <font>用来设置字体的尺寸、字体的颜色。
       size属性：用来设置字体的大小，可取的值在1至7范围内，依次增大，浏览器的默认值是3。
       color属性：用来设置字体的颜色，颜色表示方式有两种，一种是红绿蓝三原色，另一种是英文单词
5.4格式化标签： <b>粗体</b> <i>斜体</i>   标签内部可嵌套
   eg:<i><font size="4" color="darkorchid">空山新雨后</font></i><br />
   <b><font size="7" color="blue">天气晚来秋</font></b>
5.5图片标签：<img>
   <img>在HTML页面中引用一张图片
   src:指定需要显示的图片的URL（路径）
   alt:图片无法显示时的替代文本
   width:设置图像的宽度
   height:设置图像的高度
   title:用来设置当光标移动到上面所显示的内容
   eg:<img src="img/S108-9.jpg" alt="国家一级保护动物" height="200" width="300" title="哈哈哈"/>
5.6列表标签：<ul>和<ol>
   <ol>:定义有序列表
       type类型：取值A，a,I,i,1等
   <ul>:定义无序列表
       type类型：取值disc实心圆，square方块，circle空心圆
   <li>:定义列表项，是<ul>和<ol>的子标签
5.7超链表标签<a>
   <a>标签是超链接，是在HTML中提供了一种可以访问其他位置的实现方式
   href:用来确定需要显示页面的路径（URL）
   target:确定是以哪种方式来打开href中所设置的页面。通常取值_blank和_self;
   _blank:在新窗口打开href中指定的页面
   _self:在当前页面直接进行替换（默认）
5.8表格标签<table><tr><td>
   HTML表格由<table>标签以及一个或者多个<td>、<tr>和<th>组成
   <table>是父标签，相当于是整个表格的容器
   border:表格表框的宽度
   width:表格的宽度
   cellpadding:单元边沿与其内容之间的空白
   cellspacing:单元格之间的空白
   bgcolor:表格的背景颜色
   <tr>标签用来定义行
   <td>标签用来定义表格的单元格（一个列）
   colspan:单元格可横跨的列数
   rowspan:单元格可横跨的行数
   align:单元格内容的水平对齐方式，取值有left,right,center
   nowrap:单元格中的内容是否折行
   <th>标签用来定义表头。单元格内的内容默认居中，加粗
5.9框架标签<frameset>
   <frameset>标签，是个窗口页面整合在一起的集合(框架集)，每一个页面都是一个单独的文档，需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，使用clos确定列数，rows确定行数。多个<frameset>可以嵌套使用。
注：<frameset>和<body>连个不能共存
框架子标签：<frame>
<frame>标签，用于设置<frameset>框架集合中的一个页面
src属性：确定页面的路径
noresize属性：框架分割先不能移动
target属性：确定需要显示的页面在何处显示

    <html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <title>框架标签</title>
 
    </head>
 
    <frameset rows="100,*"><!--把界面划分为上下两个部分，一个是100，下面是*所有的部分-->
 
        <frame name="top" src="a.html" /><!--上面的部分用来显示a.html界面-->
 
        <frameset cols="80,*"><!--接下里的部分又划分为左右两个部分-->
 
        <frame name="left" src="b.html" /><!--左边的页面-->
 
        <frame name="right" src="b.html" /><!--右边的页面-->
 
        </frameset>
 
    </frameset>
 
</html>

小结：对于HTML的内容，在于对各个标签的记忆，在使用过程中嵌套使用不同的标签可以呈现不同的效果，掌握程度只要能看懂前端的代码描述，懂得基本运用即可。

猜你喜欢