【前端学习】HTML基础

朴灿烈づ我的快乐病毒、 2023-07-23 07:58 1阅读 0赞

## HTML简介 ##

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

### HTML基础 ###

1.  标题，HTML 标题（Heading）是通过`<h1> - <h6>` 标签来定义的.
2.  段落，HTML 段落是通过标签 `<p>` 来定义的.
3.  链接，HTML 链接是通过标签 `<a>` 来定义的.  
    （1）href属性定义链接地址  
    （2） target 属性定义被链接的文档在何处显示

1.  图像，HTML 图像是通过标签 `<img>` 来定义的.  
    （1）alt 属性用来为图像定义一串预备的可替换的文本。  
    （2）height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

1.  头部， 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: `<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.`

*  `<title>` 标签定义了不同文档的标题
 *  `<base>` 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

*  `<link>` 标签定义了文档与外部资源之间的关系，常用于链接到样式表:

*  `<style>` 标签定义了HTML文档的样式文件引用地址.

*  `<meta>` 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒钟刷新当前页面:

*  `<script>`标签用于加载脚本文件，如： JavaScript

1.  表格，表格由 `<table>` 标签来定义，一般分为页眉 `<thead>`、主体 `<tbody>`、和页脚 `<tfoot>` 三部分。

*  `<table>` 定义表格
 *  `<th>` 定义表格的表头
 *  `<tr>` 定义表格的行
 *  `<td>` 定义表格单元
 *  `<caption>` 定义表格标题
 *  `<colgroup>` 定义表格列的组
 *  `<col>` 定义用于表格列的属性
 *  `<thead>` 定义表格的页眉
 *  `<tbody>` 定义表格的主体
 *  `<tfoot>` 定义表格的页脚

1.  列表, HTML 支持有序、无序和定义列表:

*  `<ol>` 定义有序列表
 *  `<ul>` 定义无序列表
 *  `<li>` 定义列表项
 *  `<dl>` 定义列表
 *  `<dt>` 自定义列表项目
 *  `<dd>` 定义自定列表项的描述

1.  区块元素，大多数 HTML 元素被定义为块级元素或内联元素。

*  块级元素在浏览器显示时，通常会以新行来开始（和结束），实例: `<h1>, <p>, <ul>, <table>`
 *  内联元素在显示时通常不会以新行开始，实例: `<b>, <td>, <a>, <img>`
 *  `<div>` 元素是块级元素，它可用于组合其他 HTML 元素的容器,可用于对大的内容块设置样式属性
 *  元素是内联元素，可用作文本的容器，CSS 一同使用时，可用于为部分文本设置样式属性

1.  表单，使用标签`<form>`表示表单，表单元素允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

*  文本

*  密码

*  单选按钮（name属性值一定要相同）

<input type="radio" name="sex" value="male">Male
    <input type="radio" name="sex" value="female">Female

*  复选框

<input type="checkbox" name="vehicle" value="Bike">I have a bike
    <input type="checkbox" name="vehicle" value="Car">I have a car

*  提交

*  重置

1.  iframe 框架，使用标签 来实现一个 HTML 文档中显示子页面，也可将其设置为链接的显示容器。

//定义iframe标签的高度与宽度
    <iframe src="demo.html" width="200" height="200"></iframe>
    //移除边框
    <iframe src="demo.html" frameborder="0"></iframe>
    //显示一个目标链接的页面
    <p><a href="http://www.baidu.com" target="iframe_a">RUNOOB.COM</a></p>

1.  颜色

*  颜色名称，如：`<p style = "background-color:gray">段落</p>`
 *  rgb()，如：`<p style = "background-color:rgb(100,0,100)">段落</p>`
 *  rgba()，如：`<p style = "background-color:rgba(100,0,100,0.5)">段落</p>`
 *  十六进制，如：`<p style = "background-color:#FF0088">段落</p>`

1.  其他标签

*  水平线，HTMl 使用 `<hr>` 插入水平线。
 *  换行，HTML 使用 `<br>` 进行换行，否则源码中的多行会被解析为一个空格。
 *  注释，HTML 使用 `` 进行注释。
 *  粗体，HTML 使用 `<b>、<strong>` 将文本粗体显示。
 *  斜体，HTML 使用 `<i>、<em>` 将文本斜体显示。
 *  下标，HTML 使用 `<sub>` 显示下标。
 *  上标，HTML 使用 `<sup>` 显示上标。

### HTML5 ###

##### HTML5简介 #####

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

##### HTML5内容 #####

1.  新增的结构标签

*  `<nav></nav>`\--------导航
 *  `<section></section>`\---------主体内容
 *  `<header></header>`\---------头部
 *  `<footer></footer>`\----------尾部
 *  `<article></article>`\-----------文章
 *  `<aside></aside>`\---------侧边栏

1.  视频，HTML5 提供了展示视频的标准。

*  controls 属性供添加播放、暂停和音量控件
 *  width、height属性用来控制播放器的宽度和高度
 *  type 属性是视频的格式，其属性值有video/ogg，video/mp4，video/webm
 *  autoplay 属性，如果出现该属性，则视频在就绪后马上播放

1.  音频，HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

*  control 属性供添加播放、暂停和音量控件
 *  autoplay 属性，如果出现该属性，则视频在就绪后马上播放
 *  type 属性是音频的格式，其属性值有audio/ogg，audio/mpeg

1.  新增input类型

*  e-mail 地址----email
 *  URL 地址----url
 *  搜索域----search
 *  颜色选择器----color
 *  数值----number

<input type="number" name="points" min="1" max="10"  step="3" value="1"/>
    //max:规定允许的最大值
    //min:规定允许的最小值
    //step:规定合法的数字间隔
    //value:规定默认值

*  数字范围----range

<input type="range" name="points" min="1" max="10"  step="3" value="1"/>
    //max:规定允许的最大值
    //min:规定允许的最小值
    //step:规定合法的数字间隔
    //value:规定默认值

*  日期选择器----Date pickers

<input type="date" name="user_date" />
    //HTML5多个可供选取日期和时间的新输入类型：
    //date - 选取日、月、年
    //month - 选取月、年
    //week - 选取周和年
    //time - 选取时间（小时和分钟）
    //datetime - 选取时间、日、月、年（UTC 时间）
    //datetime-local - 选取时间、日、月、年（本地时间）

1.  新增表单元素

*  datalist 元素规定输入域的选项列表，如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

*  keygen 元素是密钥对生成器，提供了一种验证用户的可靠方法。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

<form action="demo_form.asp" method="get">
      Username: <input type="text" name="usr_name" />
      Encryption: <keygen name="security" />
      <input type="submit" />
    </form>

*  output 元素用于不同类型的输出，比如计算或脚本输出：

6.表单属性

*  autocomplete 属性规定 form 或 input 域应该拥有自动完成功能，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
 *  autofocus 属性规定在页面加载时，域自动地获得焦点。

*  form 属性规定输入域所属的一个或多个表单，form 属性必须引用所属表单的 id。
 *  multiple 属性规定输入域中可选择多个值，适用于以下类型的 标签：email 和 file

*  placeholder 属性提供一种提示（hint），描述输入域所期待的值，适用于以下标签：text, search, url, telephone, email 以及 password。提示会在输入域为空时显示出现，会在输入域获得焦点时消失。
 *  required 属性规定必须在提交之前填写输入域（不能为空）。