HTML学习过程及心得体会

不懂技术的枫

于 2021-05-10 18:01:38 发布

阅读量1.5k

点赞数 3

分类专栏：笔记文章标签： html5 html

本文链接：https://blog.csdn.net/qq_46665939/article/details/116603117

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

前言

正如编程大牛们所说：一个网页就好像一幢房子，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>