企业微信官网_免费网站建设必择山东绘政科技_百度推广销售员的工作内容_seo免费视频教程

HTML

HTML是什么？ HyperText Markup Language(超文本标记语言)

HTML标签(元素)

标签也可以称为元素，是HTML的基本组成单位。

标签名不区分大小写，但是推荐小写，因为小写更加规范。

<marquee>测试html文件</marquee><!-- marquee --> 是标签名
<!-- <marquee> --> 是起始标签
<!-- </marquee> --> 是结束标签
<!-- 测试html文件 --> 是标签体

一般的标签都是有始有终的叫做"双标签"，但是也有一些特殊的标签没有结束标签。叫做"单标签"例如：

<input>

标签嵌套

<marquee>测试html文件<input>
</marquee>

标签属性

标签属性用于给标签提供附加信息。

可以写在：起始标签或单标签中

<marquee loop="1" bgcolor="orange">测试html文件<input type="password">
</marquee><标签名 属性名="属性值" 属性名="属性值"></标签名>

一般的标签属性都具有属性名，但是也有一些标签属性只有属性值。例如：

<input disabled>

标签属性不能重复，如果有重复遵循先入为主。

不同的标签，有不同的属性；也有一些通用属性。

属性名、属性值都不能乱写，都是W3C规定好的。

HTML结构

<html><head><!-- 页签/标题 --><title>HTML结构</title></head><body><!-- 呈现式标签 --><marquee>尚硅谷</marquee></body>
</html>

HTML文档声明

<!DOCTYPE html><html><head><!-- 页签/标题 --><title>HTML文档声明</title></head><body><!-- 呈现式标签 --><marquee>尚硅谷</marquee></body>
</html>

文档声明必须放在第一行，用于声明以下的是 HTML5 代码。文档声明只算是一种标记，不是标签。

HTML编码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- 页签/标题 --><title>HTML编码</title></head><body><!-- 呈现式标签 --><marquee>尚硅谷</marquee></body>
</html>

编写代码统一采用 UTF-8 编码。

为了让浏览器在渲染 html 文件时，不犯错误，可以通过meta标签配合 charset 属性指定字符编码。

HTML设置语言

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- 页签/标题 --><title>HTML设置语言</title></head><body><!-- 呈现式标签 --><marquee>尚硅谷</marquee><marquee>I love you</marquee></body>
</html>

HTML排版标签

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML排版标签</title></head><body><!-- 一级标签一般只有一个 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!-- 段落标签 --><p>段落标签</p><p>正文标签</p><!-- div标签 --><!-- div标签是一个块级标签，用于将文档分割为独立的部分 --><div><p>div标签</p><p>div标签</p></div></body>
</html>

HTML块级元素和行内元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML块级元素和行内元素</title></head><body><!-- 块级元素 特点：独占一行 --><!-- <marquee>这是一个跑马灯</marquee><marquee>这是一个跑马灯</marquee><h1>一级标题</h1><h1>一级标题</h1><p>段落标签</p><p>段落标签</p><div></div><div></div> --><!-- 行内元素 特点：不独占一行 --><!-- <input type="text"><input type="text"><span>span标签</span><span>span标签</span> --><!-- 块级元素和行内元素的区别 --><h1>块级元素和行内元素的区别</h1><div><h2>区别1</h2><p>块级元素独占一行，行内元素不独占一行</p><h2>区别2</h2><p>行内元素中能写：行内元素，但不能写：块级元素</p><h2>区别3</h2><p>块级元素中几乎什么都能写</p><h2>特殊规则</h2><div><p>h1-h6不能嵌套</p><P>p标签中不能写块元素</P></div></div></body>
</html>

HTML常用文本标签

文本标签通常都是行内元素。

<!-- em标签，语义为着重阅读的内容 -->
<em></em>
<!-- strong标签，语义为十分重要的内容 -->
<strong></strong>
<!-- span标签，没有语义，用于包裹短语的通用容器 -->
<span></span>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML_常用文本标签</title><style>span{color: red;}</style></head><body><p>预防电信诈骗，请安装：<em>国家反诈中心app</em>。</p><p>当我们出门时，一定要<strong>关好门窗</strong>。</p><p>前端三个框架为：<span>Angular、React、Vue</span>。</p></body>
</html>