HTML
1.什么是HTML？
超文本标记语言
文本、视频、图片、音频、超链接。
标记：符号(标签),没有逻辑(记忆比较多)
.html文件可以双击直接在浏览器中打开，被浏览器解析被显示给用户查看。
2.如何学习HTML?
学习方向:掌握转义字符、指令和标签
3.目的：完成页面架构的搭建，即用什么标签，完成什么样的标签嵌套关系。
<!--doctype必须出现在页面的最上方，规定该文档采用的HTML版本类型 -->
<!DOCTYPE html>
<!--html语言不区分大小写-->
<!--页面标签：包含所有页面内容，只有head与body两个子标签-->
<html>
<!-- 头标签：样式，脚本，后勤操作：编页面码，页面标签标题图表 -->
<head>
<!--页面名-->
<title>第一个页面</title>
<meta charset="utf-8"></meta>
</head>
<!-- 体 -->
<body>
<!-- 页面上显示内容,一定要写在body中 -->
<!--body中可以存放区域、样式、脚本-->
<!--title存放在body中没有多大作用-->
你好，HTML
江西理工大学 电气工程及其自动化
你好,HTML 江西理工大学
你好,HTML 江西理工大学
</body>
<!--体标签，页面显示内容存放区域-->
</html>
指令
'''
指令：被<>包裹，以！开头
<!----> 表示注释
<!doctype> 文档类型
'''
转义字符
"""
被 & ;包裹，内容为特殊的字母或数字组成。
小于< <
大于> >
空格:
版权: ©
"""
标签
"""
标签:
被<>包裹，以字母开头，可以包含数字和减号，在前端中特别建议使用减号
系统标签：h1~h6 span div i b a img hr br table form input
自定义标签：满足合法命名的所有标签
注释：html语言中，系统建议只使用系统标签，不建议使用自定义标签。
"""
常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.标题标签-->
<!--重点:h1标签的语义，是该页面的主标题 -->
<h1 title="这是标题一">一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
正文文本
正文文本
<!--2、段落：自带换行,有段落间距-->
<p>这是一个段落这是一个段落这是一个段落</p>
<p>这是一个段落这是一个段落这是一个段落</p>
<!--3.换行标签<br>-->
正文文本<br>
正文文本<br>
正文文本<br>
<!-- 自带换行的文本标签:h1~h6 p -->
<!--4.文本类型标签:不带自换行的文本标签,span i b em strong-->
<spam>span</spam>
<spam>span</spam>
<b>加粗标签</b>
<b>加粗标签</b>
<strong>以加粗作为强调的强调标签</strong>
<strong>以加粗作为强调的强调标签</strong>
<i>斜体标签</i>
<i>斜体标签</i>
<em>以斜体作为强调的强调标签</em>
<em>以斜体作为强调的强调标签</em>
<br>
<span>一般用来嵌套其他文本类标签 上<sup>角标</sup> 下<sub>角标</sub></span>
<br>
<!--5.超链接标签: -->
<a href="www.baidu.com" target="_self">前往百度</a>
<a href="">前往路飞</a>
<br>
<!--6 图片标签-->
<img title="风景" alt="风景" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2174909441,2495215020&fm=26&gp=0.jpg">
<!-- alt：当图片加载失败，给与图片解释，当图片加载成功，不显示解释-->
<!-- title 鼠标悬浮的文本提示 -->
<!--列表标签-->
<!--ul>li{第$列}*5-->
<!--ul>li{第$$列}*5-->
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
</ul>
<ul>
<li>第01列</li>
<li>第02列</li>
<li>第03列</li>
<li>第04列</li>
<li>第05列</li>
</ul>
<!--7.列表标签：无序ul>li 有序ol>li;掌握无序即可-->
<!--8.表格标签 table>tr>th|td-->
<!--tr:行,th:标题单元格 ;td:普通单元格-->
<!--border:边框-->
<!--cellspacing：单元格间距，最小为0，但是单元格之间是两条线，可以用rules=“all”处理一条线-->
<!--cellpaddding:单元格的内边距(文本与边框的距离)-->
<table role="group" rules="rows" border="1px" width="500" height = "300" cellspacing="0">
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<!--(tr>td{单元格}*3)*2 2*3-->
<!--rowspan:合并行-->
<!--colspan:合并列-->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- td{表尾}*3 -->
<td>表尾</td>
<td>表尾</td>
<td>表尾</td>
</tr>
</tfoot>
</table>
<br><br><br><br><br><br>
</body>
</html>
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<form action="">
<p>
<!--label作为input的文本解释标签，for绑定id-->
<!--value属性是表单标签的内容，就是提交给后台的-->
<!--name是提交给后台的key，value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性，不需要写值，multiple多选 checked默认激活-->
<label for="username">账号：</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密码：</label>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
</p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
</p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
</form>
</body>
</html>
标签分类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签的分类</title>
</head>
<body>
<h1>标签的分类</h1>
<hr> /分割线
<!-- 1、是否自带换行 -->
<!--带换行：h1 p div table form tr ul li -->
<!--不带换行：span i b a img input button label textarea-->
<!-- 2、单双标签 -->
<!--单标签（主功能）：br hr input img link -->
<!--双标签（主内容）：html head body h1 p span div a label button -->
<!-- / 代表标签的结尾，但是单标签可以省略 -->
<div></div>
<hr />
<!--3、简单和组合标签-->
<!--组合：ul>li table>tr>td|th form>input -->
</body>
</html>
页面架构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面架构</title>
</head>
<body>
<!--
html学习目的：
1、什么时候用什么标签
最内层：h1~h6、p、a、img、input
外层：ul>li、form、table
架构：div
-->
<!--页面头-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form action="">
<input type="text">
<button></button>
</form>
</div>
<!--导航栏-->
<ul class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</ul>
<!--页面主体-->
<div class="main">
<!--.main-left+.main-center+.main-right-->
<div class="main-left"></div>
<div class="main-center">
<div class="main-box box1">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 W3School，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p>
<b>从左侧的菜单选择你需要的教程！</b>
</p>
</div>
<div class="main-box box2">
<img src="" alt="">
<div>
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="main-right"></div>
</div>
<!--页面尾部-->
<div class="footer"></div>
</body>
</html>