首先一开始是需要指定文档类型的，比如图中的!doctype html，就是指定html5的文档类型。
然后就是html标签了，html里面分为head和body二个标签。具体的作用下面来讲。
在head标签里，我们首先关键的是需要指定title，这个就是浏览器标题上显示的网页标题。
然后可以在这里加上style等样式内容，用来美化页面输出的。
在body标签里，就是网页的具体内容了，我们在网页上看到的各种输出，比如表格，表单，图片，视频等内容，都是在这个body里写的代码的。
1-html基本知识
html基础知识
学习目标
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。
标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1>等，标签大多数都是成对出现的。
所谓超文本，有两层含义:
html是用来开发网页的，它是开发网页的语言。
二、html 的基本结构1. 结构代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body></html>
网页文件的后缀是.html或者.htm, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
3. 小结三、初始常用的 html 标签1. 常用的 html 标签<!-- 1、成对出现的标签：--><h1>h1标题</h1><div>这是一个div标签</div><p>这个一个段落标签</p><!-- 2、单个出现的标签： --><br><img src="images/pic.jpg" alt="图片"><hr><!-- 3、带属性的标签，如src、alt 和 href等都是属性 --><img src="images/pic.jpg" alt="图片"><a href="http://www.baidu.com">百度网</a><!-- 4、标签的嵌套 --><div> <img src="images/pic.jpg" alt="图片"> <a href="http://www.baidu.com">百度网</a></div>
提示:
标签 | 描述 |
<!--...--> | 定义注释 |
<!DOCTYPE> | 定义文档类型 |
<a> | 定义超文本链接 |
<abbr> | 定义缩写 |
<acronym> | 定义只取首字母的缩写，不支持HTML5 |
<address> | 定义文档作者或拥有者的联系信息 |
<applet> | HTML5中不赞成使用。定义嵌入的 applet。 |
<area> | 定义图像映射内部的区域 |
<article> | 定义一个文章区域 |
<aside> | 定义页面的侧边栏内容 |
<audio> | 定义音频内容 |
<b> | 定义文本粗体 |
<base> | 定义页面中所有链接的默认地址或默认目标。 |
<basefont> | HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<bdo> | 定义文字方向 |
<big> | 定义大号文本，HTML5不支持 |
<blockquote> | 定义长的引用 |
<body> | 定义文档的主体 |
<br> | 定义换行 |
<button> | 定义一个点击按钮 |
<canvas> | 定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形 |
<caption> | 定义表格标题 |
<center> | HTML5不支持，不赞成使用。定义居中文本。 |
<cite> | 定义引用(citation) |
<code> | 定义计算机代码文本 |
<col> | 定义表格中一个或多个列的属性值 |
<colgroup> | 定义表格中供格式化的列组 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
<dd> | 定义定义列表中项目的描述 |
<del> | 定义被删除文本 |
<details> | 用于描述文档或文档某个部分的细节 |
<dfn> | 定义定义项目 |
<dialog> | 定义对话框，比如提示框 |
<dir> | HTML5不支持，不赞成使用。定义目录列表。 |
<div> | 定义文档中的节 |
<dl> | 定义列表详情 |
<dt> | 定义列表中的项目 |
<em> | 定义强调文本 |
<embed> | 定义嵌入的内容，比如插件。 |
<fieldset> | 定义围绕表单中元素的边框 |
<figcaption> | 定义<figure> 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<font> | HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。 |
<footer> | 定义 section 或 document 的页脚。 |
<form> | 定义了HTML文档的表单 |
<frame> | 定义框架集的窗口或框架 |
<frameset> | 定义框架集 |
<h1> to <h6> | 定义 HTML 标题 |
<head> | 定义关于文档的信息 |
<header> | 定义了文档的头部区域 |
<hr> | 定义水平线 |
<html> | 定义 HTML 文档 |
<i> | 定义斜体字 |
<iframe> | 定义内联框架 |
<img> | 定义图像 |
<input> | 定义输入控件 |
<ins> | 定义被插入文本 |
<kbd> | 定义键盘文本 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<label> | 定义 input 元素的标注 |
<legend> | 定义 fieldset 元素的标题。 |
<li> | 定义列表的项目 |
<link> | 定义文档与外部资源的关系 |
<main> | 定义文档的主体部分。 |
<map> | 定义图像映射 |
<mark> | 定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。 |
<menu> | 不赞成使用。定义菜单列表。 |
<meta> | 定义关于 HTML 文档的元信息。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分 |
<noframes> | 定义针对不支持框架的用户的替代内容。HTML5不支持 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<object> | 定义内嵌对象 |
<ol> | 定义有序列表。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<output> | 定义不同类型的输出，比如脚本的输出。 |
<p> | 定义段落。 |
<param> | 定义对象的参数。 |
<pre> | 定义预格式文本。 |
<progress> | 定义运行中的进度（进程）。 |
<q> | 定义短的引用。 |
<rp> | <rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 |
<rt> | <rt> 标签定义字符（中文注音或字符）的解释或发音。 |
<ruby> | <ruby> 标签定义 ruby 注释（中文注音或字符）。 |
<s> | 不赞成使用。定义加删除线的文本。 |
<samp> | 定义计算机代码样本。 |
<script> | 定义客户端脚本。 |
<section> | <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
<select> | 定义选择列表（下拉列表）。 |
<small> | 定义小号文本。 |
<source> | <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。 |
<span> | 定义文档中的节。 |
<strike> | HTML5不支持，不赞成使用。定义加删除线文本。 |
<strong> | 定义强调文本。 |
<style> | 定义文档的样式信息。 |
<sub> | 定义下标文本。 |
<summary> | <summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。 |
<sup> | 定义上标文本。 |
<table> | 定义表格。 |
<tbody> | 定义表格中的主体内容。 |
<td> | 定义表格中的单元。 |
<textarea> | 定义多行的文本输入控件。 |
<tfoot> | 定义表格中的表注内容（脚注）。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<time> | 定义日期或时间，或者两者。 |
<template> | 定义在页面加载时隐藏的一些内容。 |
<title> | 定义文档的标题。 |
<tr> | 定义表格中的行。 |
<track> | <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 |
<tt> | 定义打字机文本。 |
<u> | 不赞成使用。定义下划线文本。 |
<ul> | 定义无序列表。 |
<var> | 定义文本的变量部分。 |
<video> | <video> 标签定义视频，比如电影片段或其他视频流。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
属性 | 描述 |
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名（classname） |
contenteditable | 规定是否可编辑元素的内容。 |
contextmenu | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
data-* | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggable | 指定某个元素是否可以拖动 |
dropzone | 指定是否将数据复制，移动，或链接，或删除 |
hidden | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheck | 检测元素是否拼写错误 |
style | 规定元素的行内样式（inline style） |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息（可在工具提示中显示） |
translate | 指定是否一个元素的值在页面载入时是否需要翻译 |
当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:
<img src="images/logo.png">
这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。
1. 相对路径从当前操作 html 的文档所在目录算起的路径叫做相对路径
示例代码:
<!-- 相对路径方式1 --><img src="./images/logo.png"><!-- 相对路径方式2 --><img src="images/logo.png">2. 绝对路径
从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/
示例代码:
<!-- 绝对路径 --><img src="/Users/apple/Desktop/demo/hello/images/logo.png"><img src="C:\demo\images\001.jpg">
提示:
一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题
五、列表标签1. 列表标签的种类<!-- ul标签定义无序列表 --><ul> <!-- li标签定义列表项目 --> <li>列表标题一</li> <li>列表标题二</li> <li>列表标题三</li></ul>3. 有序列表
<!-- ol标签定义有序列表 --><ol> <!-- li标签定义列表项目 --> <li><a href="#">列表标题一</a></li> <li><a href="#">列表标题二</a></li> <li><a href="#">列表标题三</a></li></ol>六、表格标签1. 表格的结构
表格是由行和列组成，好比一个excel文件
2. 表格标签示例代码:
<table border="1" cellspacing="3"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>18</td> </tr></table>
表格边线合并:
border-collapse 设置表格的边线合并，如：border-collapse:collapse;
七、表单标签1. 表单的介绍表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。
2. 表单相关标签的使用示例代码:
<form> <p> <label>姓名：</label><input type="text"> </p> <p> <label>密码：</label><input type="password"> </p> <p> <label>性别：</label> <input type="radio"> 男 <input type="radio"> 女 </p> <p> <label>爱好：</label> <input type="checkbox"> 唱歌 <input type="checkbox"> 跑步 <input type="checkbox"> 游泳 </p> <p> <label>照片：</label> <input type="file"> </p> <p> <label>个人描述：</label> <textarea></textarea> </p> <p> <label>籍贯：</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p></form>3. 小结
<form>标签 表示表单标签，定义整体的表单区域
<form action="https://www.baidu.com" method="GET"> <p> <label>姓名：</label><input type="text" name="username" value="11" /> </p> <p> <label>密码：</label><input type="password" name="password" /> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>爱好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <p> <label>个人描述：</label> <textarea name="about"></textarea> </p> <p> <label>籍贯：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <input type="reset" name="" value="重置"> </p></form>4.小结
