html的基本构造：
<!DOCTYPE html>
<html> # html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中。
<head> # head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面
<meta charset="UTF-8"> # 需要告诉浏览器，网页所采用的编码字符集
meta标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/
<title>啦啦啦</title> # title网页的标题标签，默认会显示在浏览器的标题栏中
搜索引擎在检索页面时，会首先检索title标签中的内容
它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
</head>
<body> # body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
</body> # <!-- 注释内容 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<p>我是一个p标签，我用来表示一个段落</p>
<p>我是一个p标签，我用来表示一个段落</p>
<br /> # 换行
< < # 实体
> >
空格
版权符号 ©
</html>
xhtml的基本构造
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>XHTML的语法规范</title>
</head>
<body>
<!--
1、HTML中不区分大小写，但是我们一般都使用小写
-->
<!--
2、HTML中的注释不能嵌套
-->
<!--
这是一个注释
<!--
这是注释中的注释
-->
-->
<!--
3、HTML标签必须结构完整，要么成对出现，要么自结束标签
-->
<!-- 正确 -->
<p>我是一个p标签</p>
<!-- 错误 -->
<p>我是一个p标签
<!--
浏览器尽最大的努力正确地解析页面，你所有的不符合语法规范的内容
浏览器都会为你自动修正，但是有些情况会修正错误
-->
<!-- 自结束标签 -->
abc
<br />
bcd
<br>
efg
<!--
4、HTML标签可以嵌套，但是不能交叉嵌套
-->
<p>今天天气<font color="red">真不错</font></p>
<p>今天天气<font color="red">真不错</p></font>
<!--
5、HTML标签中的属性必须有值，且值必须加引号（单引号双引号都可以）
-->
<p>今天天气<font color=>真不错</font></p>
<p>今天天气<font color=red>真不错</font></p>
</body>
</html>
内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联框架</title>
</head>
<body>
<h1>我是demo11</h1>
<!--
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
width：
height：
name：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
-->
<iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<h1>我是demo12</h1>
<!--
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址
-->
<a href="http://www.baidu.com">我是一个超链接</a><br /><br />
<a href="http://www.baidu1234567.com">我是一个超链接</a><br /><br />
<!--
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self：表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
-->
<a href="demo011_内联框架.html" target="tom">我是一个超链接</a><br /><br />
<iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
<!--
center标签中的内容，会默认在页面中居中显示
我们可以将要居中的元素全都放到center中
-->
<center>
<p>我是一个p标签</p>
</center>
</body>
</html>
CSS
<link rel="stylesheet" type="text/css" href="style.css" />
# 推荐格式 或者新建一个css文件写入格式。
h1{
font-size: 100px;
color: red;
}
块和内联
| 块元素(block element) HTML |
标签分类明细 |
| address |
地址 |
| blockquote |
块引用 |
| center |
举中对齐块 |
| dir |
目录列表 |
| div |
常用块级容易，也是css layout的主要标签 |
| dl |
定义列表 |
| fieldset - form |
控制组 |
| form |
交互表单 （只能用来容纳其它块元素） |
| h1-h6 |
标题 |
| hr |
水平分隔线 |
| isindex |
input prompt |
| menu |
菜单列表 |
| noframes - frames |
可选内容，（对于不支持frame的浏览器显示此区块内容 |
| noscript |
可选脚本内容（对于不支持script的浏览器显示此内容） |
| ol |
排序表单 |
| p |
段落 |
| pre |
格式化文本 |
| table |
表格 |
| ul |
非排序列表 |
| 内联元素(inline element) |
HTML标签分类明细 |
| a |
锚点 |
| abbr |
缩写 |
| acronym |
首字 |
| b |
粗体(不推荐) |
| bdo |
bidi override |
| big |
大字体 |
| br |
换行 |
| cite |
引用 |
| code |
计算机代码(在引用源码的时候需要) |
| dfn |
定义字段 |
| em |
强调 |
| font |
字体设定(不推荐) |
| i |
斜体 |
| img |
图片 |
| input |
输入框 |
| kbd |
定义键盘文本 |
| label |
表格标签 |
| q |
短引用 |
| s |
中划线(不推荐) |
| samp |
定义范例计算机代码 |
| select |
项目选择 |
| small |
小字体文本 |
| span |
常用内联容器，定义文本内区块 |
| strike |
中划线 |
| strong |
粗体强调 |
| sub |
下标 |
| sup |
上标 |
| textarea |
多行文本输入框 |
| tt |
电传文本 |
| u |
下划线 |
| var |
定义变量 |
第一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人博客</title>
<!--<link rel="stylesheet" type="text/css" href="css/作业.css" />-->
</head>
<body>
<center>
<a href="#lala" name="lulu">到底部</a>
<a href="#ct1">到达歌词</a>
<h1>这里是我的个人博客</h1>
<hr />
<h3>等你下课</h3>
<a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin" target="_blank">周杰伦</a>
<h4>歌曲歌词</h4>
<p ><a name="ct1"></a>
Jay：你住的 巷子里 我租了一间公寓<br />
为了想与你不期而遇<br />
高中三年 我为什么 为什么不好好读书<br />
没考上跟你一样的大学<br />
我找了份工作 离你宿舍很近<br />
当我开始学会做蛋饼 才发现你 不吃早餐<br />
喔 你又擦肩而过<br />
你耳机听什么 能不能告诉我<br />
<img src="image/1314.jpg"/><br />
合：躺在你学校的操场看星空<br />
教室里的灯还亮着你没走<br />
记得 我写给你的情书<br />
都什么年代了<br />
到现在我还在写着<br />
总有一天总有一年会发现<br />
有人默默的陪在你的身边<br />
也许 我不该在你的世界<br />
当你收到情书<br />
也代表我已经走远<br />
<img src="image/1213.jpg"/>
</p>
<hr />
<p>友情链接：<a href="https://baike.baidu.com/item/%E6%96%B9%E6%96%87%E5%B1%B1/135622?fr=aladdin" target="_blank">方文山</a>|<a href="https://baike.baidu.com/item/%E6%9D%B0%E5%A8%81%E5%B0%94%E9%9F%B3%E4%B9%90%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/5929467?fr=aladdin" target="_blank">杰威尔 音乐有限公司</a>|<a href="https://baike.baidu.com/item/%E6%98%86%E5%87%8C/1545451?fr=aladdin" target="_blank">昆凌</a>
</p>
<a href="#lulu" name="lala">到顶部</a> <a href="https://www.so.com/?src=hao_360so" target="_blank">联系我们</a>
©独有版权，违法必究！
</center>
</body>
</html>
效果图
捕获1.PNG
捕获2.PNG
网友评论