首页  思维导图  详情

李芊芊 html_css_学习笔记

2023-09-17 17:10:32   11  举报





AI智能生成

学习笔记

学霸笔记

作者其他创作

大纲/内容

html

常用的HTML标签

标题标签 <h1>这是一级标题标签</h1>

段落标签 <p>这是一个段落标签</p>

换行标签 <br>

图片标签 <img src="" title="">

超链接标签 <a href="http://www.baidu.com">跳转到百度</a>

绝对路径与相对路径

绝对路径：以最原始位置为基准

相对路径：以当前位置为基准

列表标签

无序列表 <ul></ul>

有序列表<ol></ol>

定义列表<dl></dl>

表格标签

table：整个表格的最外层标签 tr：行标签 th：表格标题标签 td：列标签，一个td，就是一个单元格表格标签属性： border：边框宽度

表格合并：表格合并中两个重要属性： ● colspan：合并列 ● rowspan：合并行

表单标签

form标签 form是表单最外层标签。 action属性：提交服务器地址 method属性：提交方式：get、post

.其它标签

文本框 <input type="text" placeholder="用户名" value="zhangsan" />

密码框<input type="password"/>

单选按钮

复选框

下拉列表

文件域

文本域

提交按钮

重置按钮

普通按钮

容器标签div与span

div标签：块级标签，可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果

span标签：内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。

css

CSS选择器

HTML标签选择器：直接作用于某个HTML标签

类选择器：可在页面中被多次使用

ID选择器：作用于同一ID的某个资源，同一个页面中只能使用一次

层次选择器

后代选择器： E F 选择所有被E元素包含的F元素

子选择器： E > F 选择所有作为E元素的子元素F（只选择第一代子元素）

群组选择器：多个选择器通过逗号连接而成，利用群组选择器同时声明风格相同样式

伪类选择器

first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

:last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

CSS引入方式

行内样式写在某个标签中，只对本行有效

内嵌样式样式写在某个页面的style标签中，只对本页面有效。

外部样式将样式代码写在一个单独的文件中（.CSS文件），使用时要将这个.CSS文件导入使用

CSS优先级

1. 从引用方式方面来说：行内样式 > 内嵌样式/外部样式 2. 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

CSS继承

CSS继承规则： 1. 子标签可以继承父标签的样式风格 2. 子标签的样式不会影响父标签的样式风格 3. 一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

CSS中的颜色

主要有以下两种： 1. 使用英文单词作为颜色值 2. 使用十六进制的颜色值

CSS常用样式

字体样式

font-family 设置字体名称 font-size 设置字体大小 font-style 设置字体风格 font-weight 设置字体的粗细

文本样式

color 设置文本颜色 text-align 设置元素水平对齐方式 vertical-align 设置元索垂直对齐方式 (可为负值） line-height 设置文本的行高 text-decoration 设置文本的装饰

尺寸样式

width 宽度长度或百分比（不可为负值） height 高度长度或百分比（不可为负值）

列表样式

list-style 设置值为none,可去掉列表自身样式

背景样式

background-color 背景颜色 background-image 背景图象 background-repeat 背景重复

鼠标样式

default 默认光标 pointer 超链接的指针 wait 指示程序正在忙 help 指示可用的帮助 text 指示文本 crosshair 鼠标呈现十字状

伪类样式

a:link 未单击访问时超链接样式 a:visited 单击访问后超链接样式 a:hover 鼠标悬浮其上的超链接样式 a:active 鼠标单击未释放的超链接样式 a:active

透明度样式

opacity:X X取值为0-1，值越小越透明

盒子模型

外边距样式 margin

边框样式

● border-width：设置或检索对象边框宽度。 ● border-style：设置或检索对象边框样式。 ● border-color：设置或检索对象边框颜色

内边距样式 padding

盒子模型尺寸

● 盒子模型总尺寸=border（两个边框宽度）+padding（两个内边距宽度）+内容宽度 ● 盒子模型占用空间=margin（两个外边距宽度）+盒子模型总尺寸

三种元素

块级元素（block level）

内联元素（inline 行内元素）

块级内联元素

显示与隐藏

display样式有两个功能： ● 控制元素的显示和隐藏 ● 块级元素与行级（内联）元素的转变

元素定位

1. static：静态定位（默认）。依据文档流定位。 2. relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。 3. absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。 4. fixed：固定定位。以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

弹性布局

flex-direction属性就是用来设置主轴方向的。

flex样式