Web前端入门 HTML+CSS基础

HTML+CSS基础知识总结

目录

  • HTML+CSS基础知识总结
    • 1.web标准
    • 2.HTML基本标签
          • 2.1基本标签
        • 2.2表格
          • 表格标题caption
        • 2.3表单
        • 2.4标签分类和特性
    • 3.选择器
        • 3.1 常用选择器种类
        • 3.2选择器权重和优先级(重点)
    • 4.CSS属性
        • 4.1文字属性
        • 4.2背景
        • 4.3边框
    • 5.盒模型
    • 6.浮动
        • 为什么要浮动?怎么清除浮动?(重点)
        • 清除浮动的几种方式(重点)
    • 7.定位
    • 8.display属性值
    • 9.伪类
    • 10.注释
    • 11.文本下划线
    • 12.CSS3属性
    • 13.浏览器内核

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>

表格横向合并:
表格竖向合并:

表格有部分属性我们不常用,这里重点记住cellspacing.cellpadding。

Web前端入门 HTML+CSS基础_第1张图片

表格标题caption

语法:

<table>
	<caption>我是表格标题caption>
table>

注意:

1.caption元素定义表格标题,通常这个标题会被居中且显示于表格之上。
2.caption标签必须紧随table标签之后。
3.这个标签只存在表格里面才有意义。

2.3表单

表单提交

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

input type类型

<form action="提交地址">
        <input type="text" placeholder="我是文本框">
        
        <input type="radio" checked="checked" placeholder="我是单选框"><input type="checkbox" placeholder="我是复选框">
        <input type="password" name="" id="" placeholder="我是密码框">
        
        <textarea style="resize:none;">我是文本域textarea>
        <input type="submit" placeholder="我是提交按钮">
        
        <select name="" id="" value="">
            <option value="" disabled selected hidden>1option>
            <option value="">2option>
        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推荐的做法是通过在浮动元素末尾添加一个空的标签
例如

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

(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%;

13.浏览器内核

因为浏览器太多啦,但是现在主要流行的就是下面几个:
Web前端入门 HTML+CSS基础_第2张图片

你可能感兴趣的:(css,html基础,css,html,html5,web,css3)