HTML基础学习
html是什么?
html是一种超文本标记语言(HyperText Markup Language)
超文本是指页面内可以包含图片、链接、声音,视频等内容,
它属于一种标记语言,用标签来标注网页内容,浏览器在运行网页时,就可以根据标注来显示
我的第一张<b>网页</b>
ctrl+1 ctrl+2 设置标题
```语言名称 选择代码类型
HTML基本语法
<!--
html 注释 ctrl+/
声明 html语言版本为html5 告诉浏览器按照html5的标准运行
-->
<!DOCTYPE html>
<!--
网页中所有的内容都必须写在html标签内
-->
<html>
<!--
网页头,里面可以设置网页内容,还可以添加网页标题
-->
<head>
<!-- 设置网页字符集编码 -->
<meta charset="utf-8" />
<!-- 这些信息时提供给搜素引擎 了解-->
<meta name="keywords" content="手机,家电">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="jim">
<!-- 为标题处添加图标 href="图标地址" rel="说明文件类型" -->
<link href="img/baidu.ico" rel="icon"/>
<title>百度一下,你就知道</title><!--网页标题-->
</head>
<!-- 网页的身体 网页中的内容都写在body中 -->
<body>
网页中的内容 都写在body中
</body>
</html>
标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
标题标签
<!---
h1...h6一个占一行
<b>标签标示加粗文字
<i>标签标示文字斜体--->
<h1 align="center">000一级标签</h1>
<h2 align="right">000二级标签</h2>
<h3>000三级标签</h3>
</body>
</html>
标题标签顾名思义,就是标题,由H1 到 H6 标签用于指定不同级别的标题
<H#> … </H#>
#=1, 2, 3, 4, 5, 6
(可在语句中加入 align=“center"或者"left”"right"使标题居中或居左居右
b标签标示的文字会加粗
i标签标示的文字会变为斜体)
段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body text="red" bgcolor="aqua">
<!---p标签表示一个段落,占一行;段落与段落之间会有一定间隔
style="text-indent:2em"首行缩进两个字
代码中文字进行多个空格,在浏览器中只会显示一个空格,且首行缩进不能使用
<br/>换行标签
<hr>分割线标签--->
<p align="left">
德玛 西亚无可匹敌,德玛 西亚无可匹敌<br />
德玛 西亚无可匹敌,德玛 西亚无可匹敌<br />
德玛 西亚无可匹敌,德玛 西亚无可匹敌
</p>
<p align="center">
德玛西亚无可匹敌 德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚无可匹敌德玛西亚
</p>
</body>
</html>
<!--特殊符号转义 小于号:< < less than 大于号 > > greater than
空格--- 
注册商标---® register
版权---© copyright
商标&trade tradeemark
-->
p标签为段落标签,换行标签中的文字默认会独占一行，并且段与段之间会有一个间距。br标签为换行标签,且为自闭合标签,br标签只是简单的开始新的一行,不会像段落一样有上下间距.
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
有序列表
<!---列表项会自动生成序号--->
<ol type="a"> <!---有序列表--->
<li>德玛西亚</li>
<li>德玛西亚</li>
<li>德玛西亚</li>
</ol>
<!---type="disc(默认为disc),square,circle"--->
无序列表
<ul type="disc">
<li>德玛西亚</li>
<li>德玛西亚</li>
<li>德玛西亚</li>
</ul>
</body>
</html>
ol标签为有序列表,li标签为列表项,type属性:1,a,A,i等
ul标签为无序列表 li列表选项 type属性： circle,disc,square
超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- img标签 src="图片地址"引用项目中的一个图片
href=""超文本引用
target="_blank"从其他网页打开该超链接
target="_self"从当前网页打开该超链接-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.qq.com" target="_self">腾讯</a>
</body>
</html>
<!--超链接 <a></a>
连接到网络上另一个指定的网页资源-->
简单的说,HTML 使用超级链接与网络上的另一个文档相连，通过连接来访问其他网页资源。
图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../img/libai.jpg" >
<img src="../img/hao123.png" width="1000" height="500" border="0" alt="hao123" title="hao12345678910" ><!---图片标签--->
</body>
</html>
<!-- img标签 src="图片地址"引用项目中的一个图片
alt="这是hao123"图片不能正常显示时提示
title="这是hao12345678910"鼠标移动到标签上提示信息-->
图片标签语句中, src=“图片地址"表示引用项目中的一个图片, width=”“表示图像的宽度,height=”“图像的高度,border=”“图像边框 alt=”“图片不能显示时对图片的描述,title=”"对图片的注释.
图像和超链接的联合应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../img/hao123.png" width="1000" height="500" border="0" alt="hao123" title="hao12345678910" >
<a href="http://www.hao123.com">
<img src="../img/hao123.png" width="1000" height="500" border="0" alt="hao123" title="hao12345678910" >
</a><!--超链接-->
</body>
</html>
<!-- img标签 src="图片地址"引用项目中的一个图片
alt="这是hao123"图片不能正常显示时提示
title="这是hao12345678910"鼠标移动到标签上提示信息--
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
