【前端学习】HTML基础

原创

前端充电宝 2022-07-12 17:34:45 博主文章分类：HTML+CSS ©著作权

文章标签 html ide 表单 文章分类 运维

©著作权归作者所有：来自51CTO博客作者前端充电宝的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML简介

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

HTML基础

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

<a href="https://www.baidu.com" target="_blank">百度</a>

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

<img src="/images/logo.png" width="258" height="39" alt="some_text"/>

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

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

<base href="http://www.runoob.com/images/" target="_blank">

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

<link rel="stylesheet" type="text/css" href="mystyle.css">

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

<style type="text/css"></style>

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

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

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

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

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

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

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

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

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

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

文本

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

密码

<input type="password" name="pwd">

单选按钮（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

提交

<input type="submit" value="Submit">

重置

<input type="reset" name="button" id="button" value="重置">

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>

颜色

颜色名称，如：<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>

其他标签

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

HTML5

HTML5简介

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

HTML5内容

新增的结构标签

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

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

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

<video src="movie.mp4" controls="controls" width="320" height="240" >
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.mp4" type="video/mp4">
 </video>

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

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

<audio src="song.mp3" controls="controls" type="audio/mpeg">
   <source src="song.ogg" type="audio/ogg">
   <source src="song.mp3" type="audio/mpeg">
</audio>

新增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 - 选取时间、日、月、年（本地时间）

新增表单元素

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

<input type="url" list="url_list" name="link" />
  <datalist id="url_list">
      <option label="baidu" value="http://www.baiducom" />
      <option label="Google" value="http://www.google.com" />
  </datalist>

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

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

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

<output id="result" onforminput="resCalc()"></output>

6.表单属性

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

<input type="text" name="user_name"  autofocus="autofocus" />

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

<input type="file" name="img" multiple="multiple" />

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