HTML&CSS快速入门学习笔记

最新推荐文章于 2024-06-12 19:53:28 发布

深海中有鱼

最新推荐文章于 2024-06-12 19:53:28 发布

阅读量344

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/m0_46129241/article/details/104515720

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

HTML&CSS快速入门学习笔记

一、HTML与CSS

发展历程
HTML的定义
是超文本标记语言，不是编程语言。
HTML最新标准是HTML5.
CSS的定义
CSS层叠样式表控制Web页面的外观。
HTML搭建网页的结构，CSS装饰。

二、常用的HTML标签和属性

标题标签：h1~h6（仅用于标题）
图片：(不是插入标签，是链接图片)
链接：（在HTML4.01中，a标签可以是超链接或锚，在HTML5中a标签始终是超链接，但未设置href,则是占位符）
表格

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

跨列：colspan
跨行：rowspan

列表：ol(有序)、ul(无序)
行内元素（同行，水平方向排列，行内元素不能包含块级元素，设置width、height无效，margin、padding上下无效）

button、input、label
a、br、img
select、span、textarea等

块级元素（各占一行，垂直方向排列，块内元素可以包含块级元素和行内元素，）

ol、ul、p、h、hr
div、form、pre
audio、video、canvas等

三、HTML表单元素

input元素

<input type="text" />

type有如下值：

text:文本（几行rows、几列cols）
password：密码
radio：单选按钮
checkbox:复选框
button:按钮
number：包含数字值的输入字段
submit:提交
等等

select元素（下拉列表）
默认选中：

<option value="xxx" selected>xxx</option>

textarea元素(文本域)

几行rows
几列cols

button(按钮)

 <button type="button" >xxx</button>

四、使用css属性快速雕琢HTML标签

CSS结构
选择器，以及一条或者多条声明
CSS常用属性

background：背景
border ：边框
font：字体等等

写法

行内样式
内嵌样式
外部样式

优先级

行内样式 > 内嵌样式 > 外部样式
默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

五、CSS选择器

常用的CSS选择器

元素选择器：div、span、a、html
id选择器：#item(仅唯一)
class选择器：.item（可多个）
通配符选择器：*（全部，避免使用）

id选择器 > class选择器 >元素选择器 > 通配符选择器

属性选择器：a[href = “xxx”]
子类选择器：h1 > strong(需父子，避免使用)
相邻选择器：h1 + p

六、HTML5&CSS3新特性

HTML是什么
新的网络标准、减少插件依赖
HTML5新特性-语义化标签
HTML5新特性-新表单控件
email、url、number、rang、date、month、week、time、datetime、search、tel、color等等
HTML5新特性-canvas
画布，可以画圆、矩形、直线等
HTML5新特性-本地存储

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期。
sessionStorage：用于存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后数据也随之销毁。
以前由cookie完成，但是cookie有4KB的大小限制，而且会随HTTP请求一起被传递，无形中拖慢网页速度而且效率不高。

CSS新特性

圆角-- border-radius：50%
阴影-- box-shadow：10px 10px 3px #ff00ff;
box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色][投影方式]
渐变色彩-- 线性渐变（liner）和径向渐变（radial）
background:liner-gradient(to right,red,orange,blue);
background:radial-gradient(red,orange,blue);
分栏
column-count:3;
columan-rule:ipx solid #000;
columan-gap:2em;（栏目之间的间隔大小）
变形-- transform
旋转：rotate
缩放：scale
位移：translate
扭曲：skew

七、读懂bootstrap

前端框架bootstrap简介
开源的前端工具包
一个CSS/HTML框架
由动态CSS语言Less写成
热门开源项目
特点及优势
简洁、直观、强悍、迅速、简单
支持响应式开发
文件引入
jquery必须在bootstrap之前引入
bootstrap>1.9.0之上
栅格布局1-12
.col-xs- 超小屏幕手机（<768px）
.col-sm- 小屏幕手机（>=768px）
.col-md- 中等屏幕桌面显示器（>=992px）
.col-md- 大屏幕大桌面显示器（>=1200px）