HTML&CSS简单学习,看这篇就够了!
发布日期:2021-07-01 00:12:39
浏览次数:2
分类:技术文章
本文共 1928 字,大约阅读时间需要 6 分钟。
文章目录
1 HTML
1.1 HTML基本标签
HTML: 超文本标记语言
p标签: 段落标签 br标签: 简单换行 h1-h6: 标题标签 hr标签: 水平分割线, 华丽的分割线 font标签: color属性改变颜色, size字体大小 b标签: 加粗 i标签: 斜体 strong标签: 带语义的加粗 em标签: 斜体标签,带语义
img标签: 图片标签 显示图片
src: 指定图片路径(相对路径) width: 宽度 height: 高度 alt: 图片加载失败时的提示
相对路径:
./ 代表当前路径 …/ 代表的是上一级路径 …/…/ 代表的是上上一级路径
ul标签: 无序列表
ol标签: 有序列表 li标签: 列表项
a标签: 超链接标签:
target: 打开方式 href: 指定要跳转的链接地址
table标签: table > tr > td
tr标签: 行 td标签: 列 合并行: rowspan 合并列: colspan
form 标签: 表单标签,主要是用来向服务器提交数据
method: 提交方式 get post action : 提交的路径
input 标签:
type: password: 密码框 text: 文本 submit: 提交 button: 普通的按钮 reset: 重置按钮 radio: 单选按钮 设置name属性让它们是一组 checkbox: 复选按钮
1.2 表格布局的缺陷
- 嵌套层级太多,一旦出现嵌套顺序错乱,整个页面达不到预期效果。
- 采用表格布局,页面不够灵活,动其中某一块,整个表格布局的结构全都要变。
1.3 HTML的块标签
div
标签: 默认占一行,自动换行span
标签: 内容显示在同一行
2 CSS
2.1 CSS概述
- Cascading Style Sheets: 层叠样式表
- 主要作用: 用来美化我们的 HTML 页面的 HTML 决定网页的骨架,CSS 化妆 将页面的HTML和美化进行分离
- CSS的简单语法: 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
2.2 CSS选择器
- 帮助我们找到我们要修饰的标签或者元素
-
元素选择:
元素的名称{ 属性名称:属性的值; 属性名称:属性的值;}
-
ID选择器:
以#号开头 ID在整个页面中必须是唯一的s#ID的名称{ 属性名称:属性的值; 属性名称:属性的值;}
-
类选择器:
以 . 开头 .类的名称{ 属性名称:属性的值; 属性名称:属性的值;}
2.3 CSS中的其它选择器
- 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
- 属性选择器:
a[title]a[titile='aaa']a[href][title]a[href][title='aaa']
- 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
- 子元素选择器: 父选择器 > 儿子选择器
- 伪类选择器: 通常都是用在A标签上
2.4 CSS的引入方式
- 外部样式: 通过 link 标签引入一个外部的 css 文件
- 内部样式: 直接在 style 标签内编写 CSS 代码 3. 行内样式: 直接在标签中添加一个 style 属性, 编写 CSS 样式
2.5 CSS浮动
- 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间。
float属性:
left right
clear属性: 清除浮动
both : 两边都不允许浮动 left: 左边不允许浮动 right : 右边不允许浮动
2.6 CSS的优先级
- 按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器
- 相同选择器,就近原则: 哪个离得近,就选用哪个的样式
2.7 CSS的盒子模型
- 内边距:
padding-top: 上padding-right: 右padding-bottom: 下padding-left: 左
- 用法说明:
padding:10px; 上下左右都是10pxpadding:10px 20px; 上下是10px 左右是20pxpadding: 10px 20px 30px; 上 10px 右20px 下30px 左20pxpadding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
- 外边距:
margin-top: 上margin-right: 右margin-bottom: 下margin-left: 左
- CSS绝对定位:
position: absolutetop: 控制距离顶部的位置left: 控制距离左边的位置
转载地址:https://lzyws739307453.blog.csdn.net/article/details/104550038 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月08日 11时58分42秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
RecyclerView notifyItem闪屏问题
2019-05-01
dubbo学习笔记 十一 dubbo-rpc之模块
2019-05-01
motan学习笔记 五 opentracing学习入门
2019-05-01
求列表最长子序列
2019-05-01
字符串的排序
2019-05-01
内存分配(mallloc,calloc,realloc,new)
2019-05-01
网络编程之 Socket函数 (二)
2019-05-01
网络编程之 Socket的模式(一) --- “阻塞/非阻塞” 与 “同步/异步”
2019-05-01
网络编程之 Socket的模式(二) --- “Linux网络I/O模型”
2019-05-01
网络编程之 Socket的模式(三) --- “Window网络I/O模型”
2019-05-01
网络编程之 Socket的模式(四) --- “Window网络I/O模型” 续
2019-05-01
ffmpeg & mplayer & vlc 手册
2019-05-01
Go语言并发组件
2019-05-01
简析STUN协议
2019-05-01
使用 Minidumps 和 Visual Studio .NET 进行崩溃后调试
2019-05-01
Debug 和 Release 编译方式的本质区别
2019-05-01
struts返回xml数据例子
2019-05-01
内存对齐详解
2019-05-01
秋招总结(一)-C++归纳
2019-05-01
秋招总结(三)-操作系统归纳
2019-05-01