1.HTML 文件基本结构；
<!DOCTYPE html><html><!-- 标记放在html文件的开头，是一个形式上的标记 --><head><!-- 头标记，起的作用是放置关于此html文件的信息，如提供索引，定义CSS样式等 --><meta charset="UTF-8"><title>HTML标题</title><!-- 标题标记，作用是设置网页标题 --></head><body><!-- 主题标记，网页所要显示的内容都放在这个标记内，它是html文件的重要所在 -->我的第一个html网页</body></html>
复制代码
<html> ：标记放在 html 文件的开头，是一个形式上的标记
<head>：头标记，起的作用是放置关于此 html 文件的信息，如提供索引，定义 CSS 样式等
<title>： 标题标记，作用是设置网页标题
<body>：主题标记，网页所要显示的内容都放在这个标记内，它是 html 文件的重要所在
2.文本排版：
2.1 段落标签<p>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落标签</title></head><body><p>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1] 。</p><p>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。</p></body></html>
复制代码
运行结果：
2.2 换行标签<br/>（这个是单标签，只有一个）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>换行标签</title></head><body>望庐山瀑布<br/>唐代：李白<br/>日照香炉生紫烟，遥看瀑布挂前川。<br/>飞流直下三千尺，疑是银河落九天。<br/></body></html>
复制代码
运行结果：
2.3 分割线标签<hr>（这个是单标签，也只有一个）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>换行标签</title></head><body>望庐山瀑布<br/><hr/>唐代：李白<br/><hr/>日照香炉生紫烟，遥看瀑布挂前川。<br/><hr/>飞流直下三千尺，疑是银河落九天。<br/><hr/></body></html>
复制代码
运行结果：
2.4 标题标签<h1>~<h6>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标题标签</title></head><body><h1>望庐山瀑布</h1><h2>望庐山瀑布</h2><h3>望庐山瀑布</h3><h4>望庐山瀑布</h4><h5>望庐山瀑布</h5><h6>望庐山瀑布</h6></body></html>
复制代码
运行结果：
2.5 文字居中标签<center>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>换行标签</title></head><body><center>望庐山瀑布<br/>唐代：李白<br/>日照香炉生紫烟，遥看瀑布挂前川。<br/>飞流直下三千尺，疑是银河落九天。<br/></center></body></html>
复制代码
注：这个 cener 标签已经不怎么用了，兼容性不好
运行结果：
2.6 文字段落缩进标签<blockquote>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落标签</title></head><body><p><blockquote>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程 [1] 。</blockquote></p><p>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。</p></body></html>
复制代码
运行结果：
可以看到前面有缩进（红色方框的地方）
3.设置文字列表：
作用：文字列表的主要作用是有效地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来；
3.1 无序列表<ul></ul>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落标签</title></head><body><ul> <li>苹果</li> <li>梨子</li> <li>葡萄</li> <li>芒果</li></ul></body></html>
复制代码
运行结果：
3.2 有序列表<ol></ol>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落标签</title></head><body><ol> <li>苹果</li> <li>梨子</li> <li>葡萄</li> <li>芒果</li></ol></body></html>
复制代码
运行结果：
4.HTML 标记与 HTML 属性
在大多数 html 标记中都可以对属性进行控制，属性的作用是帮助 html 标记进一步控制 html 文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：
<标记名称 属性名 1=“属性值 1” 属性名 2=“属性值 2” ......>
4.1 用 align 属性控制段落的水平位置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落居中</title></head><body><p align="center">望庐山瀑布<br/>唐代：李白<br/>日照香炉生紫烟，遥看瀑布挂前川。<br/>飞流直下三千尺，疑是银河落九天。<br/></p></body></html>
复制代码
其中的 align 有四个属性值，分别是 justify，left（左）,center（中）,right（右）；
运行结果：
4.2 用 bgcolor 属性设置背景颜色
注：1.直接用颜色表示：如 red、blue；2.利用 R/G/B 表示，十六进制，如 #AABB00；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落居中</title></head><body bgcolor="#AABB00"><p align="center">望庐山瀑布<br/>唐代：李白<br/>日照香炉生紫烟，遥看瀑布挂前川。<br/>飞流直下三千尺，疑是银河落九天。<br/></p></body></html>
复制代码
这时的 bgcolor 是写在<body>里面的！我们可以写个英文字母 b，然后用"Alt+/"进行提示；
运行结果：
4.3 设置文字的特殊样式
标记显示效果<b></b>文字以粗体方式显示<i></i>文字以斜体方式显示<u></u>文字以加下划线方式显示<s></s>文字以加下划线删除方式显示<big></big>文字以放大方式显示<small></small>文字以缩小方式显示<strong></strong>文字以加强强调方式显示<em></em>文字以强调方式显示<address></address>用来显示电子邮件地址或网址<code></code>用来说明代码与指令
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落居中</title></head><body><b>文字以粗体方式显示</b><br/><i>文字以斜体方式显示</i><br/><u>文字以加下划线方式显示</u><br/><s>文字以加下删除方式显示</s><br/><big>文字以放大方式显示</big> <br/><small>文字以缩小方式显示</small> <br/><strong>文字以加强强调方式显示</strong><br/><em>文字以强调方式显示</em><br/><address>484753039@qq.com</address><br/><code>用来说明代码与指令</code><br/></body></html>
复制代码
运行结果:
4.4 设置文字的大小和颜色标签和 font 标签
font 标签的属性
属性设置值说明 size
相对值(size=+2)
绝对值(size=2)
设置文字的大小，默认值为 size=3color
颜色名称(color="red")
R/G/B 格式(color="#FFCC00")
设置文字的颜色 face 系统内置字形设置文字的字体，如宋体
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落居中</title></head><body>望庐山瀑布<br/>唐代：李白<br/>日照香炉生紫烟，遥看瀑布挂前川。<br/>飞流直下三千尺，疑是银河落九天。<br/><font size=10 color=red face="楷体">望庐山瀑布<br/>唐代：李白<br/>日照香炉生紫烟，遥看瀑布挂前川。<br/>飞流直下三千尺，疑是银河落九天。<br/></font></body></html>
复制代码
运行结果：
5.特殊文字符号
特殊符号 HTML 表示法©（一般指版权的时候用到）©<<>>""&&空格 上标<sup></sup>下标<sub></sub>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落居中</title></head><body bgcolor="#FF5555"><br><!-- 在浏览器中打印出<br>这个符号 --><br>版权所有©www...com<!-- 在浏览器中打印出©这个符号 --><br>在浏览器 中打印出4个空格<!-- 在浏览器中打印出4个空格 --><br>SO<sub>4</sub><sup>2-</sup><!-- 在浏览器中打印出硫酸根离子的符号 --><br>打出&这个符号<!-- 在浏览器中打出&这个符号 --><br></body></html>
复制代码
运行结果：
我是【程序员的时光】，热爱技术分享，信仰终身学习，欢迎大家关注！我们下期再见！
评论