html文件调用css文件 | <link rel="stylesheet" type="text/css" href="css文件相对路径"/> |
设置颜色 | Style="color:green;" |
设置字体大小 | font-size:50px; |
设置边框 | border:groove; |
设置长、宽 | height:50px;、width:30px; |
居中对齐 | text-align:center; |
设置整个网页的属性 | body{ 各项参数} |
首行缩进 | text-indent:2em; |
行高 | line-height:1.3; |
定义由细到粗 | font-weight:400=normal正常 ,700=bold,900=bolder; |
粗体 | font-weight:bold; |
文字更细 | font-weight:lighter; |
文字更粗 | font-weight:bolder; |
设置文字被选中时的样式 | p::selection选择器{ background-colora:black color:white } ##背景为黑色,选中文字为白色 |
首字下沉 | p::first-letter{ } |
设置字体类型 | font-family:”楷体,宋体,黑体“; #表示 先找到谁即设置谁 |
设置字体风格(斜体) | font-style:“italic”、“” |
插入图片:<img src="./图像URL">
整个HTML格式分为两大部分,一个是head部分,一个是body部分,其中head部分是用于书写网页样式,而body部分用于书写网页主题
标题标记
<h1></h1>
...
<h6></h6>
<p></p> | 段落标签 |
<b></b> <strong></strong> | 加粗 |
<i></i> | 倾斜 |
<br/> | 换行 |
标签 功能
<br /> | 插入一个换行简单的换行符 |
<hr /> | 定义水平线 |
<area /> | 定义图像映射内部的区域 |
<base /> | 定义页面中所有链接的默认地址或默认目标 |
< img /> | 定义图像 |
<input /> | 定义输入控件 |
<link /> | 定义文档与外部资源的关系 |
<meta /> | 定义关于 HTML 文档的元信息 |
<basefont /> | 不建议使用。定义页面中文本的默认字体、颜色或尺寸 |
<param /> | 定义对象的参数 |
<col /> | 定义表格中一个或多个列的属性值 |
<frame /> | 定义框架集的窗口或框架 |
<embed /> | 定义外部交互内容或插件 |
HTML注释符: | <!-- 在此添加注释句--> ##快捷键:CTRL+/ |
普通文字标签: | <p>…</p> ##可分行 |
换行标签: | <br /> ##一个br换一行 |
选择整行 | CTRL+L |
网页名称插入: | <title>…….</title> |
插入文本: | <h1> …… </h1> |
居中对齐: | <h1 align=“center”> …</h1> |
颜色变换: | <hr color=“red” /> |
长度属性: | <hr width="500px" /> ##px像素 |
右对齐: | <.. align=“right”>..<..> 左:left |
粗细: | <size=“2”> |
下标 | sub 表示 下标 |
上标 | sup 表示 上标 |
左对齐 | <align="left"> |
右对齐 | <align="right"> |
文字行目显上 | <align="top/texttop"> |
文字行目居中 | <align="middle/absmiddle"> |
文字行目显下 | <align="bottom/baseline"> |
插入图片:<img src="./图像URL">
已插入图片的副属性/标识:<alt="…"> ##运行后 当图片消失即文字显示
插入图片后当鼠标光标移到图片是即显示文字内容:<title="…">
给图片添加外边框:<border="4px"> #表示边框的粗细为4个像素
长度属性:<width=“400/75%px”> #可数字也可百分比
高度属性:<height="…">
水平间距:<hspace="…">
垂直间距:<vspace="…">
自动填充单词数量:lorem100 ##数字为多少即生成多少,默认80;按TAB键补全
超链接:<a href="…">文本说明</a>
例如------->> <a href="http://www.baidu.com">链接到百度</a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
窗口弹出方式 | 描述 |
_self | 默认网页 |
_blank | 另一个窗口打开网页 |
这两者与之对应,在同一网页下,上方显示锚点链接,下方链接至此
锚点超链接:<a href="#id链接处">说明</a> | <h id="链接文本"> |
项目符号 | <li>…</li> |
鼠标滚轮移动至下方-->返回顶部 | <a href="#top">返回顶端</a> |
插入图片:<img src="./图像URL">
font-size属性单位;
相对于当前对象内文本的字体尺寸 | em |
像素 | px |
绝对长度单位 | 说明 |
英寸 | in |
厘米 | cm |
毫米 | mm |
点 | pt |
color:文本颜色 #color:参数
预定义的颜色值 | red,green,blue等 |
十六进制 | #FF0000,#FF6600,#29D794等 |
RGB代码 | 表示纯红(255,0,0),纯绿(0,255,0),纯蓝(0,0,255) |
RGB(以逗号为间隔) | 白色(255,255,255),黑色(0.0.0) |
间距
letter-spacing:字间距 | #letter-spacing:30px; |
word-spacing:单词间距 | 以像素为大小 |
line-height:行间距 | 以像素为大小 |
text-decoration:文本装饰
正常文本默认值 | none |
下划线 | underline |
上划线 | overline |
text-align:水平对齐方式
左对齐 | left(默认值) |
右对齐 | right |
居中对齐 | center |
text-indent:首行缩进------->> text-indent:2em;
white-space:空白符处理
使用html制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白;
默认值 | normal |
预格式化 | pre |
空格空行无效 | nowrap #此参数内容只在一行并超出显示区域则下方出现滚动条 |
text-overflow:标示对象内溢出文本
格式:选择器{ text-overflow:属性值 }
修剪溢出文本 | clip |
用省略号标记“…”标识被修建文本 | ellipsis |
搭配使用