当我们在谈论HTML和CSS的时候，我们在谈什么？

我是一个从汽车行业转行IT的项目经理，我是Edward，如想了解更多，请关注我的公众号【转行项目经理的逆袭之路】。关于HTML以及CSS的相关知识，想发表一点看法。 相较于Java而言，无论是HTML还是CSS都显得很不严谨，而且功能零散缺乏有效整合，更像是在做PPT，而且还是没有图形界面功能的PPT，实在是伤神费脑，明明鼠标拖拽可以实现的效果，偏偏用了盒子模型怎么都调不好，如果这就是前端开发的工作，我真的是很替前端小姐姐们难过。

学HTML究竟学了些什么？

HTML

HyperTextMarkupLanguage: 超文本标记语言
超文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频)
标记语言格式: <开始标签 属性=‘xxx’>标签体
学习HTML主要学习有哪些标签 以及标签的使用方式.
创建HTML页面

常见的文本标签

内容标题h1-h6 align=“left/right/center”; 独占一行, 字体加粗, 自带上下间距
段落标签p 独占一行,自带上下间距
水平分割线hr
加粗 b
斜体 i
小字 small
删除线 s
下划线 u
换行 br 在html页面中回车不是换行 只能识别成一个空格
列表标签
无序列表 ul:type(控制图标) li
有序列表 ol:type(序号类型) start(起始值) reversed(降序) li
列表嵌套: 有序列表和无序列表可以任意无限嵌套
图片标签img

src:路径

相对路径:访问站内资源时使用
页面和文件同级目录:直接写图片名
文件在页面的上一级:…/图片名
文件在页面的下一级:文件夹名/图片名
绝对路径:访问站外资源时使用 图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片)
alt: 图片不能正常显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height: 两种赋值方式:1. 像素 2. 百分比
支持的图片格式: jpg/jpeg png gif

超链接a

a标签包裹文本是文本超链接,包裹图片是图片超链接
href:路径 可以指向页面也可以指向其它文件(如果浏览器支持浏览此文件则直接浏览,如果不支持则下载)
页面内部跳转: 回到顶部

表格标签table

相关标签: table tr td th caption
属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离 td:colspan跨列 rowspan跨行
表单
作用: 获取用户输入的各种信息并提交给服务器
学习表单主要学习的就是表单中有哪些控件(文本框 密码框 提交按钮 单选 多选 下拉选等)

<!-- action服务器地址 method提交方式 -->
<form action="http://www.tmooc.cn" method="get">
    <!-- 文本框 name是对传递过去的参数做介绍 id唯一标识 
    value值 设置文本框的值-->
     <input type="text" name="username" 
     placeholder="请输入用户名" id="" value="小明" />
     <!-- 密码框 placeholder占位文本 -->
     <input type="password" name="pwd" 
     placeholder="请输入您的密码" id="" value="" />
     <hr >
     <!-- 单选 必须写value  checked 设置默认选中-->
     性别: <input type="radio" checked="checked" name="gender" id="" value="m" />男
     <input type="radio" name="gender" id="" value="f" />女
     <hr >
     <!-- 多选 和单选类似-->
     爱好: <input type="checkbox" name="hobby" id=""
      value="cy" />抽烟
      <input type="checkbox" name="hobby" id=""
       value="hj" />喝酒
       <input type="checkbox" checked="checked" name="hobby" id="tt"
        value="tt" /><label for="tt">烫头</label>
        <!-- label扩充点击范围  -->
        <input type="checkbox" name="hobby" id="wz" value="wangzhe"/>
        <label for="wz">王者荣耀</label>
     <hr >
     <!-- 日期选择器-->
     生日:<input type="date" name="birthday" id="birthday"/> 
     <hr >
     <!-- 文件选择器-->
     靓照:<input type="file" name="pic" id="pic"/>
     <hr >
    <input type="submit" value="注册"/>
</form>

表单续

<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区域

头
体
脚

既然HTML什么都可以写还需要CSS干嘛？

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{}
选择器回顾
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;

CSS的三大特性

继承性:元素可以继承上级元素的文本和字体相关样式. 部分元素自身效果不受继承影响比如:h1-h6的字体大小,超链接字体颜色.
层叠性:多个选择器有可能选择到同一个元素,如果添加的样式不同会全部层叠生效,如果添加的样式相同则由优先级决定
优先级:作用范围越小,优先级越高. id>class>标签名>继承(属于间接选中)

盒子模型

盒子模型=外边距+边框+内边距+宽高
宽高: 用来控制元素显示大小
边框: 控制元素的边框效果
外边距: 控制元素显示位置
内边距: 控制元素内容的位置

盒子模型之宽高

赋值方式:两种
像素,单位是px
上级元素的百分比
如果只设置宽度高度会等比例缩放
行内元素不能修改宽高

盒子模型之外边距margin

什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距
赋值方式:
单独给某一个方向赋值: margin-left/right/top/bottom:10px;
四个方向赋值: margin:50px;
上下和左右赋值: margin:10px 20px; 元素水平居中 margin:0 auto; (注意这是让元素自身居中,text-align:center是让元素里面的文本在元素内部居中)
上右下左赋值: margin:10px 20px 30px 40px; 顺时针
上下相邻两个元素的外边距取最大值,左右相邻求和
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连显示异常,给上级元素添加overflow:hidden解决,给上级元素添加边框也可以解决(修改了元素原来的样子,不推荐)
h1,p,body这些元素自带外边距,使用时需要注意.

盒子模型之边框border

赋值方式:
单独给某一个边添加边框 border-left/right/top/bottom: 粗细 样式 颜色;
给四个方向添加边框 border:粗细 样式 颜色;
圆角: border-radius: 10px; 值越大越圆 超过宽高的一半时会变为圆形(前提是正方形)

盒子模型之内边距padding

什么是内边距: 元素边缘距内容的距离称为内边距.
赋值方式和外边距类似:
单独给某一个方向赋值: padding-left/right/top/bottom:10px;
四个方向赋值: padding:50px;
上下和左右赋值: padding:10px 20px;
上右下左赋值: padding:10px 20px 30px 40px; 顺时针
修改元素的内边距会影响元素的宽高
如果需要移动元素内的子元素有两种方式:
给大元素添加内边距去移动里面的小元素,这种方式会改变大元素的尺寸(不推荐使用)
给小元素添加外边距即可.

知识点都讲完了，Copy个网页练练手？

卧槽！ 浏览器都会Copy的东西为啥我Copy不出来…
脸都丢完了。

因为有最重要的没说。

让你对页面为所欲为，随意布局的真正秘诀是：

定位方式4+1

position定位

静态定位

(文档流定位):是元素的默认定位方式
格式:position:static
元素显示特点: 块级元素从上到下排列,行内或行内块元素从左向右排列,元素不易实现层叠效果
如何控制元素的位置: 通过外边距.

相对定位

格式:position:relative
元素显示特点: 元素不脱离文档流(元素不管显示到什么位置 仍然占着原来的位置)
如何控制元素的位置: 通过top/left/right/bottom控制元素的显示位置,坐标相对于初始位置
应用场景: 当需要移动某个元素,但移动该元素时不影响其它元素的显示效果,这时使用相对定位,如果做位置微调使用相对定位

绝对定位

格式: position:absolute
元素显示特点: 元素脱离文档流(当元素设置为绝对定位时会让出自己所占的位置)
如何控制元素的位置: 通过top/left/right/bottom控制元素位置,坐标相对于窗口(默认)或某一个上级元素(添加相对定位)
应用场景:如果移动到的位置是某个上级元素的角落使用绝对定位,如果需要往页面中添加一个元素而且不希望影响现有的显示效果(也就是不在文档流里面)使用绝对定位

固定定位

格式: position:fixed;
元素显示特点: 元素脱离文档流
如何控制位置: 通过top/left/rigth/bottom控制元素位置,坐标相对于窗口.
应用场景: 需要将元素固定在窗口的某个位置,并且不随着内容位置改变而改变

浮动定位

格式: float:left/right;
显示特点: 元素脱离文档流,元素从当前行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
如何控制元素位置: 通过外边距
如果元素的所有子元素全部浮动,则元素自动识别的高度为0,通过给元素添加overflow:hidden解决.
应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位

行内元素的对齐方式vertical-align

top 顶部对齐
bottom 底部对齐
middle 中间对齐
baseline 基线对齐(默认)