HTML基础学习

前言

HTML基础学习会由HTML基础标签学习、HTML表单学习和一张思维导图总结HTML基础三篇文章构成，文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率，后续会相继上传CSS和JavaScript的博客，欢迎大家一起学习，共同进步。

注：HTML基础学习的整篇文章由博主参照b站up主遇见狂神说的HTML视频进行编写，内容大致相同，本篇文章仅供大家参考学习，欢迎大家提出问题。

下一篇文章HTML表单学习（https://www.cnblogs.com/qjds/p/16494064.html）

相关知识

W3C标准:

1、W3C

（1）Norld Wide Web Consortium(万维网联盟)

（2）成立于1994年，Wb技术领域最权威和具影响力的国际中立性技术标准机构

相关网站：

http://www.w3.org/

http://www.chinaw3c.org/

2、W3C标准包括

（1）结构化标准语言(HTML、XML)

（2）表现标准语言(CSS)

（3）行为标准(DOM、ECMAScript)

什么是HTML:

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

1.第一个网页

介绍相关关键字的意义并在网页输出Hello，World!

<!--DOCTYPE :告诉浏览器我们要使用什么规范-->

<!DOCTYPE html>

<html lang="en">

<!--head标签代表网页头部-->

<head>

<!--meta描述标签，他用来描述我们网站的一些信息-->

<!--meta一般用来做SEO-->

    <meta charset="UTF-8">

    <meta name="keywords" content="学习前端">

    <meta name="description" content="来到这个网站可以学习html">

<!--网页标题-->

    <title>第一个网页</title>

</head>

<!--body标签代表网页主体-->

<body>

Hello，World!

</body>

</html>

结果展示：

2.网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!--标题标签-->

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标签</h3>

<h4>四级标签</h4>

<h5>五级标签</h5>

<h6>六级标签</h6>

<!--段落标签-->

<p>《三体》是刘慈欣创作的长篇科幻小说系列，由《三体》《三体2：黑暗森林》《三体3：死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。

    作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖 。</p>

<p>2019年，列入“新中国70年70部长篇小说典藏”。</p>

<p>2020年4月，列入《教育部基础教育课程教材发展中心 中小学生阅读指导目录（2020年版）》高中段文学阅读。</p>

<!--水平线标签-->

<hr/>

<!--换行标签-->

三体》是刘慈欣创作的长篇科幻小说系列<br/>《三体》<br/>《三体2：黑暗森林》<br/>《三体3：死神永生》<br/>

<!--字体样式标签-->

<h1>字体样式</h1>

<strong>粗体：ikun</strong><br/>

<em>斜体：ikun</em><br/>

<!--注释和特殊符号-->

空格<br/>

空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>

<!--大于-->

&gt;

<br/>

<!--小于-->

&lt;

<br/>

<!--版权符号-->

&copy;

结果展示：

3.图像标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像标签学习</title>

</head>

<body>

<!--

src:图片地址   相对路径(推荐)    绝对路径

../   -----上一级目录

alt:找不到图片显示的文字(图片名字)

-->

<img src="../resources/image/0.jpg" alt="c" title="悬停文字" width="400" height="300">

</body>

</html>

结果展示：

4.超链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>连接标签学习</title>

</head>

<body>

<!--使用name作为标记-->

<a name="top">顶部</a>

<!--a标签

herf:表示要跳转的界面

target:表示窗口在哪里打开  _blank在新页面打开  _self在自己的网页中打开

-->

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

<br/>

<a href="1.我的第一个网页.html" target="_self">

    <img src="../resources/image/0.jpg" alt="c" title="悬停文字" width="400" height="300">

</a>

<p>

    <a href="1.我的第一个网页.html" target="_self">

        <img src="../resources/image/0.jpg" alt="c" title="悬停文字" width="400" height="300">

    </a>

</p>

<p>

    <a href="1.我的第一个网页.html" target="_self">

        <img src="../resources/image/0.jpg" alt="c" title="悬停文字" width="400" height="300">

    </a>

</p>

<!--锚连接

1.需要一个锚标记

2.跳转到标记

-->

<a href="#top">回到顶部</a>

<a name="down">底部</a>

<!--功能性连接    邮件连接:mailto  QQ连接 -->

<a href="mailto:1503349647@qq.com">点击联系我</a>

</body>

</html>

结果展示：

5.块元素和行内元素

◆块元素

◆无论内容多少，该元素独占一行

◆(p、h1-h6...)

◆行内元素

◆内容撑开宽度，左右都是行内元素的可以在排在一行

◆(a、strong...)

6.列表标签

<!--有序列表  orderlist  ol    应用于考试题等-->

<ol>

    <li>高数</li>

    <li>C语言</li>

    <li>java</li>

    <li>Python</li>

    <li>英语</li>

    <li>c++</li>

    <li>运维</li>

</ol>

<hr/>

<!--无序列表 ul 应用于导航，侧边栏等-->

<ul>

    <li>高数</li>

    <li>C语言</li>

    <li>java</li>

    <li>Python</li>

    <li>英语</li>

    <li>c++</li>

    <li>运维</li>

</ul>

<hr/>

<!--自定义列表 dl  dt:列表名称  dd:列表内容   应用于公司或网站底部 -->

<dl>

    <dt>课程</dt>

    <dd>Java</dd>

    <dd>C</dd>

    <dd>C++</dd>

    <dd>Python</dd>

    <dd>Linux</dd>

</dl>

结果展示：

7.表格标签

<!--表格table

行:tr

列:td

-->

<table border="1px">

    <tr>

<!-- colspan跨列，参数代表跨几列  -->

        <td colspan="3">11</td>

<!--        <td>12</td>-->

<!--        <td>13</td>-->

    </tr>

    <tr>

        <!-- rowspan跨行，参数代表跨几行  -->

        <td rowspan="2">21</td>

        <td>22</td>

        <td>23</td>

    </tr>

    <tr>

<!--        <td>31</td>-->

        <td>32</td>

        <td>33</td>

    </tr>

    <tr>

        <td>41</td>

        <td>42</td>

        <td>43</td>

    </tr>

</table>

结果展示：

8.媒体元素

视频和音频

  • 视频元素 ---video
  • 音频元素 ---audio
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>媒体元素学习</title>

</head>

<body>

<!--音频和视频

src:资源路径

controls:控制条

controls muted autoplay:自动播放

-->

<video src="../resources/video/a.mp4" controls muted autoplay></video>

<audio src="../resources/audio/Don't%20Say.mp3.mp3" controls muted autoplay></audio>

</body>

</html>

结果展示：

9.页面结构

页面结构分析：

重点了解header,footer,nav

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面结构分析</title>

</head>

<body>

<header><h2>网页头部</h2></header>

<section><h2>网页主体</h2></section>

<footer><h2>网页脚部</h2></footer>

</body>

</html>

结果展示：

10.iframe内联框架



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>iframe内联框架</title>

</head>

<body>

<!--iframe内联框架

    src:网页地址

    name:框架标识名

-->

<iframe src="https://www.baidu.com/" name="ikun" frameborder="0" width="800px" height="600px"></iframe>

<!--target=""表示在内联窗口打开-->

<a href="1.我的第一个网页.html" target="ikun">点击</a>

</body>

</html>

HTML基础标签学习的更多相关文章

  1. 学习笔记—HTML基础标签

    HTML的概念 概念: HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 ( ...

  2. HTML基础标签入门

    HTML基础标签 昨天学习了一些HTML的基本标签以及基本属性: HTML是一种超文本标记语言,其中PHP是世界上最好的语言(增加学习的动力荣誉感). HTML文档里包含三部分: <html&g ...

  3. Swift基础语法学习总结(转)

    Swift基础语法学习总结 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...

  4. Swift基础语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...

  5. 零基础如何学习 Web 安全？（转）

    在网上看了一篇文章<零基础如何学习 Web 安全?>,虽然很多东西的都不是很懂,感觉挺好的copy过来,慢慢消化: 文章地址:https://www.zhihu.com/question/ ...

  6. Mybatis基础进阶学习2

    Mybatis基础进阶学习2 1.测试基本结构 2.三个POJO package com.pojo; import java.io.Serializable; import java.util.Dat ...

  7. Mybatis基础入门学习

    Mybatis基础入门学习 mybatis架构分析 搭建测试mybatis架构 )下载并导入mybatis3.2.7.jar(架构),mysql-connector-java-5.1.7-bin.ja ...

  8. (转)Linux基础知识学习

    Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过 ...

  9. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签

    指引 网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...

随机推荐

  1. 并发编程之volatile与JMM多线程内存模型

    一.通过程序看现象 在开始为大家讲解Java 多线程缓存模型之前,我们先看下面的这一段代码.这段代码的逻辑很简单:主线程启动了两个子线程,一个线程1.一个线程2.线程1先执行,sleep睡眠2秒钟之后 ...

  2. java_简单学习笔记

    java_study笔记 前言: 所有笔记均总结自狂神的java基础视频 https://www.bilibili.com/video/BV12J41137hu?p=1 idea小技巧 psvm+回车 ...

  3. CentOS下安装与配置Maven

    安装Maven 当前系统 [root@141 ~]# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 下载 http://ma ...

  4. unity---Lighting面板

    打开Lighting面板 将天空盒改为别墅 图片转化为Cube 设置一个材质球

  5. elementUI 输入框用户名和密码取消自动填充

    <!-- 用户名取消自动填充 autocomplete="off" --> <el-form-item label="用户名" prop=&q ...

  6. 从零搭建react+ts组件库（封装antd）

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

  7. 《回炉重造 Java 基础》——集合（容器）

    整体框架 绿色代表接口/抽象类:蓝色代表类. 主要由两大接口组成,一个是「Collection」接口,另一个是「Map」接口. 前言 以前刚开始学习「集合」的时候,由于没有好好预习,也没有学好基础知识 ...

  8. Java添加条形码到PDF表格

    条码的应用已深入生活和工作的方方面面.在处理条码时,常需要和各种文档格式相结合.当需要在文档中插入.编辑或者删除条码时,可借助于一些专业的类库工具来实现.本文,以操作PDF文件为例,介绍如何在编辑表格 ...

  9. C语言- 基础数据结构和算法 - 09 栈的应用_中缀表达式转后缀表达式20220611

    09 栈的应用_中缀表达式转后缀表达式20220611 听黑马程序员教程<基础数据结构和算法 (C版本)>, 照着老师所讲抄的, 视频地址https://www.bilibili.com/ ...

  10. 使用FileSystemWatcher监听文件状态

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月2日. 一.FileSystemWatcher类型介绍 在.NET中使用 FileSystemWatcher 类型可以进行监视指定 ...