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="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

搭配使用