文章目录
目录
一、HTML简介
HTML是英文Hyper Text Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。
超文本：超文本文件就是指具有超链接功能的文件。
二、建立HTML文件
1.页面基本结构
打开vscode，新建后缀名为.html的文件，搭建页面基本结构的快捷键：①英文感叹号＋回车，②html:5+回车 。
<!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>
</body>
</html>此代码为一个页面的基本结构， 解析如下表：
| 标签 | 定义 | 内容 |
|---|---|---|
| <!DOCTYPE HTML> | 文档声明 | 声明这是一个HTML文档 |
| <html></html> | HTML标签 | 告诉网页浏览器，整个网页是从这里开始的，然后到结束 |
| <head></head> | 文档的头部 | 网页的标题、网页的logo、网页的解析格式 |
| <title></title> | 文档的标题 | 显示在搜索引擎结果中的页面标题 |
| <body></body> | 文档的主体 | 网页内容 |
乱码问题：
charset="UTF-8"表示当前文档的字符集是采用utf-8的字符，也就是我们常说英文字符集。
一般包含中文字符的时候用gb2312，用到一些特殊字符，例如西欧字符的时候应该用utf-8，以防出现乱码。
GB2312是简体中文编码，当文章/网页中包含繁体中文、日文、韩文时，这些内容可能无法被正确编码。
2.HTML的基本标记
2.1 标题文本标记<h1>~<h6>：
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>字体大小从大到小，独占一行，字体加粗
2.2 段落标记<p>和换行标记<br/>：
<body>
<p>段落标签</p>
<p>段落标签<br/>另起一行</p>
</body>包含在<p></p>标记对中的内容会显示在一个段落里，当内容超过一行的显示区域会自动换行，段落之间存在间隔。如果想另起一行，可使用换行标记<br/>。
<br/>必须为单个标签。
字体大小问题：
谷歌浏览器：最小字体限制为12px
2.3 水平线<hr/>、英文空格" "和全角空格" "：
<hr style="" />style用于定义该元素的属性。
字符串" "、" "用于在正文中插入空格。
2.4 注释标记<!-- -->：
<!-- 语句注释 -->注释的快捷键是： ctrl + / 或者 ctrl +shift + /
程序不执行这段代码，注释是为了更好地解释这段代码，方便自己或他人查看。
2.5 块标记<div>和<span>：
<div>独占一行</div>
<span>一行可放多个</span><span>占据行的长短由内容的多少决定</span>作用都是用于定义页面内容的容器，用于编排页面布局，本身没有具体的显示效果。
<div></div>一行只能放一个，<span></span>一行可以放多个。
2.6 列表标记：
共有三种列表标记，在列表标记之间使用成对的<li></li>标记可添加列表项目。
2.6.1 有序列表<ol>
<ol type="" start="">
<li>列表信息</li>
<li>列表信息</li>
<li>列表信息</li>
</ol>默认情况下，有序列表的列表项目前显示 1、2、3……序号，从数字1开始计数。可以使用type属性修改有序列表序号的样式，也可以定义start 属性设置列表序号的起始值。type 属性的具体取值及说明如下表：
| 属性值 | 说明 |
|---|---|
| 1 | 数字1、2……（默认） |
| a | 小写字母a、b…… |
| A | 大写字母A、B…… |
| ⅰ | 小写罗马数字ⅰ、ⅱ、ⅲ…… |
| Ⅰ | 大写罗马数字Ⅰ、Ⅱ、Ⅲ…… |
2.6.2 无序列表<ul>
<ul type="" start="">
<li>列表信息</li>
<li>列表信息</li>
<li>列表信息</li>
</ul>默认情况下，无序列表的列表项目前显示黑色实心圆点。可以使用type属性修改无序列表序号的样式，type 属性的具体取值及说明如下表所示，其中，type属性值必须小写。
| 属性值 | 说明 |
|---|---|
| disc | 实心圆点（默认） |
| circle | 空心圆圈 |
| square | 方形 |
2.6.3 自定义列表<dl>
<dl>
<dt>名称<dd>说明
</dl><dl> 即 “definition list（定义列表）”，<dt> 即 “definition term（定义名词）”，<dd> 即 “definition description（定义描述）”。
自定义列表以<dl>标记开始，自定义列表项目以<dt>标记开始，自定义列表的解释以<dd>标记开始。
2.7 HTML5新增的结构元素：
如下代码包含了HTML5新增的结构元素：
<body>
<article>
<header>
<h1>标题</h1>
<nav>
<ul>
<li><a href="#">导航栏</a></li>
<li><a href="#">导航栏</a></li>
......
</ul>
</nav>
</header>
</article>
<article>
<aside>侧边栏</aside>
<section>
<h1>标题</h1>
<p>内容</p>
......
</section>
......
</article>
<footer>
<p>脚部信息</p>
</footer>
</body>2.7.1 articl元素
article元素代表文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。例如，一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，页面中主体部分或其他任何独立的内容都可以用article来描述。
除了内容部分，一个article元素通常有它自己的标题(一般放在一个header元素里面)，有时还有自己的脚注。如果article描述的结构中还有不同层次的独立内容，article元素是可以嵌套使用的，嵌套时，内层的内容在原则上应当与外层的内容相关联。
2.7.2 section元素
一个section元素通常由内容及其标题组成。
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，但要避免与“有完整、独立的内容”的article元素混淆。
事实上，在HTML5中，article元素可以看成是一种特殊种类型的secton元素。section元素强调分段或分块，article强调独立性和整体性。具体来说，当一块内容相对比较独立、完整的时候，使用article元素语义更加明确。
关于section元素的使用可以参考下面的规则。
- section元素不是用作设置样式的页面容器，如果一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
- 如果article元素、aside元素或nav元素更符合使用场景或语义描述，不要使用section元素。
- section元素内部应当包括标题。
2.7.3 nav元素
nav元素是一个可以用作页面导航的链接组， 其中的导航元素链接到其他页面或当前面的其他部分。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
nav元素的使用可以参考下面的规则。
- 传统导航条。主流网站页面上都有不同层级的导航条，其作用是将当前画面跳转到网站的其他页面去。
- 侧边栏导航。主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
- 页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
- 翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
2.7.4 aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下2种使用方法。
- 被包含 在article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章关的参考资料、名词解释，等等。
- 在article元素之外使用，作为页面或站点全局的附属信息，典型的形式是侧边栏，其中的内容可以是友情链接、文章列表、帖子等。
2.7.5 header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包括表格、logo 图片等内容。
整个页面的标题应该放在页面的开头，但需要强调一点，一个页面内并未限制header元素的个数，可以拥有多个，因此可以为每个内容区块加一个 header元素。
2.7.6 footer元素
footer元素般作为其上层容器元素的脚注。footer包括的是脚注信息，如作者、相关阅读链接及版权信息等。
与header元素一样，一个页面中也未限制footer元素的个数。
3.超链接标记
3.1 超链接标记<a>：
<a href="url" target="target-windows">链接</a>href属性定义了链接标题所指向的目标文件的URL地址。
target属性指定用于打开链接的目标窗口，默认方式是原窗口，其属性值及说明如下表所示：
| 属性值 | 说明 |
|---|---|
| parent | 当前窗口的上级窗口，一般在框架中使用 |
| blank | 在新窗口中打开 |
| self | 在同一窗口中打开（默认） |
| top | 在浏览器的整个窗口中打开，忽略任何框架 |
3.2 超链接类型：
在HTML文件中，超链接可以分为内部链接、外部链接和书签链接。
3.2.1 内部链接
将超链接标记<a>中href属性的URL值设置为相对路径，就可以在HTML文件中定义内部超链接。
3.2.2 外部链接
外部链接指网页中的链接标题可以链接到网站外部的文件，需要定义外部链接时，在超链接标记<a>中，将其href属性的URL值设置为绝对路径即可。
3.2.3 锚点（书签）链接
如果有的网页内容特别多，页面特别长，需要不断翻页才能看到想要的内容，这时，可以在页面中（一般是页面的前部）定义一些书签链接。这里的书签相当于方便浏览者查看的目录，单击书签时，就会跳转到相应的内容。实际上，跳转的地址也可以是其他文档中的某一位置。
在使用书签链接之前，首先要建立称为“锚记”的链接目标地址，例如：
<p name="anchorname">顶部</p>在超级链接部分，指明用户定义的锚记名称，即可链接到指定的位置。
<a href="#anchorname">回到顶部</a>3.3超链接路径：
HTML文件中提供了3种路径——绝对路径、 相对路径、根路径。
3.3.1 绝对路径
绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接，例如：http://www.baidu.com。
3.3.2 相对路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。只要是处于站点文件夹内，即使不属于同一个文件目录下，相对路径建立的链接也适用。采用相对路径建立两个文件之间的相互关系，可以不受站点和服务器位置的影响。相对路径的使用方法如下表所示。
| 相对位置 | 输入方法 | 举例 |
|---|---|---|
| 同一目录 | 直接输入要链接的文档名 | index.html |
| 链接上一目录 | 先输入“../”,再输入目录名 | ../html/index.html |
| 链接下一目录 | 先输入目录名，后加入“/” | html/index.html |
3.3.3 根路径
根路径的设置以“/” 开头，后面紧跟文件路径，例如:D:\Rachel\Pictures\index.html。根路径的设置也适用于内部链接的建立，一般情况下不使用根路径。根路径必须在配置好的服务器环境中才能使用。
4.多媒体标记
<!-- 图像标记 -->
<img src="url" title="description" />
<!-- 多媒体文件标记 -->
<embed src="url" autostart="" loop=""></embed>
<!-- 视频标记 -->
<video src="url" controls="controls">替代文字</video>
<!-- 音频标记 -->
<audio src="url" controls="controls">替代文字</audio>5.表格
5.1 表格常用标记：
| 标签 | <table> | <tr> | <td> | <th> |
|---|---|---|---|---|
| 说明 | 表格标记 | 行标记 | 单元格标记 | 表头标记 |
5.2 表格的属性：
| 属性 | 说明 | 举例 |
|---|---|---|
| border | 设置表格边框宽度，单位是像素，默认表格边框为0，即不显示边框线 | <table border="2"> |
| colspan | 设置单元格跨列，可向右跨越多个竖列 | <td colspan="2"> |
| rowspan | 设置单元格跨行，可向下跨越多个横行 | <td rowspan="2"> |
6.表单
表单是网页提供的一种交互式操作手段，可用于采集和提交用户输入的信息。
6.1 表单定义标记<form>：
<form></form>定义表单的开始和结束位置，表单提交的内容就是<form>表单中的内容。基本语法格式如下：
<form name="formname" method="post/get" action="url"></form>表单标记的常用属性如下表：
| 属性 | 说明 |
|---|---|
| name | 表单名称 |
| method | 表单发送的方式，可以是“post”或“get”。 post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制； get方式提交时，会将表单的内容附加在URL地址的后面，所以限制了提交的内容的长度不超过8192个字符，且不具备保密性。 |
| action | 表单处理程序 |
发送邮箱的使用：
mailto是html中发送电子邮件的代码，用法如：<a href="mailto:administrator@163.com">发送邮件</a> 或 <form action="mailto:administrator@163.com"...>...<form>。
6.2 输入标记<input>、列表框标记<select>和文本域输入标记<textarea>及常用属性:
以下为一个表单案例：
<form name="myform" action="www.baidu.com" method="post">
用户名：<input name="username" type="text" value="happypiggy">
<!-- value指定文本框的默认值 -->
<br/><br/>
密码：<input name="pwd" type="password" placeholder="请输入密码">
<!-- 将type属性值设置为password，在密码框中输入的数据都会以实心圆点的形式显示 -->
<!-- placeholder为当文本框处于未输入状态时的输入提示 -->
<br/><br/>
性别：<input name="sex" type="radio">男
<input name="sex" type="radio">女
<!-- 单选按钮的name必须相同，才能实现一组单选项的效果 -->
<br/><br/>
爱好：<input name="hobby1" type="checkbox">吃饭
<input name="hobby2" type="checkbox">睡觉
<input name="hobby3" type="checkbox">打豆豆
<br/><br/>
城市：<select name="menu1" size="">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<!-- <select>标记用来定义列表框，<option>标记用于向列表框中添加列表项目 -->
<!-- size属性未定义时为下拉列表效果，将size设置为大于1的正整数时控件显示为列表框 -->
<br/><br/>
生日：<input type="date">
<!-- 日期选择器，有几种类型：date——选取日、月、年，month——选取月、年，
week——选取周、年，time——选取时间(小时和分钟)，datetime——选取时间、 日、月、年(世界标准时间UTC)，
datetime-local——选取时间、 日、月、年(本地时间) -->
<br/><br/>
自我介绍：<textarea cols="30" rows="5"></textarea>
<!-- <textarea></textarea>为多行的文本域，可换行，用来输入更多的文字信息，可用cols设置列数，rows设置行数 -->
<br/><br/>
<input type="button" value="确认">
<!-- 标准按钮，value值可以设置按钮上显示的文字，一般由onclick事件响应 -->
<input type="submit">
<!-- 提交按钮，当用户单击此按钮时，表单被提交，提交目标是form元素的action属性所定义的url地址 -->
<input type="reset">
<!-- 重置按钮，单击后此表单的所有值被重置 -->
<input type="image" src="button1.jpeg">
<!-- 图像域，按钮不是普通样式，而是一张图片 -->
</form>显示效果如图：
其中下拉列表和日期选择器显示如图：
4177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
