前言
HTML学习过程及心得体会
- 什么是HTML？
- HTML文档结构
- - 空元素
  - 元素属性
- 常用的HTML标签
- - 超链接
  - 图片
  - 表格table
  - 列表list
  - 表单form
- 学习总结：
- 更多HTML学习，访问[==菜鸟教程==](https://www.runoob.com/html/html-tutorial.html)

前言

正如编程大牛们所说：一个网页就好像一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。 CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有HTML结构那也就什么都不是了，没有了实际使用价值。而JavaScript就是房屋的开关，用来进行互动，产生动态效果。

本篇博客仅仅做HTML入门指导，技术有限，欢迎指正问题！

HTML学习过程及心得体会

                                      本博客所使用的开发工具为VS code

HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。通常我们需要掌握的标记/标签不多，如常见的 body、head、title、p、img、a、div、span、ol、table等。

什么是HTML？

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
2.在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可（F12））就可看到。

HTML文档结构

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如

<P>段落
<h>标题
...

HTML 标签通常是成对出现的，比如

<p></p>
<h1></h1>
...

其中标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，这类元素我们称为空元素。如下：

<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
...

元素属性

通过添加属性在浏览器上显示一些额外的信息（样式，提示信息等）如下：

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带提示信息属性的输入框 -->
<input type="text">
<input type="password">

html文档内容

代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><title>论拖延的危害</title>
</head>
<body><h1>我的第一个Web页</h1><p>当前正在施工...</p>
</body>
</html>

代码剖析：

!DOCTYPE html : 声明文档类型。这个是Html5的声明方式。
html: html元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
head: head元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
meta charset"utf-8: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
link rel=“shortcut icon” href=“favicon.ico” type="image/x-icon:指定页面的图标，出现在浏览器标签上。
title:设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
body: 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

常用的HTML标签

超链接

<a href="https://www.baidu.com/>百度一下</a>

href即为要跳转去的地址 URL
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

图片

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

src指定图片路径

表格table

HTML表格的基本解构：

<table>…</table> 定义表格
<th>…</th>：定义表格的标题栏
<tr>…</tr>：定义表格的行
</td>…</td>：定义表格的列

列表list

无序列表

<ul><li>早睡</li><li>早起</li><li>不熬夜</li>
</ul>
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

有序列表

<ol><li>学习</li><li>运动</li><li>炼意志</li>
</ol>
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

表单form

一般用来向网友调查意见。如下：

<form><!-- 文本框，注意有 placeholder 提示符 -->用户名：<br><input type="text" name="name" placeholder="请输入用户名"><br><!-- 密码框 -->密码：<br><input type="password" name="ps" placeholder="请输入密码"><br>年龄：<br><!-- 数字输入框，注意 min 和 value 属性--><input type="number" name="age" min="18" value="18"><br><!-- 单选按钮, 注意 checked 属性 -->性别：<br><input type="radio" name="gender" value="male" checked> 男<br><input type="radio" name="gender" value="female"> 女<br><input type="radio" name="gender" value="other"> 其它<br><!-- 多选框 -->您有哪些交通工具：<br><input type="checkbox" name="vehicle1" value="Bike"> 自行车<br><input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br><input type="checkbox" name="vehicle3" value="Car"> 轿车<br><input type="checkbox" name="vehicle4" value="Jet"> 飞机<br><!-- 日期选择器 -->您的工作日期：<br><input type="date"><br><!-- 文件选择器 -->上传您的照片:<br><input type="file" name="photo"><br><!-- 文本输入区域，注意 rows 和 cols 属性 -->您的建议：<br><textarea name="message" rows="5" cols="30">The cat was playing in the garden.</textarea><br><hr><!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 --><input type="submit" value="提 交"><input type="reset" value="重 置">
</form>

学习总结：

通过本次的学习大致了解了前端HTML语言，了解了基本的语法，仅仅达到入门水平，要进一步提高则还需要大量时间训练，总之，路虽远，走总会到达！

HTML学习过程及心得体会相关推荐

《课程的反思与重建－－我们需要什么样的课程观》之心得体会
<课程的反思与重建--我们需要什么样的课程观>之学习<课程的反思与重建>心得体会<?xml:namespace prefix = o ns = "urn:sc ...
计算机基础与应用(上)笔记总结,计算机基础学习心得体会范文（通用3篇）
计算机基础学习心得体会范文(通用3篇) 当我们对人生或者事物有了新的思考时,好好地写一份心得体会,这样可以记录我们的思想活动.那么要如何写呢?以下是小编精心整理的计算机基础学习心得体会范文(通用3篇) ...
计算机技术应用体验,信息技术应用体验学习心得体会
信息技术应用体验学习心得体会通过学习李老师的<信息技术在学科教学中的应用>这门网络课程,我受益匪浅.我不仅学到了先进的教育理念,而且学到了非常实用的现代教育技术,对我的学科教学很有帮助. ...
IT增值服务实践心得体会:企业客户的钱比个人客户好赚得多
友情提示本人喜欢直言不讳,不喜欢拐弯抹角.喜欢从客观和主观.自身和他人等多种角度去探讨问题. 如有不当之处,欢迎吐槽. 若干心得体会 1.企业客户的钱更好赚,个人客户的钱很难. 为什么这么说呢? ...
员工培训与开发实训心得体会_公司新员工培训心得体会800字范文
点击蓝字关注我们培训是一次能够快速提升我们的机会,而每个新员工也是通过培训尽快的融入公司的.因此,我们要更加重视培训一些!下面是小编为大家整理的公司新员工培训心得体会,希望对大家有帮助. 公司新员工 ...
初中计算机新课标培训心得,新课标学习心得体会
新课标学习心得体会由好范文网的会员投稿精心推荐,小编希望以下6篇范文对你的学习工作能带来参考借鉴作用. 第1篇:新课标学习心得体会新课标学习心得体会怎么写?以下是我们给你的范文格式参考. 用课余时间 ...
学计算机编程200字感想,计算机学习心得体会
你们现在是在用电脑教学吗?本文是出国留学网特意为你准备的<课堂计算机学习心得体会>,希望对你能够提供帮助,如果还有更多需要了解的,欢迎访问出国留学网主页了解更多.https://www.l ...
计算机校本培训心得,个人校本培训心得体会3篇
校本培训是与学校.教师的实际紧密结合,以提高教师的师德修养和教育教学的实践能力为基本目标.下面是学习啦带来的个人校本培训心得体会,仅供参考. 个人校本培训心得体会一: 转眼间本学期已到尾声,回顾在本学 ...
计算机活动感悟怎么写,计算机教学心得体会范文五篇.doc
计算机教学心得体会范文五篇计算机教学心得体会范文五篇[一] 一.开卷有益,爱不释手然而,在我参加了第一次培训,我就发现自己错了,此次的电脑培训与以前参加过的培训大相径庭.以前的培训都是应付考试的, ...

HTML学习过程及心得体会

目录

前言

HTML学习过程及心得体会

什么是HTML？

HTML文档结构

空元素

元素属性

常用的HTML标签

超链接

图片

表格table

列表list

表单form

学习总结：

更多HTML学习，访问菜鸟教程

HTML学习过程及心得体会相关推荐

最新文章

热门文章