Web前端入门 HTML+CSS基础

时间:2020-9-19 作者:admin

HTML+CSS基础知识总结

1.web标准

结构上来说html页面分为head和body两部分
head里面包含meta标签(UTF8字符集)、title(网页标题)、link(外部样式表引入) body里面是各种常用的标签。
web页面标准分为结构(html)+样式(css)+行为(js)

2.HTML基本标签

2.1基本标签
<html>	<head>	<title>	<body>	<table>	<tr>	<td>
<span>	<p>	<form>	<h1>	<h2>	<h3>	<h4>	<h5>
<h6>	<object>	<style>	<b>	<u>	<strong>	<i>	<div>
<a>	<script>	<center>
单标签:<br>	<hr>	<img>	<input>	<param>	<meta>	<link>

2.2表格

 <table>
        <th></th>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

表格横向合并: <td colspan="横向合并行数"></td>
表格竖向合并:<td rowspan="竖向合并行数"></td>

2.3表单

表单提交

<form action="提交地址"></form>

input type类型

<form action="提交地址">
        <input type="text" placeholder="我是文本框">
        <!-- checked="checked" 这是默认选中 -->
        <input type="radio" checked="checked" placeholder="我是单选框"><input type="checkbox" placeholder="我是复选框">
        <input type="password" name="" id="" placeholder="我是密码框">
        <!-- 固定文本域大小 禁止拖动 resize:none; -->
        <textarea style="resize:none;">我是文本域</textarea>
        <input type="submit" placeholder="我是提交按钮">
        <!-- 下拉菜单  下拉菜单默认选中disabled selected hidden -->
        <select name="" id="" value="">
            <option value="" disabled selected hidden>1</option>
            <option value="">2</option>
        </select>
    </form>

2.4标签分类和特性

块元素: div、p、h1-h6、ul、ol、li 独占一行 能直接设置宽
行内元素: a、span、i、em 可以和别的行内元素占一行、不能直接设置宽高、能设置水平margin,不能设置垂直 margin
行内块元素: img、input 可以和别的行内元素或者行内块元素占一行、能直接设置宽高

3.选择器

3.1 常用选择器种类

id选择器、类选择器、后代选择器、子集选择器、标签选择器、并集选择器

3.2选择器权重和优先级(重点)

!important        ∞无穷大

内联样式           1000

id选择器优先级      100

类选择器优先级      10

标签选择器优先级    1

通配符优先级        0

即:!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符

4.CSS属性

4.1文字属性

font-family 设置字体
font-size 设置字体大小
color 设置字体颜色
font-weight 设置字体加粗
text-align:center 设置文本水平居中
line-height 设置单行文本垂直居中
margin:0 auto 设置标签水平居中

4.2背景

background-color 设置背景颜色
background-color:rgba() 设置背景透明度
background-image:url() 设置背景图片
background-repeat 设置背景图片是否重复
background-position 设置背景图片位置

4.3边框

border:2px solid #000; 设置边框粗细 类型 颜色
border-radius 设置边框圆角
box-shadow 设置边框阴影

soild是实线 dashed是虚线

5.盒模型

一个盒子由content+padding+border+margin组成

padding:10px 代表上下左右都是10px
padding:10px 20px 上下是10px 左右是20px
padding:10px 20px 30px; 代表上 左右 下
padding:10px 20px 30px 40px; ;代表上右下左
										margin同理

6.浮动

浮动的方式:

 			float: left; 左浮动
            float: right;右浮动
            float: none; 元素不浮动(默认值)

为什么要浮动?怎么清除浮动?(重点)

页面布局的时候子元素不浮动的时候会撑起父盒子的高度,如果浮动了父盒子的高度为0,对后面的页面布局造成影响,所以需要清除浮动。

清除浮动的几种方式(重点)

(1)额外标签法
是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签
例如<div style="clear:both"></div>

优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差。

(2)overflow:hidden
可以给父级添加:overflow为hidden/ auto/ scro11

优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

(3))使用after伪元素清除浮动

使用方法:
.clearfix:after {
		content: ""; 
		display: block; 
		height: 0; 
		clear: both;
		visibility: hidden; 
}
.clearfix {
		*zoom: 1;
}/*IE6、7专有*/

7.定位

定位模式有三种:绝对定位 相对定位 固定定位

绝对定位 position:absolute;
相对定位 position:relative;
固定定位 position:fixed;

z-index:999;表示层叠顺序或者层级

8.display属性值

display:none 隐藏但是不占位置 作用:元素展和转换为块元素
visibility:hidden 隐藏但是占据位置
display:inline 转换成行内元素
display:inline-block 转换成行内块元素

9.伪元素

简记:lvha

a:link 初始状态
a:visited 访问过后的
a:hover 鼠标经过
a:active 鼠标点击瞬间

10.注释

html注释 <!-- -->
css中注释 /* */
js中的注释 //

11.文本下划线

ul去除小圆点 list-style:none
a标签去除下划线 text-decoration:none
a标签横穿线 text-decoration:line-through
a标签添加下划线 text-decoration:underline

12.CSS3属性

旋转 div 元素:

transform:rotate(30deg);

缩放div元素:

 transform: scale(0.98);

div元素阴影:

 box-shadow:6px 6px 6px 6px #969494;

边框圆角:

box-radius:50%;
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。