一、HTML内容
1.HTML简介
1.1 html是用来描述网页的语言,是一种超文本标记语言。
1.2 html使用元素(标签)来描述网页。
1.3 浏览器是对html编码进行”解释和执行“的工具,也就是说html告诉浏览器怎么显示页面,在任意浏览器中按下“F12”,则该界面会显示html的源码(源文件)。
2.W3C标准
2.1 W3C是万维网联盟的缩写,全名(World Wide Web Consortium)
2.2 W3C是一个制定和维护Web开发标准的组织
3.html的文档结构
<!doctype html>
<html lang = "zh-CN">
<head>
<!-- html的头部分,一般用来声明一些信息 -- >
<!-- 用来设置当前页面的源码 -->
<meta charset="UTF-8">
<title>
该标签用于设置网页标题
一个网页只能有一个title标签,如果有多个则取第一个
</title>
</head>
<body>
<!-- html身体部分,一般用户可以看到的内容全部放在这里 -->
</body>
</html>
4.html的标签(元素)
4.1 有些元素无论内容多少,都会独占一行,并且不能与其他元素处于同一行,被称为块级元素;有些元素可以与其他元素处于同一行,被称为行级元素。
4.2 没有结束的标签,被称为单标签;有开始有结束的标签成为容器标签、闭合标签。
5.html的块级标签
5.1 标题元素
<!-- h1字号最大,h6字号最小 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
5.2 段落元素
<!-- p标签里面不嵌套块级标签 -->
<p></p>
5.3 水平线元素
<hr/>
5.4 列表元素
5.4.1 无序列表
<ul>
<li>推荐|分隔号教课程</li>
<li>推荐|分隔号教课程</li>
<li>推荐|分隔号教课程</li>
<li>推荐|分隔号教课程</li>
</ul>
5.4.2 有序列表
<ol>
<li>分隔号教课程</li>
<li>分隔号教课程</li>
<li>分隔号教课程</li>
</ol>
5.4.3 定义列表
<dl>
<dt>蔬菜</dt> <!-- dt表示每个列表项的开始-->
<dd>西红柿</dd>
<dd>生菜</dd>
<dt>水果</dt>
<dd>草莓</dd>
<dd>西瓜</dd>
</dl>
以上三种列表呈现效果如下:
5.5 分区元素(div)
6.html的行级元素
6.1 字体样式元素
<!--
在行级标签里,换行和空格都不起作用,如果需要空格,使用 ;如果需要换行使用<br/>
strong、em、i都表示字体样式标签
-->
<strong>加粗的 <i>行级</i>标签</strong><br/>
<em>用来将文字进行倾斜</em>
<i>表示倾斜,但是版本比较老化,建议使用em表示倾斜</i>
6.2 换行元素(br)
6.3 图像元素
<!--
src属性表示的是图片路径
align属性根据周围的文本来排列图像。
align的三个属性:top、middle、bottom
alt属性制定图像的特定文本(即当图像链接不对应或者获取不到这个图片的时候,显示出来的文字)
title属性表示当鼠标悬停在图片上显示提示信息
-->
<img src="images/头像.jpg" align="middle" alt="我是孙尚香,刘备的妻子" width="300" title="我是孙尚香,刘备之妻">
6.4 超链接
<!--
href属性表示的是超链接需要引入的路径
title属性表示当鼠标悬停在图片上显示提示信息
target属性制定链接在哪个窗口打开
_self:点击链接后,在当前页面中显示新页面
_blank:在新打开的页面中显示链接对应的页面内容
_parent:在父框架中显示
_top:不管嵌套几层容器,始终在顶层容器中显示链接页面
也可以自己进行命名,实现在框架页面中显示指定的链接
-->
<a href="案例五:图像元素.html" title="点我查看孙尚香的照片" target="_parent">
</a>