HTML+CSS
- 外壳的框架
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面的title写的是你的标签名--> <title></title> </head> <body> ??<!--这里面写的是你想要显示的东西--> </body></html>- < p >段落文本< /p >
一个< p >代表一个段落，这个是插入段落文本用的
- < hx >标题文本< /hx >(x为1~6)
hx中的x表示标签字号的大小，h1位最大，h6为最小
- < em >斜体标签< /em >
- < strong >粗体标签< /strong >
在这两个标签中都是需要强调的文本，只不过这两种标签所强调出来的样式不一样，但是可以两者结合在一起使用
- < span >标签< /span >
< span >标签是没有语义的，它的作用就是为了设计单独的样式用的，相当于自定义CSS
- aqua 浅绿色
- black 黑色
- blue 蓝色
- fuchsia 紫红色
- gray 灰色
- green 绿色
- lime 绿黄色
- maroon 栗色
- navy 深蓝色
- olive 橄榄色
- purple 紫色
- red 红色
- silver 银白色
- teal 蓝绿色
- white 白色
- yellow 黄色
如果使用其它颜色的话，就应该使用十六进制的颜色值
< em >< /em >和< strong >< /strong >标签是为了强调一句话中的关键作用，它们的语义是强调
< strong >< /strong >和< b >< /b > 一样用法，语义是强调
- < q >标签，短文本引用
<q>引用文本</q>就像引用别人说的话一样，为了标注，则需要加双引号，但是需要< q >< /q >这样的引用
并且这种引用的文本是不需要加双引号的，浏览器会对q标签自动添加双引号
添加< q >之前，浏览器只知道一段文字和一些双引号在里面。
添加< q >之后，浏览器知道这里是一段引用。
如果浏览器有自己的优化(如对老人增大引用的字体及对其加粗)，或者你在CSS中安排了格式，这部分就有意义了。
< blockquote >< /blockquote >
转指对长文本的引用，这个标签的解析是缩进样式
这个与上面的< q >< /q >不一样的地方是：第一、这个是用来表示引用长文本的；第二、这个是不会自动添加双引号，但是会缩进样式。(而< q >< /q >是不会缩进样式的)
< br >标签分行显示文本
用一个< br >< /br >就像是回车一样，进行了换行。
这就意味着你在HTML代码中输入回车、空格都是没有作用的。在HTML文本中想要输入回车换行就必须输入< br >
而< pre >< /pre >可以保留文本中的空格和回车
- 输入  ；就会在html中显示空格
- 输入< hr/ >就是用来添加水平线的
< address >标签，为网页加入地址信息
一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以< address >标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
< code >< /code >进行添加代码
目的是防止浏览器误认为是需要执行的代码，加了标签，浏览器就不会执行了
这种只能添加一行代码，如果需要添加多行，就不能使用< code >标签，而需要使用< pre >
使用< ul >添加新闻信息列表
模板：
<ul> ?????<li>信息</li> ?????<li>信息</li> ?????<li>信息</li> ?……</ul>使用< ol >添加列表标签序号
这种与上面的区别就在于，下面的这一种就是由序号的，而上面的只有一个点
<ol> ??<li>信息</li> ??<li>信息</li> ??......</ol>< div >< /div >标签在排版中的作用
一个html页面可以看成一个家，而一个div你们可以看成家的每个小房间，房间有了当然没什么效果，但是一个家必须分成一个个小房间才能多姿多彩，但每个房间里怎么装饰就得你们自己放东西，当然装饰就得交给css了。
table标签写表格
用如下代码实现表格：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>认识table表标签</title></head><body><table> ?<tbody> ???<tr> ?????<th>班级</th> ?????<th>学生数</th> ?????<th>平均成绩</th> ???</tr> ???<tr> ?????<td>一班</td> ?????<td>30</td> ?????<td>89</td> ???</tr> ???<tr> ?????<td>二班</td> ?????<td>35</td> ?????<td>85</td> ???</tr><tr><td>三班</td><td>32</td><td>80</td></tr> ?</tbody></table></body></html>上面的代码实现的样子就像下面的样子一样：
上面的代码可以添加一个CSS样式进行表格的变换
<title>为表格添加边框</title><style type="text/css">table tr td,th{border:2px solid #342;}</style>summary与caption用来添加标题与摘要
< table summary="摘要的内容">
上面的summary添加的摘要与在html中添加注释的效果是一样的，目的是为了给程序员看，防止表格太多改错了。
< caption >标题文本< /caption >
上面的就是给表格添加标题(表头)的
< a >标签使用的超链接
使用
<a href="目标地址" title="鼠标滑过显示的文本">连接显示的文本</a>href：Hypertext Reference的缩写。意思是超文本引用。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
注：只要文本加入a标签之后，文字的颜色就会自动变成蓝色（点击之后的文本颜色会变成紫色）
HTML+CSS
原文地址：https://www.cnblogs.com/johnnytan/p/9346657.html