HTML5基础入门

.标签

1.1meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
标题元素是块元素
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
其他标签

p标签表示页面中的一个段落
<p>在p标签中的内容就表示一个段落</p>
em标签用于表示语音语调的一个加重
<p>今天天气<em>真</em>不错！</p>
strong表示强调，重要内容！
<p>你今天必须要<strong>完成作业</strong>！</p>
blockquote 表示一个长引用
<blockquote>
这句话我是从来没有说过的！
</blockquote>
q表示一个短引用
子曰<q>学而时习之，乐呵乐呵！</q>
br标签表示页面中的换行
<br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时使用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 行内元素，没有任何的语义，一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表，使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表，使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript：; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript：;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

src 指定要引入的网页的路径
frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

controls 是否允许用户控制播放
autoplay 音频文件是否自动播放

如果设置了autoplay 则音乐在打开页面时会自动播放

loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个td就有几个单元格
rowspan 纵向的合并单元格
colspan 横向的合并单元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

border-spacing: 指定边框之间的距离

border-spacing: 0px;

border-collapse: collapse; 设置边框的合并

border-collapse: collapse;

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

3.表单（form）

使用form标签来创建一个表单
action 表单要提交的服务器的地址
数据要提交到服务器中，必须要为元素指定一个name属性值

<input type="text" name="username">

单选按钮

像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
checked 可以将单选按钮设置为默认选中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多选框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>

提交按钮

<input type="submit" value="注册">

属性

autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

6.文档声明

<!doctype html>

TML5 简介

HTML5 示例

实例

<!DOCTYPE html>

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

什么是 HTML5？

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

注释：在下面的章节中，您将学到如何“帮助”老版本的浏览器处理 HTML5。

HTML5中的新内容？

HTML5 的新的文档类型（DOCTYPE）声明非常简单：

<!DOCTYPE html>

The new character encoding (charset) declaration is also very simple:

HTML5 实例：

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

Content of the document......

</body>

</html>

注释：HTML5 中默认的字符编码是 UTF-8。

HTML5 -新的属性语法

HTML5 标准允许 4 中不同的属性语法。

本例演示在 <input> 标签中使用的不同语法：

类型	示例
Empty	<input type="text" value="John Doe" disabled>
Unquoted	<input type="text" value=John Doe>
Double-quoted	<input type="text" value="John Doe">
Single-quoted	<input type="text" value='John Doe'>

在 HTML5 标准中，根据对属性的需求，可能会用到所有 4 种语法。

HTML5 -新特性

HTML5 的一些最有趣的新特性：

·新的语义元素，比如 <header>, <footer>, <article>, and <section>。

·新的表单控件，比如数字、日期、时间、日历和滑块。

·强大的图像支持（借由 <canvas> 和 <svg>）

·强大的多媒体支持（借由 <video> 和 <audio>）

·强大的新 API，比如用本地存储取代 cookie。

HTML5 -被删元素

以下 HTML 4.01 元素已从 HTML5 中删除：

·<acronym>

·<applet>

·<basefont>

·<big>

·<center>

·<dir>

·<font>

·<frame>

·<frameset>

·<noframes>

·<strike>

·<tt>

TML针对不同的内容有不同类型的标记，这些标记是HTML5文档的基础，你知道有哪些吗？

1.单标记和双标记

为了方便学习和理解，通常将HTML5标记分为两大类，即双标记和单标记。

a.双标记：

双标记双标记也称为体标记，分为开始标记和结束标记，其基本语法为：

<标记名>内容</标记名>

如：

<p>我是一个双标记</p>

b.单标记：

单标记也称空标记，是指用一个标记就可以完整的描述某个功能，其基本语法为：

<标记名/>

如：

<hr/>

上面hr标记表示一条水平线，后面会提到

2.注释标记

注释标记是HTML的一种特殊标记，它是一段便于阅读理解的不需要在页面中显示的注释文字。其基本语法格式为：

<!-- 注释语句 -->

如：

<p>这是一段文本</p>   <!-- 这是注释文本，不会在页面中显示 -->

上图即为浏览器中的结果。

3.标记的属性

HTML标记的默认样式是无法满足页面开发的需求的，如果想要为某段文本设置特定的样式，就需要用到HTML标记的属性了，其基本语法格式为：

<标记名属性1="属性值1" 属性2="属性值2" 属性3="属性值3"...>内容</标记名>

下面以一个例子来展示：

网页第一行是一个二级居中的标题，第二行是一个局中的段落，第三行是一个大小为2px，颜色为灰色的水平线，第四行是一段正常的段落，部分词语被加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 align="center">我是居中的二级标题</h2> 
    <p align="center">我是居中的段落</p> 
    <hr size="2" color="#ccc"/>
    <p>我是一个正常的段落，这是<strong>关键字</strong>，其他的都是正常内容。<p/>
</body>
</html>

效果如图所示：

多学一招（键值对）：

“键值对”简单地说即为对“属性”设置“值”

例如：

color = "red";width:"200px";

上面的color和width就相当于属性1和属性2，red和200px就是对应的属性值1和属性值2，如果顺序出错，是没有效果的

总结：

在HTML开始标记中，可以通过属性=“属性值”的方式为标记添加属性，其中“属性”和“属性值”是以“键值对”的形式出现的

4.HTML5文档头部相关标记（拓展）

1.title

一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。

基本语法格式：

<title>网页标题名称</title>

2.meta

meta定义页面元信息：

设置网页关键字》》》<meta name=”keywords” content=”JAVA、php”/>

设置网页描述》》》<meta name=”description” content=”IT培训教育”/>

设置网页作者》》》<meta name=”author” content=”传智播客”/>

设置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>

设置页面自动刷新与跳转》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>

3.link

基本语法格式：

属性名	常用属性值	描述
href	URL	指定引用外部文档
rel	stylesheet	指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表
type	text/css	引用外部文档的类型为CSS
type	text/javascript	引用外部文档的类型为JavaScript脚本

4.style

基本语法格式：

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式

在线咨询

上一篇：快速了解JavaScript文本框操作
下一篇：一键完成，批量转换HTML为PDF格式的实例解析，提升办公效率办法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5基础入门

.标签

1.1meta标签

1.2title标签

1.3标题

1.4布局标签

1.5列表

1.1.1分类

1.1.1.1有序列表

1.1.1.2 无序列表

1.1.1.3定义列表

1.1.1.4列表之间可以互相嵌套

1.6超链接

1.6.1 作用

1.6.2 定义

1.6.3 属性

1.6.3.1属性1：href

1.6.3.2 属性2：target

1.6.4其他

1.7图片标签

1.8内联框架

1.8 音视频标签

1.8.1音频

1.8.1.1 属性

1.8.2视频

2.表格table

长表格

表格样式

3.表单（form）

属性

4.注释

5.属性

6.文档声明

TML针对不同的内容有不同类型的标记，这些标记是HTML5文档的基础，你知道有哪些吗？

1.单标记和双标记

2.注释标记

3.标记的属性

4.HTML5文档头部相关标记（拓展）

您的项目需求