认识HTMl5
网页开发工具
可以开发的工具有很多:记事本,Dreamweaver,UltaEdit,Sublime,WebStorm,VS Code(这里推荐用 VS Code,谁用谁知道)
HTML5基本结构
<html>
//声明
<head>
//网页头部
<title>我的第一个网页</title>
//头部部分
</head>
<boby>
我的第一个网页 //主题部分
</body>
</html>
HTML5的优势
跨浏览器,跨平台,新增特性,音频视频等
网页的基本标签
标题标签
标题标签用于定义标题分为6个不同的等级即
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
一级标签的字号最大<h1>
六级标签的字号最小<h6>
如图所示
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
段落标签
在网页制作中常常需要进行分段换行这时我们就可以用到<p> </p>
段落标签
来进行段落的分段(段落标签属于双标签,需要成对出现)
换行标签
在网页制作中我们如果需要手动换行,则需要换行标签<br/>
(单标签)
水平线标签
网页制作中我们若需要进行分隔我们可以用到</hr>
<h1>《静夜思》-不换行</h1>
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
<hr/>
<h1>《静夜思》-换行</h1>
床前明月光,疑是地上霜。<br/>
举头望明月,低头思故乡。<br/>
效果如图所示
《静夜思》-不换行
床前明月光,疑是地上霜。 举头望明月,低头思故乡。《静夜思》-换行
床前明月光,疑是地上霜。举头望明月,低头思故乡。
字体样式标签
网页中有些字体是加粗和倾斜显示的<strong>和<em>
(字体加粗标签和字体倾斜标签)
<strong>《静夜思》</strong><br/>
<hr>
<em>床前明月光,疑是地上霜。</em><br/>
<em>举头望明月,低头思故乡。</em><br/>
效果如图所示
《静夜思》
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
注释标签
格式<!--注释-->
<!-- 这是一首来自李白的古诗 -->
<strong>《静夜思》</strong><br/>
<hr>
<em>床前明月光,疑是地上霜。</em><br/>
<em>举头望明月,低头思故乡。</em><br/>
效果如图所示
《静夜思》
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
(注释内容无法在网页中显示出来)
字符实体
在HTML5中同一个编号代替一个实体字符 HTML5常用的实体符号
空格
>
大于号
<
小于号
"
引号
©
版权符号
如图所示
空格
> 大于号
<小于号
" 引号
© 版权符号
常见的图片格式
常见的图片格式有四种分别是JPG格式,PNG格式 GIF格式,BMP格式
JPG格式:
可以用最少的磁盘空间得到更好的图像质量
PNG格式:
支持透明效果,使图像更贴切的融合
GIF格式:
可实现动态效果
BMP格式:
他可以不作任何变换的保存图像像素域的数据,既不支持文件压缩,所以不适合用于页面开发。
图像的显示方法
<img src="https://i-blog.csdnimg.cn/blog_migrate/0175b5fca452c9526b4dc846845707ef.jpeg" alt="上海鲜花港-郁金香" title="上海鲜花港-郁金香" width="300" height="200" />
<img src="./images/flower.jpg" alt="上海鲜花港-郁金香" title="上海鲜花港-郁金香" width="300" height="200">
如图所示
<>
(注意区分相对路径与绝对路径的区别)
四种href路径
相对路径:
相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
绝对路径:
绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
服务器路径:
服务器发布服务使用的URI/URL,服务器上存储某个文件的文件路径比如F:/aaa/bbb/c.jsp;第二种: url网址访问, 比如:http:localhost:8080/虚拟项目路径/项目资源路径;第三种: 以/开头的路径。
锚点路径:
锚点是网页制作中超级链接的一种,又叫命名锚记,像一个迅速定位器一样,是一种页面内的超级链接,运用相当普遍。
(#号在href中代表是默认当前页面,可以把#换成想跳转的页面。)
锚点的链接使用方法
怎么设置锚点的ID属性?怎么链接锚点?
在要跳转到的位置所在的标签中添加了 id 属性,并为其赋值;
使用<a>
标签设置锚点,href 属性值为 # + id 属性值
超链接的使用
在HTML5中穿件超链接的方法非常简单只需用<a>和</a>
标签并加上要链接的对象即可
<a href="demo.html" target="_blank">超链接的使用</a><br/>
<a href="https://www.baidu.com" target="_self">百度</a>
效果如下:
行内元素和块级元素的定义
块级元素 块级元素(block element)在浏览器中占据整行,并排斥其它元素与其位于同一行。 也就是说,块级元素的宽度是 100%。 常见的块级元素如下表: 2. 行内元素 行内元素又称内联元素(inline block)。 在浏览器中可以与其它行内元素共占一行,只有当多个元素的总宽度大于浏览器的宽度时,才会换行显示。 常见的行内元素如下表: 通过运行结果可以发现,<div> 标签和 <p> 标签分别独占一行,因为它们是块级元素;而 <span> 标签和 <a> 标签在同一行中显示,因为它们是行内元素。 注意,这里我们说的独占一行是指元素在浏览器中的运行效果,并不是在编辑器中独占一行。 在编辑器中,不论怎么书写代码,都不会影响它在浏览器中的运行效果。 3. 元素的嵌套