HTML5初学习

只是听说前段的入门比较简单,但是前端后期是比较复杂一点的。当然这也只是听。具体是怎么样,还是需要自己试试水啦。为了拓宽一下自己的认知,于是乎,在B站刷起了视频。来进行一些系统的了解。刚开始,还是多动手,多思考。开干!

找些一些视频,但还是觉的这个尚谷的比较好一些。比较系统化,老师讲的内容也比较规范,有条理。下面是自己手敲的一些HTML的基础。

1.基础必备

1.1 Code 1


demo01.html 的内容概括
内容比较杂乱,但具体的作用都有写注解。刚开始学,代码不够精炼是正常的。这个代码主要是开篇,一个没有任何经验的小白的记录。

<!DOCTYPE html>
<html>
        <head>
                <!-- 需要告诉浏览器,网页所采用的的字符集
                     meta(元)标签,用来设置网页的一些元数据,比如网页的字符集,关键字,简介
                     meta是一个自结束标签,填写一个自结束标签时,可以在开始标签中加一个 /
                -->
                <meta charset = "UTF-8" />
                
                <!--
                        使用meta标签指定网页的关键字
                -->
                <meta name="keywords" content="HTML5,JavaScript,Java" />
                
                <!--
                        还可以用来指定网页的描述
                        搜索引擎在检索页面的时候,会同时检索页面的关键词和描述,但是这两个值不会影响网页在搜索引擎中的排名
                -->
                <meta name="description" content="发布h5,js等前端相关的信息">
                
                <!--
                        使用meta可以用来做请求的重定向(通俗讲,就是页面在几秒钟以后跳转到指定页面)
                        eg: <meta http-equiv="refresh" content="3;url=https://www.baidu.com/" />
                -->
                
                
                <title>网页的标题</title>
        </head>
        <body>
                <a href = "#bottom">跳转到底部</a>
                <!--
                        标题标签,一共有六级标签
                        h1 ~ h6
                        在显示效果上h1最大,h6最小,但是文字的大小我们并不关心
                        使用HTML标签时,关心的最重要的是标签的语义,我们使用的标签都是语义化标签
                        6级标题中,h1的最重要,表示一个网页中的主要内容,h2 ~ h6重要性依次降低
                            对于搜索引擎,h1的重要性仅次于title,搜岁引擎搜索完title,会立即查看h1中的内容                            页面只能写一个h1
                                h1标签非常重要,它会影响到页面在搜索引擎中的排名,页面只能写一个h1
                        
                        一般页面标题只使h1 h2 h3 以后的基本不用
                -->
                <h1>一级标题</h1>
                <h2>二级标题</h2>
                <h3>三级标题</h3>
                <h4>四级标题</h4>
                <h5>五级标题</h5>
                <h6>六级标题</h6>
                
                <!--
                        段落标签,段落标签用于表示内容中的一个自然段、
                        使用p标签来表示一个段落
                        
                        p标签中的文字,默认会独占一行,并且段与段之间会有一个间距
                -->
                <p>我是一个p标签,用来表示一个段落</p>
                <p>我是一个p标签,用来表示一个段落</p>
        
                <!--
                        在HTML中,字符之间写再多的空格,浏览器也会解析成一个空格、
                            换行不解析。
                        在页面中可以使用br标签来表示一个换行符,br标签是一个自结束标签。
                -->
        
                <p>
                        床前明月光,<br />
                        疑是地上霜,<br />
                        举头望明月,<br />
                        低头思故乡。
                </p>
                
                <!--
                        hr标签是一个自结束标签,可以在页面中生成一条分割线
                -->
                
                <hr />
                
                <!-- 
                        HTML中的实体,即通常所说的转义字符。
                        实体的语法:
                            <    &lt;
                            >    &gt;
                            空格 &nbsp;
                -->
                
                <p>&copy;花有重开日,人无再少年。</p>
                
                <!-- 
                        使用img标签引入一个外部图片,
                            img标签是一个自结束标签
                        属性:
                                src 设置一个外部图片的途径
                                    src属性配置的是图片的路径,目前使用的是相对路径
                                    相对路径:指相对于资源所在目录的位置
                                              可以使用../向上一级返回
                                alt 可以用来设置在图片不能显示时,对图片的的描述
                                        搜索引擎可以通过alt属性来识别不同的图片,
                                        如果不写alt属性,则搜索引擎不会对img中的图片进行收录
                                        
                                width:可以用来修改图片的宽度,一般使用px 
                                height:可以用来修改图片的高度,一般使用px 
                                宽度和高度只设置一个,另一个等比例调整大小。
                                如果两个值同时指定,则按指定的进行修改。
                -->
                <img src = "img/lxq.jpg" alt = "李新琦" width = "400" /><br />
                
                <!--
                        图片的格式
                            JPEG(JPG)
                                - JPEG图片支持的颜色比较多,图片可以压缩,但不支持透明
                                - 一般使用JPEG来保存照片等颜色丰富的图片
                                
                            GIF
                                - GIF支持的颜色少,只支持简单的透明,支持动图
                                - 图片颜色单一或者使动态图时可以使用gif
                            PNG 
                                - PNG支持的颜色多,并且支持复杂的透明
                                - 可以用来显示颜色复杂的透明图片
                                
                        图片的使用原则:
                            效果不一致,使用效果最好的
                            效果一致,使用小的
                -->
                
                <!--
                    HTML语法规范
                        1. HTML中不区分大小写
                        2. HTML中的注释不能嵌套
                        3. HTML中的标签必须结构完整。要么成对出现,要么自结束标签
                        4. HTML中标签可以嵌套,但不能交叉嵌套(奇葩写法)
                        5. HTML中的标签必须有值,且值必须加引号
                -->
                
                <!--
                        内联框架
                            使用内联框架可以引用一个外部页面
                                使用iframe来创建一个内联框架
                                属性:
                                    scr: 指一个外部页面的路径
                                    width:
                                    height:
                                    name:为内联框架指定一个名字
                            在现实开发中不推荐使用内联框架,因为内联框架中的内容不会被搜索引擎所检索
                            
                        eg: <iframe src = "demotwo.html" width = "900px" height = "1600px name = "ANDY"""></iframe>
                -->
                
                <!--
                    超链接:使用a标签创建一个超链接
                    属性:
                        href:指向链接跳转的目标地址,可以写一个相对路径或者一个完整的地址
                              创建超链接时,如果地址不确定,可以用#进行占位    
                        target:指定打开链接的位置,是在本页面,还是一个新的标签页、
                            _self:在当前窗口打开(默认值)
                            _blank:在新的标签页打开
                            可以设置一个内联框架的name属性值,链接将会在指定的内联框架中打开
                            
                                        如果将链接地址设置为#,点击后,自动跳转到当前页面的顶部
                    
                    HTML中有一个属性,每一个元素都可以设置该属性可以作为标签的唯一标识.
                        id:id属性在同一个页面中,每个id需是唯一的。
                        将href设置为#id,将会跳转到该id所在的位置
                -->
                <a href = "https://www.baidu.com" target = "_blank">我是一个超链接</a> <br />
                <a id = "bottom" href = "#">返回顶部</a> <br />
                <!-- center标签中的内容,会默认在页面居中显示-->
                
                <!--
                    发送电子邮件的超链接,点击链接后可以自动打开计算机中默认的邮件客户端
                    herf = "mailto:邮件地址"
                -->
                <a href = "mailto:2432707158@qq.com">Please Call me</a>

        </body>
</html>

1.2 Code 2


demo02.html 的内容概括
一个常见的页面自动跳转。该页面将跳转至指定网页

<html>
        <head>
                <meta charset = "UTF-8" />
                <meta http-equiv="refresh" content="0; url=https://andylhl.cn/" />
                <title>自动跳转</title>
        </head>
        <body>
                <h1>3秒以后自动跳转</h1>
        </body>
</html>

2.文本标签和列表

2.1 Code 1


文本标签.html 的内容概括
记录html中的常用的文本标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8" />
        <title></title>
    </head>
    <body>
        <!--
            em和strong
            - 作用:这两个标签都表示一个腔调的内容
            em主要表示语气上的强调。在浏览器中默认使用斜体显示
            strong表示强调的内容,比em更强烈。默认使用粗体显示,
        -->
        <p>
            今天的气温是<em>38摄氏度</em>。
        </p>
        
        <p>
            <strong>
                不努力工作,怎么养家糊口。
            </strong>    
        </p>
        
        <!--
            i标签中的内容会以斜体显示 italic 斜体
            b标签中的内容会以粗体显示 bold 粗体
            
            h5规范中规定,对于不需要着重的内容,只是进行简单的加粗或斜体
                就可以使用b和i标签。
                i标签和b标签没有语义。
        -->
        <p>
            <i>我是i标签中的内容</i> <br />
            <b>我是b标签中的内容</b> <br />
        </p>
        
        <!--
            small标签中的内容会比他的父元素的文字要小一些
                在h5中使用small标签来表示一些细则一类的内容
                比如:合同中小字,网页的版权声明都可以放到small
        -->
        <p style = "font-size:20px">
            我是p标签中的内容<small>我是small标签中的内容</small>
        </p>
        
        <!--
            cite标签
                - 作用:网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容
        -->
        <p>
            <cite>《西游记》</cite>是四大名著。
        </p>
        
        <!--
            q标签:表示一个短的引用(行内引用)
                q标签引用的内容,浏览器会默认加上引号。
            blockquote标签:表示一个长引用(块级引用)
        -->
        <p>
            子曰:<q>三人行,必有我师焉。</q>
        <p>
        
        <div>
            子曰:<blockquote>有朋自远方来,不亦乐乎。</blcokquote>
        </div>
        
        <!--
            sup标签:表示一个上标
            sub标签:表示一个下标
        -->
        <p>
            2<sup>2</sup>=4 <br />
            H<sub>2</sub>O <br/>
        <p>
        
        <!--
            del标签:表示一个删除的内容
                del标签的中的内容,会自动添加删除线
            ins标签:表示一个插入的内容
                ins中的内容,会自动添加下划线
        -->
        <p>
            原价:<del>2999元</del> <br/>
            现价:2199元
        </p>
        <p>
            我们的老师真<ins>帅啊</ins>!
        </p>
        
        <!--
            需要在页面中直接编写一些代码
            pre标签:一个预格式标签,会将代码中的格式保存,不会忽略空格和换行
            code标签:专门用来表示代码
            
            一般结合使用pre和code来表示一段代码
        -->
        <pre>
            <code>    
                #include<cstdio>
                using namespace std;
                int main()
                {
                    printf("HAHA");
                    return 0;
                }
            </code>
        </pre>
    </body>
</html>

2.2 Code2


列表.html 的内容概括
介绍HTML中的三种列表:无序列表,有序列表,定义列表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8" />
        <title></title>
        <style type = "text/css">
            ul{
                list-style: none;
            }
        </style>
    </head>
    <body>
    <!--
        列表
            - 在HTML中可以创建列表,在网页中一共有三种列表
             1. 无序列表
             2. 有序列表
             3. 定义列表
    -->
    
    <!--
        无序列表
            1. 使用ul标签来创建一个无序列表
            2. 使用li在ul中创建一个一个的列表项
                一个li就是一个列表项
        通过type属性可以修改无序列表的项目符号
            可选值:
                disc 默认值 实心的原点
                square 实心的方块
                circle 空心的圆
            注意:去掉项目符号需要在CSS中进行修改
                   ul{
                    list-style:none;
                   }
                  如果需要设置项目符号,则可以采用 为li设置背景图片的方式来设置
        ul 和 li 都是块元素
    -->
    <ul type = "circle">
        <li>唐僧</li>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙悟净</li>
        <li>白龙马</li>
    </ul>
    
    <!--
        有序列表和无序列表类似,只不过它使用ol来代替ul
        有序列表使用有序的序号作为项目符号
        type属性,可以指定序号的类型
            可选值:1 默认值,使用阿拉伯数字
                    a/A 采用小写或大写字母作为序号
                    i/I 采用小写或大写的罗马数字作为序号
        ol也是块元素
    -->
    <ol type = "i">
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    
    <!--
        列表之间可以互相嵌套,可以在无序列表中放个有序列表
            也可以在有序列表中放一个无序列表
    -->
    <p>5G手机</p>
    <ul>
        <li>
            华为mate20 X
            <ol>
                <li>价格</li>
                <li>处理器</li>
                <li>DXO Mark</li>
            </ol>
        </li>
        <li>
            中星AXON 10 Pro
            <ol>
                <li>价格</li>
                <li>处理器</li>
                <li>DXO Mark</li>
            <ol>
        </li>
    </ul>
    
    <!--
        定义列表
            - 作用:用来对一些词汇或内容进行定义
            使用dl来创建一个定义列表
            - dl中有两个子标签
                dt:被定义的内容
                dd:对定义内容的描述
        同样dl和ul之间都可以互相嵌套
    -->
    <dl>
        <dt>雷军</dt>
        <dd>成名曲:Are you OK?</dd>
        <dd>小米科技有限公司创始人</dd>
        <dt>马云</dt>
        <dd>名言:我对钱没有兴趣</dd>
        <dd>阿里巴巴创始人</dd>
    </dl>
    </body>
</html>
Last modification:July 29th, 2019 at 07:30 pm
有钱的捧个钱场,没带钱的捧个人场。

Leave a Comment