Html入门学习总结

来源：互联网发布：ug8.0编程在线视频观看编辑：程序博客网时间：2024/05/16 15:54

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

标题：<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 手持设备（小屏幕、有限带宽）。

0 0