<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="test/html; charset=utf-8">
<title>我的网页</title>
</head>
<body>
<h1>Bakmun的第一个网页</h1>
</body>
</html>
由上可以看出，每个部分都由如下
<html>
</html>
成对出现
- HTML / CSS / JavaScript 的关系
HTML是网页内容的载体：包含 文字 图片 视频 等
CSS是表现样式：比如标题字体，颜色变化，插入背景图片，边框等
JavaScript是网页上的特效效果：网页上的动画与交互。
- 认识html标签
在如下的代码中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="test/html; charset=utf-8">
<title>我的网页</title>
</head>
<body>
<h1>勇气</h1>
<p>春秋时曹刿曰：“夫战，勇气也。”古希腊一哲学家说：“勇气减轻了命运的打击。”刘邓大国挺进大别山时喊：“狭路相逢勇者胜！”</p>
<p>我们欣赏勇气，因为它是智慧与力量的化身。斯巴达克能领导角斗士和奴隶起义靠的是勇气；司马迁劳动局凭的是勇气；成吉思汗征服天下用的是勇气勇气既是一
村无坚不摧的矛，又是一块无尖不挡的盾。有了勇气，就有力量去冲破一切艰难险阻；有了勇气，就可以无畏地同厄运去抗争；有了勇气，就能汇荡涤污垢的洪流奔腾
入海。
</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529744840598&di=8a8da8ac04a9e88322bc38871cfcf5
0b&imgtype=0&src=http%3A%2F%2Fuploads.oh100.com%2Fallimg%2F1706%2F21-1F622140F4.jpg">
</body>
</html>
“我的网页”是网站的标题， <title>我的网页</title> 就是网页标题标签
“勇气”是文字标题， <h1>勇气</h1> 就是文章标题标签
<p></p> 就是是段落标签，已知每个段落结束都会自动换行
图片由<img src="****.jpg">代码完成 内填图片url
效果如图
- 标签的语法
1.html中的标签一般都是成对出现，分开始标签和结束标签，如
<p> </p>
<title> </title>
2.标签直接可以嵌套，但前后顺序必须保持一致，如
<div><p>.......................................</p></div>
3.标签不区分大小写
- html文件基本结构
一个html文件是有自己固定的结构的。
<html> <head>......</head> <body>......</body> </html>
代码注释语法： <!-- 注释文字 --> (本行有效)
---------------------------------------------------------------------------------------------
- 标签
<html></html>是根标签，所有的网页标签都在<html></html>之间
---------------------------------------------------------------------------------------------
<head>标签用于定义文档头部，它是所有头部元素的容器。
头部元素有<title> <script> <style> <link> <meta>等头部标签：
<title>...</title>标签的内容会在浏览器的标题栏显示出来
---------------------------------------------------------------------------------------------
<body></body>标签之间是网页的主要内容
如<h1> <p> <a> <img>等网页内容标签：
标题标签： <h*>......</h*>
一共有 6 个：h1 h2 h3 h4 h5 h6 ,分别为一级标题到六级标题，依据重要程度递减。<h1>是最高的等级
语法：<h*>标题文本</h*> （*为1-6）
因为 h1 标签在网页中比较重要，所以一般h1标签被用在网站名称上。
h1-h6 的显示样式如下：
强调标签：<em> </em> 及 <strong> </strong>
语法：
<em>需要强调的文本</em> （斜体）
<strong>需要强调的文本</strong> （加粗）
为文字设置单独样式 :<span>
语法：<span>文本</span>
span元素使用前需要在<head>标签中定义，如
<head>
<style>
span{
color:blue;
}
</style>
</head>
引用标签：<q> <blockquote>
语法：
<q>引用文本</q> 引用简短文本 （添加双引号）
<blockquote>引用文本</blockquote> 引用长文本 （缩进）
在Html中直接输入空格、回车都是无效的，若想使文本实现，则需要相应的标签
换行标签：<br /> 空格标签： （注意输入分号）
语法：在需要修改的语句后输入相应的标签
添加水平横线标签：<hr />
语法：在段落标签后加上<hr />
若想控制线的颜色和粗细，可用<hr size="**px" color="**" />
地址标签:<address>联系地址信息</address> （斜体显示） 块状元素，独占一行
加入代码标签：<code> <pre>
语法：
<code>代码语言</code> 单行代码
<pre>代码语言</pre> 多行代码，保留空格及换行
<pre>标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它。
无顺序信息列表标签：<ul>
语法：
<ul> <li>信息01</li> <li>信息02</li> <li>信息03</li> ..... </ul>
效果如图
有顺序信息列表标签：<ol>
语法：
<ol> <li>文本01</li> <li>文本02</li> <li>文本03</li> .... </ol>效果如图
<div>标签：给网页划分独立板块
语法：
<div> <h2>无顺序信息列表</h2> <ul> <li>信息01</li> <li>信息02</li> <li>信息03</li> </ul> </div> <div> <h2>有顺序信息列表</h2>h2> <ol> <li>文本01</li> <li>文本02</li> <li>文本03</li> .... </ol> </div>
div元素可以被命名，逻辑更加清晰 语法：<div id= "板块名称"> </div>
table标签，创建表格
五个必要元素：table tbody tr th ed
<table> </table>：表格以<table>开始，以</table>结束
<tbody> </tbody>：使表格分为结构，并在加载时一块块显示，不用等整个表格加载完后显示
<tr> </tr>：表格的一行。有几对<tr>就分几行
<td> </td>：表格的一个单元格，一行中包含几对<td>，表示一行中有几列
<th> </th>：表格表头的一个单元格（默认粗体居中）
语法：
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
表格列的个数取决于该行单元格的个数
标题及摘要标签
<table summary="表格简介摘要"> 摘要 不在浏览器中显示，使搜索引擎能读懂表格
<caption>标题文本</caption> 标题 显示在表格上方
<a>标签，链接到另一个页面
语法：<a href="目标网址" title="鼠标滑过显示的文本"> 链接显示的文本</a>
例如
<a href="http://www.baidu.com" title="点击进入百度"> 百度一下</a>
显示效果如图
注意目标地址前要加上 https://
title可省略
在新建窗口打开链接
<a href = "目标网址" target="_blank">链接显示的文本</a>
使用mailto在网页中链接Email地址
语法：
<a href= "mailto:收件人邮箱 ? cc=抄送地址 & 密件抄送地址 & subject=主题 & body=邮件内容"> 发送邮件</a>例如：
<a href= "mailto:[email protected];[email protected] ? [email protected] & [email protected] & subject=主题 & body=邮件内容">发送邮件</a>
需要注意的是：
如果mailto后有多个参数的话，第一个参数必须以 ? 开头，后面的参数都以 & 分割
如果有多个收件人，以 ; 分隔
<img>标签，为网页插入图片
语法
<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">如
<img src= "myimage.gif" alt = " My Image" title = "My Image">图片可以是 GIF ，PNG , JPEG 格式的图像文件
与用户交互
语法：
<form method="传送方式" action="服务器文件"> </from>
<form> 标签成对出现，以</form>结束
action：浏览者输入的数据被传送到的地方，比如一个PHP网页（save.php）
method：数据传送的方式（get/post）
如
<form method="post" action="save.php">
<label for="username">用户名：</label>
<input type="text" name="username" />
<label for="pass">密码：</label>
<input type="password" name="pass">
</form>
所有表单控件(文本框，文本域，按钮，单选框，复选框等)都
必须放在<form></form>标签之间
优先用 post 方式
文本输入框、密码输入框
语法：
<form action="save.php" method="post"> <input type="text/password" name="名称" value="文本提示" /> </form>
type="text"时,输入框为 文本输出框
type="password"时，输入框为 密码输入框
name：为文本框命名，以备后台程序使用
value：为文本输入框设置默认值，起到提示作用
文本域：多行文本输入
语法：
<textarea rows="行数" cols="列数">文本域默认值</textarea>
rows可用width代替，cols可用height代替
单选框与复选框
语法：
<form action="save.php" method="post"> <input type="radio/checkbox" value="值" name="命名" checked="checked" /> <form/>type="radio" 单选框
type="checkbox" 复选框
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序ASP/PHP使用
checked：当设置checked="checked"时，该选项默认选中
同一组的单选按钮，name取值一定要一致，才能起到单选的作用
下拉列表框
语法：
<option value="向服务器提交值">显示的选项</option>如
<form action="save.php" method="post"> <label>爱好：</label> <select> <option value="看书">看书</option> <option value="旅游 selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form>
当selected="selected"时，该选项默认选中
下拉列表框多选
语法：
<select multiple="multiple"> ..... <select>
按住ctrl同时单击选项
提交按钮，提交数据
语法：
<input type="submit" value="提交">提交后，进入action设置网址
重置按钮，重置表单信息
语法：
<input type="reset" value="重置">重置form内的信息
label标签
语法：
<label for="控件id名称"> 控件名称 </label>
与<input type="***" id= "控件id名称">对应,id属性值一定要相同
如
<form action="save.php" method="post">
<label for="email">输入你的邮箱地址</label>
<input type="test" id="email" name="email">
<form>