htmlcss小白标签篇
基础标签
<div></div>:用于存放大元素,做盒子布局,大区域大面积排版等;
<span></span>:适用于用作于小元素等等;
h1-h6:h1用作于文本标签,或者网页logo这类重要的布局元素,h2-h6可以用作其他的。
<a></a>:用存放链接
<img>:存放图片,它的原生局内属性含义为
alt图片不能正常显示的时候提示文字 个别浏览器鼠标移入提示文字
title鼠标移入提示文字
<ul><li></li></ul>:无序列表 , ul的子标签只能是li,但li里可以嵌套别的标签
<ol><li></li></ol>:有序列表 , li的父级只能是ul或者ol
<dl></dl>:定义列表 ,dl定义列表 dt放置标题 一般只有一个dt dd放置描述性内容
<dt></dt>:放置标题 ,dl的子级只能是dt和dd dt和dd的父级只能是dl
<dd></dd>:放置描述性文字
其中dl的格式为:
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>橘子</dd>
<dd>香蕉</dd>
</dl>
<video controls src=""></video>:存放视频
<audio src=""></audio>:存放音频
标签分类
单双标签
双标签:<标签></标签>
单标签:<标签>或者<标签 />
块级行内标签
块级标签:独占一行 p div h1-h6 dl dt dd ul li等等
行内标签:和其他标签并排 a span等等
img是一个特殊的标签,属于行内块,既可以修改高度,也不独占一行
其中行内标签不可以添加高,如果想要让行内标签有高度可以给他添加一个display的css,display的属性有block(块级),inline-block(行内块),inline(行内)
盒子模型
盒子模型是html一个很重要的内容,主要用于布局应用,它的思想是将每一个网页分成不同的盒子。让其可以更好的进行布局,就好比一个网页可以头部,主要内容以及底部,这时候就可以将这几部分化成几个大盒子,在这里大盒子里又可以划分为几个小盒子,就好比
从这个网页就可以看出,整个网页分成了三个大盒子,之后在每个大盒子里再分为别的小盒子。
盒子模型指的就是标签的占位 margin padding width height border
简单css
height:设置高度
width:设置宽度
background:设置背景,background的参数可以直接是颜色,或者可以填下列的参数
第一个值:图片地址
第二个值:平铺方式 默认平铺 repeat no-repeat repeat-x reapeat-y
第三个值:水平方向坐标 可以书写具体的值 left center right
第四个值:垂直方向坐标 可以书写具体的值 top center bottom
第五个值:颜色
如background:url(https://p3.ssl.qhimgs1.com/sdr/400__/t01cf4a2005f74c201d.png) repeat-y;
这个的意思是将图片向y轴的方向平铺
border:设置边框,参数为,(线的粗细 线的类型solid(实线) dashed(虚线) dotted(圆点虚线) 线的颜色),比如
border:10px dashed #00f;设置边框大小为10px,线的类型为虚线,颜色为#00f
字体大小:font-size
字体类型:font-family
首行缩进:text-indent
去掉下划线:text-decoration:none;
list-style:去掉a标签前面的小圆点
border;设置边框 ( 边框大小 边框类型(solid实线,dashed(虚线) dotted ) 边框颜色)
margin:设置外边距大小,(上 右 下 左)
padding:设置内边距大小
float(重要):设置浮动 ,浮动参数为left或者right,浮动只是用来做左右排列的。如果给子级浮动过后,一般的标签不设置高度的话会根据内容来确定高度,没有单独设置高度的父级会没有高度,将会将整个布局变乱,这就需要给父级加上overflow:hidden消除浮动也可以用作图片超出部分隐藏
设置盒子居中(两个一起用):
margin-left:auto;
margin-right:auto;
/* 鼠标移入样式改变
选择标签:hover{
鼠标移入样式
}
*/
.nav li:hover{
background: blueviolet;
/* 设置圆角 值越大圆角越明显 */
border-radius: 15px;
}
line-height: 24px;设置文字垂直居中,参数为你放置的容器高度
text-align:center :文字水平居中
transform:rotate() 可以旋转
transform:translate()实现平移
让字体变成透明色:
background:rgba(0,0,0,0.3) /* 实现透明色 rgb书写红绿蓝 a书写透明度,a的方位填0--1之间就可以实现透明色 */ ,用background做透明色的话会有一个灰色的背景色,如果不需要背景色的话可以使用oopacity:参数0--1之间,0隐藏占位;
visibility: hidden; /* 隐藏标签占位 */
定位:
固定定位
固定定位( position:fixed):
/* 网站布局的时候,首先考虑标准流(不浮动,不定位),再次是浮动,最后是定位 */
固定定位实现的效果是不会随着窗口的滚动而滚动,会一直存在网页中的一个固定位置
参照物是当前的窗口 left top bottom right left和right top和bottom只能存在一个
不占位,相互遮盖的效果。多个定位同时存在,默认后写(结构)的在上面。可以通过z-index调整图层顺序。值越大越靠上。默认是0
固定定位以后脱离标准流(行内标签水平排列,块级标签垂直,不浮动不定位),变成行内块
*/
例:img{
position: fixed;
left:10px;
bottom:10px;
z-index: 1;
}
相对定位(position:relative)(重要):
相对定位:相对自身移动。参照物是自身原来的位置。
一般用来做微调。不会对其余标签造成影响
占位:占的是原来的位置
半脱离标准流:不会改变标签的性质。一方面标签的性质没有改变。另外一方面可以微调位置
很少单独使用,配合绝对定位使用
例子:.pic{
position: relative;
top:-100px
}
绝对定位(position:absolute):
绝对定位实现的效果,一个标签在另外一个标签上面
一个标签绝对定位以后,会向上寻找,找到有定位的标签,然后以该标签作为参照物
一般情况下子级绝对定位,父级相对定位。相对定位对别的标签影响最小
不占位
脱离标准流,变成行内块
例:
<style>div{background:lime;margin:200px 200px 0px 200px;width:400px;position: relative;}span{position: absolute;top:0px;left:0px;background:red;color:white;width:100px;text-align: center;}
</style><body><div><img src="https://p0.ssl.img.360kuai.com/dmfd/155_155_/t01b81ca7f9ed5da91a.webp?size=155x155" alt=""><span>当面应怼</span><p>他给xxx上了一课</p></div>
</body>
这个例子就是在给span进行绝对定位,之后对他的父级div进行相对定位,注意在对父级进行相对定位时不要给父级的定位添加参数
精灵图片引用
<!-- sprite精灵图片:把很多小图片整合到一张大图片上的技术。减少服务器请求 -->
<!-- 引入图片 img或者background 一般通过background引入-->
span
span{width:71px;height: 71px;display: inline-block; //设置成行内块,给span增加高度background:url('https://www.txpc.cn/res/images/sprite/my-icons-sc9dad631e6.png') no-repeat 0px -323px;}span:hover{/* 鼠标移入图片时需要更换的背景图片位置地址 */background-position: 0px -394px;}<body><span></span><!-- bui和span标签用法一样,引入小元素 --><b>加粗</b><u>下划线</u><i>倾斜</i></body>
表单:
<!-- 浏览器有空白折叠现象,不管有多少空格,都只能识别一个 <br>换行 空格 -->
<!-- label的for值和表单的input值保持一致 -->
<!-- input单行表单 type内的属性值 text文本 password密码 number数字 radio单选框 checkbox复选框 button类型 reset重置 submit提交-->
<!-- p可以放置文本类标签 input label img -->
<!-- form实现表单提交 action提交地址 -->
<!-- 标签的属性: <标签 k="v" k="v"> k属于标签属性 v属于属性的值-->
<!-- 表单属性:autofocus自动聚焦 selected默认选中 checked选框选中 maxlength最大长度 disabled禁用 placeholder默认提示--><form action="xxx.html"><p><label for="user" >用户名:</label><input id="user" autofocus type="text" maxlength="4" disabled placeholder="百度一下"></p><p><label for="pass">密码:</label> <input id="pass" type="password" placeholder="请输入密码"></p><p><label for="pass">手机号:</label> <input id="pass" type="number"></p><!-- radio单选框,需要加相同的name值,成为真正的单选框 --><p><label for="">性别:</label> <input type="radio" name="sex" checked>男 <input name="sex" type="radio" checked>女 </p><p> <label for="">爱好:</label> <input type="checkbox" checked>写代码 <input type="checkbox" checked>xxx </p><p><label for="">地址</label><!-- select>option下拉选框--><select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>广州</option></select></p><p><label for="">个人介绍</label><!-- textarea文本域,输入多行内容 --><textarea name="" id="" maxlength="10"></textarea></p><!-- 按钮 --><button>按钮</button><input type="button" value="按钮"><!-- reset和submit放置在 form内部有用 --><input type="reset" ><input type="submit"></form>
htmlcss小白标签篇相关推荐
- 《数据可视化》之小白学习篇(一)
本博客记录这学期关于数据可视化的一些学习,由于我是一个菜鸟,编程能力很弱,希望看到的大佬不要笑话. 文章目录 前言 一.为什么要数据可视化? 二.数据可视化基础篇 1.Javascript实现直方图绘 ...
- 计算机网络教程网线制作,图吧小白教程 篇二十六:手把手教你自制网线(夹网线水晶头)...
图吧小白教程 篇二十六:手把手教你自制网线(夹网线水晶头) 2019-11-19 23:07:38 31点赞 309收藏 27评论 创作立场声明:咕咕咕 教程最后还是出了,不过咱现在用啥还是直接网购号 ...
- 科学计算机后盖换电池,图吧小白教程 篇二十二:手把手教你给手机换电池(拆机)...
图吧小白教程 篇二十二:手把手教你给手机换电池(拆机) 2019-11-16 14:06:58 4点赞 18收藏 2评论 创作立场声明:手机换电池省钱可以自己动手从工钱上省,买电池最好还是不要省钱买杂 ...
- 安卓修改电池容量教程_图吧小白教程 篇三十二:手机拆换原装电池教程——替换寿命将届的原厂电池,提升手机续航...
图吧小白教程 篇三十二:手机拆换原装电池教程--替换寿命将届的原厂电池,提升手机续航 2019-12-05 13:01:04 1点赞 20收藏 1评论 你是AMD Yes党?还是intel和NVIDI ...
- Python 用pygame 做一个游戏的开始界面(小白第一篇博客)
Python 用pygame 做一个游戏的开始界面(小白第一篇博客) 主要功能实现 本篇文章主要是实现了一个游戏开始界面的两个功能: 1,将鼠标放到"开始游戏"或"结束游 ...
- 用Linux系统电脑越狱ipad3,图吧小白教程 篇一:电脑远程控制IPHONE(越狱)
图吧小白教程 篇一:电脑远程控制IPHONE(越狱) 2019-10-14 10:52:45 6点赞 27收藏 6评论 创作立场声明:这就是图吧的日常.日子照常过,40块钱的手机就当智能硬件使 电脑远 ...
- 计算机电池电源转换,图吧小白教程 篇七十七:只需一步,延长MACBOOK电池寿命(硬改电源)...
图吧小白教程 篇七十七:只需一步,延长MACBOOK电池寿命(硬改电源) 2020-04-17 11:42:40 6点赞 24收藏 4评论 创作立场声明:看来就算到了最后这世界上也只是有IBM兼容机和 ...
- 码农小白 设计模式篇 状态模式
码农小白 设计模式篇 状态模式 1.状态的认识 2.面向过程思维的代码实现 小结: 3.面向对象实现 小结 4.用状态模式实现 1.状态模式的简介 2.状态模式的好处 3.状态模式的使用 4.代码实现 ...
- 3DMax”——新手小白入门篇
3Dmax 是一个数字化三维制作软件,常简称为3Ds Max或MAX,是Discreet公司开发的(后被Autodesk公司合并)基于PC系统的三维动画渲染和制作软件.其前身是基于DOS操作系统的3D ...
最新文章
- access突然需要登录_早知道早好,微信小程序登录开发需要注意的事项
- ENAS pygraphviz 的替换之路
- Apache Mina 介绍
- vue结合Promise及async实现高效开发。
- SAP CRM几个常用的使用技巧
- 给年轻程序员的几句话
- linux系统uptime,top命令详解
- linux开热点软件,在Ubuntu系统的电脑上开启无线热点全攻略,
- 设置Android AI开发环境
- 推荐几个用于Linux系统的PDF文档查看器
- PHP正则JSESSIONID,会话状态保持,JSESSIONID,COOKIE,URL重写
- 引起相变的无序结构域(IDRs)怎么预测?跟踪热点,提升文章档次!
- 中文大写日期转换函数
- Android学习日记(yzy):opengl 绘制2d图形 基本框架
- keil 出现 Error parsing node '#text':value 'HDSC:145' not in enumeration
- 洛谷 P4147 玉蟾宫【悬线法/单调栈】
- asp微信扫码签到源码
- linux 应用编程(持续更新)
- Pytorch基础打卡01
- 2021物理化学实验8:乙酸乙酯皂化反应动力学研究
热门文章
- linux 找不到g09,科学网—如何在非用户目录下安装高斯 g09 - 陈照强的博文
- 华为OD机试真题 Python 实现【工单调度策略】【2023 Q1 | 100分】
- win10电脑怎么设置人脸识别解锁?电脑人脸解锁的具体方法
- 计算飞狐交易师股票接口表达公式是什么?
- 互联网金融中可做的17个模型
- wifi管家 android,腾讯WiFi管家下载
- 【matlab图像处理】灰度变换概述
- 计算机毕业设计Java旅游管理系统(源码+mysql数据库+系统+lw文档)
- 《算法图解》读书笔记(二)
- 我爱log4j.properties