零基础html学习/刷题-第三期

简介: 零基础html学习/刷题

一、学习


文本修饰-常用标签

1、加粗

:仅仅为了加粗显示文本。


:表示该文本比较重要。


2、倾斜

:仅仅为了斜体显示文本。


:表示加强语气。


3、删除

:不支持了


:删除,表示为文字上加一条删除线。


4、下划线

:下划线,表示为文字下方加一条横线。


5、角标标签

:上角标


:下角标


<body>
    <p><b>夜间</b>,伴着阵阵虫鸣,嗅着甜甜花香,睁眼一看,这不是传说中的桃源吗?</p>
    <p>你看,<u>潺潺溪水,悠闲的流淌着;斑斓的蝴蝶,自在的飞舞着;娇美的花儿,羞滴滴的笑着;</u>俊美的青树,满足的沐浴着阳光,流泻出沁人的翠。伶俐的鸟儿,飞于蓝天,和出舒心的曲。远处,矫健的绿山,披着那柔和的纱衣,在蓝天的映衬下,愈发清秀。</p>
    <p>一切的一切,是那么的静谧,祥和。嘴角不自觉的扬起,丝丝惬意洋溢着。 </p>
    <p><em>叽叽喳喳</em>,<del>恼人的嘈杂声充斥在周遭</del>,适才的曲儿可不是这般。随意的掀了被子,手端一杯白水,自坐在窗前,窗外原仍是枯枝残叶满地,间杂着些许昨夜悄然而至的雪……</p> 
    <p>尘风乍起,扰乱一池清水的宁静。<strong>离花散落,碎了梦中人的遐想</strong>。</p>
</body>

image.png


二、刷题


第一题

image.png


常见属性名有:src、controls、autoplay、loop


src:媒体文件路径


controls:在网页内显示音频控件


autoplay:打开网页时自动播放媒体文件


loop:循环的英文、就是循环播放

<audio src="" controls></audio>


第二题

image.png

div::after表示在div元素后插入内容。


content 的初始值为 ‘normal’。在:before和:after上,如果指定了content 的初始值为 ‘normal’,则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。


需加display:block才能显示。


<style type="text/css">
            /*补全代码*/
            div::after{
                content:"";
                width:20px;
                height:20px;
                background-color:rgb(255, 0, 0);
                display:block;
            }
</style>

第三题

image.png

<style type="text/css">
            /*补全代码*/
            div{
               width:100px;
               height:100px;
               border:1px black solid;
               border-radius:50px;
            }    
        </style>

第四题

image.png

padding:设置内间距;


margin:设置外间距。


<style type="text/css">
            /*补全代码*/
            div.box{
                width:100px;
                height:100px;
                padding:20px;
                margin:10px;
            }
        </style>

 


目录
相关文章
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
44 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
39 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
3月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
37 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
41 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
35 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
3月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
37 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
3月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
40 5
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
42 1
|
2月前
html基础知识学习
html基础知识学习
35 0