html笔记

HTML基础与表单元素详解

最新推荐文章于 2025-09-11 10:42:34 发布

weixin_30372371

最新推荐文章于 2025-09-11 10:42:34 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/gaoyukun/p/8135140.html

本文详细介绍了HTML的基础知识及各种表单元素的应用方法，包括表单提交、输入控件、选择器、文本区域等，并对表格布局、列表标签等进行了说明。

<!DOCTYPE html>                #标准规范
<html lang="en">
<head>                         #html头
    <meta charset="UTF-8">     #字符编码
    <title>Title</title>       #页面头部显示内容
</head>
<body>
           
</body>
</html>


Doctype标准
　　Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
　　BackCompat：标准兼容模式未开启（默认），浏览器按照自己的方式解析渲染界面
　　CSS1Compat：标准兼容模式已经开启，浏览器按照W3C的标准解析渲染界面


head界面头部

1.界面编码
<meta charset="utf-8">
2.刷新和跳转
<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com">
3.关键词
<meta name="keywords" content="汽车，汽车之家，汽车网，汽车报价"/>
4.描述
<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全"/>
5.link标签
<!--css-->
<link rel="stylesheet" type="text/css" href="1.css">
<!--icon Title前小图标>
<link rel="shortcut icon" href="1.ico">

body界面主体
标签一般分为两种：
内联标签：a,span,select等
块级标签：div,h1,p等

input标签系列

form表单提交时，会以键值对的形式提交。 name=""是键 value=""是值。
<body>
<form action="http://localhost:8888/index" method="post">   #action表示提交动作，把数据提交到指定路径，method指定提交类型，默认为get
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：  <input type="password" name="password"></p>
    <p>爱好：篮球<input type="checkbox" name="1">
    足球<input type="checkbox" name="2"></p>
    <p>性别：男<input type="radio" name="sex" value="1">
    女<input type="radio" name="sex" value="2"></p>
    <p><input type="file"></p>
    <p><input type="reset"></p>
    <p><input type="submit"></p>

<!--select--下拉框>
    <select  size="2" name="城市">
        <option value="beijing">背景</option>
        <option value="tianjin">天津</option>
        <option value="shanghai">上海</option>
    </select>
    <select   name="城市1">
         <optgroup label="中国">
             <option value="beijing">北京</option>
             <option value="tianjin">天津</option>
             <option value="shanghai">上海</option>
         </optgroup>
         <optgroup label="河南">
             <option value="beijing">三门峡</option>
             <option value="tianjin">周口</option>
             <option value="shanghai">洛阳</option>
         </optgroup>
    </select>

<!--textarea多行输入-->
    <textarea name="textarea" cols="2" rows="4">自我介绍</textarea>
    <label for="www">姓名</label>
    <input id="www" type="text">

    <fieldset>
        <legend>登录吧</legend>
        <input type="text">
    </fieldset>
</form>
</body>

img图片标签

<img src="1.jpg" title="美女图片" alt="图片错误">
title指定鼠标放到图片上显示的内容，alt指定图片不存在时的显示信息

ul,ol,dl列表标签

<body>
<ul>
    <li>12</li>
    <li>12</li>
    <li>12</li>
    <li>12</li>
</ul>
<ol>
    <li>12</li>
    <li>12</li>
    <li>12</li>
    <li>12</li>
</ol>
<dl>
    <dt>第一章</dt>
    <dd>1</dd>
    <dd>1</dd>
    <dd>1</dd>
    <dd>1</dd>
    <dt>第二章</dt>
    <dd>2</dd>
    <dd>2</dd>
    <dd>2</dd>
    <dd>2</dd>
</dl>
</body>

table列表

简单单元格
<table>
    <thead>
    <tr>
        <td>主机名</td>
        <td>IP</td>
        <td>详情</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>localhost</td>
        <td>127.0.0.1</td>
        <td>
            <a href="test.html">点击</a>
        </td>
    </tr>
    </tbody>
</table>


合并单元格

<table border="1">
    <thead>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td rowspan="2">1</td>
        <td>1</td>
    </tr>
    </tbody>


</table>

position(positon常用的有三个属性：fixed/absolute/reletive)

1.fixed

#a1{
       position: fixed;  
       bottom: 20px;
       right: 20px;
    }
<a id="a1">返回顶部</a>

2.reletive(相对定位，相对于其正常文档流进行定位）

<div style="position:reletive;left:20px;top:20px;"></div>

原有的div在文档中有其默认位置，设置position:reletive后是相对于原来的div移动相应的位置。

3.absolute(绝对定位，一层一层向上找，直到找到第一个position不是static的父级标签，然后相对于它进行相对定位)

<div id="div1" style="position: relative;height: 200px;width: 200px;background-color: #2459a2">
    <div id="div2" style="position: absolute;height: 60px;width: 60px;background-color: blue;left: 5px;top: 5px;">
        <div id="div3" style="position:absolute;height:40px;width: 40px;background-color: brown;left: 10px;top: 5px;"></div>
    </div>
</div>