HTML 开发指南简单描述

来源：互联网发布：什么是阶梯型矩阵编辑：程序博客网时间：2024/06/18 13:43

一、HTML

- 超文本编辑语言
- 格式

<html>  <head>设置相关信息 如：（< title>）<head/>  <body>页面显示内容<body/>  <html/>

- HTML代码不区分大小写

二、HTML标签查找手册方法及常用标签列举

所有HTML标签可以在HTMLＨelp手册中查找,在此不一一列举。查找方法：先从标记一览中找到需要标签—-进入相关标记找到具体标签，查看属性和用法

文件标记

1. 文件声明<html></html>2. 开头标签<head></head>

-标题标签<title></title>-meta标签：设置页面的一些相关内容        关键词        <meta name="keywords" content="毕姥爷，熊出没，刘翔">        页面的定时跳转功能。3s之后跳转        <meta http-equiv="refresh" content="3;url=01-hello.html" />   -base标签：设置超链接的基本设置    可以统一设置超链接的打开方式          <base target="_blank"/>-link标签：引入外部文件        可以使用link标签引入css文件

文本标签<body></body>

字体标签

文本标记<font ></font>
标题标记<h1~6></h1~6>
粗体<b></b>、斜体<i></i>、下划线<u></u>
指数<sub></sub>、下标字<sup></sup>

排版标记

水平线<hr>
注释<!-XXXX->
换行<br>
段落标签<p>: 比换行多一行
区隔标签<div></div>:会自动换行
行内标签<span></span>:不会自动换行
原样输出<pre></pre>

列表（清单）标记

定义列表：出现列表的分层

    <dl>        <dt>列表的标题</dt>        <dd>列表的内容</dd>        <dd>列表的内容</dd>        <dd>列表的内容</dd>    </dl>

无序列表：列表内容有行标记

   <ul >        <li>列表的内容</li>        <li>列表的内容</li>        <li>列表的内容</li>   </ul>

有序列表：列表内容有序号行标记

       <ol >        <li>列表的内容</li>        <li>列表的内容</li>        <li>列表的内容</li>    </ol>

表格标记

   <table>         <caption>表格标题</caption>        <tr>           <td>第一行第一列</td>           <td>第二行第二列</td>        </tr>        <tr>           <td>第二行第一列</td>           <td>第二行第二列</td>        </tr>   </table>

操作属性：合并单元格
-rowspan: 跨行值是跨的行数
-colspan: 跨列值是跨的列数

表单标记(后附案例)

表单标记
    -action :提交地址。默认提交到当前页面
    -method: 表单提交方式（常用两种）
             ** get（默认）：后面带参数
             ** post：后面不带参数
              **get与post的区别
                        1. get请求地址栏会携带提交数据，post不会携带（参数在请求体里）
                        2.get请求安全低
                        3.get请求有数据大小的限制（不适合大文件，如图片等），post没有数据大小的限制
输入标记 <input type=”” name=”” />

<input type="输入类型" name=""/> type:  -text              <input type="text" name="Name"/> -password            <input type="password" name="Pwd"/>-radio (单选输入框)           <input type="radio" name="sex" value="nv"/>女        <input type="radio" name="sex" value="nan"/>男        默认选中，需要加属性 checked ="checked"-checkbox（复选输入框）        <input type="checkbox" name="y" value="yumaoqiu"/>羽毛球        <input type="checkbox" name="b" value="ppq"/>乒乓球        <input type="checkbox" name="l" value="lq"/>篮球        默认选中，需要加属性 checked ="checked"-file（文件输入项，上传用到）-hidden(隐藏项，不会显示在页面上)-submit(提交按钮)            <input type="submit" value="注册"/>            使用图片提交           <input type="image" src="图片路径" />-reset(重置按钮)             <input type="reset" value="重置"/>-button(普通按钮，通常与js使用)              <input type="button" value="名字"/>

3. 选择标记<select></select>、选项<option></option>

下拉输入框<select name="birth">         <option value="0">请选择</option>         <option value="1992">1992</option>         <option value="1993">1993</option> </select> 默认选中，需要加属性 selected="selected"

文本域<textarea cols=”列数” rows=”行数”></textarea>

图形标记

链接标记

链接资源
<a href=”链接到资源的路径”> 显示在页面上的内容
定位资源
<a name=”top” target=”_blank/_self/#”>顶部</a>
网页内容
<a href=”#top”>回到顶部</a>

框架标记

查找文档，文档中有模板
如果在左边的页面超链接，想让内容显示在右边的页面中
: 设置超链接里面属性 target值设置成名称

多媒体标记

三、路径

绝对路径

    - C:\Users\ZHAOYUQIANG\Desktop\智能优化    - http://www.baidu.com/b.jpg

相对路径

    - 一个文件相对于另外一个文件的位置    - 三种：       ** html文件和图片在一个路径下，可以直接写图片名称       ** 在html文件中，使用img文件夹下面的某个图片 ，写成img\a.jpg       ** 图片在html文件的上层目录，写成 ../a.jpg       Notic: ../ 表示文件所在目录的上层目录；上层的上层是../../              比如：C:\Program Files (x86)\Internet Explorer\zh-CN\a.html               a.html的../ 就是Internet Explorer

HTML 表单案例

<html> <head>  <title>HTML示例</title> </head> <body>    <h2>注册</h2>    <form action="提交到的页面">    <table  width="100%">        <tr>            <td align="right">注册邮箱：</td>            <td><input type="text" name="mail"/></td>        </tr>        <tr>            <td>&nbsp;</td>            <td>你可以使用 <a href="#">账号</a>注册或者使用 <a href="#">手机号</a>注册</td>        </tr>        <tr>            <td align="right">创建密码：</td>            <td><input type="password" name="pwd"/></td>        </tr>        <tr>            <td align="right">真实姓名：</td>            <td><input type="text" name="realname"/></td>        </tr>        <tr>            <td align="right">性别：</td>            <td><input type="radio" name="sex" value="nv"/>女 <input type="radio" name="sex" value="nan"/>男</td>        </tr>        <tr>            <td  align="right" >生日：</td>            <td>                <select name="year">                    <option value="1945">1945</option>                    <option value="1931">1931</option>                    <option value="1949">1949</option>                </select>年                <select name="month">                    <option value="10">10</option>                    <option value="11">11</option>                    <option value="12">12</option>                </select>月                <select name="day">                    <option value="30">30</option>                    <option value="10">10</option>                    <option value="25">25</option>                </select>日            </td>        </tr>        <tr>            <td  align="right">我现在：</td>            <td>                <select name="now">                    <option value="study">我正在上学</option>                    <option value="work">我已经工作</option>                </select>            </td>        </tr>        <tr>            <td>&nbsp;</td>            <td><img src="verycode.gif"/> <a href="#">看不清换一张?</a></td>        </tr>        <tr>            <td align="right">验证码：</td>            <td><input type="text" name="verycode"/></td>        </tr>        <tr>            <td>&nbsp;</td>            <td><input type="image" src="btn_reg.gif"/></td>        </tr>    </table></form> </body></html>

1 0

HTML 开发指南 简单描述