HTML及CSS常用知识点复习
一、常用标签及对应的属性
1、标题标签:<h1 title="我是一个标题标签">标题</h1>【不同级标题h1~h6】
<body><h1 title="我是一个标题标签">标题1</h1><h2>标题2</h2><h6>标题6</h6>
</body>
标题标签: 段落标签:
2、段落标签<p>段落</p>【有换行效果】
<body><p>段落</p><p>段落</p>
</body>
3、图片标签【单标签】:<img src="图片地址" alt="无法显示图片时候,显示的文字">
<body><img src="https://p1.music.126.net/c-LMZbZbQLcMobnFciAl7w==/109951167683507100.jpg?imageView&quality=89" alt="图片显示失败"><img src="../imgs/3.png" alt="图片显示失败">
</body>
4、超链接(跳转链接):<a href="跳转地址" target="默认值,当前页面跳转"></a>
(1)target="_self":默认值,当前页面跳转
(2)target="_blank":新开一页跳转
5、换行标签(单标签):<br>
6、列表标签
(1)有序
<ol type="序号方式">
<li></li> //旧版生成多个li标签li*10,新版不可用了
</ol>
(2)无序
<ul>
<li></li>
</ul>
<body><ol type="a"><li>青椒肉丝</li><li>皮蛋瘦肉</li><li>紫菜蛋汤</li></ol><ul><li>青椒肉丝</li><li>皮蛋瘦肉</li><li>紫菜蛋汤</li></ul>
</body>
7、表格标签
(1)容器:<table></table>
属性:
①边框:border="1"
②单元格边沿到单元内容的距离:cellpadding(上下左右都变)
③单元格与单元格之间的距离:cellspacing
(2)表格标题<caption>最喜欢的音乐</caption>
(3)行:<tr></tr>
(4)单元格:<td></td>
①单元格宽度:width=""【注意:不用带单位,因为已经默认封装好的】
②单元格高度:height=""
③行合并:rowspan="2"
④列合并:colspan="2"
(5)表头(特殊的单元格):<th>歌曲</th>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>th{height: 40px;width: 300px;}td{height: 40px;width: 300px;font-weight: bold;padding-left: 10px;}</style>
</head>
<body><table border="1" cellspacing="0"><tr><th rowspan="2" width="300" height="80" >设备名称</th><th rowspan="2" width="300">消防泵</th><th width="300">设备参数</th><th width="300"></th></tr><tr><th>额定功率</th><th ></th></tr><tr><th>保养项目</th><th colspan="3">保养完成情况</th></tr><tr><td>擦洗,除污</td><td colspan="3"></td></tr><tr><td>长期不用时,定期盘动</td><td colspan="3"></td></tr><tr><td>测试,检查,紧固</td><td colspan="3"></td></tr><tr><td>检查或更换盘根填料</td><td colspan="3"></td></tr><tr><td>加0号黄油</td><td colspan="3"></td></tr><tr><td colspan="4" style="height: 150px;">备注:</td></tr><tr><td colspan="4" style="padding-left: 30px;height: 80px;">保养作业完成后,保养人员或单位应如实填写保养完成情况,并作相应功能试验,遇有故障应及时填写《建筑消防设施故障维修记录表》(见表B.1)。<br>注:本表为样表,单位可根据制定的建筑消防设施维护保养计划表确定的保养内容分别制表。</td></tr></table>
</body>
</html>
8、表单标签
(1)表单容器:<form action="点击提交后触发的服务器地址"></form>
(2)输入框:<input type="各种属性">
①text:文本输入框
提示文字:placeholder="请输入用户名"
用户输入值存放的位置:name="userName"
②password:密码输入框
③submit:提交按钮
④reset:重置按钮
<body><form action=""><input type="text" placeholder="请输入用户名" name="userName"><input type="password"><input type="submit"><input type="reset"></form>
</body>
⑤radio:单选框
默认选中:checked
禁止选中:disabled
⑥checkbox:多选框
默认选中:checked
禁止选中:disabled
⑦value
<1>在单选输入框、多选输入框时,定义相关联的值(value="男"/value="0")
<2>在文本、密码输入框时,表示默认值(定义初始值)
<3>按钮,定义按钮文字
⑧file:文件上传(主要搭配后台地址)
<body><form action="">男<input type="radio" name="sex" checked value="0">女<input type="radio" name="sex" value="1">运动<input type="checkbox" name="hobby" value="a">唱歌<input type="checkbox" name="hobby" value="b">跳舞<input type="checkbox" name="hobby" value="c"><input type="file" name="icon"><input type="submit"></form>
</body>
(3)下拉框
<select name="city"> <!-- 容器 -->
<option value="0">福州</option> <!-- 具体选项,value具有默认值效果 -->
<option value="2" selected>南京</option><!-- selected默认选中 -->
</select>
(4)多行文本<textarea name="detail" id="" cols="宽度" rows="高度"></textarea>
<body><form action=""><select name="city"> <!-- 容器 --><option value="0">福州</option> <!-- 具体选项,value具有默认值效果 --><option value="1">厦门</option><option value="2" selected>南京</option><!-- selected默认选中 --></select><textarea name="detail" id="" cols="30" rows="10"></textarea><input type="submit"></form>
</body>
9、注意区别两个标签
(1)<div></div>为块级元素(会自动换行,可设置宽高)类似的标签还有div、p、h1
(2)<span></span>为行内元素(没有默认样式,主要修饰文字,不会自动换行,大小由内容自动撑开)类似的标签还有a标签
二、常用易忘易错的样式属性
1、positioin:定位
(1)相对定位:相对于当前的正常位置position: relative
(2)绝对定位:position: absolute
①absolute:父子关系(子元素进行定位,相对于其父级【设置了定位/没有设置而是找到浏览器】的绝对定位)
②fiexd:窗口定位(浏览器窗口)
(3)常见搭配
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;background-color: skyblue;position: relative;}.box2{width: 100px;height: 100px;background-color: yellow;position: absolute;top: 50px;right: 20px;}.box3{width: 50px;height: 50px;background-color: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body><div class="box"><div class="box2"></div><div class="box3"></div></div>
</body>
</html>
2、display:转换元素特性
(1)none:隐藏
(2)block:转成块级元素(自动换行h1,div,p)
(3)inline:转成内联元素(不会自动换行span,a)
(4)inline-block:行内块(转换成具有自己大小的且横向排列的元素)
(5)与float区别:display占位置,而float不占位置
(6)flex:默认横向布局【Flex的布局内容较多,小伙伴们可以去参考一下前面的文章有专门介绍flex布局
HTML及CSS常用知识点复习相关推荐
- html中css常用知识点
文章目录 **::before和::after清除浮动的固定格式(前后格式互不影响)** Div内图片填充 **a标签的应用及样式:** 图片热点:map必须和img一起使用 **背景颜色渐变:** ...
- CSS3知识点复习与总结
CSS3知识点复习与总结 文章目录 CSS3知识点复习与总结 一.术语解释 CSS规则 = 选择器 + 声明块 二.CSS书写位置 1.内部样式表 2.内联样式表,元素样式表 3.外部样式表 三.常见 ...
- HTTP应知应会知识点复习手册(上)
前言 本文快速回顾了常考的的知识点,用作面试复习,事半功倍. 上篇主要内容: 状态码.Http1.0/1.1/2.0.Https.GET和POST 下篇主要内容: Web攻击技术.HTTP基础概念.H ...
- 《数据采集与分析》期末考试爬虫部分重要知识点复习(详细版)
<数据采集与分析>期末考试爬虫部分重要知识点复习(详细版) 文章目录 <数据采集与分析>期末考试爬虫部分重要知识点复习(详细版) 一.预备知识 1.web基本工作原理 2.网络 ...
- 虚拟机的分类_「面试必备」Java虚拟机知识点复习手册(下)
关注我的微信公众号:后端技术漫谈 不定期推送关于后端开发.爬虫.算法题.数据结构方面的原创技术文章,以及生活中的逸闻趣事. 我目前是一名后端开发工程师.主要关注后端开发,数据安全,网络爬虫,物联网,边 ...
- 【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言 基本 HTML 标签 基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型 盒子模型相关知识点 Photoshop 简单使 ...
- dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层 头部:header --用于头部 主要内容:mai ...
- 软件测试小黑指北-知识点复习
======================软件测试知识点复习======================== 请认真思考以下问题: 什么是软件?........................... ...
- 前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
最新文章
- ​Java 中的内存溢出和内存泄露是什么?我给你举个有味道的例子​
- 谜题14:转义字符的溃败
- python函数式编程、高阶函数
- Python 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。
- Redis 05_List列表 数组 Hash散列
- mysql blob 内容查看_这些被你忽视的MySQL细节,可能会让你丢饭碗!
- mysql绿色版安装
- 基于FFMPEG 的跨平台视频编解码研究
- python 3.8.0安卓_Python for Mac v3.8.0 官方最新版
- 【ECCV2020】完整论文集part2
- Anaconda安装找不到的依赖包,以DBUtils包为例
- linux进程磁盘io监测,系统性能检测--磁盘io
- Flutter BottomAppBar
- matlab图像放大程序,图像放大并进行BiCubic插值 Matlab/C++代码
- Teamcenter 与各种工具软件的集成解决方案
- 啃碎并发(一):Java线程总述与概念
- vue table自定义样式
- java EE单例Singleton自启动
- 300大作战怎么在电脑上玩 300大作战电脑版玩法教程
- windows10系统如何恢复被windows denfender自动删除的文件
热门文章
- stm32 USB HID+CDC 鼠标键盘串口 组合设备配置解析
- 论文总结3-Sub-center ArcFace: Boosting Face Recognition by Large-scale Noisy Web Faces
- 文件操作细致详解(下)
- Linux的进程优先级-邹立巍
- 实现一个脚本引擎(燕良译)- -
- 微信自定义链接分享制作,微信自定义链接配置
- Cannot find ./catalina.sh The file is absent or does not hav
- 在C语言中为什么c1出现错误,我在用C语言编程时,编译后总出现Error:spawning C1.exe的错误,看不懂,是什么意思啊??快快快,谢谢!...
- Python知识点大全--如何学好Python
- c++primer学习笔记