美文网首页
HTML5入门

HTML5入门

作者: 想努果 | 来源:发表于2018-08-20 01:07 被阅读0次

    一、HTML简介

    html是一个超文本标记语言;

    纯文本 是 只能编写字,不能编辑图片,音频,视频等格式化的内容;但不能保存文本的格式,大小,字体,颜色等内容;只能保存内容;(使用记事本编写内容,改变颜色,大小;如果换有一个记事本打开这个纯文本文件,颜色,大小都没有了);

    然而超文本就是可以显示纯文本以外的东西;

    所以网页也就是文本文件,只不过后缀名是.html;

    标记:即标签;html中有很多很多标签,都是成对出现的;例如一级标签:<h1>***</h1>

    二 、标签:

    1.<html> </html> 根标签,一个网页中只有一个这样的标签;

    2.<head></head> 头标签,编写网页的头部,不会显示在页面上;

    3.<title></title> 标题标签,是 <head>的子标签;显示在网页的标题位置;对于搜到引擎特别重要,影响搜索排名;

    4.<body> </body> 主体标签,是网页的真正主体内容;所以用户看的见得内容都是在这个标签中编写的;

    5. 注释标签;

    image

    6.<font></font> 文本格式标签,在标签头可以设置属性;但是在开发中基本不使用这种标签;

    以为这是表象属性,是通过css来进行设置的;

    image

    三、网页文档声明

    <!DOCTYPE HTML> 在网页的头部天机这个标签,表明是HTML5的版本开发的网页;

    四、设置页面编码格式

    在<head>节点下添加 :<mate charset="utf-8"/>

    这个标签的目的就是告诉浏览网页的编码格式,让其浏览器使用对应的编码格式进行解码;不然会出现乱码;

    五、内容标题

    <!doctype html>
    <html>
        <head>
            <mate charset="UTF-8"/>
            <title>标题</title>
        </head>
        <body>
        
        <!-- 
            html存在六种内容标题,重要性依次降低;
            字体大小依次降低,但是可以动过css进行控制字体大小;
            一级标题是最重要的涉及到搜索引擎的搜索,仅次于title标签;
        -->
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
        </body>
        
    </html>
    

    六、段落标签

    <!doctype html>
    <html>
        <head>
            <mate charset="UTF-8"/>
            <title>标题</title>
        </head>
        <body>
        
        <!-- 
            html存在六种内容标题,重要性依次降低;
            字体大小依次降低,但是可以动过css进行控制字体大小;
            一级标题是最重要的涉及到搜索引擎的搜索,仅次于title标签;
        -->
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
            
            <!--
                段落标签,独占一行,并且段落与段落之间会有距离;
                在html中在多得空格都会解析成一个空格,换行也解析成一个空格
            -->
            <p>
                这    是一个段落,
                hello world
            </p>
            <p>这是一个段落,hello world</p>
            
        </body>
        
    </html>
    

    七、换行标签(自结束标签)

            <!--
                段落标签,独占一行,并且段落与段落之间会有距离;
                在html中在多得空格都会解析成一个空格,换行也解析成一个空格
                那么要换行该怎么办呢?<br/>标签是一个自结束标签;就可以达到换行的目的;
            -->
            <p>
                这    是一个段落,<br/>
                hello world <br/>
            </p>
            <p>这是一个段落,hello world</p>
            
            <!-- hr标签是在产生一条水平线,也是个自结束标签-->
            <hr/>
    

    八、实体(转义符)

    QQ截图20180818000721.jpg

    九、图片标签

            <!--
            img是图片显示标签,也是自结束标签
            src 是图片的路径
            alt 是对图片进行描述的,当图片显示不出来的时候会显示描述字样,但是不是所有的浏览器都是这样
                主要是搜索引擎的在搜索的时候会对alt进行搜索,不然如何搜索到图片呢
            width和height 属性;
            -->
            <img src="timg.gif" alt="美女"    width="100px" height="500px"/>
    

    十、相对路径

    QQ截图20180819140432.jpg

    十一、mate标签的相关使用

    QQ截图20180819142602.jpg

    十二、内联框架

    QQ截图20180819172828.jpg

    十三、超链接

    QQ截图20180819211554.jpg QQ截图20180819214319.jpg QQ截图20180819214507.jpg

    相关文章

      网友评论

          本文标题:HTML5入门

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