码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2019-08-11 13:31:28      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:购物   包括   颜色   user   username   水平线   click   选中   注册时间   

HTML

1、什么是HTML?

HTML(Hyper Text Markup Language) 超文本 标记 语言。

超文本:页面中有文字,有图片,有视频,链接等等非文字内容

标记:使用标签的方式将想要展示的内容包起来

2、超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

3、HTML文件的扩展名.html,它不是一个编程语言,只是一个文档标记

4、HTML文件的传输基于http协议

5、基本结构

  <html>

  <head></head>

  <body>

    Hello world

  </body>

  </html>

6、编写规则

  1.html文档内容由标签和文本内容组成。

  2.html的标签是由w3c组织规定好的,不能随意编写。

  3.html标签不区分大小写。(建议使用小写字母)

  4.开始标签和结束标签要成对出现。

  5.在编写html时,要注意缩进,编写出层次结构。

7、主要标签及作用

  <html></html>将整个html文件内容包在里面

  <head></head>头部标签,头部中包含的标记是页面的标题、序言、说明等内容,本身不显示在文件中,但影响网页显示的效果

  <title></title>网页的标题

  <meta charset=”utf-8”></meta>设置浏览器用utf-8编码格式查看当前网页;

  <meta name=”keywords” content=”购物”>设置搜索关键字

  <meta name=”description” content=”国内最大的……" >设置网页描述

  <meta http-equiv="refresh" content="3;url=www.baidu.com" />设置自动刷新,3秒后跳转到指定页面

  <script></script>里面写javascript代码

  <style></style>里面写css代码

  <link>引入其他文件 如css文件

  <base>设置页面链接前缀

  <body></body>网页中显示实际内容的标签

  <h1></h1> ~<h6></h6>标题标签

  <p></p>段落标签 增大了行间距

  <br/>换行标签

  <hr/>水平线标签属性size设置粗细,width设置宽度,color设置颜色, align对齐方式

  <strong></strong>   <b></b>加粗

  <em></em>   <i></i>斜体

  <div></div>独占一行

8、注释和特殊符号

  空格    <a href="#">百度</a>&nbsp;&nbsp;<a href="#">新浪</a>

  大于号 > &gt;

  小于号 < &lt;

  引号 "  &quot;

  版权符号  &copy;     &copy;2013-2019jj

9、列表标签

  1.无序列表 type 列表符号disc 实心圆; circle空心圆;square方块

  <ul>

  <li>123</li>

  <li>456</li>

  </ul>

  2、有序列表 type 序号格式  a字母    I罗马数字    1数字

  <ol>

  <li>qwe</li>

  <li>sad</li>

  </ol>

  3、自定义列表

  <dl>

  <dt>标题</dt>

  <dd>内容</dd>

  </dl>

  4、代码

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>无序列表</h1>
        
        <ul> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ul>
        <hr/>
        <ul type="circle"> <!-- disc默认 实心圆  circle 空心圆   square方块-->
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ul>
        
        <h1>有序列表</h1>
        <ol> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ol>
        
        <ol type="a"> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ol>
        
        <ol type="I"> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ol>
        
        <h1>定义列表</h1>
        <dl>
            <dt>标题</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        </dl>
    </body>
</html>
列表

10、图像标签

  <img src=”xxx/xxx.jpg” alt=”说明” title=”111” width=”220px” height=”110px”/>

  Src 图片路径

  Alt 图片加载失败时的提示内容

  width 图片的宽度

  height 图片的高度

  border 图片边框

11、超链接

  <a href=”链接地址”target=”打开链接的位置”>显示在页面上的内容</a>

  href 链接地址 除了地址外还可以写锚点 需设置锚点

  href=”#top”   <a name=”top”>返回顶部</a>

  target选择打开连接的位置

  “_self”在当前窗口打开

  “_blank”在新窗口打开,每次点击都会打开新窗口

  “new”在新窗口打开,只会打开一次

  “_search”在新窗口打开,只会打开一次

  “_parent”在父窗口打开

  “_top”在顶层窗口打开

12、span块级标签 不换行

13、font字体标签

14、<table></table>表格标签

  1.属性

  cellspacing单元格之间的间距

  cellpadding 单元格内容到单元格的距离

  align单元格对齐方式

  border边框

  width单元格宽度

  bgcolor单元格背景颜色

  2.格式:

  <table >单元格标签

    <tr>单元格行标签

      <td></td>单元格列标签

      <td></td>

    </tr>

  </table>

  3.跨行和跨列

    colspan 跨列

    rowspan 跨行

  4.caption th thead tbody tfoot

     caption表头标签,始终处于表格上方的正中间位置

    th 替换td 文字默认居中加粗

    thead 用来写表的第一行

    tfoot 用来写表的最后一行

  5.代码

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <table cellspacing="0" align="center" border="1px" width="600px" bgcolor="blanchedalmond">
             <tr bgcolor="aqua">
                 <td bgcolor="red" align="center">11</td>
                 <td>12</td>
                 <td>13</td>
             </tr>
             
             <tr align="center">
                 <td>21</td>
                 <td>22</td>
                 <td>23</td>
             </tr>
             
             <tr>
                 <td>31</td>
                 <td>32</td>
                 <td>33</td>
             </tr>
         </table>
    </body>
</html>
表格
技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <table border="1px" width="200px">
             <tr>
                 <td colspan="2">学生成绩</td>
             </tr>
             
             <tr>
                 <td>语文</td>
                 <td>98</td>
             </tr>
             
             <tr>
                 <td>数学</td>
                 <td>95</td>
             </tr>
             
         </table>
         
         <hr />
         
         <table border="1px" width="300px">
             <tr>
                 <td rowspan="2">张三</td>
                 <td>语文</td>
                 <td>98</td>
             </tr>
             
             <tr>
                 
                 <td>数学</td>
                 <td>95</td>
             </tr>
             
             <tr>
                 <td rowspan="2">李四</td>
                 <td>语文</td>
                 <td>88</td>
             </tr>
             
             <tr>
                 
                 <td>数学</td>
                 <td>100</td>
             </tr>
         </table>
         
         <hr/>
         
         <table border="1px" width="300px">
             <tr>
                <td colspan="3">学生成绩</td>
               
             </tr>
             
             <tr>
                <td rowspan="2">张三</td>
                <td>语文</td>
                <td>98</td>
             </tr>
             
             <tr>
                <td>数学</td>
                <td>95</td>
             </tr>
             
             <tr>
                <td rowspan="2">李四</td>
                <td>语文</td>
                <td>88</td>
             </tr>
             
             <tr>
                <td>数学</td>
                <td>100</td>
             </tr>
         </table>
    </body>
</html>
跨行和跨列
技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table align="center" width="50%">
        <caption>年终数据报表</caption>    
          <thead bgcolor="aqua">
                <tr>
                    <th>月份</th>
                    <th>收入(RMB)</th>
                </tr>
           </thead>
           
           <tbody bgcolor="cadetblue">
                <tr>
                    <td>1月</td>
                    <td>100</td>
                </tr>
                
                <tr>
                    <td>2月</td>
                    <td>200</td>
                </tr>
                
                <tr>
                    <td>3月</td>
                    <td>300</td>
                </tr>
                
                <tr>
                    <td>4月</td>
                    <td>400</td>
                </tr>
                
                <tr>
                    <td>5月</td>
                    <td>500</td>
                </tr>
                
                <tr>
                    <td>6月</td>
                    <td>600</td>
                </tr>
           </tbody>
           
           <tfoot bgcolor="gold">
                <tr>
                    <td>平均月收入</td>
                    <td>350</td>
                </tr>
                
                <tr>
                    <td>总计</td>
                    <td>2100</td>
                </tr>
           </tfoot>
        </table>
    </body>
</html>
thead th tfoot

15、表单

  1.简介

    <form action=”” method=””></form>收集数据的标签

    action表单提交路径

    method 表单提交方式,get(显示)和post(不显示)

    单行<input type=””name=””value=””size=””maxlength=””/>

    type标签类型

    name标签名称

    value默认值

    size长度

    maxlength最多多少字符

  2.类型介绍 type=””

    text 文本标签

    password 密码标签

    radio 单选标签

    checkbox 复选标签

    file 文件框

    hidden 隐藏域

       image 图片标签

    button 按钮

    submit提交按钮

    reset重置按钮

    date时间类型

    email邮箱标签

  3.多行文本标签

    <textarea>内容</textarea>

  4.下拉列表框

    <select name=”select”>

    <option value=”111” selected=”selected”>111</option>

    <option>222</option>

    <option>333</option>

    </select>

    name:后台使用这个标签获取值

    Selected:默认选中

  5.id readonly disabled

    id属性值唯一 readonly可将标签设置为只读

    Disabled 可以将标签设置为不可用

  6.代码

技术图片
<!DOCTYPE html>

<html>

    <head>
        
        <meta charset="utf-8">
        
        <title>表单标签</title>
    
</head>
    
<body>
        <center>
            <form action="1.html" method="get">
                <table cellpadding="8px" bgcolor="lightyellow" width="700px" cellspacing="0px">
                    <tr>
                        <td align="right" width="30%">名称:</td>
                        <td><input type="text" name="username"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">账号:</td>
                        <td><input type="text" name="accid"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">密码:</td>
                        <td><input name="password" type="password"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">性别:</td>
                        <td><input name="sex" type="radio"/><input name="sex" type="radio" checked="checked"/>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">兴趣爱好:</td>
                        <td>学习<input name="hobby" type="checkbox"/>
                            敲代码<input name="hobby" type="checkbox" checked="checked"/>
                            打游戏<input name="hobby" type="checkbox" checked="checked"/>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">学校:</td>
                        <td><select>
                            <option>清华大学</option>
                            <option>北京大学</option>
                            <option>中公教育</option>
                            <option selected="selected">蓝翔技校</option>
                        </select>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">头像:</td>
                        <td><input name="photo" type="file"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">自我介绍:</td>
                        <td>
                            <textarea cols="50" rows="13"></textarea>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">注册时间:</td>
                        <td><input type="date" name="date"/></td>
                        
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" />&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="reset" />
                            
                        </td>
                        
                        
                    </tr>
                    
                    
                </table>
                
                
            </form>
            
        </center>
    
    </body>            

</html>
表单

16、页面框架

  <frameset rows=”30%,*”>

    <frame src=”” name=””>

    <frameset cols=”15%,*”>

      <frame/>

      <frame/>

    </frameset>

  </frameset>

  frameset用来将页面分为不同的部分

  rows=”30%,*”将页面上下分为2部分,分别占30%和剩余

  Cols=”15%,*”将本框架部分水平分为2部分。。。

  src用来引入页面

  noresize 不能通过拖动改变大小

  name用来给超链接target使用

17、内嵌框架

<iframe src="the_second.html"width="400px" height="236px" scrolling="no" >

  <iframe></iframe>

</iframe>

  scrolling表示滚动条

HTML

标签:购物   包括   颜色   user   username   水平线   click   选中   注册时间   

原文地址:https://www.cnblogs.com/xfdhh/p/11334392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!