【复习向】30分钟快速回顾HTML&CSS基础
文章目录
-
-
-
-
- HTML基础
- CSS基础
- 列表
- 表格
- 表单
- 块元素、内联元素、内联块元素
-
-
-
HTML基础
- 定义
超文本标记语言 HyperText Markup Language - 基本结构
<html>
<head>
<meta charset="utf-8">
<title>html的基本结构title>
head>
<body>此标签中写网页中显示的内容body>
html>
- 相对路径与绝对路径
- 相对路径
相对于引用文件本身去定位被引用的文件地址- “./” 表示当前文件所在目录下
- “…/” 表示当前文件所在目录下的上一级目录
- 绝对路径
相对于磁盘的位置去定位文件的地址
- 相对路径
- 常用字符实体
- 空格
- “<” <
- “>” >
- 标签
- 标签类型
- 单标签
- 双标签
- 单标签
- 常用标签
- 块元素标签
- 标题标签
<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> <h4>四级标题h4> <h5>五级标题h5> <h6>六级标题h6>- 段落标签
<p>段落1p> <p>段落2p>- 通用块容器标签
<div>第一个div元素div> <div>第二个div元素div> - 内联元素标签
- 超链接标签
<a href="http://www.baidu.com" target="_blank">内容元素a> <a href="本地.html">本地链接a>- 通用内联容器标签
<span>内联容器标签span>- 图片标签
<img src="images/pic.jpg" alt="图片加载失败时的提示文字" title="光标放在图片上的提示文字"/> - 其他标签
- 换行标签
- html注释
- 换行标签
- 块元素标签
- 标签类型
- 标签语义化
在合适的地方用合适的标签；语义化做的好的，搜索引擎排名更前- 带语义的标签
- h1~h6
- p
- img
- a
- 标签 表示语气中的强调词
- 标签 表示专业词汇
- 表示文档中的关键词或产品名
- 表示非常重要的内容
- …
- 不带语义的标签
- div
- span
- 带语义的标签
- HTML5新标签
这些新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在PC端网站上，因为IE低版本不识别这些新标签。头部 文章块
CSS基础
- 定义
Cascading Style Sheets，层叠样式表 - 用途
html只负责文档的结构和内容，表现形式完全交给CSS，使html文档变得更加简洁 - 注释
/*注释内容*/ - 基本语法
选择器 { 属性：值； 属性：值； 属性：值；} - 引入方式
- 内联式
<div style="width:100px; height:100px; background:red ">......div>- 嵌入式
<head> <style type="text/css"> div{ width:100px; height:100px; background:red } ...... style> head>- 外链式
<head> <link rel="stylesheet" type="text/css" href="css/main.css"> head> - 常用选择器
- 标签选择器 --> 一般用来样式重置（清除默认样式）
<style> div{ color:red} style> ...... <div>这是第一个divdiv> <div>这是第二个divdiv>- 类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，可复用
<style> .blue{ color:blue} .big{ font-size:20px} .box{ width:100px;height:100px;background:gold} style> ...... <div class="blue">....div> <h3 class="blue big box">....h3> <p class="blue box">....p>- id选择器
通过id来选择元素，id唯一，但类名可以有多个，一般配合js使用（不常用）
<style> #id1{ color: blue} style> ...... <p id="id1">contentp>- 层级选择器
主要应用在标签嵌套的结构中，层级选择器可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围
<style> .con{ width:300px;height:80px;background:green} .con span{ color:red} .con .pink{ color:pink} .con .gold{ color:gold} style> ...... <div class="con"> <span>....span> <a href="#" class="pink">....a> <a href="#" class="gold">...a> div> <span>....span> <a href="#" class="pink">....a>- 组选择器
多个选择器有同样的样式设置
<style> .box1,.box2,.box3{ width:100px;height:100px} .box1{ background:red} .box2{ background:pink} .box2{ background:gold} style> ... <div class="box1">....div> <div class="box2">....div> <div class="box3">....div>- 伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态；伪元素选择器有before和after,它们可以通过样式在元素中插入内容
<style> .box1:hover{ color:red} .box2:before{ content:'行首文字';} .box3:after{ content:'行尾文字';} style> ... <div class="box1">....div> <div class="box2">....div> <div class="box3">....div> - 权重对比
- 引入方式
- 外链和内嵌权重相同，先写的会被后写的覆盖；
- 行内css权重最大，如果想覆盖他，就只能给样式中添加** !import** 来把权重提高
- 选择器权重计算
- 标签选择器权重值：1
- 类/伪类选择器权重值：10
- id选择器权重值：100
- css行内式写法权重值：1000
- !important修饰权重值：10000
- 层级选择器权重值累加计算
- 组选择器权重值不会累加
- 权重值相等时先写的会被后写的覆盖
- 从父元素继承的选择器权重值为0
- 引入方式
- 常用属性
-
布局常用样式属性
- width
- height
- background
- border
border:1px solid/dashed black --> 设置元素四周边框是1像素宽的黑色实线/虚线- border-top
- border-left
- border-right
- border-bottom
- float 设置元素浮动
- float:left; float:right;
- 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
- 浮动让行内元素或块元素转化为有浮动特性的行内块元素(此时不会有行内块元素间隙问题)
- 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的子元素无法撑开父元素，父元素需要清除浮动
- 清除浮动
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清除浮动样式类，clearfix
<style> .clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{ zoom:1;} style> ... <div class="con2 clearfix"> - 设置浮动可以解决的问题小结
- 行内元素及行内块元素的间距问题
- 垂直外边距margin-top/bottom不再合并问题
- margin-top塌陷问题 --> 子元素无法定位父元素的边界，也可以给父元素加border
- 排列一行的元素默认以文字基线对齐的问题
- 但如果要实现子元素在父元素中水平居中时不能用浮动
- margin 设置外边距（元素和父元素的距离）
- margin的写法：
- 四边都为10px --> margin:10px;
- 上下10px，左右20px --> margin:10px 20px;
- 上10px，左右20px，下30px --> margin:10px 20px 30px;
- 上10px，右20px，下30px，左40px（顺时针） --> margin:10px 20px 30px 40px;
- margin-top、margin-left、margin-right、margin-bottom
- margin左右值设为auto可以实现水平居中
- margin的写法：
- padding 设置内边距（元素包含的内容和元素边框的距离）
写法同margin - 盒子模型 --> 区分margin,padding
margin是与父元素的关系，padding是与子元素的关系
真实大小：width/height+border+padding（margin不影响）
-
文本常用样式属性
- color
- font-size
- font-family
- font-weight
- font-style:normal/italic
- line-height 设置行高
line-height:24px; --> 表示文字高度+文字上下的间距是24px，也就是每一行占有的高度是24px - text-align
一般用在块元素中，内联元素宽度和内容决定 - text-indent 设置文字首行缩进
em为相对长度单位，缩进两格即为2em - text-decoration 修饰文本
text-decoration:none; --> 将文字下划线去掉
-
overflow属性设置元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式 --> overflow:hidden- visible 默认值。内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
-
列表
- 无序列表
<ul>
<li><a href="#">列表标题一a>li>
<li><a href="#">列表标题二a>li>
<li><a href="#">列表标题三a>li>
ul>
- 有序列表
<ol>
<li><a href="#">列表标题一a>li>
<li><a href="#">列表标题二a>li>
<li><a href="#">列表标题三a>li>
ol>
- 自定义列表
<dl>
<dt>Coffeedt>
<dd>Black hot drinkdd>
<dt>Milkdt>
<dd>White cold drinkdd>
dl>
- 列表常用样式属性
list-style 设置列表中的小圆点/标号 --> list-style:none
表格
- 表格相关标签和属性
定义表格
定义表格标题 定义表格的表头 定义表格的行 定义表格单元 定义用于表格列的属性 - colspan属性 设置单元格水平合并，设置值是数值
- rowspan属性 设置单元格垂直合并，设置值是数值
- 表格常用样式属性
border-collapse 设置表格的边线合并，如：border-collapse:collapse;表单
- 表单相关标签和属性
- 标签 定义通用的表单元素
- type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- 如果想让文字点击能切换，那么要加label标签，并设置for属性和对应的单选按钮的ID属性值一致；
- 必须给一组单选按钮添加name值，才可以实现单选效果；
- 设置默认选中状态，要给单选按钮添加checked=“checked”
<form action="" method="post"> 性别: <input type="radio" name="xb" id="man" checked="checked"/><label for="man">男label> <input type="radio" name="xb" id="woman" /><label for="woman">女label> <input type="radio" name="xb" id="secret" /><label for="secret">保密label> form>- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名 --> name和value属性配合传值到后端
- autofocus="autofocus"属性 刷新后让第一个输入框呈默认选中状态
- outline:none属性 文本输入框清除高亮效果
- placeholder属性 代表提示信息
placeholder属性IE低版本不兼容，但实际工作中还要使用，符合渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本显示效果好的前提下，保证了低版本浏览器不混乱）理论
- type属性
- 标签 定义通用的表单元素