HTML5基础

问题描述

HTML是什么?

HTML(Hyper Text Markup Language),是一种超文本标记语言,是构成网页的基本语言,在浏览器上运行。

html文档基本结构:

文档声明 html5:

<!DOCTYPE html>

基本结构:

<html> //根标记标签
  <head> //头标记标签
    <meta charset="utf-8">//meta 元数据标签,charset字符设置 字符集  utf-8 万国码
    <title>网页标题</title>
  </head>
  <body>//主体标签
    hello world!
  </body>
</html>

段落:<p></p>

图片:

<img src="" alt="">

src=" " 用来引入图片路径:

1.当html文件 与 图片在同一目录下,src引用的路径可以直接写成图片名称

      04.html中引用pic.jpeg路径如下图:

<img src="pic.jpeg">
或 
<img src="./pic.jpeg>

./表示当前目录

2.当html文件 与 图片所在的文件夹 在同一个目录,src的值是 先写图片文件夹名称,在写图片名称  <img src="图片所在的文件夹/图片名字>  或  <img src=" ./图片所在的文件夹/图片名字"

 04图片.html中引用img中的灯泡.jpg路径如下图:

<img src="img/灯泡.jpg">
或
<img src="./img/灯泡.jpg">

3.当html文件所在的文件夹 与 图片 在同一个目录下,src的值 是 先通过   ../跳出当前目录,然后在写图片名称<img src = " ../图片名字">

         05.html中引用1.jpg路径如下图:

<img src="../1.jpg">

4.当html文件所在文件夹 与 图片 所在文件夹 在同一个目录下,src的值 是先通过 ../ 跳出当前目录,然后再写图片文件夹名称,最后写图片名称
<img src=" ../图片所在文件夹名字/图片名字">

    05.html中引用灯泡.jpg路径如下图:

 

<img src="../img/灯泡.jpg">

img标签中也能使用 width=" "(宽度),height=" "(高度),alt=" ",title= " ".

              宽高:   单位px(像素)、%百分比(相对于父元素)

              alt:图片加载失败时的替代文本;

              title:鼠标悬停在照片上显示的文字。

路径:相对路径:参照自身的位置,而定义的路径,叫相对路径;绝对路径:照片在计算机的本地地址。

元素分类:
        块元素
        <p></p>
        
        内联元素(行内):
        行内元素 不能设置大小
        
        行内块元素
        <img src="" alt="">  能设置大小 能一行排列
        既有块元素的特征 又有行内元素的特征

标题:<hn></hn>(n取值为1~6)

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

网页显示为:

 各标题:相同点:都是块元素,都加粗

                不同点:字号大小 依次减小

换行:<br>  break 换行标记,用于段落内部的换行.

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)