🐞HTML常用代码:
<html> #开始
<head> #元素包含了所有的头部标签元素。
<meta> #元素
<title> #标签定义了不同文档的标题。
<h1> #定义最大的标题。 <h6> # 定义最小的标题。
<hr> #标签在 HTML 页面中创建水平线。
<!--这是一个注释--> #注释
<style> #标签定义了HTML文档的样式文件引用地址
<meta> # 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
<body> #可见正文内容
<p> #这是一个段落
<base> #定义了页面链接标签的默认链接地址
例:<base href="//www.runoob.com//images/" target="_blank">
该标签指定了页面上所有链接的默认URL,所以该图片的访问地址为
"http://www.runoob.com/images/
<a> #链接标签,如果使用target 属性,你可以定义被链接的文档在何处显示。
例:<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>
书签:<a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>
<b> #粗体文本
<code> #计算机代码
<em> #强调文本
<i> #斜体文本
<kbd> #键盘输入
<pre> #预格式化文本
<small> #更小的文本
<strong> #重要的文本
<abbr> #缩写
<address> #联系信息
<bdo> #文字方向
<blockquote> #从另一个源引用的部分
<cite> #工作的名称
<del> #删除的文本
<ins> #插入的文本
<sub> #下标文本
<sup> #上标文本
<img> #图像标签,是空标签,意思是说,它只包含属性,并且没有闭合标签,要在页面上显示图像,你需要使用源属性(src)。
alt 属性用来为图像定义一串预备的可替换的文本。
例:<img src="boat.gif" alt="Big Boat">,表示boat图片如果没有加载成功的话,现实BigBoat文本。
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
例:<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<table> 标签来定义表格, <tr>表示行, <td>表示单元格,<td>之间的内容是数据。
<th> 表格的表头,<thead>页眉<tbody>主体<tfoot>页脚
<caption> 标签定义表格的标题
<ul> #无序列表使用的标签
<ol> # 有序列表始于的标签
<li> #定义列表项
<dl> #自定义列表标签开始
<dt> #自定义列表项目
<dd> #定义自定列表项的描述
<div> #元素是块级元素,它可用于组合其他 HTML 元素的容器。
<span> #元素是内联元素,可用作文本的容器。
<form> #定义供用户输入的表单,多数情况下被用到的表单标签是输入标签(<input>)输入类型是由类型属性(type)定义的。
例:<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<input type="radio"> #标签定义了表单单选框选项
<input type="checkbox"> #定义了复选框
<input type="submit"> # 定义了提交按钮.
<textarea> #定义文本域 (一个多行的输入控件)
<fieldset> # 标签可以将表单内的相关元素分组,并使用外框包含起来。
<legend> #定义了 <fieldset> 元素的标题
<select> #定义了下拉选项列表
<optgroup> # 定义选项组
<option> # 定义下拉列表中的选项
<button> #定义一个点击按钮
<iframe> #表示框架,height 和 width 属性用来定义iframe标签的高度与宽度。
frameborder # 属性用于定义iframe表示是否显示边框。
🦚CSS常见代码:
Css规则由两个主要的部分构成:选择器,以及一条或多条声明。
CSS声明总是以分号(;)结束,声明总以大括号({})括起来。
CSS注释以"/*" 开始, 以 "*/" 结束。
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
decoration #装饰,overline上划线、line-through中划线、underline;下划线
margin: #外边距
cursor: #光标的样式有很多种
border 2px solid #a1a1a1; #边框的粗细,实线
background:#dddddd; #背景颜色
padding:10px 40px; #内边距
width:300px; #宽度
border-radius:25px; #圆角
box-shadow: 100px 100px 1px #888888; #添加阴影
background-image: url(img_flwr.gif), url(paper.gif); #图片背景
background-position: right bottom, left top; #图片的位置
background-repeat: no-repeat, repeat; #重复次数
background-size:80px 60px; #图片的大小
background-size:100% 100%; #表示完全拉伸填充
background-clip #背景剪裁属性是从指定位置开始绘制。
linear-gradient #线性渐变 默认是从上到下,to right从左到右to bottom right从左上到右下
数字deg #将创建的渐变调整角度
rgba(255,0,0,0),rgba(255,0,0,1) #函数中的最后一个参数可以是从0 到 1 的值代表设置透明色
radial-gradient #径向渐变从中间到周围
word-wrap:break-word #文本强制换行
column-count #属性指定了需要分割的列数。
column-gap #属性指定了列与列间的间隙。
column-rule-style #属性指定了列与列间的边框样式:
column-rule-width #属性指定了两列的边框厚度:
column-rule-color #属性指定了两列的边框颜色
column-span:all #跨越所有列
column-width #属性指定了列的宽度。
transform:rotate(30deg) #顺时针旋转30度,可以输入负值逆时针旋转
transform:rotateX(120deg); #延X轴顺时针旋转120度
transform:translate(50px,100px) #位置变为50px.100px
transition: width 2s # 应用于宽度属性的过渡效果,时长为 2 s
div:hover #规定当鼠标指针悬浮(:hover)于 <div>元素上时展示效果
max-width: 100%;
height: auto; #自适应窗口大小
Opacity #不透明度
filter #属性用为元素添加可视效果 (例如:模糊与饱和度) 。
font-size #属性来设置按钮大小
border-radius #属性来设置圆角按钮:
flex-container flex-item #弹性盒子
@media screen max-width:min-width: #当最大像素,最小像素时生效
网友评论