HTML
文章目录
图片标签
引用图片
第一种情况:互联网图片,直接使用互联网图片地址
<img src="http://img.mobiletrain.org/omlinerjcs.png">
第二种情况,引用本地磁盘中某一个文件夹的图片
<img src="C:\hello.png">
- 页面文件和图片文件是同级关系,可以省去路径,直接用图片名称
- 页面文件和图片所在文件夹是同级关系,首先写入图片所在文件夹名称,再用/表示进入文件夹内,找图片文件
- 页面所在文件夹和图片是同级关系,先返回所在文件夹上一级,…/
图片标签属性
- alt=“千锋教育” 图片加载失败时显示
- title属性:
- 定义的内容不占据页面空间
- 默认隐藏,只有鼠标划入时显示
超链接
href的值是目标页面的地址和图片src属性类似,标签对的内容就是显示在页面的内容
<a href="目标页面地址" target="_self">显示在页面中的文本</a>
target="self"表示链接的目标在当前窗口中打开,_blank表示在空白页面打开
文本修饰
-
<b>加粗的文本<b>
<strong>加粗的文本</strong>
b标签仅仅是为了加粗显示文本,strong标签语义化更强,表示该文本比较重要
-
<i>倾斜的文本</i>
<em>倾斜的文本<em>
-
<s>删除线文本</s>
HTML5不支持<del>删除线文本</del>
-
<u>下划线文本</u>
-
<sup>上角标文本</sup>
<sub>下角标文本</sub>
列表
有序列表(order list)
<ol type="" start="">
<li>列表项内容</li>
</ol>
type值:A,a英文字母的顺序,I,i罗马数字的顺序,1阿拉伯数字的顺序
start取值为起始数字序号
无序列表(unorder list)
<ul type="">
<li>...</li>
</ul>
type:
- disc:实心圆点
- circle:空心圆点
- none:无
- square:实心正方形
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
dt或dd标签不能脱离dl单独使用
快速生成
- 标签名{标签文本内容}+tab或者回车键
- 标签
${标题文$本内容}*
标签重复次数 - 父标签名>子标签名{子标签文本}*子标签重复次数
表格
基础
<table>
<tr>
<td></td>
<th>加粗的文本</th>
</tr>
</table>
tr表示一行,td表示一个单元格,一个普通的表格里每个tr里的td个数是相等的
th标签内部文本加粗并居中显示
表格属性
- border:定义线条粗细。
<table border="1">
- cellspacing:定义单元格之间的距离。
- cellpadding:定义单元格边框和文本之间的距离
想让单元格之间的距离,或者单元格与文本之间的距离变大,调整两个间距的属性值即可
表格行属性
- align(水平对齐方式)
<tr align="" valign="">
:- left:左侧对齐
- center:居中对齐
- right:右侧对齐
- valign(垂直对齐方式):
- top:顶部对齐
- middle:居中对齐
- bottom:底部对齐
- bgcolor:修饰表格背景颜色。
- bordercolor:修饰表格边框颜色。
单元格属性
-
rowspan:跨行 行合并
<td rowspan="4"></td>
表示单元格纵向需要占据4个单元格的空间
-
colspan:跨列 列合并
表格标题和结构分组
表格标题一般习惯放在第一个tr标签之前
<table>
<caption>标题</caption>
<tr></tr>
</table>
thead标签里面放置对应的表格头部tr行内容,tbody标签也是table标签的子标签与thead标签同级,会把table中所有未分组的tr放在一个tbody里面,tfoot标签里面放置对应的表格脚部tr行内容,一个表格只允许使用一个thead和一个tfoot,但是允许使用多个tbody
<table>
<thead></thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
l列分组标签是colgroup,列分组常用于定义表格一整列单元格的颜色,含义为多少列分成一组,如需划分多组,则需要使用多个colgroup
<colgroup span="3"></colgroup>
颜色值和长度单位
表示颜色值方法:
-
颜色名称:使用表示颜色的英文单词来定义颜色值
- 必须使用140个标准的英文名称
- 中文汉字不能作为颜色值
-
十六进制值:指使用#RRGGBB的形式来定义颜色值
RR(红色) GG(绿色)BB(蓝色)00-FF之间 色彩强度
例如:#0000FF被显示为蓝色
- #号不要丢掉
- 字母全部小写
- 所有浏览器支持
-
RGB值:指使用RGB(red,green,blue)的形式来定义颜色值 (0-255中的整数)
- 不区分大小写
- 括号里的数字和逗号前后可以有空格
- 所有浏览器都支持
长度单位:
-
绝对长度单位:固定的,用这些单位表示的长度会显示为设置的尺寸。
px(像素)
-
相对单位长度:指相对于一个长度计算出来的长度,一般用来适配不同的设备
百分比(%)
块级元素和内联元素
HTML元素—显示值— block块/inline内联
块级元素:
- 分块元素:div(标签里面包含分块的内容)
- 标题元素h1-h6
- 段落元素
<p>
- 列表元素
<ol> <ul> <li> <dl> <dt> <dd>
- 表格元素
<table> <tr> <td> <th> <thead> <tfoot> <caption>
内联元素:
- 链接元素:
<p>
- 文本修饰元素:
<b><em><i><strong><sub><sup>
- 折行元素:
<br>
- 图片元素:
<img>
- 范围元素:
<span>
表单
<form></form>
文本框和密码框
单行文本框:
<input type="">
type="text"或type="password"密码框,默认text单行普通文本框
多行文本框
允许用户输入多行文本,文本触达右侧边界后会自动折行,文本超出底部边界后会产生滚动条,可以滚动鼠标查看完整信息。
<textarea cols></textarea>
可以设置显示区域的宽度和高度。cols用来指定一个文本区的可见宽度
取值按钮类型
单选和多选
设置inpt标签type属性值,radio表示单选,checkbox表示多选
- 单选框控件必须成组使用才有意义,每组至少需要两个单选框
- 组是通过name属性来建立的,凡是name值相同的就是一组
- 同组的单选框,只有一个会处在选中状态,其他的会自动呈现为未选中状态
单选框复选框默认选中效果,定义checked属性实现,只要不为空,任何字符都可以,一般checked
下拉菜单
<select multiple size=“2>
<option selected></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
selected默认被选中的选项,multiple让下拉菜单可以选择多个值,size属性可以定义控件的默认可见行数
选择文件
<input type="file">
表单label标签
<form>
<label for="username"></label>
<input type="text" id=“username>
<br>
您的手机号:<input type="text" value="155****0000" readonly>
<input type="radio" disabled>
</form>
label可以帮助我们点击屏幕上难以点击的区域,for用来定义与label关联的表单控件
readonly只读控件 disabled禁用:禁用的表单控件值不会被收集和发送给后端,无法选中
表单分组
带有边框和标题的表单:
<fieldset>
<legend>标题</legend>
</fieldset>
边框的作用是为了将相关字段进行视觉上的区块划分,在分组标签中添加其他控件,需要放置到legend标签的后面
表单按钮
value=“ ”给按钮起名字
-
提交按钮:点击确认提交信息同时发送表单数据给后台的功能
<input type="submit">
点击按钮时:
-
页面刷新了:数据提交给后台服务器,后台服务器将数据保存到数据库中,这里的服务器会给网页的表单提供一个访问地址
<form action="">
值为服务器地址
-
输入框的内容消失了
也可以保留:给form定义一个target属性(可以是_blank也可以是__self)
-
浏览器地址栏里多了一个问号
-
-
重置按钮:清除输入框内容
<input type="reset">
-
普通按钮:
<input type="button">
-
图像按钮:用图片替代了提交按钮的外观
<input type="image" src="">
- 双标签button按钮:
<button></button>
加上type="button"变成普通按钮,提交表单功能消失
表单的数据采集和表单提交
给输入框定义name属性,name的值帮助我们存储用户输入的内容,显示在地址栏。form的action属性里填服务器地址,数据提交给服务器。
如果数据存在敏感信息,不应该显示在地址栏里,解决方法是给form标签里定义method属性(有get和post两个值)。
- get是默认值,浏览器会把收集好的表单数据,加到服务器地址后面,提交给服务器。
- post值不但能够收集表单的数据,而且不会在地址栏里暴露隐私数据。
其他实用标签
<hr>
表示水平线,作用是在网页上画出一条水平分隔线。
<hr width="" size="" noshade="" color="" align="">
- width/size:分别控制水平线的宽度和高度。默认水平线的宽度是横跨整个屏幕,搞得为2px。
- noshade:用来去掉水平线阴影。
- color:用于定义水平线的颜色。
- align:用来调整水平线水平对齐方式。默认水平居中对齐。
<pre>
双标签,表示预格式化的文本,文本将完全按照HTML源代码中格式显示。
<map>
双标签,定义一个图像映射,点击图片不同区域实现链接页面的跳转。
<map name="">
<area href="" shape="" coords="">
</map>
name与img标签的usemap属性相关联,
area单标签,定义图片上的热点区域,通过area标签可以设置热点区域的位置、大小及形状。
- href属性用来定义热点区域链接的目标地址。
- shape用来定义区域的形状。default:所有区域 rect:矩形 circle:圆形 poly:多边形
- coords属性用来定义可点击区域的坐标
iframe
双标签,用来在一个网页中显示另一个网页。
<iframe src="页面路径" width="数字" height="数字" frameborder="0" scrolling="yes"></iframe>
-
src:用于引入其他网站页面
-
width:用以控制引入页面的宽度。
-
height:用以控制引入页面的高度。
-
frameborder:默认引入页面带有边框,通常情况下将该属性值设为0来取消边框
-
scrolling:用以控制是否显示框架的滚动条
yes:始终显示 滚动条 no:从不显示滚动条 auto:在需要的情况下出现滚动条
a链接的地址可以是互联网的网站地址,也可以是自己制作的本地页面地址,这些页面都可以在iframe中显示
<a href="http://www.baidu.com" target="iframe_a">百度</a>
<iframe name="iframe_a"></iframe>
SVG
SVG是一种基于XML语法的图像格式,即可缩放矢量图。它本身是文本文件,体积较小,且不管放大多少倍都不会失真。可以通过html来绘制SVG图片。<svg>
标签是SVG图片的一个容器。
<svg width="" height="">...</svg>
其中width、height分别指画布的宽度、高度。
SVG预定义形状元素
绘制矩形
<rect width="" height="" fill="" />
-
width:定义矩形宽度
-
height:定义矩形高度
-
fill:定义矩形填充颜色
-
stroke-width:定义矩形边框宽度
-
stroke:定义矩形边框颜色
-
fill-opacity:定义填充颜色的不透明度,合法值范围0到1,透明度值越小,透明度越高
-
stroke-opacity:定义描边颜色的不透明度,合法值范围0到1
-
opacity:整个元素的不透明度,范围0到1
绘制圆角矩形
<rect rx="" ry=""/>
如果两个值相等,就是一个圆形的角,如果两个值不相等,就是一个椭圆形的角。
绘制圆形
<circle cx="" cy="" r="" stroke="" stroke-width="" fill="" />
- cx:定义圆形中心x坐标
- cy:定义圆形中心y坐标
- r:定义圆形半径
绘制椭圆形
<ellipse cx="" cy="" rx="" ry=""/>
- cx:定义椭圆中心x坐标
- cy:定义椭圆中心y坐标
- rx:定义水平半径
- ry:定义垂直半径
绘制线条
<line x1="" y1="" x2="" y2=""/>
由两个点的坐标连成。坐标起点是画布的左上角。
绘制多边形
<polygon points="220,20 250,190 160,210"/>
- points:定义每个点的坐标,坐标之间用空格隔开。
绘制多线条
<polyline points="20,20 40,25 60,40 80,120 120,140"/>
绘制路径
应用路径可以绘制任意形状的图形。
<path d="M150 0 l75 200"/>
- d:用来定义绘制路径的命令。如:
- M命令(moveto):d="M150 0"表示从(150,0)这个点开始绘制
- L命令(lineto):用来绘制一条直线,表示从上个结束点到x75,y200这个点绘制一条直线
- q命令:用来绘制二次贝塞尔曲线。q 150 -300 300 0 表示控制点坐标是(150,-300),终点坐标是(300,0)
g标签
SVG中可以使用g标签将多个绘图元素包裹起来,在g标签上定义公共属性。
<g>
<path />
<circle />
<text> </text>
</g>
SVG描边属性
<path stroke /> //笔画属性
<path stroke-width /> //笔画宽度属性
<path stroke-linecap /> //笔画笔帽属性
<path stroke-dasharray /> //虚线笔画属性
模糊和阴影效果
filter过滤器
<defs>
<filter id>
<feGaussianBlur stdDeviation="" />
</filter>
</defs>
feGaussianBlur通过stdDeviation属性定义模糊数量,值是数字,值越大模糊程度越高
<filter>
<feOffset dx="" dy="" in="" />
<feBlend in="SourceGraphic"/>
</filter>
- dx,dy表示阴影在x,y轴上的偏移量
- in表示阴影图像的来源:黑色SourceAlpha 原始图像SourceGraphic
feBlend在原始图像上混合阴影图像。
线性渐变和径向渐变
线性渐变
<defs>
<linearGradient x1="" y1="" x2="" y2="">
<stop offset="10%" stop-color="" />
</linearGradient>
</defs>
y1=y2 x1≠x2 水平渐变
x1=x2 y1≠y2 垂直渐变
x1≠x2 y1≠y2 角度渐变
线性渐变的颜色范围可以由两种或多种颜色组成,stop定义颜色,offset属性用于定义渐变颜色的开始和结束位置,stop-color定义渐变颜色
径向渐变
<defs>
<radialGradient id="" cx="" cy="" r="" fx="" fy="" >
<stop offset="10%" stop-color="" />
</radialGradient>
</defs>
id属性定义渐变唯一名称,cx,cy,r定义最外面的圆,fx,fy定义最里面的圆