产品经理的技术脑：html是什么意思？

文本标记语言（HTML）是用于在 Internet 上显示 Web 页面的主要标记语言。换句话说，网页由 HTML 组成，用于通过 Web 浏览器显示文本，图像或其他资源。

使用标记来描述文档结构和表现形式并通过浏览器进行解析,然后把结果显示在网页上. 它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础。

什么是HTML？

HTML是用来制作网页的标记语言

HTML是Hypertext MarkupLanguage的英文缩写, 即超文本标记语言

HTML语言是一种标记语言,不需要编译,直接由浏 HTML语言是一种标记语言,不需要编译,直接由浏览器执行

HTML文件是一个文本文件,包含了一些HTML元素, HTML文件是一个文本文件,包含了一些HTML元素,标签等.

HTML文件必须使用html或htm为文件名后缀

HTML是大小写不敏感的,HTML与html是一样的

Html和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现(外观控制)。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML形象案例理解

为了简化对复杂Internet的理解，暂时把复杂的Internet抽象成：向女生宿舍发送信号。

为了能够在断网后继续联络女神，我们买来了电池和开关，然后拉了普通电线线到女神的寝室。女神把小灯泡接在了电线的两端。

这时只需要开闭开关，就可以控制女神屋里的灯泡了。

发送信号

关闭着小灯泡1秒钟，代表发送一个0。

打开了小灯泡1秒钟，代表发送一个1。

此时可以向女神发送任意二进制内容了。

发送文本

我们只希望发送一个“Good Night”。所以必须想办法对“Good Night”进行编码。

'G','o','o','d'的ASCII编码是：071，111，111，100，转换成二进制就是：0100 0001 0110 1111 0110 1111 0110 0100

使用发送二进制信号的方法发过去，女神需要自己解码来阅读出“Good”。

发送富文本

有一天，我们希望发送“I miss you”。

为了表达心意，你希望加粗“you”，并使用红色的字体发送“miss”，而这一根简陋的电线似乎很难理解“加粗”和“红色”

于是机智的我们发送了：I <red>miss</red> <b>you</b>

同样机智的女神理解了这件事情。

你发明了一种语言

我们很喜欢这种编码格式，这是一种标记语言，于是我们称其为：TGML （To Girl Markup Language）

平时你使用TGML来和你的女神通信，TGML可以非常好的解决富文本的传输问题。

表白

终于决定表白了，我们绘制了很美丽的心形图片，还有两个按钮：接受、拒绝。

两个按钮分别会链接到 "接受.tgml"和"拒绝.tgml"

为了描述图片，我们使用了<img src="pic">

为了描述按钮，我们使用了<a href="接受.tgml">

现在发送给女神的内容，已经不只是带格式的富文本，而是带链接的富文本。

于是在这个世界上，拥有了一种能够描述超文本的语言，叫做TGML

超文本

描述超文本的方式有很多，例如：HTML，TGML，还有markdown。HTML的诞生是为了描述超文本。

超文本的用途也很多，例如：描述一个网页，或者描述一个Word文档。HTML文件是超文本文件。但是超文本未必是HTML。

Microsoft Word

Microsoft Word是Office的一个组件。它同样代表一个超文本资源。

如果你解压一个docx文件并仔细翻一翻，你能找到你刚才写的作业，是以HTML方式记载着。

当然，描述超文本还有markdown。所以你可以使用一些工具，比如pandoc，把markdown转换成word。

故事的结局

女神的名字叫浏览器，我们的名字叫Web服务器，女神和我们中间的那根线叫HTTP。

eb标准：

由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：

结构标准：

结构用于对网页元素进行整理和分类，主要指的是HTML。

表现标准：

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：

行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。

初识HTML：

html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。

HTML发展：

XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。

HTML中的注释：

 <!-- 注释标签：注释的内容 -->

条件注释：

条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。


    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
    <head> <!-- 网页的头部 -->
        <meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
        <meta name='description' content='this is description'> <!-- 描述网站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!--  网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
        <link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
        <title>标题</title> <!-- 网站的标题 -->
        <style type="text/CSS">  /* 用来写CSS代码，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 网页的主体 -->
        <h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
        <p>段落</p> <!-- 段落标签 -->
        <hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
        <br/> <!-- 换行标签 -->
        </div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
        <span>span</span> <!-- 无语义化标签分割用 -->                
        <strong>加粗</strong> <!-- 加粗标签 -->
        <b>加粗</b> <!-- 加粗标签 -->
        <i>倾斜</i> <!-- 倾斜标签 -->
        <em>倾斜</em> <!-- 倾斜标签 -->
        <s>删除线</s> <!-- 删除标签 -->
        <del>删除线</del> <!-- 删除标签 -->
        <u>下划线</u> <!-- 下划线标签 -->
        <ins>下划线</ins> <!-- 下划线标签 -->
        <img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
        <a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
        <ul> <!-- 无序列表 -->
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
            <li>中国</li>
            <li>美国</li>
            <li>英国</li>
        </ol>
        <dl> <!-- 自定义列表 -->
            <dt>分类1</dt> <!-- 分类名称 -->
            <dd>分类1第1项</dd> <!-- 类的项 -->
            <dd>分类1第2项</dd>
            <dt>分类2</dt>
            <dd>分类2第1项</dd>
            <dd>分类2第2项</dd>
        </dl>
        <table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
        <caption>信息表</caption> <!-- 表格标题 -->
        <tr> <!-- 定义行 -->
            <th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr> <!-- 定义行 -->
            <td>小明</td> <!-- 定义单元格，表格里面没有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan

个人编写HTML使用的软件是dreamweaver，这个软件的话，正版是要购买的，一开始学习HTML就是用的这个软件了，挺好用的，而且代码提示特别方便，不用担心太多的标签和属性记劳~

1.什么是HTML？

HTML 是用来描述网页的一种语言，指的是超文本标记语言: HyperText Markup Language；
HTML 不是一种编程语言，而是一种标记语言；
HTML文档也叫做 web 页面；

2.HTML基本结构

<!DOCTYPE html>：文档声明；
<html>：HTML 页面的根元素；
<head>：用于定义文档的头部，是所有头部元素的容器；
<meta>：提供有关页面的元信息，位于文档的头部，不包含任何内容；
<title>：文档的标题；
<body>：定义文档的主体，包含文档的所有内容；

3.HTML标签使用？

HTML 标签是由尖括号包围的关键词，且通常是成对出现的如<a></a>，当然也有单个的，只不过比较少如<hr>；
标签对中的第一个标签表示开始标签，第二个标签表示结束标签；

4.HTML常用标签介绍

除了HTML基本结构的几个标签以外，HTML还有一些比较常用的基本标签；

（1）文本标签：

h1-h6：用于定义标题，h1为最大标题，h6为最小标题；
p：定义段落；
span：组合文档中的行内元素；
br：换行；
hr：水平线；
strong/b：加粗文字；
em/i：斜体；
u：下划线；
s：删除线；
pre：定义预格式化的文本，保持原有格式；
sub：下标；
sup：上标；
blockquote：块引用；

（2）布局标签：

div：定义文档中的分区或节，把文档分割为独立的、不同的部分；
header：定义页面的头部；
aside：用作文章的侧栏；
section：定义文档中的节；
footer：定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等；
article：规定文章独立的其他内容，如标题、内容、评论；

（3）多媒体标签：

img：用于在网页中插入图像；
audio：定义声音，比如音乐或其他音频流；
video：定义视频，比如电影片段或其他视频流；

（4）超链接标签：

a：定义超链接，指定页面间的跳转；

（5）序列化标签：

ul：定义无序列表；
ol：定义有序列表；
li：定义列表项目，可用在无序列表ul和有序列表ol中；
dl：定义了定义列表；
dt：定义了定义列表中的项目（即术语部分）；
dd：在定义列表中定义条目的定义部分；

（6）表格标签：

table：定义 HTML 表格；
tr：定义表格的行；
td：定义表格的单元；
th：定义表头；
caption：定义表格标题；
col：为表格中一个或多个列定义属性值；
colgroup：用于对表格中的列进行组合，以便对其进行格式化；
thead：定义表格的表头；
tbody：表格主体，也就是正文部分；
tfoot：定义表格的页脚（脚注或表注）；

（7）表单标签：

form：用于为用户输入创建 HTML 表单；
input：用于搜集用户信息；
button：定义一个按钮；
select：创建单选或多选菜单；
option：定义下拉列表中的一个选项；
textarea：定义多行的文本输入控件；
label：为 input 元素定义标注（标记）；
fieldset：用于将表单内的相关元素分组；
legend：为 fieldset 元素定义标题；

5.HTML注意事项

HTML文件当以后缀名为 .html 或 .htm 来命名；
HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围；
HTML标签都是以开始标签起始，以结束标签终止；
HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护；
HTML标签使用必须符合标签嵌套规则，如禁止a标签嵌套a标签，p标签嵌套div标签等；
建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器；

在线咨询

上一篇：多页面项目webpack打包实践
下一篇：html常用代码大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。