html+css基础知识总结

最新推荐文章于 2024-04-27 12:50:08 发布

善哉！善哉

最新推荐文章于 2024-04-27 12:50:08 发布

阅读量318

点赞数

分类专栏： HTML CSS基础知识

本文链接：https://blog.csdn.net/qq_50308970/article/details/109749847

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS基础知识

4 篇文章 0 订阅

订阅专栏

web前端开发HTML和CSS入门总结

HTML超文本标记语言代表网页结构

HTML超文本标记语言、语法

标签分类

双标签

<标签名 特性=" ">内容</标签名>

<!doctype html>

<html></html>表示整个网页主体

<head></head> 表示网页的头部

<body></body> 表示网页的身体

<title></title> 表示 网页头部中的标题

<div></div> 表示网页中的一个盒子、块

<p></p> 表示段落标签

<h1></h1> 表示大标题

<ul></ul> 表示无序列表和li标签组合使用

<li></li> 表示有序列表和li标签组合使用

<li></li> 表示一行列表和ul\ol组合使用

<dl></dl> 表示自定义列表和dt、dd标签组合使用

<dt></dt> 自定义列表里的标题一般一个列表只有一个dt

<dd></dd> 自定义列表里的一行

<a href=" "></a> 超链接 跳转页面 下载文件 锚点

<b></b> 表示文字加粗

<span></span> 常用于文字特殊修饰

<i></i>表示文字斜体

<u></u> 表示文字下划线

<s></s> 表示文字中划线

<em></em> 表示强调为字体斜体

<strong></strong> 表示强调字体加粗

<table></table> 表示表格和tr、td组合使用

<tr></tr>表示一行和table组合使用

<td></td> 表示一行里的一列和table组合使用

单标签

<标签名 特性=" "/>

<meta charset="utf-8"/> 告诉浏览器的编码格式标准 在网页中可以出现多次不同的特性 有不同的作用

<br/> 表示文本换行

<hr/> 表示完美分割线

<img src="图片的路径"/>在网页表示一张图片

表单元素

<form></form>

作用代表表单容量

特性action=“提交信息的地址路径”

特性method=“get/post”提交信息的方式

特性name=“form”给表单元素起名字方便查找

<input/>

作用 表单元素 通过设置 属性 type 的值 来代表不同的表单控件、元素

特性type

text表示这个表单元素是单行文本输入框

password表示这个表单元素是密码输入框

radio表示单选框

checkbox表示复选框

button表示普通按钮

submit表示提交按钮 提交表单的所有带name属性的信息

reset表示重置按钮 也就是重新输入/清空

特性value

表单元素所代表的初始值 或者 是输入框所输入的内容

特性placeholder

文本输入框提示信息

特性checked

只用于单选 复选框 的默认选中状态

特性name

用于给这个表单元素取名字（可以重复），方便查找，表单元素

<textarea></textarea>

表示多行文本输入框

特性type=“text” 类型是文本

特性name用于给这个表单元素取名字（可以重复），方便查找，表单元素

属性cols="30"表示宽度30字体那么宽

属性rows=“5”显示5行字 超出部分 出现滚动条

<select><option>选项</option></select>

表示下拉列表框

子元素option 代表列表里的选项

属性selected表示默认选择的选项

特性value 表示该选项的默认值

属性value 表示当前选中选项的值

特性name用于给这个表单元素取名字（可以重复），方便查找，表单元素

size=“2”表示一次可以选择两个值

<button>按钮</button>

等于<input type="button" value="按钮"/>

标签的基本特性所有标签都共有的

id 表示标签的id名 <div id="box"></div>

class 表示标签的类名 类名可以重复被别的标签使用 可以设置多个类名 例如<div class="div1 div2"></div>

style 表示标签样式的设置 <div style="样式1； 样式2；"></div>

width :100px 样式表示设置标签的宽度100像素

height :100px 样式表示设置标签的高度100像素

background-color:red 表示样式设置标签的背景颜色 英文单词 RGB（0,0,0） 16进制的色卡

color：样式 表示字体颜色

line-height:40px 样式表示一行字体的高度在盒子里为40px

text-align ：center left right 样式表示 文字对齐方式

font-size :14PX 样式表示设置字体的大小

border：1px red solld; 样式表示边框一像素 红色 实线的边框

margin：顶部边距0 右侧边距0   下面边距0 左侧边距0

title 当鼠标划入标签时所需要的文字提示<div title"这是一个div 盒子"></div>

网页的标准结构

<!doctype html>

表示给浏览器声明此文件类型是HTML5格式

<html></html>

<head></head>

<meta charset="utf-8"/>

告诉浏览器编码格式是UTF-8 国际标准

<title>网页的标题</title>

网页的标题 在网址栏里显示网页的标题

<body></body>

布局标签块标签

<div>

<h1>-<h6>

<p>

<ul><li></li></ul>

文本标签行内标签、内联标签

<mark></mark>

<strong>

<em></em>

<s></s>

<i></i>

<u></u>

<b></b>

<span></span>

<a href=" "></a>


图片、表单 行内块


<img src="路径">


style="vertical-align:middle" 图片的垂直居中 用于文字和图片在一行上可以是文字和图片在一排都是垂直居中 图片的专属特性值

按钮button

input表单输入框

select>option下拉列表框

textarea多行文本输入框

CSS层叠样式表网页结构的表现、修饰、样式

CSS的引入

行间样式

在标签的style里设置样式为行间样式<div style="width:10px;"></div>

内联样式

在头部的<style>#div{width:100px;height:100px;}</style>

外联样式

在头部里引入<link rel="stylesheet" type="text/css" hrer="CSS路径"/>

外部导入

在内联式或者 外联样式文件里导入CSS文件 @import url("路径");

CSS选择器

基础选择器

tagname标签名选择器

div{ color:red }

选择所有div标签

class类名选择器

.box{ color:blue } 选择带有class=“box"的标签

id选择器

#box{ color：red } 选择id="box"的标签 id 的值不可重复

群组选择器

并列选择多个标签 一群 .box,.spa,.list,ul li{ color:red }

关系选择器

父子关系

.box p{color:red}在box里找到所有子元素p

兄弟关系

p空格 +空格 a{ color:red }与P标签相邻的a标签

p ~ a p标签后面的a标签

关联选择

div.box{ color:red } 选中带有类名box的 div标签

伪类状态

a:link{color:red} a链接未任何操作 状态 时的样式

a:visited{color:red} a链接访问后 状态 时的样式

a:hover{color:red} 鼠标划入a链接 状态 时的样式

a:active{color:red} 鼠标按下与释放之间的 状态 时的样式

div:hover{color:red;}//鼠标划入div时的样式

.box:hover span{color:red} 鼠标划入box时 对子元素span 设置样式

通配符选择器

表示选择所有的标签 *{}

表示选择所有的标签 *{ margin：0； } 所用的标签 谨慎使用

属性选择器

input[ type="checkbox" ]{ color：red； }选择input类型为type=“CheckBox”的元素

[ name="inp" ]{ color:red; } 选择带属性name="inp"的元素

CSS盒子模型

标准盒子模型

内容content

width：100PX；height：100PX；

内边距padding

padding：10PX；上下左右内边距为10像素

padding:10px 20px;上下10像素 左右20像素

padding：10px 20px 5px;上10PX 左右20PX 下5PX

padding:10px 20px 0 0 ;上10PX 右20PX 下0PX 左0PX

padding-top

padding-right

padding-bottom

padding-left

边框border

复合属性

border:red solid 1px;

border-left

border-right

border-top

border-bottom

border-radius:100px 0 100px 0 ;倒角 左上角开始 顺时针 四个角

边框样式

border-width:2px;

border-left-width:

border-right-width:

border-top-width:

border-bottom-width:

border-style:solid;

border-left-style:

border-right-style:

border-top-style:

border-bottom-style:

border-color:red;

border-left-color:

border-right-color:

border-top-color;:

border-bottom-color:

外边距margin

margin：10PX；上下左右内边距为10像素

margin:10px 20px;上下10像素  左右20像素

margin：10px 20px 5px;上10PX 左右20PX 下5PX

margin:10px 20px 0 0 ;上10PX 右20PX 下0PX 左0PX

margin-top

margin-right

margin-bottom

margin-left

元素标签类型的特征

行内元素 inline

宽度高度设置无效 默认由内容撑开

同类标签在一排排列 排不下自动换行

对margin上下无效

解析代码换行 有半个字体的间隙

块元素 block

独占一行

宽度默认充满父级元素的宽度

高度默认由内容撑开

对所以CSS样式有效

行内块元素 inline-block

宽高设置生效

同类元素在一排排列 排不下自动换行

对margin有效

解析代码换行

标签类型的转换display

none表示隐藏 删除

block表示显示 显示为块

inline表示行内元素

inline-block表示行内块元素

背景图片的使用

复合属性background:red url(' ') no-repeat x y fixed;

背景样式

background-color：red；背景颜色

background-image：url (' ') 背景图片的路径

background-repeat:repeat背景图是否平铺

repeat平铺 重复

repeat-X 水平平铺

repeat-Y 垂直平铺

no-repeat 不平铺

background-position:x y;背景图位置的偏移

具体的数值 带px单位 x是正值 向右偏移 x为负值 表示背景图向左偏移 y是正值 向下偏移 y 是负值 向上偏移

百分比%

x y 可以是方位词 x (left right center ) y (left right center)

background-attachment:scroll; 背景图是否固定

fixed 背景图固定

scroll 默认不固定

文本样式的设置

文字样式

font-size

font-style:ittalic 文字风格为斜体

normal 默认风格

font-family :"微软雅黑" 文字格式/系列

font- weight:700; 字体加粗 0---900 400等同于normal 而700等同于 bold

color:#fff; 字体颜色

文本修饰

text-align:center;文字的水平对齐方式

left 默认

right

center

line-height:30px;一行字的高度是30px 行高

text-decoration:none;文字下划线的修饰

none无修饰 线

underline 下划线

overline 上划线

line-thround中划线

text-indent:2em;首行文字缩进 两个字大小

letter-spacing:5px;文字间距5PX

word-spacing:5px;英文单词间距5PX

布局类的样式设置

浮动float

left

right

none默认无浮动

特殊样式

opacity ：0-1； 透明度

范围0-1表示透明度 会把元素及元素的的内容透明度都会发生改变

background:rgba(0,0,0,0,0)背景颜色透明

visibility:hidden;元素隐藏 相当于透明度为0

visible 显示

overflow:hidden;溢出隐藏

display:none; 隐藏 相当于删除，