HTML5语言

1、HTML简介

1.1 HTML简介

HTML：(HTML HyperText Markup Language )

HTML的全称为超文本标记语言，是一种结构简单的计算机语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的一种应用。HTML包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML标签组成的描述性文本，HTML内容可以包含：文字，图形、动画、声音、表格、链接等。HTML能独立于各种操作系统平台（如：Unix、Linux、Windows等），它只需要一个浏览器就能够完成解析、渲染和显示。

1.2 常用主流浏览器

第一节：HTML5基础标记及属性 - 图1

  • 谷歌浏览器(Chrome)： 浏览器使用配额最高的一款浏览器。2020年9月PC端浏览器占有份额58%以上。拥有迄今为止速度快的布局引擎BLink。并且对HTML5的支持最友好，且产品生态圈比较完整。

  • 基于Chromium浏览器二次开发版：

    • Chromium浏览器是Chrome的工程版或测试版。布局引擎同样是BLink
    • Opera浏览器、新版Edge浏览器、360急速浏览器、猎豹浏览器、QQ浏览器等等都属于此列。
  • 火狐浏览器(firefox)：小巧方便快捷，对HTML5支持也很好。其布局引擎是Gecko。2020年9月PC端浏览器占有份额为3.82%。
  • 苹果浏览器（safari）：苹果系统下的浏览器，其布局引擎是Webkit。2020年9月PC端浏览器占有份额为3.13%。

1.3 前端常用开发工具

SoftLogo 软件介绍
第一节：HTML5基础标记及属性 - 图2 Visual Studio Code(简称 VSCode ) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……
下载地址：https://code.visualstudio.com/
SoftLogo 软件介绍
第一节：HTML5基础标记及属性 - 图3 HBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
下载地址：https://www.dcloud.io/hbuilderx.html

1.4 HTML的三个阶段

  • 第一阶段：

    • HTML1.0~HTML4.0
    • 特点：规范不严谨，很多规范形同虚设。例如：行内元素内部嵌套块级元素；标签名大小写随意等。

  • 第二阶段：

    • XHTML1.0
    • 特点：严格定义语言规范。例如：标签名必须小写；属性值要用引号引起来，且属性名必须有属性值；标签必须结束；标签嵌套要规范（块级元素可以嵌套行内元素，反之则不可以）等。

  • 第三阶段：

    • HTML5.0
    • 特点：鉴于使用者的习惯，解除XHTML中的严格规范；新增了许多的语义化标记和属性；废除了许多标记（大部分是样式标记）；为浏览器新增了许多的API——本地储存、LBS、拖拽等。

HTML基础知识

2.1 基于H5的HTML结构

  1. <!doctype html>
  2. <html>
  3.      <head>
  4.           <meta charset="utf-8" />
  5.           <title></title>
  6.      </head>
  7.      <body>
  8.          <!-- 这里是html注释 -->
  9.          Hello World!
  10.      </body>
  11. </html>

html、head、body、tbody等标签可以不写。

某些标签可以没有结束标记，例如：li、p、dt、dd、optgroup、option、thread、tbody、tr、td、th等。

HTML标签不区分大小写；某些标签的属性可以没有属性值；属性值可以不用引号引起来。

2.2 HTML标签的分类

  • 标签大体分为：

    • 开放式标记，例如：img、br、input等。
      1. <img src="a.jpg">
      2. <img src="a.jpg" />
  • 封闭式标记，例如：div、ul、p等
    1. <div>
    2. <p>世间安得双全法，不负如来不负卿！</p>
    3. </div>

2.2 head部分的HTML标签及属性

meta标签

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词、简短描述），或其他 web 服务（页面的作者）。

  1. <meta charset="utf-8" />                                            
  2. <!-- 设置页面字符编码 -->
  3. <meta name="keywords" content="关键词1,关键词2,..." />            
  4. <!--设置页面关键字-->
  5. <meta name="description" content="描述内容" />                       
  6. <!--设置页面简短描述-->
  7. <meta http-equiv="refresh" content="间隔时间秒数;url=" />             
  8. <!--设置页面跳转间隔时间-->

标题标签

  1. <title>我的第一个html文件</title>

2.3 body部分的HTML标签及属性

通用属性

  • id：标签的id名称
  • class：标签的类名
  • title：标签的标题，在浏览器中，鼠标在标签上悬停时会出现。
  • style：标签的CSS样式
  • tabindex：按下tab键的时候的选择顺序

常用HTML标签（标签在JavaScript中被称为元素）

标题标签（headings）
  1. <h1>这是一级标题标签</h1>
  2. <h2>这是二级标题标签</h2>
  3. <h3>这是三级标题标签</h3>
  4. <h4>这是四级标题标签</h4>
  5. <h5>这是五级标题标签</h5>
  6. <h6>这是六级标题标签</h6>

段落标签
  1. <p>这是一个段落标签</p>

列表标签

无序列表
  1. <ul type="circle">
  2.     <li>HTML语言</li>
  3.     <li>CSS样式表</li>
  4.     <li>javaScript语言</li>
  5. </ul>
  6. <!--type属性的取值可以是：默认disc实心圆；circle空心圆；square实心方块-->

有序列表
  1. <ol start="3" reversed type="1">
  2.     <li>HTML语言</li>
  3.     <li>CSS样式表</li>
  4.     <li>javaScript语言</li>
  5. </ol>
  6. <!--type属性的取值可以是：默认1数字排序；A大写字母排序；a小写字母排序;I大写罗马字母排序;i小写罗马字母排序-->

新闻列表（叙述列表、定义列表）
  1. <dl>
  2.     <dt>HTML</dt>
  3.     <dd>制作网页的标准语言，控制网页的结构</dd>
  4.     <dt>CSS</dt>
  5.     <dd>层叠样式表，控制网页的样式</dd>
  6.     <dt>JavaScript</dt>
  7.     <dd>脚本语言，控制网页的行为</dd>
  8. </dl>

容器标签
  1. <div>
  2.     我是一个div元素
  3. </div>

图片标签
  1. <img src="img/qiu.jpg" alt="秋天的景色" title="香山的枫叶红了">

超链接标签
  1. <a href="" target="_blank">我是链接</a>
  3. <a href="#first">我是锚点链接</a>
  4. <a name="first" id="first"></a>

链接基准标记
  1. <base href="http://www.neusoft.com/" />
  2. <base target="_blank" />

上标与下标
  1. <p>H<sub>2</sub>O</p>
  2. <p>2<sup>8</sup></p>

文字的修正
  1. <p>天生我<del>财</del><ins>才</ins>必有用</p>

内容引用
  1. <blockquote cite="引用的网络路径">引用内容</blockquote>                    <!--长引用-->
  2. <q cite="引用的网络路径">引用内容</q>                                        <!--短引用-->

内容强调语气
  1. <strong>联想计算机网络公司</strong>
  2. <em>联想计算机网络公司</em>

其它语义标签
  1. <p>今天气温<span>40</span>度</p>                                 <!--表示对一部分文字的单独控制-->
  2. <abbr title="中华人民共和国">PRC</abbr>                        <!--表示内容为缩写-->
  3. <cite>巴黎圣母院</cite>                                         <!--对某个参考文献的引用，比如书籍或者杂志的标题。-->
  6. <pre>
  7.     世间安得双全法，
  8.     不负如来不负卿。
  9. </pre>                                                        <!--直接以录入的样式显示-->

iframe标签
<iframe src="sandbox.htm" frameborder="1" scrolling="auto"></iframe>
<!--frameborder是否显示边框；scrolling是否显示滚动条，值为：yes、no、auto-->

表格标签

表格标签多用于显示表数据。

常见标签展示
<table border="1">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
        <td>这是第一行第一列</td>
        <td>这是第一行第二列</td>
    </tr>
    <tr>
        <td>这是第二行第一列</td>
        <td>这是第二行第二列</td>
    </tr>
</table>

单元格合并

colspan：合并列

rowspan：合并行

<table border="1">
    <tr>
        <td colspan="2">这是第一行第一列</td>
        <td>这是第一行第三列</td>
    </tr>
    <tr>
        <td rowspan="2">这是第二行第一列</td>
        <td>这是第二行第二列</td>
        <td>这是第二行第三列</td>
    </tr>
    <tr>
        <td>这是第三行第二列</td>
        <td>这是第三行第三列</td>
    </tr>
</table>

表格常见属性

border：控制表格粗细，在排版中经常将值设置为0。

cellspacing：单元格边距。内容与单元格的边界之间的距离。

cellpadding：单元格间距。单元格与单元格之间的距离。

表格相关的标签

thead：将包裹的多行设置为表格的头部。整个的thead部分会被显示在表格的最上方。

tbody：将包裹的多行设置为表格主体。若设置了thead和tfoot，那么剩下的部分自动会被设置为tbody。

tfoot：将包裹的多行设置为表格的底部。整个的tfoot部分会被显示在表格的最下方。

表单标签

表单是用户（前端页面）与应用程序（后端服务器）进行交互的工具。

form标签
  • method属性：提交方式：get、post
  • action属性：提交服务器地址
<form action="XXXX" method="get">
   表单控件元素
</form>

input标签和button标签

文本框

<input type="text" value="zhangsan" maxlength="8"/>

密码框

<input type="password"/>

单选按钮

<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女

复选框

<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏

文件域

<input type="file" name="files" />

提交按钮

<input type="submit" value="提交" />
<button type="submit">提交</button>

重置按钮

<input type="reset" value="重置" />
<button type="rest">重置</button>

普通按钮

<input type="button" value="点击我">
<button>点击我</button>

其它表单标签

下拉列表

<select name="nationality">
    <optgroup label="可爱的国家">
        <option value="0" selected="true">中国</option>
    </optgroup>
    <optgroup label='恶心的国家'>
        <option value="1">美国</option>
        <option value="2">英国</option>
    </optgroup>
</select>
<!--select还可选用的属性：multiple允许多选；size加大高度，将下拉菜单变成列表菜单。多选才可以使用-->

多行文本框

<textarea rows="5" cols="30">这里输入个人简介</textarea>

表单中的一些属性

readonly： 不可编辑,但可以选择和复制;值可以传递到后台

disabled： 不能编辑,不能复制,不能选择;值不可以传递到后台

checked： 设置单选按钮和复选按钮的默认选中项

selected： 设置下拉列表option的默认选中项

name：表单元素或元素组的标识符

注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：（这三种写法的效果相同）

  • checked=”true”
  • checked=”checked”
  • checked