网页设计 HTML网页代码 基础参数（二）"/>
WEB前端网页设计 HTML网页代码 基础参数（二）
| 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="">链接到百度</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 |
搭配使用
更多推荐
WEB前端网页设计 HTML网页代码 基础参数（二）
发布评论