HTML5基础

什么是HTML?

Hyper Text Markup Language(超文本标记语言)

超文本包括:文字、图片、音频、视频、动画等

HTML基本结构

<html>
<head>
     <title>我的第一个网页</title>
</head>
<body>
     我的第一个网页
</body>
</html>

< body>、</body>等成对的标签,分别叫开放标签和闭合标签 单独呈现的标签(空元素),如 <hr/> ;意为用 / 来关闭空元素

DOCTYPE声明

<!DOCTYPE html>    // 告诉浏览器使用什么规范

<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

<title>标签:页面标题

<meta>标签:

<meta charset="UTF-8" />

<meta name="keywords" content="北大青鸟,IT培训" />

<meta name="description" content="北大青鸟是国内最大的……" />

标题标签:

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

段落标签:

<p>…</p>

<h1>北京欢迎你</h1>
<p>北京欢迎你,有梦想谁都了不起!</p>
<p>有勇气就会有奇迹。</p>

换行标签 :<br/>

<h1>北京欢迎你</h1>
<p>
  北京欢迎你,有梦想谁都了不起!<br />
  有勇气就会有奇迹。<br />
  北京欢迎你,为你开天辟地<br />
  ……
</p>

水平线标签: <hr/>

<h1>北京欢迎你</h1>
<hr/>
<p>
  北京欢迎你,有梦想谁都了不起!<br />
  有勇气就会有奇迹。<br />
  北京欢迎你,为你开天辟地<br />
  ……
</p>

字体样式标签 加粗:<strong>…</strong> 斜体:<em>…</em>

<strong>徐志摩人物简介</strong>
<p>
   <em>1910</em>年入杭州学堂<br/>
   <em>1918</em>年赴美国克拉大学学习银行学<br/>
    ……
</p>

特殊符号:

HTML5基础

 

 图像标签:

语法:

<img src="path" alt="text" title="text" width="x" height="y" />

示例:

<img src="image/hetao.jpg" width="160" height="160"  
     alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>

链接标签:

语法:

<a href="path" target="目标窗口位置">链接文本或图像</a>

示例:

<a  href="detail.html"  target="_blank">姑娘,欢迎降落在这残酷的世界</a>
<a  href="detail.html"  target="_blank">
    <img src="image/img1.png" alt="姑娘,欢迎降落在这残酷的世界"
           title="姑娘,欢迎降落在这残酷的世界" />
</a>

常用的超链接:

页面间链接:从一个页面链接到另外一个页面

锚链接:

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

功能性链接:

电子邮件 QQ MSN...

行内元素和块元素:

块元素 无论内容多少,该元素独占一行(p、h1-h6…)

行内元素 内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)

 

HTML5基础

上一篇:渲染EJS模板会抛出错误this.templateText.replace不是函数


下一篇:2.CSS的三种样式[内联样式,内部样式,外部样式](菜鸟学前端)