Web前端----HTML5(一)

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单。

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

HTML 图像

HTML 图像是通过标签 <img> 来定义的.需要注意的是:

1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下:

<img src="file:///f:/*.jpg" width="300" height="120"/>

2、*.html 文件跟 *.jpg 图片在相同目录下:

<img src="*.jpg" width="300" height="120"/>

3、*.html 文件跟 *.jpg 图片在不同目录下:

a、图片 *.jpgimage 文件夹中,*.html 跟 image 在同一目录下:

<img src="image/*.jpg/"width="300" height="120"/>

b、图片 *.jpgimage 文件夹中,*.htmlconnage 文件夹中,imageconnage 在同一目录下:

<img src="../image/*.jpg/"width="300" height="120"/>

4、如果图片来源于网络,那么写绝对路径:

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

HTML 元素

开始标签 * 元素内容 结束标签 *
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行

*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

    嵌套的 HTML 元素

    大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

    HTML 文档由相互嵌套的 HTML 元素构成。

    不要忘记结束标签

    即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

    <p>这是一个段落
    <p>这是一个段落

    以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

    但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。


    HTML 空元素

    没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

    <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

    在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

    在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

    即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。


    HTML 提示:使用小写标签

    HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

    菜鸟教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

    HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"
    属性 描述
    class 为html元素定义一个或多个类名(classname)(类名从样式文件引入)
    id 定义元素的唯一id
    style 规定元素的行内样式(inline style)
    title 描述了元素的额外信息 (作为工具条使用)

HTML 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释写法如下:

<!-- 这是一个注释 -->

 

上一篇:主页home布局,header布局,aside菜单栏布局,通过接口获取api数据--确保拥有权限$$


下一篇:wss