###课程回顾
文本标签
内容标题h1-h6： 独占一行 自带上下间距 字体加粗 字体从大到小
段落标签p ： 独占一行 自带上下间距
换行 br
水平分割线hr
字体相关： b加粗 i斜体 small小字 s删除线 u下划线
列表标签
无序列表： ul：type li
有序列表： ol：type start reversed li
列表嵌套： 有序和无序可以任意无限嵌套
图片标签img
src：路径
相对路径：访问站内资源时使用
图片和页面在同一目录： 直接写图片名
图片在页面的上级目录时：…/图片名
图片在页面的下级目录时：文件夹名/图片名 。。。…
绝对路径:访问站外资源时使用, 称为图片盗链,可以节省本站资源,但是有找不到图片的风险
alt: 图片不显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height: 两种赋值方式:1. 像素 2.百分比 ,如果只设置宽度高度会自动等比例缩放
超链接a
href: 路径, 可以指向页面或其它文件(浏览器支持浏览则浏览,不支持则下载)
包裹文本就是文本超链接,包裹图片就是图片超链接
页面内部跳转, 回到顶部
表格table
标签: table tr表示行 td表示列 th表头(加粗并居中) caption表格标题
属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离
表单form
学习表单就是学习表单中的各种控件
文本框 <input type="text" name placeholder占位文本 value值>
密码框 <input type="password" name placeholder value>
单选<input type="radio" name value checked="checked" id="abc"><lable for="abc">让文本也能点击</label>
多选<input type="checkbox" name value checked="checked">
文件选择器<input type="file" name >
日期选择器<input type="date" name >
###表单续
<form action="http://www.tmooc.cn" method="get"> <!-- 下拉选 --> 所在城市:<select name="city"> <option value="bj">北京</option> <!-- selected默认选中 --> <option value="sh" selected="selected">上海</option> <option value="gz">广州</option> </select><br> <!-- 文本域 rows行 cols列--> 自我介绍:<textarea name="intro" rows="3" cols="20" placeholder="说点儿啥..."></textarea> <!-- 提交按钮 --> <input type="submit" value="注册"/> <!-- 重置按钮 --> <input type="reset" /> <!-- 自定义按钮 --> <input type="button" value="按钮" /> <button type="button">按钮</button> </form>
###实体引用(特殊字符)
空格:空格折叠现象就是多个空格连续出现只能识别一个
小于号: <
大于号: >
###分区标签
分区标签可以理解成是一个容器,将多个有相关性的标签放进一个容器,可以对多个标签进行统一管理
div:块级分区元素,特点:独占一行
span:行内分区元素,特点:共占一行
html5标准中新增的分区标签 作用和div一样: header头 footer脚 article正文 nav导航 section区域
<div>头</div> <div>体</div> <div>脚</div> <header></header> <nav></nav> <article></article>或<section></section> <footer></footer>
CSS
Cascading Style Sheet:层叠样式表,作用:是用于美化页面的
如何在html页面中添加CSS样式代码?
内联样式:在标签的style属性中添加样式代码,不可以复用 使用较少
内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用,这种写法学习使用较多,工作中使用较少
外部样式: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将html和css代码分离开
选择器
标签名选择器
格式: 标签名{样式代码}
作用: 选取页面中所有同名标签
id选择器
格式: #id{样式代码}
作用: 选取页面中指定id的元素(id必须唯一)
class选择器
格式: .class{样式代码}
作用: 选取页面中指定class值得多个元素
分组选择器
格式: div,#abc,.c1{样式代码}
作用: 将多个选择器合并成一个选择器
属性选择器
格式: 元素名[属性名=‘值’]{样式代码}
作用:选取页面中所有指定属性名和值得元素
任意元素选择器
格式: *{样式代码}
作用: 选取页面中所有的元素
子孙后代选择器
格式: body div span{样式代码}
作用:选取body里面div里面所有span(包括所有后代)
子元素选择器
格式: body>div>span{样式代码}
作用:选取body里面的div里面的所有子元素span
伪类选择器
该选择器选择的是元素的状态: 鼠标悬停状态 点击状态 未访问状态 访问过
格式: a:hover/active/link/visited{}
练习要求
水煮鱼为红色字
红烧肉 水煮鱼 宫保鸡丁背景蓝色
文本框背景绿色
d2字体绿色
d3 s3 h3 字体紫色purple
d3 s3 h3 d2 s1 s2 s3 背景绿色
所有元素添加蓝色实线边框
###选择器回顾
id选择器 #id{}
标签名选择器 div{}
class选择器 .class{}
分组选择器 #id,div,.class{}
属性选择器 input[type=‘button’]{}
任意元素选择器 *{}
子孙后代选择器 div span{}
子元素选择器 div>span{}
伪类选择器 a:visited访问过/link未访问/hover悬停/active点击{}
颜色赋值方式
三原色: red green blue 任何颜色都是三原色组成,每个颜色的取值0-255
颜色单词赋值 red
6位16进制赋值 每两位表示一个颜色 #ff0000
3位16进制 每一位重复 #f00等效#ff0000
3位10进制赋值 rgb(255,0,0)
4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度 值越小越透明
附: 颜色名及其十六进制列表
背景图片
设置背景图片
background-image: url(…/imgs/1.jpg);
设置背景图片尺寸
background-size: 100px 80px; //只给宽度赋值 高度auto 可以保证图片原始宽高比
禁止重复
background-repeat:no-repeat;
背景图片的位置
background-position:横向百分比 纵向百分比
元素的显示方式display
block: 块级元素,独占一行,可以修改宽高 包括:div h1-h6 p hr
inline:行内元素,共占一行,不能修改宽高 包括:span b i small s u 超链接a
inline-block:行内块元素,共占一行,也可以修改宽高: 图片img input
文本和字体相关样式
*水平对齐方式 text-align:left/right/center
*文本修饰:text-decoration: overline上划线/underline下划线/line-through删除线/none去掉文本修饰
文本阴影:text-shadow: 颜色 x偏移值 y偏移值 浓度(值越小越清晰)
*行高:line-height:30px; 可以通过行高实现文本垂直居中
*文本颜色: color:red;
*字体大小: font-size:20px;
*加粗: font-weight:bold/normal(去掉字体加粗)
斜体: font-style:italic;
字体设置: font-family:xxx,xxx,xxx; font:20px xxx,xxx,xxx;
