HTML教程
▐ 概述
HTML是HyperText Markup Language的缩写，即超文本标记语言。它为我们提供了许多功能不同的标签，最终运行时由浏览器对标签进行解析，呈现出不同标签的样子。
▐ 基础语法
注释： （ Ctrl + / ）
<body> <!-- html注释 --> </body>
基本框架解读：
▐ 文本标签
➱ 标题标签
....
➱ 超链接
➱ 段落标签
➱ 图片标签
➱ 换行
标尺线
加粗
<h1>标题一</h1> <a href="跳转链接">百度一下</a> <p>段落标签</p> <img src="img/lisa.jpg"/> <br /> <hr /> <b>END</b>
▐ 列表标签
➱ 无序列表
➱ 有序列表
➱ 列表项
<ul> <li>无序项1</li> <li>无序项2</li> <li>无序项3</li> </ul> <ol> <li>有序项1</li> <li>有序项2</li> <li>有序项3</li> </ol>
▐ 表格标签
➱ 表格标签
➱ 表格中的行
➱ 表格的表头
➱ 表格的单元格
快速建表：table>tr*4>td*4 按Tab键 （生成一个4行4列的表)
<!-- table 表格标签 --> <!-- cellspacing 设置单元格与单元格之间的距离(外边距) --> <table border="1" width=400 cellspacing="0"> <!-- tr表格中的行 --> <tr> <!-- th 表头单元格 居中加粗--> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> <tr> <td >张三</td> <td>84</td> <td>87</td> <td>94</td> </tr> <tr> <td>李四</td> <td>79</td> <td>88</td> <td>92</td> </tr> <tr> <td>小王</td> <td>79</td> <td>88</td> <td>92</td> </tr> </table>
绘制表格时的一些常用属性:
border 边框
height 高度
width 宽度
align 内容水平方向的位置 (left,center,right)
valign 内容垂直方向的位置 (top,middle,bottom)
cellspacing 设置单元格与单元格之间的距离 (外边距)
cellpadding 设置单元格内容到边框的距离 (内边距)
bgcolor 背景颜色
colspan 跨多列合并 (从哪个合并就在哪个单元格添加并删除多余的单元格)
rowspan 跨多行合并 (合并完成后需要删除其他行多余的单元格)
• th 表头单元格中的内容是居中加粗的，td 普通单元格就没有此效果
• 表格中的内容只能放在单元格中.
• 绘制表格时必须要添加border边框属性，否则表格不会显示出来
▐ 表单标签
➱ 表单区域
➱ 单行输入框
标签中提供了type属性，我们可以通过设置type的属性值来改变单行输入框的样式，如：
type = " text " 文本输入框
- type = " password " 密码框
- type = " radio " 单选框 (多个选项的name必须相同才能互斥)
- type = " checkbox " 多选框
<!-- form标签 表示一个表单区域 --> <form> 账号:<input type="text" placeholder="请输入账号" /> <br /> 密码:<input type="password" /> <br /> <!-- 注意:多选框和单选框的多个选项的name必须相同才能互斥 --> 性别:<input type="radio" name="gender" />男 <input type="radio" name="gender" />女 <br /> 课程:<input type="checkbox" name="course" />政治 <input type="checkbox" name="course" />语文 <input type="checkbox" name="course" />数学 <input type="checkbox" name="course" />英语 <br /> </form>
➱ 下拉选择框 选项内容
籍贯<select> <!-- 选择性组件必须要给默认的value --> <option value="101">陕西</option> <option value="102">四川</option> <option value="103">浙江</option> <option value="104">湖南</option> </select>
➱ 多行文本域
<!-- 可设置文本域的大小(列和行) --> <textarea cols="30" rows="10"></textarea>
➱ 按钮 按钮依然写在标签中，只不过不同按钮的type属性不同
<!-- 提交按钮，触发表单的提交动作 --> <input type="submit" value="提交"/> <!-- 重置按钮 --> <input type="reset" value="重置"/> <!-- 普通按钮，用来绑定事件 (在JavaScript中会详细介绍) --> <input type="button" value="触发"/>
CSS教程
▐ 概述
css是一种样式表语言，它提供了许多属性来对Html标签进行修饰，使我们的页面更加美观。
▐ 基础语法
我们把对文本样式进行定义和修饰的CSS代码写在中。
注释： /* */ （ Ctrl + / ）
<style> /* CSS注释 */ </style>
CSS样式表分为：行内样式表、内嵌样式表、外部样式表.
简单来说就是css代码写的位置不同而已，如果标签只出现一次可以考虑使用行内样式写法。若有多组标签且样式需求一致可以使用内嵌样式写法。一般在大的项目css代码很多情况下才使用外部样式写法，也就是将css代码单独写在一个.css文件中，再在html文件中通过导入即可。
<!-- href=" .css文件位置 " --> <link rel="stylesheet" href="" />
▐ 选择器
选择器是将样式表和标签进行匹配的，常用选择器有4种：
➱ 标签选择器 ：匹配页面中所有的指定标签
➱ id选择器 ：匹配id值唯一的一个标签
➱ 类选择器 ：匹配class属性相同的一组标签
➱ 通配选择器 ：匹配页面中所有标签
<style> /* 标签选择器 */ p{ } /* id选择器 */ #shell{ } /* 类选择器 */ .content{ } /* 通配选择器 */ *{ } </style> <body> <p></p> <div id="shell"></div> <div class="content"></div> <div class="content"></div> <h1></h1> </body>
▐ 修饰文本
▐ 修饰背景
▐ 透明度
CSS中 opacity属性是用来定义透明度的，并且规定范围是从 0.0 ~ 1.0 ( 完全透明 ~ 完全不透明 )
<style> #photo{ opacity: 0.5; /*完全透明 0.0 ~~ 1.0 完全不透明*/ } </style> <body> <!-- 原图 --> <img src="img/lisa.jpg" /> <!-- 设置半透明 --> <img src="img/lisa.jpg" id="photo"/> </body>
▐ 伪类
CSS伪类专门用来表示标签的一种的特殊的状态，常用的伪类有：
: hover 表示鼠标移入的状态
: active 表示被点击的状态
: focus 向拥有键盘输入焦点(例如输入框)的标签添加样式
<style> #photo{ opacity: 0.5; } #photo:hover{ opacity: 1.0; } </style> <body> <img src="img/lisa.jpg" id="photo"/> </body>
此段代码表示当鼠标移入图片时，图片的样式从原本的半透明转变为完全不透明
▐ 盒子模型
CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里，如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子，只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
一个盒子分为4个部分：内容区、内边距、边框、外边距
标签大小 = 内容区大小 + 内边距大小 + 边框
content：内容区指盒子中放标签内容的区域，子标签都存在于内容区中。width和 height两个属性就是设置内容区大小的。如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小一致。
padding：内边距指标签内容区到边框以内的区域。内边距会影响整个盒子的大小(涉及计算问题)
border：边框是标签可见框的最外部，也会算在标签大小中。 边框的三要素有：宽度 width、颜色 color、样式 style，三者缺一不可。
margin：外边距指标签边框与周围其他标签相距的区域，外边距不影响盒子的整体大小 ，但是会影响盒子的位置。
若想使标签位置水平居中可以将margin设置为auto，这样浏览器会将左右外边距设置为相等，但要注意：若把标签上下外边距设置为auto，不会使标签垂直居中，外边距依然为0，上下外边距需要给具体的值。
▐ 浮动
由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦，所以我们就需要通过一些方法来改变这种默认的布局方式。
CSS中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。
但是浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局，所以我们通常在浮动的标签后使用清除浮动属性，自动让父级标签撑开
前端网页开发学习（HTML+CSS+JS）有这一篇就够！（二）：https://developer.aliyun.com/article/1555663
