HTML常见标签及CSS常用属性

553 阅读3分钟

HTML标签

基础标签

<!DOCTYPE>定义文档类型

<html>定义HTML文档

<title>定义文档标题

<body>定义文档的主体部分

<h1>to<h6>定义HTML标题

<p>定义段落

<br>定义换行

<hr>定义水平线

<!--...-->定义注释

格式标签

<address>定义文档作者或拥有者的联系信息

<b>定义粗体文本。

<em>定义强调文本。

<i>定义斜体文本。

<strong>定义语气更为强烈的强调文本。

表单标签

<form>定义供用户输入的 HTML 表单。

<input>定义输入控件。

<textarea>定义多行的文本(文本域)输入控件。

<button>定义按钮。

<select>定义选择列表(下拉列表)。

<option>定义选择列表中的选项。

图像/音频标签

<img>定义图像。

<audio>定义声音内容。

<video>定义视频。

链接标签

<a>定义链接

<link>定义文档与外部资源的关系。

<nav>定义导航链接。

列表标签

<ul>定义无序列表。

<ol>定义有序列表。

<li>定义列表的项目。

<dl>定义定义列表。

<dt>定义定义列表中的项目。

<dd>定义定义列表中项目的描述。

表格标签

<table>定义表格

<caption>定义表格标题。

<th>定义表格中的表头单元格。

<tr>定义表格中的行。

<td>定义表格中的单元。

<thead>定义表格中的表头内容。

<tbody>定义表格中的主体内容。

样式/节标签

<style>定义文档的样式信息。

<div> <span>定义文档中的节。

<header>定义 section 或 page 的页眉。

<footer>定义 section 或 page 的页脚。

<section>定义 section

<article>定义文章。

<aside>定义页面内容之外的内容。

元信息标签

<head>定义网页头部信息。

<meta>定义关于 HTML 文档的元信息。

CSS属性

1638187053410.jpeg

CSS字体属性

字体大小:font-size: px/em/pt;

字体样式:font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

字体粗细:font-weight: bold;(粗体) lighter;(细体) normal;(正常)

字体:font-family:

字体修饰:text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) 

字体行高:line-height: normal;(正常) 单位:PX、PD

文字对齐:text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

文字缩进:text-indent: 数值 px,em;

CSS背景属性

背景颜色:background-color: #3333;

背景图片:background-image: url();

背景图片重复:background-repeat: no-repeat;

背景图片滚动:background-attachment: fixed;(固定) scroll;(滚动)

背景图片位置:background-position: left(水平) top(垂直);

简写方法: background:#333 url(..) repeat fixed left top;

区块属性

垂直对齐:vertical-align: baseline;(基线)  middle; bottom; 

元素空格:white-space:  nowrap;(不换行)

显示:display:block;(块) inline;(行) inline-block;(行内块) table;

盒子属性

宽度:width: 数值 px;

高度:height: 数值 px;

外边距:margin: 1px 1px 1px 1px; 上右下左 简写:marign: 1px;

内边距:padding: 1px 1px 1px 1px; 上右下左 简写:padding:1px;

清除浮动:clear:left(左侧不允许浮动)/right(右侧不允许浮动)/both(左右不允许浮动)/inherit(继承父元素)

边框属性

边框样式:border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

边框宽度:border-width: 数值 px;

边框颜色:border-color:#3333;

简写方法:border:width style color;

定位属性

定位位置:Position: absolute; relative; static;

元素是否可见:visibility: inherit; visible; hidden;

内容溢出:overflow: visible; hidden; scroll; auto;