零基础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>


目录
相关文章
|
3天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
|
1月前
HTML基础知识学习
HTML基础知识学习
29 1
|
1月前
|
JavaScript 算法 前端开发
学习 node.js 六 Markdown 转为 html,zlib
【8月更文挑战第19天】
12 0
|
2月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
3月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
31 3
|
2月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
2月前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
3月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
27 0
前端基础学习(一)HTML入门
|
4月前
|
移动开发 前端开发 JavaScript
学习html
【5月更文挑战第25天】学习html
38 2
|
3月前
|
数据安全/隐私保护
杨老师课堂之网页制作HTML的学习入门-含有案例2
杨老师课堂之网页制作HTML的学习入门-含有案例
20 0