HTML&CSS
2021-09-07 22:22:00 0 举报
AI智能生成
HTML&CSS
作者其他创作
大纲/内容
CSS
概念: Cascading Style Sheets 层叠样式表
使用方式
内联样式
在标签内使用style属性中编辑代码(不建议使用)
内部样式
在<head>标签内,<style>标签中编辑代码
外部样式
在单独的css文件中设置样式,通过<link>标签导入
选择器
id选择器
#id属性值{}
类选择器
.class属性值{}
元素选择器
标签名称{}
全局选择器
*{}
并集选择器
选择器1,选择器2{}
交集选择器
选择器1选择器2{}
后代选择器
选择器1 选择器2{}
子代选择器
选择器1>选择器2{}
*相邻兄弟选择器
选择器1+选择器2{}
*普通相邻兄弟选择器
选择器1~选择器2{}
属性选择器
元素名称[属性名="属性值"]{}
伪类选择器
元素:状态{}
状态
link:初始化的状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态
属性
文本字体
font-size:字体大小
font-family:字体类型
color:文本颜色
text-align:对其方式
text-decration:文本装饰
line-height:行高
尺寸
width:宽度
height:高度
透明度
opacity:0.0-1.0
背景
background
-color:背景颜色
-image:url()背景图片
-repeat:背景图片平铺方式(-x,-y)
边框
border:复合属性
尺寸 solid 颜色
-radius:边框圆角弧度
框属性
overflow
scroll
内容会被修剪,并且其余内容是不可见的
hidden
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
列表
list-style:列表属性
盒子模型
margin:外边距
值,%,auto
padding:内边距
值,%
float:浮动
left
right
定位
display:框类型
position:
relative:相对定位
absolute:绝对定位
fixed:绝对定位(相对于窗口)
HTML
概念
Hyper Text Markup Language 超文本标记语言,是最基础的网页开发语言
标签
语法
1. html文档后缀名 .html 或者 .htm
2. 标签分类
闭合标签(围堵标签/双标签):有开始标签和结束标签。如 <html> </html>
非闭和标签(单标签)——:开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
5. 不区分大小写,建议用小写
6. 注释:<!-- -->
7. 浏览器运行
文件标签
html:html文档的根标签
<!DOCTYPE html>:html5中定义该文档是html文档
标题标签
<title></title>
头标签:用于指定html文档的一些属性,引入外部的资源
<head</head>
体标签
<body></body>
文本标签
标题标签
<h1> to <h6>:字体大小逐渐递减,字体较粗,会换行,有间距
分割线
<hr>
换行标签
</br>
段落标签
<p></p>:有间距
块级标签:每一个div占满一整行
<div></div>
行内标签(内联标签):文本信息在一行展示
<span></span>
<b> <strong>:字体加粗
<em> <i>:斜体
<u>:下划线
<font>:字体标签
<center>:文本居中
转义字符
列表标签
有序列表
<ol>
列表项:<li>
无序列表
<ul>
列表项:<li>
自定义列表
<dl>
标题:<dt>
内容:<dd>
连接标签
<a href="http://www.baidu.com" target="_blank>百度</a>
href:指定访问资源的URL(统一资源定位符)
target:指定打开资源的方式
_blank:在空白页面打开
_self:默认值,在当前页面打开
锚点
图片标签
<img src="1.jpg" width="100px" height="100px" alt="图片"/>
表格标签
定义表格
<table>
width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离
bgcolor:背景色
align:对齐方式
定义表头单元格
<th>
定义行
<tr>
定义单元格
<td>
colspan:合并列
rowspan:合并行
划分区域
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
表单标签
<form>
action:指定提交数据的URL
method:指定提交方式
get
post
<input>
文本框
type="text"
name:便于数据提交
value:默认值
placeholder:提示信息
readonly:只读,该属性设置后,值能被提交
disabled:不可用,该属性设置后,值不能被提交
密码框
type="password"
单选框
type="radio"
name:便于数据提交,同组元素的name值相同
checked:默认选中,只能选一个
复选框
type="checkbox"
name:便于数据提交,建议一样
checked:默认选中,可选多个
文件选择框
type="file"
name:便于数据提交
数字框
type="number"
min:最小值
max:最大值
按钮
提交:submit
重置:reset
普通:button
图片:image
src:图片路径
隐藏域
type="hidden"
日期
type="date"
颜色
type="color"
<label>
下拉列表:<select>
multiple:默认展开,呈现多选的效果
option:列表项
value:值
selected:默认选中
文本域:<textarea>
name:同上
rows:行
cols:列
0 条评论
下一页