zoukankan      html  css  js  c++  java
  • HTML总结

    标签参考:http://www.runoob.com/tags/html-reference.html

    1. 简介

    HTML是超文本标记语言。

    HTML也称web页面。

    HTML文档由标签和被标签的内容组成。

    语法:<标签 属性="属性值">xxxxx</标签>

    例:<p style="font-size:12px;text-align:center">这是一个段落</p>

    2. 结构

    <!DOCTYPE html>

    <html>
        <head>...</head>
        <body>...</body>
    </html>

    <html></html>称为根标签,所有的网页标签都在<html></html>中。
    <head> 标签用于定义文档的头部,它是所有头部元素的容器。
    <body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

    下面这些标签可用在 head 部分:
    <head>
        <title>...</title>
        <meta>
        <link>
        <style>...</style>
        <script>...</script>
    </head>

    3. <meta>标签

    <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。

    最常见的是使用charset属性制定文档编码:<meta charset="utf-8" />

    下面讲一讲我遇到的http-equivcontent属性:

    http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。

    content 属性给出了与 http-equiv name 属性相关的值。

    例:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    这是一个文档兼容模式的定义:如果IE有安装Google Chrome Frame,那么就走安装的组件,如果没有就通知 Windows Internet Explorer 以最高级别的可用模式显示内容。

    X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。

    "IE=edge"edge告诉IE以最高级模式渲染文档

    "chrome=1"IE 使用 Chrome Frame 渲染

    4.特殊符号

    特殊符号用字符实体表示,以“&”开始,以“;”结束:
    空格  &nbsp;
    >       &gt;
    <       &lt;
    "       &quot;
    ©      &copy;

    5. 常用标签

    HTML标签分为块级标签和行级标签;

    块级标签又分为基本块级标签(h/p/hr)和用于布局的块级标签(表格、表单);

    块级标签——基本块级标签:

    <h#></h#>   标题标签

    <p></p>     段落标签,换行加空行

    <hr/>       水平线标签

    例:

    1 <h1 align="center">居中</h1>
    2 <hr color="dodgerblue" />
    3 <p>
    4         <h2>二级标题</h2>       
    5 </p>

    块级标签——用于布局

    <ul>——无序列表

    <li>

    </ul>

    <ol>——有序列表

    <li>

    </ol>

    <dl>——定义列表

    <dt></dt>

    <dd></dd>

    </dl>

    例:

     1 <p>
     2         <h2>无序列表ul</h2>
     3         <ul type="disc">   <!--列表样式为实心圆点-->            
     4             <li>星期一</li>
     5             <li>星期二</li>
     6             <li>星期三</li>
     7         </ul>
     8     <br/>
     9         <h2>有序列表ol</h2>
    10         <ol type="1">   <!--序号为数字-->
    11             <li>星期一</li>
    12             <li>星期二</li>
    13             <li>星期三</li>
    14         </ol>
    15     <br/>
    16         <h2>定义列表dl</h2>
    17         <dl>
    18             <dt>第一个标题项:</dt>
    19             <dd>标题项的解释文字</dd>
    20             <dt>第二个标题项:</dt>
    21             <dd>标题项的解释文字</dd>
    22         </dl>
    23     </p>

    结果:

    这个图好糊随便看看

    <table>——表格标签

    <tr>

    <td></td>

    </tr>

    </table>

     例:

    1             <table border="2"> <!--border定义边框线-->
    2                 <tr>
    3                     <td rowspan="2">1,1</td> <!--colspan跨列-->
    4                     <td>1,2</td>
    5                 </tr>
    6                 <tr>
    7                     <td>2,2</td>
    8                 </tr>
    9             </table>

    结果:

    <form></form>——表单标签

    网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。

    基本格式:<form name="表单名" action="URL" method="get|post"></form>

    例:

    1  <form method="post" enctype="multipart/form-data">
    2 <!--enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码-->
    3 <!--multipart/form-data:表单数据分为多部分提交-->
    4 </form>

    <div></div>——分区标签,换行不空行

    行级标签

    <a></a>——超链接标签

    1 <a href="login.html">登陆</a>

    <img>——图像标签

    <img src="xx/xx.jpg" title="aa" style="border:none"/>

    <input>——表单元素

    格式:<input type="表项类型" name="表项名" value=""/>

    1 <input type="submit" name="register" value="注册" />

    <select></select>——表单元素

    1 <select name="">
    2       <option value=""></option>
    3       <option>aa</option>
    4       <option>bb</option>
    5       <option>cc</option>
    6 </select>

    <span></span>——范围标签,不换行

    <br/>——换行

    6.一个登陆demo:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <title>登陆</title>
     6 </head>
     7 <body>
     8     <form method="post" enctype="multipart/form-data">
     9        
    10         <p>
    11             <!--换行空行-->
    12             <div>用户名:<input type="text" name="username" value="" /></div>  <!--div换行不空行-->
    13             <div>&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="text" name="password" value="" /></div>
    14         </p>
    15         <p>
    16&nbsp;&nbsp;&nbsp;&nbsp;别:
    17             <input type="radio" name="单选" value="男" />18             <input type="radio" name="单选" value="女" checked="checked" /><!--默认选项-->
    19         </p>
    20         <p>
    21             职业:
    22             <select name="work">
    23                 <option value=""></option>
    24                 <option>学生</option>
    25                 <option>老师</option>
    26                 <option>医生</option>
    27             </select>
    28         </p>
    29         <p>
    30             上传头像:
    31             <input type="file" name="files" />
    32         </p>
    33         <p>
    34             <input type="submit" name="register" value="注册" />
    35         </p>
    36     </form>
    37 </body>
    38 </html>
    View Code
  • 相关阅读:
    第三节 java 数组(循环遍历、获取数组的最值(最大值和最小值)、选择排序、冒泡排序、练习控制台输出大写的A)
    第三节 java 数组
    brpc
    thrift 总结
    C++ 中 # 和## 的使用
    查看系统句柄数
    zenuml
    shell脚本
    resize() reserve()函数的区别(vector)
    grep 用法
  • 原文地址:https://www.cnblogs.com/rulasann/p/9228521.html
Copyright © 2011-2022 走看看