美文网首页
初识HTML

初识HTML

作者: pubalabala | 来源:发表于2018-08-13 20:14 被阅读0次

    HTML基础

    
    <!--
    web基础:
    1.web标准(万维网-w3c):
    结构标准:HTML  ---  决定网页上有什么东西(能够显示什么内容)
    表现标准: CSS ---  决定网页上内容的布局和显示方式
    行为标准: JavaScript(js)  --- 决定网页上动态的效果
    
    
    2.认识HTML
    HTML是超文本标记语言(可以用来标记文本、图片、视频、音频、flash、按钮、输入框等内容)。
    
    HTML不是编程语言,不会编译执行,语法错误也不会报错导致程序不能往后运行。
    
    3.HTML版本
    广义的H5:指HTML5+CSS3+js
    狭义的H5:HTML5
    
    4.HTML编程
    a.HTML标记语言对应的文件的后缀,一般都是html 
    
    b.HTML的结构:整个html是通过不同的标记来组成
    
    5.标签/标记
    a.双标签(常规标签)
    <标签名 属性=属性值 属性=属性值>标签内容</标签名>
    b.单标签(自闭合标签)
    <标签名 属性=属性值 属性=属性值 />
    <标签名 属性=属性值 属性=属性值>
    
    说明:
    标签名:HTML标准中固定的(注意:<和标签名之间不能有空白)
    属性:属性和标签名之间用空格隔开,以属性=属性值的形式存在,多个属性之间也用空格隔开
        (属性可以是HTML标准中的属性,也可以是自定义的属性)
    标签内容:是指开始标签和结束标签之间的内容。标签的内容可以是任何内容(可以是字符串,也可以是其他任何标签)
    <a></a>  --- a标签
    <p></p>  --- p标签
    <input>  --- input标签
        
    补充: HTML语法中,不区分大小写(HTML\html\HtMl是一样的)
        
    6.网页的结构
    <!Doctype HTML>
    <html>
        <head>
            <title></title>
        </head>
        <body>
            
        </body>
    </html>
    -->
    <!-- 
        Doctype:来对当前的html版本进行说明
        HTML --- 默认版本(HTML5)
        
    -->
    <!Doctype HTML>  
    <!--<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">-->
    
    <!--html标签代表整个网页-->
    <html>
        <!--
            head标签中的内容一般都是看不见,并且里面的子标签是固定的:
            title标签  --- 设置标题
            meta标签 --- 
            link标签
            style标签
            script标签
            base标签
        -->
        <head>
            <!--设置网页标题(可见)-->
            <title>HTML基础</title>
            
            <!--charset:设置编码方式-->
            <meta charset="utf-8"/>
        </head>
        
        <!--body标签中的内容,负责整个网页的显示部分-->
        <body>
            
            
        </body>
    </html>
    

    文本标签

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        
        <body>
            
            <!--1.标题标签(h1-h6)-->
            <h1>我是标题1</h1>
            <h2>我是标题2</h2>
            <h3>我是标题3</h3>
            <h4>我是标题4</h4>
            <h5>我是标题4</h5>
            <h6>我是标题4</h6>
            <!--<h7>我是错误的标题格式</h7>-->
            
            <!--
                2.段落标签(p)
                a.一个p标签对应一个段落
                b.p标签的内容结束后会和其他的内容之间默认有一个空行
            -->
            <p>
                世界经济长远发展的动力源自创新。总结历史经验,
            我们会发现,体制机制变革释放出的活力和创造力,科技进步造就的新产业和新产品,
            是历次重大危机后世界经济走出困境、实现复苏的根本。
            
            </p>
            <p >
                面向未来,增强自主创新能力,最重要       的就是要坚定不移走中国特色自主创新道路,
            坚持自主创新、重点跨越、支撑发展、引领未来的方针,
            加快创新型国家建设步伐。&frac12;</p>
            
            <!--3.文本符号
                &nbsp;  --- 空格
                其他的查手册
            -->
            <p>
            &nbsp;&nbsp;&nbsp;&nbsp;世界经济长远发展的动力源自创新。总结历史经验,
            我们会发现,体制机制变革释放出的活力和创造力,科技进步造就的新产业和新产品,
            是历次重大危机后世界经济走出困境、实现复苏的根本。
            
            </p>
            
            <!--4.换行标签(br)-->
            <p>
            &nbsp;&nbsp;&nbsp;&nbsp;世界经济长远发展的动力源自创新。总结历史经验,<br />
            我们会发现,体制机制变革释放出的活力和创造力,科技进步造就的新产业和新产品,<br />
            是历次重大危机后世界经济走出困境、实现复苏的根本。
            </p>
            
            
            <!--5.超链接(a)-->
            <a href="http://www.baidu.com">百度一下</a>
            
            <!--6.文字加粗(b/strong)
                <b>加粗文字</b>
                <strong>加粗文字</strong>  -- 有强调的作用
            -->
            
            <p>
            &nbsp;&nbsp;&nbsp;&nbsp;世界经济长远发展的动力源自创新。<hr />总结历史经验,<br />
            我们会发现,<b>体制机制</b>变革释放出的活力和<strong>创造力</strong>,科技进步造就的新产业和新产品,<br />
            是历次重大危机后世界经济走出困境、实现复苏的根本。
            </p>
            <hr />
            
            <!--7.文字倾斜(i/em)
                <i>倾斜文字</i> 
                <em>倾斜文字</em> -- 有强调的作用
            -->
            <p>
            &nbsp;&nbsp;&nbsp;&nbsp;世界经济<i>长远发展</i>的动力源自创新。总结<em>历史</em>经验,<br />
            我们会发现,<b><i>体制机制</i></b>变革释放出的活力和<strong>创造力</strong>,科技进步造就的新产业和新产品,<br />
            是历次重大危机后世界经济走出困境、实现复苏的根本。
            </p>
            
            <!--8.水平线-->
            <hr />
            
            
            
            
            
            
            
        </body>
    </html>
    
    

    列表

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--有序列表-->
            <ol>
                <li>语文</li>
                <li>数学</li>
                <li>英语</li>
            </ol>
            
            
            <!--无序列表-->
            <ul>
                <li>成都</li>
                <li>重庆</li>
                <li>北京</li>
            </ul>
            <!--自定义列表-->
            <dl>
                <dt>城市:</dt>
                <dd>成都</dd>
                <dd>重庆</dd>
                <dd>合肥</dd>
                <dt>省份:</dt>
                <dd>四川</dd>
                <dd>安徽</dd>
                <dd>湖南</dd>
            </dl>
            
        </body>
    </html>
    
    

    图片和超链接

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--1.图片标签(img)
                a.src属性:图片的地址(本地地址、网络地址)
                本地地址:相对路径(相对于工程目录)
                注意:本地图片需要放到工程目录下的img文件夹下
                
                b.title属性:图片的标题(鼠标停留在图片上,隔一段时间才显示出来)
                c.alt属性:图片加载失败后显示的提示信息
            -->
            <h1>图片1</h1>
            <img src="img/luffy.png"/>
            <img id="image1" alt="图片加载失败" title="山治" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534152944837&di=6f15150dbd694d66d199f66c6b0c6612&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft01764dfada8dc1af26.jpg"/>
            
            <h1 id="imge2">图片2</h1>
            <img src="img/luffy.png"/>
            <h1>图片3</h1>
            <img src="img/luffy.png"/>
            
            <!--2.超链接(a)
                网页上点击后可以跳转的标签都是超链接
                
                href属性:跳转地址(本地地址,网络地址)
                    网络地址:跳转到对应的网页
                    本地地址: 当前工程的其他的html文件路径
                    空串/#: 刷新页面回到网页的顶部
                    选择器:让网页滚动到网页上的任意的位置
                
                target属性:
                    _self(默认的): 在当前页面中打开href的地址
                    _blank: 在新的页面中打开href的地址
                
                
                a. 点击文字跳转
            -->
            <a href="#">百度一下</a>
            <a href="03-列表.html" target="_blank">列表</a>
            <a href="#imge2">图片2</a>
            <a href="#image1">图片11111</a>
            
            <!--b.点击图片跳转-->
            <a href="http://www.mobiletrain.org/?pinzhuanbdtg=biaoti">
                <img src="img/luffy2.png"/>
            </a>    
        </body>
    </html>
    

    表格

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表格</title>
        </head>
        <body>
            <!--
                table -- 标签代表这个表格
                tr  -- 代表的是一行
                td  -- 代表的是列(一个td对应一个单元格)
                
                一个表格中可以有多行,一行有多列
                
                table属性:
                1.border:设置整个表格中边框的宽度
                2.width:设置整个表格的宽度
                3.heigt:设置整个表格的高度(每一行的高度是一样的)
                4.align:center -- 让整个表在其父标签中居中
                5.bgcolor: 背景颜色
                6.cellpadding="100": 设置内容和单元格之间的间距(了解)
                7.cellspacing: 设置 单元格和单元格之间的间隙
                
                tr属性:
                1.height: 设置单独的某一行的高度
                2.align:center -- 让当前行里面的所有的单元格中的内容居中
                3.bgcolor: 背景颜色
                
                
                td属性:
                1.width: 设置某一列的宽度
                2.align:center -- 让某一个单元格中的内容居中
                3.bgcolor: 背景颜色
                
                
                
                注意:所有的属性的值都要用双引号括起来
            -->
            <!--创建一个2*3的表格-->
            <table border="1"  bgcolor='pink' cellspacing="0" bordercolor='purple'>
                <!--第一行-->
                <tr height="50" align="center">
                    <!--第一行的第一列-->
                    <td width="80">姓名</td> 
                    <!--第一行的第二列-->
                    <td width="120">成绩</td>
                    <!--第一行的第三列-->
                    <td width="120">是否留级</td>
                </tr>
                <!--第二行-->
                <tr height="100">
                    <td align="center">古双全</td>
                    <td bgcolor="brown">90</td>
                    <td>否</td>
                </tr>
                <!--第三行-->
                <tr height="100" bgcolor='bisque'>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                </tr>
                
            </table>
            
            <table border="" cellspacing="" cellpadding="100">
                
                <tr>
                    <td>Data</td>
                    <td>100</td>
                </tr>
            </table>
            
        </body>
    </html>
    
    

    homework.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>个人简历表</title>
        </head>
        <body>
            <div id="">
                <h2 align="center">个人简历表</h2>
                <table border="1" cellspacing="0" width="810" align="center">
                    <tr height="45" align="center">
                        <td width="95">求职意向</td>
                        <td colspan="6">阿里巴巴(10K+)</td>
                    </tr>
                    <tr>
                        <td colspan="7" align="center" bgcolor="limegreen"><b>基本信息</b></td>
                    </tr>
                    <tr height="45" align="center">
                        <td width="95">姓名</td>
                        <td width="95">濮树</td>
                        <td width="95">性别</td>
                        <td width="95">男</td>
                        <td width="95">名族</td>
                        <td width="95">汉</td>
                        <td rowspan="4" width="95" background="img/fae1b94b28c98f3aa45b2b882e0eefd4.jpg"></td>
                    </tr>
                    <tr height="45" align="center">
                        <td>出生日期</td>
                        <td>1973年11月8日</td>
                        <td>政治面貌</td>
                        <td>党员</td>
                        <td>婚否</td>
                        <td>已婚</td>
                    </tr>
                    <tr height="45" align="center">
                        <td>籍贯</td>
                        <td>江苏南京</td>
                        <td>现所在地</td>
                        <td>北京</td>
                        <td>学历</td>
                        <td>本科</td>
                    </tr>
                    <tr height="45" align="center">
                        <td width="95">毕业院校</td>
                        <td colspan="2">首都师范大学</td>
                        <td width="95">所学专业</td>
                        <td colspan="2">英语</td>
                    </tr>
                    <tr height="45" align="center">
                        <td>电子邮件</td>
                        <td colspan="2">pushu@163.com</td>
                        <td>手机号码</td>
                        <td colspan="3">13095478234</td>
                    </tr>
                    <tr>
                        <td colspan="7" align="center" bgcolor="limegreen"><b>教育经历</b></td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2">起止时间</td>
                        <td colspan="2">毕业院校/教育机构</td>
                        <td colspan="3">专业课程</td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2">1993-1994</td>
                        <td colspan="2">首都师范大学</td>
                        <td colspan="3">英语</td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="3"></td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="3"></td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <td colspan="7" align="center" bgcolor="limegreen"><b>工作经历</b></td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2">起止时间</td>
                        <td colspan="2">公司名称及职位</td>
                        <td colspan="3">工作内容</td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2">1996年10月</td>
                        <td colspan="2">麦田音乐艺人</td>
                        <td colspan="3">创作</td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="3"></td>
                    </tr>
                    <tr height="45" align="center">
                        <td colspan="2"></td>
                        <td colspan="2"></td>
                        <td colspan="3"></td>
                    </tr>
                    <tr height="45" align="center">
                        <td rowspan="3">技能/爱好</td>
                        <td colspan="6" rowspan="3">吉他 音乐</td>
                        
                    </tr>
                    <tr height="45"></tr>
                    <tr height="45"></tr>
                    <tr height="45" align="center">
                        <td rowspan="3">自我评价</td>
                        <td colspan="6" rowspan="3">朴实</td>
                        
                    </tr>
                    <tr height="45"></tr>
                    <tr height="45"></tr>
                </table>
            </div>
            
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:初识HTML

          本文链接:https://www.haomeiwen.com/subject/arqpbftx.html