您的位置：首页 > Web前端 > HTML

Html入门学习总结

2015-09-05 21:15 525 查看

HTML超文本标记语言

HTML语言是由标签组成的

HTML中的数据会封装在标签对中，因为HTML会通过标签中属性值的改变来对封装数据的操作。

HTML标准格式：

<HTML>
<head></head>
<body></body>
</HTML>

head:网页的一些属性信息，比如标题。

body:网页上显示的数据。

标签特点：对于数据进行封装，就要有开始标签和结束标签。

但也有一些标签只体现单一功能，不需要结束标签，规范中要求标签必须要有结束，所以这样的标签在内部结束。

如：

<br /><hr /><img /><input />

标签格式：

<标签名 属性名="属性值" >数据</标签名>

<标签名 属性名="属性值" />

常见标签：

1. 字体：

<font size="7" color="#0066ff">数据</font>

特殊部分：如果要在页面显示一些特殊符号，需要进行转译。

HTML常用特殊字符：


HTML原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		半个空白位
		一个空白位
		不断行的空白

标题：

<h1><h2><h3>...<h6>

2. 列表标签：

<dl>
<dt>上层标签</dt>
<dd>下层标签</dd>
</dl>

上层标签
下层标签

项目符号标签：

<ul>

:无序列表标签

<ol>

:有序列表标签

这两个标签都由

<li>

标签封装

示例：

<ol>
<li>游戏名称：</li>
<ul>
<li>魔兽</li>
<li>星际</li>
</ul>
<li>游戏内容：</li>
<ol type="a">
<li>攻略</li>
<li>秘籍</li>
</ol>
</ol>

游戏名称：

魔兽

星际

游戏内容：

攻略

秘籍

3.图像标签

<img src="路径" alt="图像文字说明" />

4.表格标签：

<table>

表格由行组成，行由单元格组成。

表格中默认一个tbody标签。

<!--cellpadding 属性规定单元边沿与其内容之间的空白。
cellspacing 属性规定单元格之间的空间。
-->
<table border="1" bordercolor="red" width="60%" cellpadding="10" cellspacing="0">
<!--
-->
<caption>我的表格</caption>
<tr>
<!--th是居中加粗，colspan属性规定单元格可横跨的列数。-->
<thc colspan="2">注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="passwd"/></td>
</tr>
</table>

5.超链接：

<a href="url">

<a href="www.baidu.com" target="_blank">百度</a>

百度

当被点击后，会启动引擎所对应的解析程序，去查找指定主机。

a.先找本地hosts文件，查找对应域名的IP。

b.若本地不存在对应IP，那么去公网DNS服务器上查找对应IP。

<a href="mailto:abc@sohu.com?subject=haha&cc=qq.@163.com">联系我们</a>

这是一个邮件发送的超链接，当被点击时，就会出现相关的邮件发送程序，本机默认的是outlook。

超链接的另一个作用：

定位标记

<a name="top">一个位置</a>
<a href="#top">获取那个位置</a>

6.表单标签：

该标签是可以和服务器进行交互的。

<form>

表单中的元素：

<input>

:该标签因为属性的不同，使用的组件也不同。

type属性：

1.text:文本框，输入的文本可见。

2.password:密码框，输入的文本不可见。

3.radio:单选框，注意：要是他能被选中，必须要给它定义一个name属性，同时，如果有多个单选框且需要只有一个能被当前选中，那么他们的属性值name必须相同。

4.checkedbox:复选框，可以对多个数据进行同时选中。

5.file:文件选择组件，通常用于附件或者文件上传。

6.hidden:隐藏组件，该组件定义的name和value的属性值不会在页面上显示，但是可以提交到服务端。

7.button:按钮组建，自定义一个按钮组件是没有效果的，可以通过注册事件并加入自定义效果。

8.image:图像组件，为了避免提交按钮的单调性，可以通过这个属性定义一个图像形式的提交按钮。

9.reset:重置按钮，将组件中被操作的效果还原到初始状态。

10.submit:提交按钮，将组件中添加的数据提交到指定的目的地。

下拉菜单：

<select>

每一个下拉菜单都由option标签封装

<select name="国家">
<option value="none">请选择国家</option>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="english">英国</option>
</select>

文本区域：

<textarea>

<textarea rows="3" cols="20">
这里就是文本区域
</textarea>

表单组件通常需要定义name和value属性，因为要将数据发送给服务端。

服务端只有知道了该name的值才可以对提交的数据进行分别获取。

form标签中常见的属性：

action：指定数据提交的目的地。

method：提交方式，两种常用值get和post，get为默认。

get和post区别：

get：get会将提交的数据显示在地址栏

post：不会将数据显示在地址栏

get：提交的数据体积受地址栏限制

post：可以提交大体积的数据

get：对于敏感信息而言，提交在地址栏不安全

post：相对于get安全

get：会将提交信息封装再请求行，也就是http消息头之前

post：会将提交信息封装在数据体中，也就是http消息头之后的空行后

对于服务端而言：

表单提交尽量使用post，因为涉及编码问题。

对于post提交的中文。在服务端可以直接使用setCharacterEncoding(“GBK”)就可以解决

对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，再通过指定的码表如GBK解码。

使用表单组件不一定要定义form标签，只有需要将数据进行想服务端的提交时才需要使用form标签。

补充一些标签：

体标签：

1. <pre>
标签:一个常见应用就是用来表示计算机的源代码。

<pre>
class Hello
{
public static void main(String args[])
{
System.out.println("Hello world!");
}
}
</pre>

class Hello
{
public static void main(String args[])
{
System.out.println("Hello world!");
}
}

2.
<p>
标签：段落标签

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p>

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义。

3.
<b>
标签：粗体文本标签

<p>这是普通文本 - <b>这是粗体文本</b>。</p>

这是普通文本 - 这是粗体文本。

4.标签：斜体文本效果

<p>这是普通文本 - <i>这是斜体文本</i>。</p>

这是普通文本 - 这是斜体文本。

5.
<u>标签：
可定义下划线文本

<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>

如果文本不是超链接，就不要对其使用下划线。

6.

<sub>标签

：可定义下标文本

这段文本包含 <sub>下标</sub>

这段文本包含下标

7.

<sup>标签：

可定义上标文本

这段文本包含 <sup>上标</sup>

这段文本包含上标

8.
<marquee>标签：
实现内容的滚动

<marquee direction="down" behavior="slide">内容</marquee>

头标签

1. <base> 标签：
为页面上的所有链接规定默认地址或默认目标

<html>
<head>
<base   href="f:\Upload\" />
<base target="_blank" />
</head>

<body>
<img src="java.jpg" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"f:\Upload\java.jpg"</p>

<a href="http://www.baidu.com" target="">百度</a>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>`
`
</html>

2.
<meta>标签：

name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

例：

<!--表示打开此页面3s后跳转到百度页面-->
<meta http-equiv="refresh" content="3; url=http://www.baidu.com" />

当取content-type值：当当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

3.

<link>标签：

定义文档与外部资源的关系。

<link>标签：

最常见的用途是链接样式表。

<!--两种不同的样式表，针对两种不同的媒介类型（计算机屏幕和打印）：-->
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

media属性：

规定被链接文档将显示在什么设备上。

用于为不同的媒介类型规定不同的样式。


值	描述
screen	计算机屏幕（默认）。
print	打印预览模式/打印页面。
projection	放映机。
handheld	手持设备（小屏幕、有限带宽）。

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

标签：

相关文章推荐

新的分享

章节导航