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

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

目录


学习


一、html简介


二、结构


三、标题和段落标签


刷题(第一期)


学习


一、html简介

html(超文本标记语言),标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。


二、结构

头部:<head></head>中的内容, 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。


可以添加到 head 部分:、<base>、<link>、<meta>、<script> 以及 <style>。

主体:<body></body>中的内容。


<html></html>中包含了整个页面的所有内容,称为根元素。

image.png

上图则为 html代码的一个基本格式。


vscode中输入一个叹号就能实现。

image.png

<meta charset="UTF-8">:该文档使用的字符集,设置为UTF-8


<meta http-equiv="X-UA-Compatible" content="IE=edge">:针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的。


<title>Document</title>:设置了页面的标题


三、标题和段落标签

标题


标签

<h1></h1>~<h6></h6>

<h1>这是1级别的标题</h1>
<h2>这是2级别的标题</h2>
<h3>这是3级别的标题</h3>
<h4>这是4级别的标题</h4>
<h5>这是5级别的标题</h5>
<h6>这是6级别的标题</h6>

效果如下:

image.png

插播一条小技巧 :


创建多个不同标题标签


标签名${标题$文本内容}*标签重复次数


就如上面的,可以用


h${这是$级别的标题}*6


属性

属性 说明
align left 靠左对齐

align

right 靠右对齐
align

center

居中对齐


段落

标签


<p></p>

<p>天若无道,就该遵循天命</p>
<p>天若有道……</p>

效果如下:

image.png

属性

属性 说明
align left 靠左对齐

align

right 靠右对齐
align

center

居中对齐


刷题(第一期)

第一题:

image.png

解题:导航标签为<nav></nav>


<header></header>标签定义文档的页眉(介绍信息)


<header>
        <nav></nav>
 </header>

第二题:

image.png


解题:输入框为input标签


使用type属性的password值为密码,checkbox为复选框。


默认值使用value属性,已勾选状态使用checked属性。


<form>
    <!-- 补全代码 -->
    <input type='password' value='nowcoder'/>
    <input type='checkbox' checked/>
</form>

第三题:

image.png

解题:表格结构为
<table>
        <tr>
            <td></td>
        </tr>
</table>
表格标题:<caption></caption>


<table>
        <caption>nowcoder</caption>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

第四题:

image.png


解题:新窗口打开文档,用a标签的target属性的_blank 值。


<a href="#" target="_blank"></a>

第五题:

image.png

解题:自定义列表格式

解题:自定义列表格式
<dl>
  <dt>
    <dd></dd>
  </dt>
</dl>
<dl>
        <dt>nowcoder</dt>
        <dd>nowcoder</dd>
</dl>


目录
相关文章
|
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