HTML

本文详细介绍了HTML的基本概念与使用方法,包括HTML文档结构、常用标签及其属性,并对比了GET与POST提交方式的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介

网站开发的主要原则是:
1.用标签元素HTML描述网页的内容结构;
2.用CSS描述网页的排版布局;
3. 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序。

Html语言是被创建用于给予网页内容结构和语义信息的超文本语言。
CSS语言是被创建用于给予网页内容样式的层叠样式表。
Html决定网页内容的结构和语义信息,css决定网页内容的样式和表现。而且css不应该在html文件中。

三个重要和html有关的术语

元素
元素就是一个表示符,他定义网页中的一个对象,对象包括结构和内容。
一些比较常用的元素比如h1 到h6, p, a, div, span, strong, 和em.
标签
一个元素有像个标签组成,一个开始标签和一个结束标签。
其中有个别标签因为只有单一功能,或许没有要修饰的内容可在标签内结束。
要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
属性值与属性值之间用等号连接,属性值可以用双引号或者单引号或者不用引号。

属性
属性就是给元素提供更多的信息,常用的属性有 id name class
title,或者是给多媒体元素一个src属性,为超链接属性提供href属性。

Html文档结构和语法
Html文档有统一的结构,包括下面的声明和标签:doctype Html head body。
Doctype声明被用来告诉浏览器,我们用的是哪个版本的html文档,他被放在文档开始。紧跟其后的是html标签,表示文档的开始和结束。文档的head元素用来提供文档的一些元数据,比如文档的title,外部文档的链接,css和javascript等。在head标签中的内容在网页中是看不见的。能看见的内容都是在<body>中的。

HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 。
Html是通过标签来定义的语言,代码都是由标签所组成 。Html代码不用区分大小写 。
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
标签:是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种,二者的标签名称是相同的,只是结束标签多了一个斜杠“/”
在元素的起始标签中,可以包含“属性”来表示元素的其他特性

常用标签的使用

为了操作数据,都需要对数据进行不同标签封装,通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作,就是在不断的改变容器的属性值。
格式: <标签名 属性名='属性值'> 数据内容 </标签名>
多个属性时,用空格分开。

字体
1.字体标签<font>
2.标题标签<h1><h2>...<h6>
3.特殊字符&nbsp; 空格
                &amp; &
                &lt; <
                &gt; >
                &qpos; '
列表
4.列表字符<dl>
                <dt> :上层项目
                <dd> :下层项目

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- html注释:演示列表标签。
    列表标签:dl
    上层项目:dt
    下层项目:dd  封装的内容是会被缩进的。有自动缩进的效果。

     -->
     <dl>
         <dt>上层项目内容 </dt>
         <dd>下层项目内容</dd>
         <dd>下层项目内容</dd>
         <dd>下层项目内容</dd>
     </dl>

     <hr/>
     <!-- 有序和无序的项目列表
     有序:<ol>
     无序:<ul>
     无论有序还是无序,条目的封装用的都是<li>

     而且它们都有缩进效果。
      -->
    <ul type="square">
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>

    </ul>

    <ol type="a">
    <li>有序的项目列表</li>
    <li>有序的项目列表</li>
    <li>有序的项目列表</li>
    </ol>
  </body>
</html>

这里写图片描述

5.图像标签<img>

<!DOCTYPE html>
<html>
  <head>
    <title>img.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 演示图片标签

    img


     -->
     <img src="img\1.jpg" height=100 width=100  border=10 alt="崩溃!" />

  </body>
</html>

这里写图片描述
6.地图标签<map>
应用:当要在图像中选取某一部分作为连接的时候,map标签要和img标签联合使用,href是超链接。
表格
7.表格标签<table>
组成:标题标签:<caption>
          表头标签:<th>
          行标签:<tr>
          单元格标签:<td>

<!DOCTYPE html>
<html>
  <head>
    <title>table.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
      <table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
      <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>39</td>
        </tr>
      </table>

    <hr/>

    <table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>

        <tr>
            <th colspan="2">个人信息</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>30</td>
        </tr>

    </table>

    <hr/>
    <table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
        <tbody><!-- 表格的下一级标签是tbody,不定义也存在 -->
        <tr>
            <th rowspan="2">个人信息</th>
            <td>张三</td>
        </tr>
        <tr>

            <td>30</td>
        </tr>
        </tbody>
    </table>

  </body>
</html>

这里写图片描述
超链接
8.超链接标签:<a>
两种用法:1.超链接<a href="">
                 2.定位标记<a name="">

<!DOCTYPE html>
<html>
  <head>
    <title>link.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 

        超链接:
        作用:连接资源
      当有了href属性才有了点击效果
      href属性的值不同,解析的方式也不一样。

      如果在该值中没有指定过任何协议,解析时,是按照默认的协议来解析该值。
      默认的协议是file协议。  

     -->
    <a href="http://www.sina.com.cn"  target="_blank">新浪网站</a>

    <hr/>
    <a href="img/2.jpg">图片</a>

    <hr/>
    <a href="mailto:abc@sina.com">联系我们</a>

    <hr/>
    <a href="http://www.xunlei.com/labixiaoxin.rmvb">蜡笔小新</a><br/>
    <a href="thunder://hhahahahahahhaha---a=f">蜡笔小新</a>
    <hr/>
    <!-- 取消超链接点击的默认效果,添加自定义效果(弹窗) -->
    <a href="javascript:void(0)" onclick="alert('弹窗')">这是一个超链接</a>

  </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>link2.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
  <!-- 
  定位标记。
  专业术语:锚。
   -->
    <a name=top>顶部位置</a>
    <hr/>
    <img alt="pic1" src="img/2.jpg"  height=900 width=400 border=10/>
   <hr/>

   <a name=center>中间位置</a>
   <hr/>

    <img alt="pic2" src="img/3.jpg"  height=900 width=400 border=10/>
    <a href="#top">回到顶部位置</a>
    <a href="#center">回到中间位置</a>
  </body>
</html>

这里写图片描述
框架
9.框架标签<frameset>
注:框架标签不可以放到<body>,一般为了代码的可读性,会放到<head><body>之间。
当框架大小不想被鼠标拖动而改变,可以在frame标签中加入noresize属性,这个属性没有属性值,称为标记属性,加上就为固定。在XHML的规范中,所以属性都要有属性值,那么标记属性的属性值就是自身。
10.画中画标签<iframe>

<!DOCTYPE html>
<html>
  <head>
    <title>iframe.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=utf-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <iframe src="table.html" height=400 width=600>这是画中画标签,如果看到这些文字,说明浏览器不支持该标签</iframe>
    <iframe src="img.html">这是画中画标签</iframe>

    <!-- <iframe src="http:www.xxx.com/1.js" height=400 width=600>恶意程序,让画中画大小为0,但是还是会访问资源</iframe> -->
  </body>
</html>

这里写图片描述

表单
11.表单标签<form>
<input>:输入标签,接收用户输入信息。其中的type属性指定输入标签的类型。

  1. 文本框 text。输入的文本信息直接显示在框中。
  2. 密码框 password。输入的文本以圆点或者星号的形式显示。
  3. 单选框 radio 如:性别选择
  4. 隐藏字段 hidden。 在页面上不显示,但是在提交时随其他内容一起提交。
  5. 提交按钮 submit 用于提交表单中的内容。
<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GB2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 如果要给服务端提交数据,表单中的组件必须有name和value属性。
    用于给服务端获取数据方便
     -->
    <form>
        输入名称:<input type="text" name="user" value=""/><br/>
        输入密码:<input type="password" name="psw"/><br/>
        选择性别:<input type="radio" name="sex" value="nan"><input type="radio" name="sex" value="nv" checked="checked"><br>
        选择技术:<input type="checkbox" name="tech" value="java">java
                <input type="checkbox" name="tech" value="html">html
                <input type="checkbox" name="tech" value="css">css<br>

        选择文件:<input type="file" name="file"><br>
        一个图片:<input type="image" src="11.jpg"><br>
        <!-- 数据不需要客户端知道,但是可以将其提交服务器 -->
        隐藏组件:<input type="hidden" name="myke" value="myvalue"><br>
        一个按钮:<input type="button" value="button1" onclick="alert('有个按钮')"><br>

        <select name="country">
            <option value="none">--选择国家--</option>
            <option value="cn" selected="selected">中国</option>
            <option value="en">英国</option>
            <option value="usa">美国</option>
            <option value="kor">韩国-</option>

        </select>
        <br>
        <textarea rows="5" cols="20" name="text"></textarea><br>
        <input type="reset" value="清除数据"><input type="submit" value="提交数据">
    </form>

  </body>
</html>

这里写图片描述

提交到服务端的表格化表单:

<!DOCTYPE html>
<html>
  <head>
    <title>reg.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <form action="http://127.0.0.1:9090" method="post">
        <table border="1" bordercolor="#0000ff" cellpadding=10 cellspacing=0 width=600>
            <tr>
                <th colspan="2">注册表单</th>
            </tr>
            <tr>
                <td>用户名称</td>
                <td><input type="text" name="user" value=""></td>

            </tr>
            <tr>
                <td>输入密码</td>
                <td><input type="password" name="psw"></td>

            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" name="repsw"></td>

            </tr>
            <tr>
                <td>选择性别</td>
                <td><input type="radio" name="sex" value="nan"><input type="radio" name="sex" value="nv" checked="checked"></td>

            </tr>
            <tr>
                <td>选择技术</td>
                <td>
                    <input type="checkbox" name="tech" value="java">java
                    <input type="checkbox" name="tech" value="html">html
                    <input type="checkbox" name="tech" value="css">css

                </td>

            </tr>
            <tr>
                <td>选择国家</td>
                <td>
                    <select name="country">
                        <option value="none">--选择国家--</option>
                        <option value="cn" selected="selected">中国</option>
                        <option value="en">英国</option>
                        <option value="usa">美国</option>
                        <option value="kor">韩国-</option>

                    </select>


                </td>

            </tr>
            <tr>
                <th  colspan="2">
                    <input type="reset" value="清除数据">
                    <input type="submit" value="提交数据">

                </th>
            </tr>



        </table>

    </form>    


  </body>
</html>

服务端程序:

package server;

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;

public class RegServer {

    public static void main(String[] args) throws IOException {

        ServerSocket ss=new ServerSocket(9090);
        Socket s=ss.accept();
        System.out.println(s.getInetAddress().getHostAddress()+"  connected");

        InputStream in =s.getInputStream();

        byte[] buf=new byte[1024];

        int len=in.read(buf);

        System.out.println(new String(buf,0,len));

        PrintWriter out=new PrintWriter(s.getOutputStream(),true);

        out.println("<font color='green' size='7'>注册成功</font>");

        s.close();
        ss.close();
    }

}

get提交与post提交的区别

提交方式:get 提交
  地址栏:http://127.0.0.1:9090/?user=%D0%A1%D0%C2&psw=12345&repsw=12345&sex=nan&tech=java&tech=html&country=cn

  (请求头)
  提交信息:
127.0.0.1  connected
GET /?user=%D0%A1%D0%C2&psw=12345&repsw=12345&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.2; Win64; x64; Trident/7.0)
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:9090
Connection: Keep-Alive



提交方式:post
地址栏:http://127.0.0.1:9090/
提交信息:
127.0.0.1  connected
POST / HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.2; Win64; x64; Trident/7.0)
Content-Type: application/x-www-form-urlencoded
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:9090
Content-Length: 77
Connection: Keep-Alive
Cache-Control: no-cache

user=%DF%F7%DF%F7&psw=12345&repsw=12345&sex=nv&tech=java&tech=html&country=cn

get提交和post提交的区别:
1. get提交,提交的信息都显示在地址栏中;post提交,提交的信息不显示在地址栏中
2. get提交,对于敏感的数据信息不安全;post提交,对于敏感信息安全
3. get提交,对于大数据不行,因为地址栏存储体积有限;post提交,可以提交大体积数据
4. get提交,将信息封装到了请求行中;post提交,将信息封装到请求体中。

在服务端的一个区别:如果出现将中文提交到tomcat服务器,服务器默认会用iso8859-1进行解码会出现乱码,
通过iso-8859-1进行编码,再用指定的中文码表进行解码,即可。
这种方式对get和post两种提交方式都有效。

但是对于post提交方式提交的中文,还有另外一种解决办法,
就是直接使用服务端的一个对象request对象的setCharacterEncoding方法直接设置指定的中文码表,
就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。

综合上述:表单提交,建议使用post

和服务端交互的三种方式:
1. 地址栏输入URL地址 get
2. 超链接 get
3. 表单 get和post

如果在客户端进行增强型的校验(只要有一个组件内容是错误的,是无法继续提交的。只有全对才可以提交)

那么,服务端收到数据后,还需要校验吗?
需要,为了安全性。

如果服务端做了增强型的校验,客户端还需要校验吗?
需要,因为要提高用户的上网体验效果,减轻服务器端的压力。

头标签
头标签都放在<head></head>头部分之间,包括title base meta link
12.<title>:指定浏览器的标题栏显示的内容。
13.<base>:href属性指定网页中所有的超链接的目录。可以是本地目录,也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的超链接文件。target属性指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。
14.<meta>:name属性是网页的描述信息,当去keyword时,content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv属性模拟http协议的响应消息头。
15.<link> rel属性描述目标文档与当前文档的关系;type属性描述文档类型;media属性指定目标文件在哪种设备上起作用。
其他
16.<marquee>让内容动起来。
direction属性:left right down up
behavior属性:scorll alternate slide
17.<pre>:可以将文本内容按照在代码区的样子显示在页面上。


<!DOCTYPE html>
<html>
  <head>
    <title>other.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <pre>
        class Demo{
            public static void main(String[] args)
            {
                System.out.println("hello");
            }

        }

    <!-- pre标签可以保持代码区的格式 -->

    </pre>


      <hr>
      <marquee direction="down" behavior="alternate">上下移动</marquee>
      <marquee direction="down" behavior="Scroll">滚动</marquee>
      <marquee direction="down" behavior="slide">移动后停止</marquee>
        <b>这是</b><i>演示</i><u>其他</u>常见的小标签
        X<sub>2</sub>  X<sup>2</sup>

  </body>
</html>

这里写图片描述

标签分为两大类:
1.块级标签(元素):标签结束后都有换行 div p dl table title ol ul
2.行内标签(元素):标签结束后没有换行 font span img input select a

只为封装数据,没有特殊含义的表签:

    div:区域标签  封装整行区域
    span:区域标签  封装行内区域
    p:断落标签  不仅仅换行   而且段落前后都有空行

XHTML与XML

XHTML是可扩展的超文本标记语言(Extensible HyperText Markup Language)
1.XHTML可以理解为HTML的升级版。代码的结构更为严谨,是基于XML的一种应用。
2.XML是可扩展标记语言(Extensible Markup Language)。
3.XML是对数据信息的描述。HTML是数据显示的描述。
4.XML代码规定的更为严格。
5.XML规范可以被更多的应用程序所解释,将成为一种通用的数据交换语言。
6.各个服务器,框架都将以XML作为配置文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值