Html学习笔记

最新推荐文章于 2024-01-15 16:57:15 发布

程序员rabbit

最新推荐文章于 2024-01-15 16:57:15 发布

阅读量142

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/qq_43920769/article/details/103893716

版权

笔记专栏收录该内容

2 篇文章

订阅专栏

<!--
    html5文档文档声明，说明是按照h5标准来编写的
    如果不写声明，有些网页会无法正常显示，进入怪异模式
-->
<!doctype html>
<html>
    <!--
        head标签中的内容不会在网页中显示，它用来帮助浏览器解析页面
    -->
    <head>
        <!--
            meta标签用来设置网页的一些元数据，如字符集、关键字、简介
            meta是一个自结束标签
        -->
        <meta chaset = "UTF-8"/>
        <!--meta设置关键字,conent里是关键字的内容-->
        <meta name = "keywords" content = "HTML5, java, 前端，学习"/>
        <!--设置网页描述-->
        <meta name = "description" content = "发布h5等前端相关信息"/>
        <!--
            使用meta做请求重定向
            <meta http-equiv = "refresh" ;content = "秒数;url = "目标网址路径"/>
        -->
        <!--
        <meta http-equiv = "refresh" ; content = "5; http://www.baidu.com"/>
        -->
        <!--标题，而不是网址-->
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <!--
            跳转到id为bottom的位置
            直接在href中写#id属性值
        -->
        <a href = "#bottom" id = head>去底部</a>

        <!--
            标题标签，一共有六级标签，h1~h6,h1最大
        -->
        <!--
        <h1>5s以后跳转页面</h1>
        -->
        <h1 >
            <!--
                用属性设置标签中内容的显示，只能在开始标签中添加
                一个标签中可以同时设置多个属性，用空格隔开
                属性名 = “属性值”
            -->
            这是<font color = "yellow" size = "7">我的第一天</font>的练习
        </h1>
        <!--
            段落标签，用来表示一个段落，用p表示
            p标签中的文字，默认会独占一行，并且两行之间默认会有一行空格
            p标签中写再多的空格或者换行，浏览器只会当做一个空格处理
            故用br自结束标签来换行
        -->
        <p>  这是第一段</p>
        <p>  这是    第二段，
              
            换行成功了吗？
        </p>
        <p>
            锄禾日当午，<br/>
            汗滴禾下土，<br/>
            谁知盘中餐，<br/>
            粒粒皆辛苦。<br/>
        </p>
        <!--
            hr自结束标签可以生成一条水平线
        -->
        <hr/>
        <hr/>
        <br/>
        <hr/>
        <!--实体即转义字符，如< ,> 都不能直接使用
            <  &lt;
            >  &gt;
            空格  &nbsp;
            版权符号  &copy;
        -->
       <p> &copy;a &lt; b &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt; c</p>

        <!--
            使用img自结束标签引入外部图片
            属性：
            src设置外部图片的路径
            alt设置图片描述,在图片不能显示时出现
            width用来设置图片宽度，单位px，表示像素
            height设置图片高度，单位px，表示像素
            width, height只设置一个的时候另一个量会同比例变化
            /abc /bcd /表示绝对路径
            ../表示返回当前文件的上一级，返回积极目录就写几个../
        -->
        <img src = "数学建模.jpg" alt = "这是建模课堂的照片" width = "100px" />
        <!--
            图片的格式png,gif,jpg
        -->
        <!--
            使用内联框架可以引入一个外部页面
            使用iframe来创建一个内联框架，属性：
            src指向一个外部页面的路径，可以使用相对路径
        -->
        <center>
        <iframe src = "html_test2.html" width = "500px" height = "200px" name = "tom" id = bottom> </iframe>
        <!--center为居中标签-->
        </center>
        <!--
            用a来创建一个超链接标签
            属性：
            href:要跳转的地址
        -->
        <!--
            a标签中的target可以指定新的跳转页面的打开位置
            _self表示在当前窗口中打开
            _blank表示新开一个页面，每点一次新开一个页面
        -->
        <br/>
        <a href = "html_test2.html" target = "_blank">我是第二次练习的超链接</a>
        <a href = "system.html" name = "tom" >我是变电站系统的超链接</a><br/>
        <a href="#head">去头部</a>
        <!--
            发送电子邮件超链接
            打开后可以跳转到指定的邮件客户端
            href = "mailto:邮件地址"
        -->
        <a href = "mailto:294020528@qq.com">联系我们</a>
</html>