1 什么是HTML
借用菜鸟教程的解释：
1 HTML 是用来描述网页的一种语言。111
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2 一些简单的说明
- 建议都是用小写：HTML属性，标签
- 签都是闭合的
- 属性值始终都在引号内
- id 是唯一属性，calss 为html元素定义一个活多个类，style 规定元素的行内样式 ,title 描述了元素的额外信息
3一个简单而又全面的例子
<!DOCTYPE html>
</html>
<head>
<!-- 网页编码格式为 utf-8 -->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<!-- 每30秒钟刷新当前页面: -->
<meta http-equiv="refresh" content="30">
<meta name="author" content="wzw">
</meta>
<!-- 定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题 -->
<title>我的世界</title>
<style type="text/css">
/* 1 css 声明由一个属性和一个值组成，以分号结束*/
/* 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 */
/* 外部样式放在内部样式的后面，则外部样式将覆盖内部样式。两个内/外样式也后引入的一个会覆盖前一个 */
/* id选择器 */
#css1{
text-align: center;
background-color: red;
}
/* class选择器 */
h1 {color:red;}
/* p {color:black;
background-color: rgb(0, 255, 179);
} */
.css2{
text-align: center;
background-color: rgb(0, 255, 179);
}
.css3{
text-align: center;
background-color: rgb(0, 255, 179);
}
</style>
<!-- <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: -->
<!-- <base href="http://www.baidu.com" target="_blank"> -->
</head>
<!-- body标签是HTML文档的主体 -->
<body>
<h1>1：h1标签是一个标题：标题只是用于标题，不要当做放大字体、粗体用</h1>
<p>2：p标签一个段落：双目失明丝毫不影响我带崩三路！</p>
<a target="_blank" href="https://www.baidu.com">
3：a 标签一个链接，href属性表明目标网址！target="_blank" 属性是新开标签页
</a>
<p>"href="#id" 连接到id为tips的标签处；也可以href="网址+#id""
<a href="#title1">跳转到第二个标题</a>
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a></p>
<p> 4：hr标签插入水平线 </p>
<hr />
<p>
5：image标签一个图片，下面这个图片还是一个超链接。src属性表明图片地址，其中images文件夹地址和test.html一致。
</p>
<a target="_blank" href="https://www.baidu.com">
<img src="./images/test.png" alt=":ceshiwenzi" width="60" height="33" />
</A>
<p>6：br标签是一个换行用的，<br></br>你看，我是下一行</p>
<!-- HTML文本格式化 -->
<h1 id="title1">HTML文本格式化</h1>
<p>1：b 是粗体，i 是斜体：
<br><b>我是粗体</b><br>
<i>我是斜体</i>
</p>
<p>2:strong或者em意味着你要呈现的文本是重要的,需要突出显示<br>
<strong>我是粗体</strong>
<br><em>我是斜体</em>
</p>
<p>
<pre>3：pre预格式文本，会显示 空格 和
换行的效果</pre>
</p>
<p>4：small小号字：<br><small>我是粗体</small><br>我是正常的</p>
<p>5：<sub>sub上标</sub>；<sup>sup下标</sup>；
del删除<del>blue</del>；ins插入字 <ins>red</ins></p>
<p>6：abbr定义缩写<abbr title="Hello Word">HW</abbr>；address定义网址
<address>网址www.baidu.com</address>
</p>
<p>7：bdo定义文字方向<bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<p>8：q将文字用双引号保护起来，用于短的引用:
<q>我的两边由双引号</q>
</p>
<p>9：lockquote用于长的引用:
<blockquote >
乌拉乌拉
</blockquote>
</p>
<p>10：cite引用<cite>“让风暴来得更猛烈些吧！”</cite> 出自高尔基，海燕</p>
<p>11：dfn定义项目<dfn>定义项目</dfn></p>
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
<p id="css1">我的背景是红色的</p>
<p class="css2">我的背景是绿色的</p>
<p class="css3">我的背景是红色的</p>
<p></p>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
