HTML是房子，CSS是装修，JavaScript是生活
提要：常用标签，并非全部 - 持续补入
前程往事
Basics ~
基础常识
HTML简介
HTML 包含HTML 标签及文本内容，允许格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示
- HTML（ HyperText Markup Language ） ：一种在 Web 上使用的通用标记语言(不是编程语言哦 ~)
- 标记语言 ：是一套标记标签，使用标记标签来描述网页
HTML实例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Every Day (baidu.com)</title>
</head>
<body>
<span>继续努力~<span/>
</body>
</html>
必有元素（每一个Html页面必定含有以下元素，格式如上）
- !DOCTYPE html - 声明为 HTML5 文档 （若不加，则适配存在问题）
- html 元素 - HTML 页面的根元素 （首尾标签）
- head 元素包含了文档的元（meta）数据，如 meta charset=“utf-8” 定义网页编码格式为 - utf-8 （meta标签可以拥有多个，这里我们为防止乱码只声明了编码格式）
- title 元素 - 描述了文档的标题 （网页顶部的页面名称）
- body 元素 - 包含了可见的页面内容 （主题页面书写区域）
扩展元素（因人而异）
- span 元素 - body内的标签自己书写即可，我只是为了不空旷，才写了一行文字~
HTML元素分类
HTML 可以通过 div 和 span 将元素组合起来
区块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）
- 常见块级标签
div、h1、p、ul、table
内联元素
内联元素在浏览器显示时，通常不会以新行开始
- 常见内联标签
span、b、td、 a、img
常用标签
标题
h1 - h6 标签 ：值越小，字体越大，目前标题标签仅有6种
Effect
Code
<h1>Happy every day</h1>
<h2>Happy every day</h2>
<h3>Happy every day</h3>
<h4>Happy every day</h4>
<h5>Happy every day</h5>
<h6>Happy every day</h6>
字体
显示
- b - 加粗
- i - 斜体
- sup - 上标
- sub - 下标
- code - 计算机代码
Effect
Code
<b>加粗文本</b>
<i>斜体文本</i>
<sup>上标</sup>
<sub>下标</sub>
<code>计算机代码</code>
引用
图片
<img src="此处一般位项目内的图片地址" alt="图片加载失败">
链接
<a href="https://www.baidu.com/">点击直接跳转百度</a>
水平线
Effect
Code
<p> 今天的天气</p>
<hr />
<p>有点冷</p>
<hr />
<p>2019/0/21</p>
<hr />
换行
- br - 换行
- p - 段落
br：换行
<br><br/>
或
<br>
或
<br/>
p：段落 (相当于自带换行功能)
p标签属于块级元素浏览器会自动地在段落的前后添加空行
<p>Happy every day</p>
br、p：换行、段落嵌套
Effect
Code
<p>开始的<br/>开始<br/>我们是个孩子</p>
表格
公共属性
- table - 定义表格
- th - 定义表格的表头
- tr - 定义表格的行
- td - 定义表格单元
默认表格
Effect
Code
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
单线表格
关键属性
- border 表格的边框
- cellspacing 表示单元格与单元格之间的距离
- cellpadding 表示单元格()内边距到其内容之间的距离
Effect
Code
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
合并表格
关键属性
- colspan 指定单元格横向跨越的列数（colspan就是合并列的，比如colspan=2的话就是合并两列）
- rowspan 指定单元格纵向跨越的行数（rowspan就是用来合并行的，比如rowspan=2就是合并两行）
Effect
Code
<table border = 1 align = "center" cellspacing="0" cellpadding="20">
<tr>
<!-- 合并第一列和第二列 从左往右，把要合并的不写用 用colspan写要合并的列-->
<td colspan = "2">第一行第一列</td>
<!-- <td>第一行第二列</td> -->
<td>第一行第三列</td>
<td>第一行第四列</td>
</tr>
<tr>
<!--合并行 从上往下 把要合并的不写用 用rowspan写要合并的行-->
<td rowspan="2">第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<!-- <td>第三行第一列</td> -->
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
</table>
我朋友的一个Demo
- bgcolor 表格背景色
Effect
Code
<p align='center'>我喜欢的歌曲<p/>
<table bgcolor="#00FF00" width="100%"border="1" cellspacing="0" cellpadding="10">
<tr>
<th>歌名</th>
<th>作者</th>
</tr>
<tr>
<td>光辉岁月</td>
<td>Beyond</td>
</tr>
<tr>
<td>红豆</td>
<td>王菲</td>
</tr>
<tr>
<td>我只在乎你</td>
<td>邓丽君</td>
</tr>
<tr>
<td>倩女幽魂</td>
<td center rowspan="2">张国荣</td>
</tr>
<tr>
<td>有谁共鸣</td>
</tr>
<tr >
<td colspan = "2">现总计：5首歌曲</td>
</tr>
</table>
列表
注意
- 列表分为三类 有序、无序、自定义
- ol 、ul 前的符号可通过type值修改
- ol 、ul 是块级元素，li表示行排列不能单独使用，需要在ol 、ul里面，配合使用
API
- ol - 定义有序列表
- ul - 定义无序列表
- li - 定义列表项
- dl - 定义列表
- dt - 自定义列表项目
- dd - 定义自定列表项的描述
ol（ordered list）：有序列表
type属性：1 - 数字（默认）、a - 小写字母、A - 大写字母、i - 小写希腊字母、I - 大写希腊字母
<ol type=1>
<li>过去</li>
<li>现在</li>
<li>未来</li>
</ol>
ul（unordered list）：无序列表
type属性：disc - 实心圆(默认）、circle - 空心圆、square - 实心方块
<ul type=square>
<li>过去</li>
<li>现在</li>
<li>未来</li>
</ul>
dl ：自定义列表
<dl>
<dt>时间轴</dt>
<dd>- 过去</dd>
<dd>- 现在</dd>
<dd>- 未来</dd>
</dl>
Input 输入框
基础方式
Effect
Code
常见输入框：<input type="text" name="nameId">
常见类型
文本
<input type="text" name="nameId">
密码
<input type="password" name="nameId">
单选
<input type="radio" name="nameId">
多选
<input type="checkbox" name="nameId">
提交
<input type="submit" name="nameId">
Form表单
标签属性
Demo效果
Effect
Code
<form name="input" action="html_form_action.php" method="get">
文本<br>
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname"><hr>
密码<br>
Password:<input type="password" name="pwd"><hr>
单选题<br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<hr>
多选题<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<hr>
下拉框<br>
<select name="Age">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Username:<input type="text" name="user"><br>
<input type="submit" value="提交"><br>
</form>