编程技术

Document

HTML基础大全

HTML基础大全

HTML基础

HTML

HTML 是什么：
HTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源。所有 HTML 都是纯文本，这意味着它不是编译的，可以由人类阅读。HTML文件的文件扩展名为.htm或.html。

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

网页组成元素包括：文字、图片、链接、视频、音频等

定义

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

HTML的基本模板

<!DOCTYPE html>                      <!--文档类型-->
<html lang="en">                       		<!--根标签-->
<head>                                  		<!--网页头部-->
    <meta charset="UTF-8">              <!--国际编码 UTF-8-->
    <title>网页标题</title>               <!--网页标题-->
</head>
<body>                                   		<!--网页主体  可视化区域-->
	网页内容
</body>
</html>

HTML基本结构

其中是文档类型用于告诉使用的html版本 这里使用的是html5版本

不是一个标签(没有结束符)而是一种声明 文字的显示形式(可以不写)：中文lang="zh"/英文lang="en" 表示使用的字符集 【编码方式】（一般为UTF-8或者GBK） 是根标签 表示的是整个网页 中必须嵌套头标签以及主体标签 为标题标签，代表了网页的名字 主体标签中的内容会显示在网页中

知识点一 常用的标签

介绍

HTML标签：

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
由尖括号包裹单词构成
HTML标签的大小写无关的，例如“主体”跟表示的意思是一样的，推荐使用小写。
标签可以嵌套，但不能交叉嵌套

标签分类：

  • 双标签：<标签名></标签名>
  • 单标签：<标签名 />
    其中 / 代表了关闭符号，单标签无法在内部插入其他标签或文字，只能定义其自身属性

标签关系：

  • 嵌套关系
  • 并列关系
    上面< title >与< head >标签属于嵌套关系
    < head >和< body >标签属于并列关系

标签综述

描述 标签
标题标签 < h1 >< /h1 >to< h6 >< /h6 >
段落标签 < p >< /p >
水平线标签 < hr / >
换行标签 < br / >
网页布局 < div>< /div >和< span >< /span >

1.标题标签

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级标题</h7>

可以发现最小只有六级标题，不存在七级标题
标题前后会有空行，并且会自动换行

2.段落标签

<!--段落标签-->
段落1
段落2
<p>段落1</p>
段落2

段落标签用于定义一个段落，不在标签内部的将会另起一段
浏览器会自动地在段落的前后添加空行。
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

3.水平线标签

< hr / > < !–水平线标签-- >

4.换行标签

<!--换行标签-->
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />


<!--换行和p标签对比一下-->
<hr />    <!--水平线标签-->
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
注意：要区分< br / >和 < p >< /p >所带来的不同，分段会在段落的前后添加空行。而使用换行标签不会有多余的空行。
不能用< p >< /p >代替< br / >

5. HTML块元素与内联元素

5.1 HTML块元素
块元素显示时，通常会以新行开始
如：<h1>、<p>、<ul>
独占一行，排斥其他元素跟其位于同一行，包括块元素和内联元素
块元素内部可以容纳其他块元素或内联元素
5.2 HTML 内联元素
内联元素通常不会以新行开始
如：<strong>、<a>、<img>
可以与其他内联元素位于同一行
内联元素内部可以容纳内联元素，不可以容纳块元素（链接<a></a>标签除外）
5.3 HTML < div >元素 【重点】
<div></div> division 分隔分区
该元素也被称为块元素，其主要是组合HTML元素的容器

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<h3>床前明月光</h3>
<p>床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。</p>

<!--left左,right右,center居中,justify排版-->
<div style="color:#00FF00" align="justify">
  <h3>床前明月光</h3>
  <p>床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。</p>
</div>
</html>
5.4 HTML< span >元素[重点]
<span></span> 跨度、跨距
该元素是内联元素，可作为文本的容器

<div></div>、<span></span> 这两个标签主要用于网页布局，配合CSS样式使用。

<span> 标签被用来组合文档中的行内元素。简单来说就是用于对文档中的行内元素进行组合。
代码：
<body>
<h3>span标签演示</h3>
<p>html中<span style="color: crimson">span标签</span>的详细介绍</p>
</body>

文本格式化标签

描述 标签
粗体 < b >< /b >、< strong >< /strong >
斜体 < i >< /i >、< em >< /em >emphasized强调
删除线 < s >< / s>、< del >< /del >
下划线 < u >< /u >、< ins >< /ins >
上标字 < sup >< /sup >
下标字 < sup >< /sup >
预格式文本 < pre >< /pre >

注意:

  • 对于粗体、斜体、删除线以及下划线给了两种标签显示，前者只有使用没有强调的意思。
    后者的语义更强烈，为XHTML推荐的写法
  • 预格式文本可以保留编辑器中的多空格以及换行等格式。
    预格式文本中的空格等格式是从与主体标签对齐的线开始的

HTML字符实体

  • 为了显示源代码，不进行解析【小于号（<）和大于号（>）浏览器会误认为它们是标签】，需要在 HTML 源代码中使用字符实体（character entities）来正确地显示预留字符。
描述				字符实体
空格				&nbsp;
小于号<			&lt;
大于号>			&gt;
和&				&amp;
引号‘’			&quot;
版权©				&copy;
乘号×				&times;
除号÷				&divide;

知识点二 HTML元素及属性

1. HTML元素

  • HTML 元素指的是从开始标签到结束标签的所有代码
  • 开始标签【开放标签】 元素内容 结束标签【闭合标签】
    < p> 这是一个段落 < /p>
    < br />
  • 没有元素内容的 HTML 元素被称为空元素 。空元素是在开始标签中关闭的
    < br / >就是没有关闭标签的空元素

2.HTML属性

<标签名 属性1=“属性1” 属性2=“属性2” …>内容</标签名>

  • 大多数 HTML 元素可拥有属性，属性提供了有关 HTML 元素的更多的信息。
  • 属性总是以键/值对的形式出现key=“value”
  • 属性总是在 HTML 元素的开始标签中规定
  • 新版本的 (X)HTML 要求使用小写属性和属性值
  • 属性值应该始终被包括在引号内。双引号是最常用的，属性值本身就含有双引号，那么包含在单引号内。

常用的标签属性:

  • < h1>：align属性-对齐方式 < h1 align=“center” >居中对齐
  • < body>：bgcolor属性-背景颜色 < body bgcolor=“yellow” >页面整个背景为黄色
  • < a>： target属性- 目标窗口弹出方式 < a href=“http://www.baidu.com” target=“_blank”>baidu< /a >新窗口弹出
  • < hr />：width属性- 水平线的长度 < hr width=“300” />水平线在中间，长度为300

通用属性:

  • class：规定元素的类名
  • id：规定元素唯一ID
  • style：规定元素的行内样式
  • 写在< head>< /head>中，通过type引入css样式 < style type=“text/css”>< /style>
  • title：规定元素的额外信息

知识点三 图像标签img

单标签

<img src="图片路径" />

图像路径可以是本地路径，网络上的图像可以右键复制图像地址，也可以是网络路径。
路径可以用绝对路径和相对路径，相对路径中src=“../img/1.jpg”中的../代表上一级目录。

标签属性

  • src：路径属性
  • alt：图像不显示时的替代文本
  • title：鼠标悬停时的提示文本
  • width：宽 height：高 （只用给一个即可，会自动进行缩放，不添加宽高则显示原图像大小）
  • border：图像边框宽度
<img src="图片路径" alt="替代文本" width="宽"  border="边框宽" title=“鼠标悬停” />


在浏览器无法载入图像时，浏览器将显示替代性的文本而不是图像。

知识点四 链接标签

举例

<a></a> 锚，可以为网址，图片，目标地址
<a href="https://www.shiguangkey.com/">潭州教育</a>

<!--嵌套玩一下-->
<a href='https://www.baidu.com/'> <img src="123" alt="产学研图标" width="200"  border="20" title=“鼠标悬停” /></a>

1.创建链接

标签属性

1.1 href

href：（Hypertext Reference 超文本引用）跳转目标地址
外部链接不能省略http://
内部链接直接链接内部页面名称 <a href="index.html">百度</a>
href="#"没有链接目标，用#代表空链接
href="XXX.exe"/"XXX.zip"点击链接会进行下载或允许

1.2 target

target：目标窗口弹出方式
target="_self" 在当前窗口直接跳转（默认方式）
target="_blank"以新窗口打开

代码举例

<a href="https://www.shiguangkey.com/">潭州教育本页面跳转</a>
<a href="https://www.shiguangkey.com/ " target="_blank">潭州教育新窗口跳转</a>

“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
文本、图像、表格、音频、视频都可以添加超链接

2. 创建目录（锚点定位）

1，使用< a href=" #id名">跳转到指定标题的链接< /a>
2，使用相同的id名标注需要跳转的位置< h1 id=“id名”>标题名< /h1>

1，使用< a href=" #name名">跳转到文字的链接< /a>
2，< a name=“name名”>文字< /a>

  • 注意:这里的name属性与id是一样的，用 < a name=“name名”>文字< /a>可以为普通文本（非标题）创建链接

代码举例

<h1 id="0">目录</h1>
	<a href="#1">第一节课</a> <br />
	<a href="#2">第二节课</a> <br />
	<a href="#3">第三节课</a> <br />
	<a href="#4">第四节课</a> <br />
	<a href="#5">第五节课</a> <br />
	<a href="#6">第六节课</a> <br />
	<a href="#7">第七节课</a> <br />

	<h3 id="1">课程1</h3>
	<a href="#0">返回顶部</a>

	<h3 id="2">课程2</h3>
	<a href="#0">返回顶部</a>

	<h3 id="3">课程3</h3>
	<a href="#0">返回顶部</a>

	<h3 id="4">课程4</h3>
	<a href="#0">返回顶部</a>

	<h3 id="5">课程5</h3>
	<a href="#0">返回顶部</a>

	<h3 id="6">课程6</h3>
	<a href="#0">返回顶部</a>

	<h3 id="7">课程7</h3>
	<a href="#0">返回顶部</a>

知识点五 base标签

定义

单标签： < base /> 定义页面中所有链接的默认地址或默认目标
在< head>< /head>之间写< base />标签

属性 描述
href 所有相对链接的基准 URL
target 所有链接的目标窗口弹出方式 
代码：
<head>
	<base href="音乐文件夹" target="_blank" />
</head>
<body>
	<audio src="mp3路径" controls ></audio> <br />
	<p> 在base中已经给定了一个相对地址，这里的音频会在指定路径下寻找。</p>
	<a href="http://www.baidu.com">百度</a> <br />
	<a href="http://www.sina.com">新浪</a>	
	<p>因为在base中设置了target="_blank"，所以这里的链接都会以新窗口打开</p>
</body>

拓展 多媒体标签

属性 描述
src 播放音频的 URL
autoplay 自动播放
controls 播放控件h
loop 无限循环播放
muted 播放默认为静音
< audio></ audio> 音频

总共有三种音频格式，为了浏览器兼容，至少需要做前两个的音频格式的文件

  • ogg
  • mp3
  • wav
第一种：
	<audio src="音乐路径" controls></audio>
	
	
第二种:
	<audio controls autoplay>
		<source src="音乐路径"/>
		<source src="音乐路径">
		您的浏览器不支持html音频播放功能
	</audio>

知识点六 列表标签

总述

标签			描述
<ul>	unordered list 无序列表
<ol>	ordered list 有序列表
<li>	list 列表项
<dl>	definition list 自定义列表
<dt>	definition term 自定义列表中的列表项
<dd>	definition description 对自定义列表中列表项的描述

1. 无序列表

<ul></ul> & <li></li>
标签属性

type: < ul type=“disc”>< /ul> 实心圆圈
< ul type=“circle”>< /ul> 空心圆圈
< ul type=“square”>< /ul> 实心方块

代码：
	<!--无序列表-->
	无序列表：
	<ul>
		<li>列表项1</li>
		<li>列表项2 <br/>
			<img src="图片路径" width="200">
		</li>
		<li>列表项3
			<p>这是一个段落</p>
		</li>
		<li>列表项4<br/>
			<ul>
				<li>子列表项1</li>
				<li>子列表项2</li>
			</ul>
		</li>
		<li><a href="网址" target="_blank">列表项5</a></li>
	</ul>


<ul type="disc"> <li>实心圆圈</li></ul>
<ul type="circle"><li>空心圆圈</li></ul>
<ul type="square"><li>实心方块</li></ul>

<ul type="disc"> <li>实心圆圈<ul type="circle"><li>空心圆圈<ul type="square"><li>实心方块</li></ul></li></ul></li></ul>
  • 注意
  • < ul>标签里只能放< li>，不能写其他标签，如< p>
  • < li>标签里面可以使用其余标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  • 默认嵌套列表使用实心圆圈、空心圆圈、实心方块等等

2.有序列表

<ol></ol> & <li></li>
标签属性

  • type: 不写type为默认数字列表
    < ol type=“A”>< /ol> 字母列表A.B.C.D…
    < ol type=“a”> < /ol> 小写字母列表a.b.c.d…
    < ol type=“I”>< /ol> 罗马字母列表I.II.III.IV…
    < ol type=“i”>< /ol> 小写罗马字母列表i.ii.iii.iv…

  • start：< ol start=“10”>< /ol> 列表项的序列号从10开始

代码：
<!--有序列表-->
	有序列表：
	<ol>
		<li>列表项1</li>
		<li>列表项2 <br/>
			<img src="图片路径" width="200">
		</li>
		<li>列表项3
			<p>这是一个段落</p>
		</li>
		<li>列表项4<br/>
			<ul>
				<li>无序子列表项1</li>
				<li>无序子列表项2</li>
			</ul>
			<ol>
				<li>有序子列表项1</li>
				<li>有序子列表项1</li>
			</ol>
		</li>
		<li><a href="网址" target="_blank">列表项5</a></li>
	</ol>


<ol type="A"><li>字母列表A.B.C.D...</li></ol>
<ol type="a"><li>小写字母列表a.b.c.d....</li></ol>
<ol type="I"><li>罗马字母列表I.II.III.IV....</li></ol>
<ol type="i"><li>小写罗马字母列表i.ii.iii.iv....</li></ol>
<ol start="10"><li>列表项的序列号从10开始</li></ol>
  • 注意
  • < ol>标签里只能放< li>，不能写其他标签，如< p>
  • < li>标签里面可以使用其余标签。例如列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3. 自定义标签

<dl></dl> & <dt></dt> & <dd></dd>
标签属性

有序列表和无序列表都是一列项目，而自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 < dl> 标签开始，自定义列表项以 < dt> 开始，每个自定义列表项的注释以 < dd> 开始。

	<!--自定义列表-->
	自定义列表：
	<dl>
		<dt>列表项1</dt>
		<dd>列表项1的解释1</dd>
		<dd>列表项1的解释2</dd>
		<dt>列表项2</dt>
		<dd>列表项2的解释1</dd>
		<dd>列表项2的解释2</dd>
	</dl>
  • 注意
  • 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

知识点七 表格标签table

总述

表格							描述
<table>						表格
<caption>					表格标题
th							表格的表头
tr							表格的行
td							表格的单元格
thead						表格的页眉
tbody						表格的主体
tfoot						表格的页脚

1. 表格及其属性

<table></table> & <tr></tr> & <td></td>
  • 不用表格标签来进行网页布局，常用来处理显示表格式数据
  • HTML表格中没有列，（table row）代表了表格中的行，（table data）代表表格一行中数据单元格中的内容【相当于列】。
  • 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

标签属性

width：表格外边框的宽 height：表格外边框的高 <table width="500" height="300"></table>
border：边框属性，如果不定义边框属性，表格将不显示边框。<table border="1"></table>
align: 对齐方式align="left"/"right/"/"center" 在<table>中加代表整个表格在页面中的位置
在<tr>、<td>中加代表单元格中的文字内容在单元格的位置
cellspacing：单元格间距，单元格边框之间的距离以及单元格边框与表格外边框的距离
cellpadding：单元格边距，单元格文字内容与其边框之间的距离
bgcolor：表格背景颜色 bgcolor="red"，<table>、<tr>、<td>标签中均可以添加
background：表格背景图像 background="1.png"
  • < tr>中只能嵌套< td>
  • < td>中可以容纳所有元素，包含文本、图片、列表、段落、表单、水平线、表格等等

2.表头标签及其表格标题

表头标签 <th></th>
表头便签即是用<th></th>(table head)代替<td></td>，浏览器会把表头显示为粗体居中的文本
  • 空单元格可以用< td>< /td> 也可以用< td> < /td>， 其中 (no-breaking 空格)是一个字符实体
  • 表格标题 < caption>< /caption>
  • 表格标题可以随着表格进行移动，并且位于表格上方居中的位置。

3.表格结构

<thead>、<tbody>、<tfoot>定义表格的页眉、主体、页脚，用于对 HTML 表格中的内容进行分组，方便使用 CSS 使这些元素改变表格的外观。

注意

  • < thead> 内部必须拥有 < tr> 标签
  • < style type=“text/css”>:
    text是指对象为网页中的文本
    css或是javascript是指当前指定的文本类型

知识点八 表单标签

总述

表单包含了:
·表单控件（表单元素）
·提示信息
·表单域

1. input控件

<input type=" "/> 属于单标签
type属性决定了控件的类型

1，文本框：type="text"
2，密码框：type="password"
3，单选框：type="radio" 通过name属性使得同一组控件，只能选择一个
4，复选框：type="checkbox" 也是通过name属性关联一组控件，可进行多选

标签属性checked=“checked”来表示默认选择

按钮组：
	button 普通按钮，通过属性value=" "来设置按钮控件中的显示名称
	submit 提交按钮，具有默认名称为提交，可以通过value进行修改
	reset 重置按钮，具有默认名称为重置
	image 图像按钮，用一个图像作为按钮
	file 文件域，按钮名称为选择文件，不能通过value进行修改

标签属性value=" "来表示input控件中默认文本值
标签属性maxlength来表示控件允许输入的最多字符数

2. label标签

与< input />标签搭配，可以实现点击提示信息，自动定位焦点到input控件。

1，一个表单控件，直接用<label></label>包裹<input />控件
2，多个表单控件，需要定位到特定某个控件，通过<label>标签属性for=“id名”和<input>标签属性id=“id名”的格式进行

代码实例

	<!--input控件-->
	用户名1：<input type="text" /> <br />
	<!--label标签-->
	<label>用户名2：<input type="text" /> <br /></label>
	<label for="3">
	文本框1：<input type="text" id="1"/> <br />
	文本框2：<input type="text" id="2"/> <br />
	文本框3：<input type="text" id="3"/> <br />
	文本框4：<input type="text" id="4"/> <br />
	</label>
	
点击‘用户名2’后，鼠标光标会自动定位焦点到后面的文本框。
点击‘文本框1’～‘文本框4’，鼠标光标都会定位焦点到‘文本框3‘的文本框

texttarea控件（文本域）

与前面文本框只能输入单行字段不同， < textarea> 元素定义多行输入字段（文本域）。
不能用value属性建立文本域中显示的初始值，多行文本框的默认文字内容写在< textarea>< /textarea>之间就可以了

	<!--textarea控件-->
	请输入留言：<br/>
	<textarea  rows="20" cols="20">
	留言一
		留言二
			留言三
	</textarea>
	</label>
	
rows：行
cols：列

注意

  • 在文本域中的文字保留了空格以及换行，并且会自动换行
    文本域中可以自己键入文本。

4. 下拉菜单select

< select>< /select>控件
< option>< /option>

代码：
<select>
	<option  style='display: none'></option>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

注意

  • '选项一’默认会显示在下拉菜单中，如果要修改默认项，通过< option>的标签属性selected="selected"实现

5. 表单域form

一般网页表达提交的方式

<form action="xxx.php"(提交的后台) method="GET"/"POST"（提交的方式） name="表单名称">
	<input />
	...
<form>

网页表单逻辑整理

1，action：定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。通过xxx.php指定了某个服务器脚本来处理被提交表单。
如果省略 action属性，则action 会被设置为当前页面。

2，method 属性规定在提交表单时所用的 HTTP 方法（GET默认方法 或 POST）
GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。使用GET时，表单数据在页面地址栏中是可见的。最适合少量数据的提交。浏览器会设定容量限制。

3,POST：表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

注意：

  • 如果要正确地被提交，每个输入字段必须设置一个 name 属性
代码：
<form>
		<fieldset>
			<legend>个人信息</legend>
			姓名：<input type="text" /> <br />
			邮箱：<input type="email" /> <br/>
			手机：<input type="tel"> <br />
			出生年月:<input type="month" /> <br />
		</fieldset>
		<fieldset>
			<legend>时间信息</legend>
			时间：<input type="time"> <br />
			年月日： <input type="date"> <br/>
			星期年：<input type="week"> <br/>
		</fieldset>
		颜色：<input type="color"> <br/>
		滑块：<input type="range"> <br/>
		搜索框：<input type="search"> <br/>
		<br />
			<input type="submit"> <input type="reset">
	</form>
	

fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
legend 元素为 fieldset 元素定义标题（caption）。