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 条评论
下一页
