零基础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月前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
62 1
|
3月前
|
XML JavaScript 前端开发
走进HTML学习一
走进HTML学习一
|
3月前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
41 0
|
3月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
31 0
|
3月前
|
移动开发 JavaScript 前端开发
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
43 0
|
3月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
29 0
|
3月前
|
JavaScript 前端开发 定位技术
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
31 0