HTML的简介

什么是HTML

HyperText Markup Language 超文本标记语言

  • 超文本：超出文本的范畴，使用HTML可以轻松实现这样的操作
  • 标记：HTML所有的操作都是通过标记实现的，标记就是标签 <标签名称>
  • 网页语言：是一门实现网页的语言。

第一个HTML程序

  • HTML后缀是 .html 或 .htm
  • 代码：
<font size="5" color="red">这是我的第一个html程序！<font>
  • 效果：
    这是我的第一个html程序！

HTML的规范（大家都要遵循）

  1. 一个html文件开始标签和结束标签 <html> </html>
  2. HTML包含两部分内容
    1）<head> 设置相关信息 </head> 2）<body>显示在页面上的内容都写在body里面</body>
  3. HTML的标签有开始标签，也有结束标签
    <head> </head>
  4. HTML的代码不区分大小写。
  5. 有些标签，没有结束标签。
    例如：换行<br/> 分割线<hr/>

HTML操作思想

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候就需要使用标签吧要操作的数据包起来（封装起来），通过修改标签的属性值来实现标签内数据样式的变化。
一个标签就相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值就可以了。

HTML中常用的标签

文字标签和注释标签

  • 文字标签：修改文字的样式
    <font> </font>属性：
    • size：文字的大小。取值范围：1~7，超出了7，默认还是7。
    • color：文字的颜色。
      颜色的表示方式：
    1. 英文单词：red green blue black white yellow gray ……
    2. 使用十六进制数表示：#ffffff ：RGB颜色
      可以通过工具实现不同的颜色。
  • 注释标签
    html的注释：<!-- html的注释 -->

标题标签、水平线标签和特殊字符

  • 标题标签：<h1> </h1>；<h2> </h2>……<h6> </h6>。
    从h1到h6，大小是依次变小，同时会自动换行。
  • 水平线标签：<hr> 属性：
    size：水平线的粗细。取值范围1~7。
    color：水平线的颜色。
  • 特殊字符： 对特殊字符进行转义：

Java中的HTML怎么运行 java操作html_javaweb

列表标签

定义列表（dl标签）：

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
	<dt>小标题</dt>
		<dd>内容1</dd>
		<dd>内容2</dd>
		<dd>内容3</dd>
</dl>

有序列表

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>的属性type定义了有序列表的序号样式，可用的值有：1 A a I i。

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于<ul> 标签。每个列表项始于 <li>。
<ul>的属性type定义了无序列表的序号样式： disc、square、circle。

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

图像标签

<img src="文件的路径" />、
常用属性：
src：图片的路径，
width：图片的宽度，
height：图片的高度，
alt：图片的提示文字。（有些浏览器不显示，兼容性比较差）

路径的介绍

绝对路径：就是文件在计算机上的绝对位置。从根分区到文件的位置路径。

相对路径：一个文件相对于另一个文件的路径。从一个文件到另一个文件的路径。

Java中的HTML怎么运行 java操作html_总结_02

超链接标签

链接资源

<a href="资源路径"> 显示在页面上的内容</a>

href：链接的资源的地址
target：设置打开的方式，默认是在当前页打开

  • blank：在一个新窗口打开
  • self：在当前页打开（默认）

当链接不需要到任何地址，在href里面加#。

<a href="#">显示在页面上的内容</a>

定位资源

如果我们想要定位资源：

  • 先定义一个位置：
<a name="top">顶部</a>
  • 回到这个位置：
<a href="#top">回到顶部</a>

在这里引入一个标签：<pre> </pre>原样输出，保留换行、空格、缩进

表格标签

  • 可以对数据进行格式化，使数据显示的更加清晰
  • <table> 标签定义 HTML 表格。
    属性：
    border：表格线
    bordercolor：表格线的颜色
    cellspacing：单元格直接的距离
    width：表格的宽度
    height：表格的高度
  • 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
  • tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
  • tr设置显示方式 align：left、center、right
  • td设置显示方式 align：left、center、right
<table border="1">
	<tr>
    	<th>Month</th>
    	<th>Savings</th>
  	</tr>
  	<tr>
    	<td>1</td>
    	<td>$600</td>
	</tr>
	<tr>
    	<td>2</td>
    	<td>$500</td>
	</tr>
</table>
  • 表格的标题：<caption> </caption>
  • 合并单元格
    rowspan：跨行。、
<table border="1">
	<tr>
		<th>Month</th>
		<th>Savings</th>
	</tr>
	<tr>
		<td>January</td>
		<td>$100.00</td>
		<td rowspan="2">$50</td>
	</tr>
	<tr>
		<td>February</td>
		<td>$10.00</td>
	</tr>
</table>
  • colspan：跨列。
<table border="1">
	<tr>
		<th>Month</th>
		<th>Savings</th>
	</tr>
	<tr>
		<td colspan="2">January</td>
	</tr>
	<tr>
		<td colspan="2">February</td>
	</tr>
</table>

表单标签

<from> </from>：定义一个表单的范围。

  • action属性：提交的位置，默认是提交到当前页面。
  • method属性：表单的提交方式。有两种， get(默认选项) 和 post。
    get和post的区别：
    1. get请求会携带提交的数据，post不会携带（在请求体里面）。
    2. get请求安全级别低，post高。
    3. get请求数据大小有限制，post没有限制。
  • enctype：一般请求不需要设置这个属性，做文件上传的时候需要设置这个属性。

输入项：可以输入内容或者选择内容的部分。
大部分的格式：<input type="输入项的类型">

  • 普通输入项：
<input type="text" name="phone" />
  • 密码输入项：
<input type="password" name="mima" />
  • 单选输入项：
    在里面有name属性。name属性必须相同。
    如果设置默认选中属性，就用checked属性：checked="checked"。
    必须要有一个value值。
<input type="radio" name="sex" value="woman" checked="checked" />女 
<input type="radio" name="sex" value="man" />男
  • 复选输入项：
    在里面有name属性。name属性必须相同。
    如果设置默认选中属性，就用checked属性：checked="checked"。
    必须要有一个value值。
<input type="checkbox" name="love" value="zq" />足球
<input type="checkbox" name="love" value="yy" checked="checked" />游泳
<input type="checkbox" name="love" value="qm" />骑马
<input type="checkbox" name="love" value="sj" />射箭
  • 文件输入项：
<input type="file" />
  • 下拉输入项：
    如果设置默认选中属性，就用checked属性：selected="selected"。
<select name="birth">
	<option value="1991">1991</option>
	<option value="1992" selected="selected">1992</option>
	<option value="1993">1993</option>
	<option value="1994">1994</option>
</select>
  • 文本域输入框：
<textarea rows="10" cols="80">文本域默认内容！</textarea>
  • 隐藏项：（不会显示在页面上，但是存在于HTML代码里面）
<input type="hidden" />
  • 提交按钮
<input type="submit" value="提交" />

也可以使用图片进行提交：

<input type="image" src="xxx.jpg" />

当在输入项里面写了name属性之后，点击提交按钮会把表单内的内容提交到服务器。
? 输入项=输入值 & ……

  • 重置按钮:回到输入项的初始状态
<input typr="reset" value="重置按钮" />
  • 普通按钮(一般和js一块使用)
<input type="button" value="普通按钮" />

其他常用标签

<b> 加粗 </b>
<u> 下划线 </u>
<i> 斜体 </i>
<s> 删除线 </s>

<pre>
	原样输出，保留格式
</pre>

<p>段落标签</p>

<sub> 下标 </sub>
<sup> 上标 </sup>

<div> 换行的盒子 </div>

<span> 不换行的盒子 </span>

HTML的头标签<head>

  • <head> 定义关于文档的信息。
  • <title> 定义文档标题。
<title>标题</title>
  • <base> 定义页面上所有链接的默认地址或默认目标。
<base target="_blank" /> 设置所有的超链接在新窗口中打开
  • <link> 定义文档与外部资源之间的关系。引入外部文件。
  • <meta> 定义关于 HTML 文档的元数据。
<meta charset="utf-8" /> 设置网页字符集
<meta name="keywords" content="keyword1,keyeord2"/> 设置网页关键字
<meta http-equiv="refresh" content="3;xxx.html"/> 设置网页自动跳转
  • <script> 定义客户端脚本。
  • <style> 定义文档的样式信息。