目录
HTML5
- HTML:hyper Text Markup Language(超文本标记语音），HTML是一门标记性语言，每个标签都有自己的特定功能
- HTML5发展史：
- 编辑工具：
- 记事本
- DreamWeaver
- SublimeText（*推荐）
- HTML网页结构
<html>
<head></head>
<body></body>
</html>- 在SublimeText中先输入一个感叹号再按tab键会出现整体框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>HTML5中常见标签
- html:html文件的根标签
- head:头标签
- body:内容标签
- title：题目标签，网页的题目
- h1-h6：标题标签：独占一行，对文本进行加粗，h1-h6字体大小逐渐递减
- p：段落标签：对文本内容按段落方式进行换行
- hr：水平线标签，没有结束标签
- ctrl + /键打出注释的<!-- -->
- center居中显示
- strong：加粗标签
- em：斜体字标签
- 特殊符号：1. 空格 2.>大于 3.<小于 4©版权 后面一定要以;结束
- img：图片标签,src= 后面更的是图片的引用路径，用“”引用出来，./代表当前路径，这也是一个单个标签没有结束标签
- ul,li：无序标签，使用ul和li进行组合
- ol,li：有序标签，使用ol和li进行组合
- 快捷ol>li*3+tab键
- table,tr,td：表格标签，其中tr表示行，td表示列。在table中有四个非常重要的属性分别为border指定线宽，width和height指定整个表格的大小，cellspacing单元格的间隙大小，placeholder是默认提示信息。几个的单位都是px。rowspan和colspan分别是列合并和行合并。所有属性都是放在前面的标签括号里面。
- video：视频标签，主要属性为controls和src
- audio：音频标签，主要属性为controls和src
- br：换行，
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单练习</title>
</head>
<body>
<table width="300px" height="300px" border="1px" cellspacing="0">
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="xb">男<input type="radio" name="xb">女
</td>
</tr>
<tr>
<td>职业</td>
<td>
<select name="zy" >
<option value="1">java工程师</option>
<option value="2">网络工程师</option>
</select>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox">音乐<input type="checkbox">体育<input type="checkbox">文学<input type="checkbox">游戏
</td>
</tr>
<tr>
<td>头像</td>
<td>
<input type="file">
</td>
</tr>
<tr >
<td colspan="2">
<input type="button" value="提交">
</td>
</tr>
</table>
</body>
</html>运行结果：
HTML5中常见表单标签
表单标签最好放在form中
- input：这个标签常见属性有type，name和value
- type常见值：text（文本框），password（密码，输入值会隐藏），checkbox（复选框），radio（单选框，但是要将单选内容的name保持一致），file（文件上传），color，number，date，button，submit（提交），reset（重置）等
- select：下拉框标签，此标签和option标签配合使用
- textarea：文件域标签，可以用作留言板，其中cols控制宽度，rows控制高度
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
用户名：<input type="text"><br>
密 码：<input type="password"><br>
兴趣爱好：<input type="checkbox">篮球<input type="checkbox">足球<br>
性别：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>
文件上传：<input type="file"><br>
日期：<input type="date"><br>
颜色：<input type="color"><br>
数值选择：<input type="number" max="5" min="-1">
按钮：<input type="button" value="登录">
</form>
</body>
</html>运行结果
HTML5中正则表达式
- 什么是正则表达式：用一组特殊的符号来对指定字符串做校验，如校验指定字符串是否是手机号邮箱等
- 正则表达式语法规则
- [a]：指定字符串只能有一个字符，并且这个字符只能是”a”
- [abc]：指定字符串只能有一个字符，并且这个字符只能是”a”或者”b”或者”c”。由此可见，一个”[]”代表一位字符
- [abc][123]：指定字符串恰好有两个字符串，第一个字符只能是”a”或者”b”或者”c”，第二个字符只能是”1”或者”2”或者”3”
- [0123456789]：指定的字符串只能有一个字符串，并且这个字符串必须是数字。可以简化为”[0-9]”或者”\d”
- [abc]{2}：指定字符串恰好有两个字符串，并且第一个字符串只能是”a”或者”b”或者”c”；第二个字符串只能是”a”或者”b”或者”c”
- [1][3578]\d{9}：指定字符串只能有11个字符串，第一个字符必须是”1”，第二个字符串只能是”3”或者”5”或者”7”或者”8”，剩下9个字符串必须是数字。此处为手机号验证
- [abc]{3,}：指定字符串的个数至少为3位，并且每一位都必须是”a”或者”b”或者”c”
- [123]{3,4}：指定字符串的字符个数至少为2位，至多不超过4位
- input这个标签中有一个属性pattern，在这个属性里面可以输入正则表达式。
- 优缺点：
- 优点：代码量少，书写方便
- 缺点：不方便阅读
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<form>
<!-- 用户名只能为字母（大小写均可}，并且长度在3-12位之间-->
用户名：<input type="text" name="username" pattern="[a-zA-Z]{3,12}" required="required"><br>
<!-- 密码只能为数字，并且长度为6-12位 -->
密码：<input type="password" name="password" pattern="[0-9]{6,12}" required="required"><br>
<input type="submit" value="登录">
</form>
</body>
</html>运行结果
一些常用的正则表达式：
- 网页：^http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?$
- 身份证号：^\d{17}[\d|X]|\d{15}$
- 浮点数：^([+-]?)\d*\.\d+$
- 指数：[-|+]?[0-9][.][0-9]*[E|e][+|-][0-9]*
- 电话号码：^[0-9\-()（）]{7,18}$
CSS初识
- CSS定义：Cascading Style Sheet 级联样式表，用来设定html标签的样式（字体，颜色，边距，高度，宽度，背景图片，网页定位等）如果严格划分，CSS也属于一门编程语言，只不过这门编程语言是用来辅助html的
- 发展历程：
（1.1996年CSS1.0发布
（2.1998年5月CSS2.0发布
（3.2004年CSS2.1发布
（4.2010年CSS3.0发布
- 书写方式
- 当样式很少的时候，可以采用行内样式的书写方式（每个标签都有一个style属性，可以 在style属性中书写css样式
- 当样式很少，并且很多标签需要使用同一个样式时。可以使用内部样式表（通过<style></style>标签实现，style标签需要放在head标签里面，可以使用id,class两个属性定位style样式书写的代码，其中id唯一，class不唯一。在style标签中使用#id名{},.class名{}，在大括号里面进行样式编写）
- 当需要书写大量的CSS样式时，为了防止html文件的臃肿，可以将css样式单独放到一个文件中去
- 在CSS中font-size：代表的是字体的大小，color：代表的是字体的颜色，font-weight：代表字体是否加粗，font-sytle：控制字体的样式，比如是否为斜体
CSS字体样式
- font-family：字体类型，C:\Windows\Fonts可以查看电脑已经安装好的字体
- font-size：字体大小
- 数值px
- xx-small : 绝对字体尺寸。根据对象字体进行调整。最小
- x-small : 绝对字体尺寸。根据对象字体进行调整。较小
- small : 绝对字体尺寸。根据对象字体进行调整。小
- medium : 默认值。绝对字体尺寸。根据对象字体进行调整。正常
- large : 绝对字体尺寸。根据对象字体进行调整。大
- x-large : 绝对字体尺寸。根据对象字体进行调整。较大
- xx-large : 绝对字体尺寸。根据对象字体进行调整。最大
- larger : 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算
- smaller : 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算
- length : 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。 其百分比取值是基于父对象中字体的尺寸。请参阅 长度单位
- font-style：字体风格
- normal : 默认值。正常的字体
- italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
- oblique : 倾斜的字体
- font-weight：字体粗细
- normal : 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置
- bold : 粗体。相当于 700 。也相当于 b 对象的作用
- bolder : 比 normal 粗
- lighter : 比 normal 细
- 100 : 字体至少像 200 那样细
- 200 : 字体至少像 100 那样粗，像 300 那样细
- 300 : 字体至少像 200 那样粗，像 400 那样细
- 400 : 相当于 normal
- 500 : 字体至少像 400 那样粗，像 600 那样细
- 600 : 字体至少像 500 那样粗，像 700 那样细
- 700 : 相当于 bold
- 800 : 字体至少像 700 那样粗，像 900 那样细
- 900 : 字体至少像 800 那样粗
- span标签：如果一段文本内容中的某一个字体需要单独的样式，可以将这个字体放入到<span></span>标签中去，然后再使用样式来修饰这个标签
CSS伪标签
- a标签：为链接标签，可以实现很多网站的导航栏效果
- 伪类样式
- a:link：未访问时的链接样式
- a:hover：鼠标悬停到链接部分时的样式
- a:visited：访问后的链接样式
- a:active：鼠标单击未释放的超链接样式
CSS文本样式
- text-align：水平居中
- line-height：行高
- text-decoration：设置文本修饰符（如删除线下划线等）
- text-indent：设置文本的首行缩进，单位是px
- text-shadow：设置文本的阴影效果有四个参数，px px px 颜色，第一个表示水平偏移，第二个不是竖直偏移，第三个指定阴影的模糊程度值越小越清晰，第四个表示阴影颜色
CSS列表样式
- list-style-type：列表样式常用取值有
- none：无标记符号
- disc：实心圆
- circle：空心圆
- decimal：数字
- square：实心正方形
- list-style-type：列表样式图片
- ul、li是一对组合标签，表示的是无序列表。可以通过list-style-type将ul、li标签前面默认项目符号去掉
- 通过list-style-image可以将ul、li前面默认的项目符号换成指定的图片
CSS背景样式
- background-color：背景颜色
- background-image：背景图片
- background-repeat：背景图片平铺
- 线性渐变有：
- 第一个参数：控制渐变的反向（top、left、right、bottom)
- 第二个参数：渐变的起始颜色
- 第三个参数：渐变的结束颜色
盒子模型的边框
- 盒子模型结构图（使用div标签）
- 边框样式：盒子的边框样式主要有三个方面
- 边框的颜色（border-方向-color)
- border-top-color：上边框颜色
- border-bottom-color：下边框颜色
- border-left-color：左边框颜色
- border-right-color：右边框颜色
- border-color：四个边框的所有颜色
- 边框的粗细（border-方向-width)
- border-top-width：上边框粗细
- border-bottom-width：下边框粗细
- border-left-width：左边框粗细
- border-right-width：右边框粗细
- border-width：四个边框的所有粗细
- 边框的特征（border-方向-style)
- border-top-style：上边框特征
- border-bottom-style：下边框特征
- border-left-style：左边框特征
- border-right-style：右边框特征
- border-style：四个边框的所有特征
- 控制盒子的圆角border-radius
- 可以直接通过border样式设置盒子的特征、粗细、颜色
盒子模型的边界（margin)
- 边界（外边界，margin）：盒子模型中边框（border）的最外一层就是盒子的边界线，边界线是无色透明看不见的，因此不能够控制边界线的颜色和粗细。边框和边界线之间的距离称为“外边距”
- margin-top：上外边距
- margin-bottom：下外边距
- margin-left：左外边距
- margin-right：右外边距
- margin：上 右 下 左
- background可以设置内部填充的颜色
- 将margin-left和margin-right两个值都设为auto可以使盒子居中
盒子模型的内边距
- 内边距（padding):是盒子边框与盒子内容之间的距离，内边距同边界（margin)一样，是无色透明看不见的。
- padding-top：上内边距
- padding-bottom：下内边距
- padding-left：左内边距
- padding-right：右内边距
- padding：上 右 下 左
- 背景色渐变：通过css3中的linear-gradient属性来控制，语法为-webkit-linear-gradient(方向，颜色1，颜色2)。不是所有的浏览器都支持，不支持的话可以在“linear-gradient”前面加上浏览器的内核名
- 盒子阴影：box-shadow(x,y,z,颜色）
- 盒子旋转：transform:rotate（旋转角度）
- 居中的前提是必须为每一个盒子指定宽度
相对定位
- position的含义是值定位，position常用的值有：relative（相对定位）、absolute（绝对定位）
- relative相对定位：相对自身原来的位置进行偏移，可以使用的值有top、left、right、bottom；代码background: blue;left:30px;top:20px;
相对定位
- 当position的属性为absolute时，表示的是绝对定位
- 绝对定位（absolute）：使用绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，会以浏览器为基准进行定位
- 在相对定位中，原来的元素还占据位置；绝对定位中原来元素不占据位置；
z-index
1.z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面。
2835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
