一.HTML概述
1.html是什么?
超文本标记语言
1.超文本 超链接形式,将各种不同空间的文字信息组织在一起的网状文本。即图片,视频等形式。
2.标记语言 标签 用标签标注网页内容,浏览器在运行网页时,就可以根据标注显示
2.html做什么?
制作网页
二.HTML基本语句
<!-- 用 ctrl+/ 进行标注
声明html
声明html语言版本为html5 告诉浏览器HTML5的标准运行
-->
<!DOCTYPE html>
<!-- 网页中的所有内容必须写在标签内,网页的根元素 -->
<html>
<!-- 网页头,可以设置网页内容,添加标题 -->
<head>
<!-- 设置网页字符集编码
各个字符编码的含义:
gb2312:代表国家标注的2312条,不包含繁体;
gbk:国家标注扩充版,增加了繁体;
unicode:万国码;
utf-8:unicode的升级版.-->
<meta charset="utf-8" />
<!-- 这些信息是提供给搜索引擎 了解 -->
<meta name="keywords" content="手机,家电" />
<meta name="description" content="免费 Web & 编程 教程" />
<meta name="author" content="zhu" />
<!-- 为标题添加图标 href=“图标地址” rel=“说明文件类型” -->
<link href="img/baidu.ico" rel="icon"/>
<!-- 网页标题 -->
<title>百度一下,还不知道</title>
</head>
<!-- 网页的身体 网页中的内容都写入body中 -->
<!--
属性语法:
属性格式:属性名=“属性值”
位置:写在开始标题
数量:多个-->
<body text="red" bgcolor="aquamarine">
<!-- 标签分类
<开始>修饰的内容</结束> 闭合标签(双标签)
<link href="img/baidu.ico" rel="icon"/> 自闭合标签单标签)
拓展:优先级=权重
-->
这里面写内容、插图片、插视频、插音频
</body>
</html>
页面如图所示
1.标题标签
# 一.HTML概述
## 1.html是什么?
超文本标记语言
1.超文本 超链接形式,将各种不同空间的文字信息组织在一起的网状文本。即图片,视频等形式。
2.标记语言 标签 用标签标注网页内容,浏览器在运行网页时,就可以根据标注显示
## 2.html做什么?
制作网页
# 二.HTML基本语句
2.段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>凡哥凡哥,你是一哥</title>
</head>
<body>
<!--
p 标签表示一个段落,占一行;段落与段落之间会有一定间隔
align="center"居中
style="text-indent:2em"首行缩进两个字
代码中文字进行多个空格,在浏览器中只显示一个空格,且首行缩进不能用
空格进行
<br> 换行标签
-->
<p style="text-indent: 2em;">
不要让心太累,不要追想太多已经不属于自己的人和事。<br>
你我所走过的每一个地方,每一个人,也许都将成为驿站、成为过客。
<br>一向喜欢追忆,喜欢回顾,喜欢不忘记,如今却发现,
刻在心里的那些东西,早已在他们的时间里化成遗忘。
</p>
<p align="right">
王一帆是个 可爱的男娃吗
王一帆是个可爱的男娃吗
王一帆是个可爱的男娃吗
不是的,谢谢
</p>
<!--
  空格标签
< 小于号
> 大于号
© 版权
&trade 商标
® 注册商标-->
©
™
®
<q >
</body>
</html>
3.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
有序序列
<!--
由两组标签组成 ol li 列表项
列表项前面会自动生成序号
type="I"指定序号类型 1,a,A,I,i -->
<ol>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
无序列表
<!-- type="disc(默认),square,circle" -->
<ul type="disc">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ul>
</body>
</html>
4.超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
超链接标签 a
连接到网络上的另一个指定的网络资源
href="" 超文本引用
target="_self"从当前网页打开;target="_blank"打开另一个网页-->
<a href="baidu.html">百度</a>
<a href="http//:baidu.com" target="_blank">百度</a>
<a href="http//:qq.com" target="_self">腾讯</a>
</body>
</html>
5.图标标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
img 标签
src="图片地址" 引用项目中一个图片
alt="这是hao123"图片不能正常显示的提示
title="这是好123"鼠标移动到图片上的提示信息-->
<img src="img/hao123.png" width="230" height="100" border="1"
alt="这是hao123" title="这是hao12345"/>
</body>
</html>