HTML初级知识_html 初级-CSDN博客

本文链接：https://blog.csdn.net/MuggleGod/article/details/78999893

HTML初级知识及技巧

作者：Muggle

1.什么是HTML

HTML 是超文本标记语言,通俗的说这种语言的功能是将后台处理的相关数据（文字，图片，音频，视频）用标签引用起来形如<标记>文本，图片，音频，视频 </标记>。这些超文本标记语言可以被浏览器解析执行，解析完成后，形成一个页面，更容易被用户接受。

HTML语法结构分为!DOCTYPE部分，head部分和body部分；!DOCTYPE部分的功能是告诉浏览器这个HTML文件该按那个版本解析；head部分的功能是定义页面和其元素的相关属性，标签里面的参数一般用于告诉浏览器解析前的配置，这些配置一般可以通过meta（元标签）标签来配置。body部分为网页的主体部分，页面上需要呈现的内容都写在这一部分。一个简单的 HTML文档，拥有尽可能少的必需的标签。

如果你是一个HTML的初学者，那么我建议用HBuilder这个开发工具来编写程序。因为HBuildre这个软件是免安装的，解压直用，不需要配置什么东西，对初学者来说是很友好的，下面提供下载链接地址：https://pan.baidu.com/s/1qYl3uNi。每篇作文图1是HBuilder的界面及HTML的结构，简单介绍一下每句代码的含义

<!doctype>告诉浏览器按HTML的哪个版本来解析你的文件HTML ,HTML发展至今已经是第五个版本了，那么浏览器怎么知道你想让它按哪个版本来解析呢？没错，就是通过这个标签来实现。<!doctype html>这句代码的意思是
浏览器按照HTML5这个版本解析，让浏览器按照不同版本解析后面接不同代码，这里不一一例举。<meta charset="utf-8" />这句代码表示页面编码方式按utf-8,中文页面一般用utf-8，因为utf-8可以编码中文，head部分还包括seo优化，seo优化通俗的讲就是在别人搜索相关网页的时候让你的网页尽量靠前，下面介绍两个代码

图 1 HBuilder的开发界面及HTML的结构

2.标签的分类

根据排版的需要，我们需要把标签分成两部分。一种是块标签，一种是行内标签。

块元素的两大特点：

1.独占一行(不管内容是不是一行，块标签都占据一行)
2.可以设置宽高的

块标签有div，h1-h6，ol，ul，dl，table
div：div是无语义标签（没有任何标签意义），一般作为容器使用，主要用于布局。
无语义是相对于有语义来说的。
h1-h6：用于显示标题
辅助快捷键(Hbuilder)
ol>li+tab
ol>li*3+tab
div{我是div$}*3 + tab
ol：有序列表
ul：无序列表
dl：定义列表
table:表格，表格是由行构成的，行是由列（单元格）构成的

具体用法可查问度娘，示例Table用法

（table支持合并单元格操作）

行内标签:
1.在一行内显示,如果一行中的剩余空间不足，行内标签会被挤到下面一行显示
2.内容撑开宽高，不能设置宽高。
默认情况下，行内标签在一行内并排排列，默认多个行内标签之间是有间隙的。这个间隙是如何形成的？
间隙是编写代码时由回车换行引起的（大家可以试一下输入回车键和不输入回车键span标签之间的间隙）。

行内标签有：

span
无语义标签，一般作为容器使用。
img：显示图片（有src alt title三个参数可以设置src设置图片地址，alt设置图片加载失败时的提示文本，title设置鼠标悬停在图片上时的提示文本）
img可以设置宽高的，那么原因是什么呢？因为img是可替换标签。
可替换标签：标签显示的内容是由属性决定的，而不是由内容决定的标签，我们称之为可替换标签，可替换标签是可以设置宽高的。
（普通标签）<span>aaa</span>
（可替换标签）<img src="123.png"></img>
表单相关
<form action="" method="post">
</form>

action:把表单提交到后台的处理程序
method：表单提交的方式，post提交，get提交
form是块标签
input相关（添加文本框，按钮，点选勾选项。）
type：
text：文本框 password：密码框 radio：单选功能(通过相同的name来实现单选)checkbox 复选框（通过相同的name来复选）file 文件上传 hidden 隐藏属性 submit 按钮 reset 重置 button 按钮（不常用） textarea多行文本 select>option(selected)

通过这些标签结合API文档你基本上可以做一些简单的网页布局了，对了顺便提一句，建议使用chrome来运行调试HTML文档。