HTML快速入门学习笔记

web技术 专栏收录该内容
18 篇文章 1 订阅

HTML快速入门学习笔记

HTML 介绍

HTML(HyperText Markup Language)即超文本标记语言,是用来描述网页的一种语言。用 HTML 编写的文档称为 HTML 文档,也叫做Web 页面,包括了 HTML 标签、文本、图片、视频等内容。标记语言是一套标记标签(markup tag),不同于编程语言 ,markdown 语言也是一种标记语言。

HTML、CSS、JavaScript 的关系:
HTML、CSS、JavaScript 都是 Web 开发工程师必备的语言,HTML 用于承载网页的内容(文本、图片、语音、视频);CSS 用于实现网页内容的装饰(字体、颜色、布局);JavaScript 用于实现网页内容的特效(交互、弹出、滑动)。

开发工具

HTML、CSS、JavaScript 是Web开发工程师必备的语言,有很多 IDE 和编辑器都能支持这几种语言。
WebStorm:最强大的 Web 开发 IDE,JetBrains 出品。如果打算做全栈工程师,建议 JetBrains 系列都可以入手,代码支持、插件支持、项目管理等都能全部支持。
Sublime Text:最推荐的代码编辑器。跨平台、颜值高、速度快,算是代码编辑器里面的神器。
Dreamweaver:Adobe 出品的图形化 Web 开发工具,比较适合新手。

HTML网页结构

HTML 的网页结构由 HTML 版本声明、HTML 头部、HTML主体等几个部分组成。HTML 头部涉及页面标题、字符集、样式、链接等内容。HTML 主体部分是浏览器展现给用户的内容,包括标题、文本、段落、链接、图片、媒体等。所有的页面内容都由 HTML 标签来实现。

HTML标签、元素、属性关系

标签:HTML 页面由标签和内容组成,标签是成对出现,由开始和结束标签组成。
元素:HTML 元素指的是开始标签到结束标签的所有代码;元素的内容是开始和结束标签之间的内容;HTML 文档由嵌套的 HTML 元素组成。
属性:HTML 元素可以设置属性,属性是 HTML 元素提供的附加信息,属性一般描述于开始标签,属性总是以 名称-值对 的形式出现。

第一个网页

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第一个网页-</title>
</head>

<body>
	<h1>第一个网页</h1>
    <p>2020/5/8</p>
</body>

</html>

网页结构

<!DOCTYPE html> <!-- 告知 Web 浏览器页面使用了哪种 HTML 版本,帮助浏览器正确显示网页 -->
<html lang="en"> <!-- html 标签,包括 head 和 body 两个模块 -->
<head>  <!--头部标签,里面的内容一般不显示在网页,主要给搜索引擎和浏览器使用-->
    <meta charset="UTF-8"> <!-- 设置 HTML 编码,防止出现乱码 -->
    <title>网页结构</title> <!-- 设置浏览器标题 -->
</head>
<body> <!-- 网页主体部分,内容会被浏览器解析显示给用户 -->
<h1>标题</h1>
<p>段落</p>
<a href="pinginglab.net">链接</a>
<img src ="pinginglab.net" alt="图片">
</body>
</html>

HTML头部

概述

head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本(scripts)、样式文件(CSS)及各种 meta 信息。

头部标签

head,定义关于文档的信息。
title,定义文档标题。
base,定义页面上所有链接的默认地址或默认目标。
link,定义文档与外部资源之间的关系。
meta,定义关于 HTML 文档的元数据。
script,定义客户端脚本。
style,定义文档的样式信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--为网页定义描述内容-->
    <meta name="description" content="HTML 头部用于设置页面标题、关键词、链接、样式、脚本等">
    <!--为网页定义关键词-->
    <meta name="keywords" content="HTML">
    <!--定义作者-->
    <meta name="author" content="student">
    <title>头部</title>
    <!-- rel 规定当前文档与被链接文档之间的关系,其中 stylesheet 代表文档的外部样式表-->
    <!-- type 规定被链接文档的 MIME 类型-->
    <!-- href 规定被链接文档的位置-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!-- script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件-->
    <script src="myscript.js"></script>
</head>
<body>

</body>
</html>

HTML标题

标题通过 <h1> - <h6> 标签进行定义, <h1> 定义最大的标题, <h6> 定义最小的标题。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

注:Ctrl + d 复制上一行;Ctrl + x 删除选中行。
在这里插入图片描述

HTML水平线

<hr> 标签在 HTML 页面中创建水平线,可以实现内容上下文的分隔。

HTML段落

段落是通过 <p> 标签定义的,一个<p>标签内的全部字符为一段,每个段落后会自动换行。

若希望在段落内实现换行,则需要使用<br>标签。

//折行
<br>标签可以实现在不产生一个新段落的情况下进行换行。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>使用P标签实现段落功能</p>
    <p>每个P标签会自动换行</p>
    <p>P标签会忽略源码中的
    换行</p>
    <p>通过br标签实现<br>段内换行</p>
</body>
</html>

在这里插入图片描述

HTML文本

概述

HTML 文本具备多种格式化标签,可以实现文本的加粗、斜体、上下标、计算机输出等处理。常用文本处理标签主要涉及文本格式化标签、计算机输出标签、引用标签。

文本格式化标签

<b>,定义粗体文本。
<big>,定义大号字。
<em>,定义着重文字。
<i>,定义斜体字。
<small>,定义小号字。
<strong>,定义加重语气。
<sub>,定义下标字。
<sup>,定义上标字。
<ins>,定义插入字,下划线。
<del>,定义删除字,删除线。

计算机输出标签

<code>,定义计算机代码。
<kbd>,定义键盘码。
<samp>,定义计算机代码样本。
<tt>,定义打字机代码。
<var>,定义变量。
<pre>,定义预格式文本,例如保留空格和分行。

引用标签

<abbr>,定义缩写。
<acronym>,定义首字母缩写。
<address>,定义地址。
<bdo>,定义文字方向。
<blockquote>,定义长的引用,实现一段长文字段落的引用,并且会自动缩进。
<q>,定义短的引用语,实现一段短段落的引用,被引用文字会自动加上双引号。
<cite>,定义引用、引证。
<dfn>,定义一个定义项目。

HTML超链接

HTML 使用标签 <a> 来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。
可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

文本链接

<a href="http://www.baidu.com">百度</a>

图片链接

<!--alt 规定图像的替代文本,当图片加载失败时,会用文本代替图片-->
<a href="http://www.baidu.com"><img src="image/logo.png" alt="百度网站" width="1181" height="236"></a>

新窗口打开链接

<a href="http://www.baidu.com" target="_blank">百度</a>

邮件链接

<a href="mailto:youxiang@163.com?subject=HelloWorld">邮箱链接</a>

页面内跳到不同位置

<h3><a href="#底部">到达底部</a></h3>
<p><a name="顶部">这里是顶部</a></p>
<p><a name="底部">这里是底部</a></p>
<h3><a href="#顶部">回到顶部</a></h3>

HTML列表

HTML 支持有序、无序、自定义列表。

<ol>,定义有序列表。
<ul>,定义无序列表。
<li>,定义有序和无序列表的列表项。
<dl>,定义自定义列表。
<dt>,自定义列表项目。
<dd>,自定列表项的描述。

无序列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

有序列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<ol start="100">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

不同类型的无序列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同类型的无序列表</title>
</head>
<body>
<p>Disc圆点项目符号列表</p>
<ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p>Circle圆圈项目符号列表</p>
<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p>Square正方形项目符号列表</p>
<ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

不同类型的有序列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同类型的有序列表</title>
</head>

<body>
<p>数字列表</p>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</ol>

<p>大写字母列表</p>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<p>小写字母列表</p>
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

嵌套列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套列表</title>
</head>
<body>
<ul>
    <li>HTML
        <ul>
            <li>标题</li>
            <li>链接</li>
            <li>列表</li>
        </ul>
    </li>
    <li>CSS
        <ol>
            <li>背景</li>
            <li>文本</li>
            <li>字体</li>
        </ol>
    </li>
    <li>JavaScript</li>
</ul>
</body>
</html>

HTML表格

表格由 <table> 标签来定义。
每个表格均有若干行,由 <tr> 标签定义;
每行被分割为若干单元格,由 <td> 标签定义。
字母 td 指表格数据(table data),即单元格的内容;
单元格可以包含文本、图片、列表、段落、表单、水 平线、表格。

可以通过属性改变表格的样式。
<table>,定义表格
<th>,定义表格的表头
<tr>,定义表格的行
<td>,定义表格单元
<caption>,定义表格标题
<colgroup>,定义表格列的组
<col>,定义用于表格列的属性
<thead>,定义表格的页眉
<tbody>,定义表格的主体
<tfoot>,定义表格的页脚

代码实现1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<h3>表格标签</h3>
<p>每个表格由table标签开始</p>
<p>每个表格行由tr标签开始</p>
<p>每个表格数据由td标签开始</p>

<h4>一列表格</h4>
<table border="1">
    <tr>
        <td>web</td>
    </tr>
</table>

<h4>一行三列表格</h4>
<table border="1">
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
</table>

<h4>两行三列表格</h4>
<table border="1">
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
</table>

</body>
</html>

代码实现2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带表头的表格</title>
</head>
<body>
<h4>带水平表头的表格</h4>
<table border="1">
    <tr>
        <th>第一章</th>
        <th>第二章</th>
        <th>第三章</th>
    </tr>
    <tr>
        <td>html</td>
        <td>css</td>
        <td>javascript</td>
    </tr>
</table>

<h4>带垂直表头的表格</h4>
<table border="1">
    <tr>
        <th>第一章</th>
        <td>html</td>
    </tr>
    <tr>
        <th>第二章</th>
        <td>css</td>
    </tr>
    <tr>
        <th>第三章</th>
        <td>javascript</td>
    </tr>
</table>
</body>
</html>

表单

HTML 表单用于搜集不同类型的用户输入。表单元素指的是不同类型的 input 元素、包括复选框、单选按钮、提交按钮等。

<form>,元素定义 HTML 表单
<input>,元素是最重要的表单元素
input text,定义常规文本输入
input radio,定义单选按钮输入
input submit,定义提交按钮
input checkbox,定义复选框
input select,定义下拉框
input textarea,定义多行文本框
input button,定义按钮

代码案例1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单(文本-密码-单选-复选)</title>
</head>
<body>
<h4>input text - 文本域</h4>
<form>
    姓名:<input type="text" name="姓名">
    手机:<input type="text" name="手机">
</form>

<h4>textarea - 文本框</h4>
<textarea row="80" cols="80">
    文本框能接收用户输入多行信息
</textarea>

<h4>input password - 密码域</h4>
<form>
    姓名:<input type="text" name="姓名">
    密码:<input type="password" name="密码">
</form>

<h4>input radio - 单选框</h4>
<form>
    HTML:<input type="radio" name="web"  " checked="checked">
    CSS:<input type="radio" name="web" value="css">
</form>

<h4>input checkbox - 复选框</h4>
<form>
    HTML:<input type="checkbox" name="html" value="html">
    CSS:<input type="checkbox" name="css" value="css">
</form>

</body>
</html>

代码案例2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉表单与按钮</title>
</head>
<body>
<form>
    <select name="web">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
    </select>
    <input type="submit" value="确认">
</form>
</body>
</html>

代码案例3

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交(很重要!)</title>
</head>
<body>
<p>由用户填写username和password参数,并submit提交给login.php页面并跳转,默认get方法</p>
<form action="login.php">
    姓名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit" value="登录">
</form>

<p>由用户填写username和password参数,并submit提交给login.php页面并跳转,采用post方法</p>
<form action="login.php" method="post">
    姓名:<input type="text" name="username">
    密码:<input type="password" name="password">
    <input type="submit" value="提交">
</form>

<p>由用户选择选项,参数是web=html或者web=css,并submit提交给login.php页面并跳转,默认get方法</p>
<form action="login.php">
    HTML:<input type="radio" name="web" value="html" checked="checked">
    CSS:<input type="radio" name="web" value="css">
    <input type="submit" value="提交">
</form>

<p>由用户选择选项,参数是web=html或者web=css,并submit提交给login.php页面并跳转,采用post方法</p>
<form action="login.php" method="post">
    HTML:<input type="radio" name="web" value="html" checked="checked">
    CSS:<input type="radio" name="web" value="css">
    <input type="submit" value="提交">
</form>

</body>
</html>

HTML排版布局

<div> 可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。
可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。
这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

HTML语义化标签

将编码命名习惯用作标签元素。可以自行查看手册学习常用的语义化标签,下面展示一个案例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5新语义元素(用于排版与布局)</title>
    <style>
        <!--为了解决HTML5新语义元素兼容性问题,可以添加这句标识-->
        header, section, footer, aside, nav, article, figure
        {
            display: block;
        }
    </style>
</head>
<body>

<header>
    <h1>header元素描述了文档的头部区域</h1>
    <p>header元素用于定义内容的介绍展现区域</p>
</header>
<br>

<nav>
    <h1>nav元素定义导航链接部分</h1>
    <a href="html">HTML</a> |
    <a href="CSS">CSS</a> |
    <a href="JS">JavaScript</a>
</nav>
<br>

<div class="aside">
    <h1>aside元素定义侧边栏,主区域内容之外的内容</h1>
    <p>aside元素的内容应与主区域的内容相关</p>
</div>
<br>

<div class="article">
    <h1>article元素</h1>
    <p>采用article元素定义文档中的独立内容或文章</p>
</div>
<br>

<div class="figure">
    <h1>figure元素描述图表</h1>
    <img src="image/html5.jpeg" alt="html5" width="100" height="50">
    <figcaption>Fig.1 - figure元素描述图表.</figcaption>
</div>
<br>

<div class="footer">
    <h1>footer元素描述文档的底部区域</h1>
    <p>footer元素页脚信息以便包括文档作者、著作权、使用条款、联系信息等</p>
</div>
<br>

</body>
</html>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

Goallegoal

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值