华为前端技术分享（html总结）
html
----------------------------------------
html基本结构
<html>
<head></head>
<body></body>
</html>
body中的各种标签组件：
1、正文中的标题标签：h1~h6
要注意的是：
1)<h1>的字体最大，<h6>字最小。跟<font>标签的size属性是反的，size值为1最小，值为7最大。
2)必须是独占一行
3)使用<h1>到<h6>标签，会让文字变大变粗。但千万不要因为想让文字变大变粗就给他加一个标题标签，这是错误！你可以使用<font>或<b>标签来实现
4)搜索引擎会把文章中出现的<h1>到<h6>标签来作为文章的结构与主次，从而进行索引。懂seo的朋友就知道，这个很重要！
2、段落与换行：
换行标记： <br/>
段落标记： <p></p>
把p标记中的文本当做一段文字, 一段文件完毕之后, 会自然换行.
3、分割线：
<hr 属性名="属性值" />
属性：
width： 宽度 300px ；50% 占用父标记宽度的百分比
align： 对齐方式：left 居左; center 居中; right 居右
4、图片标签： (单标记)：可以在页面中显示一张图片
<img />
属性：
src：指定目标图片的路径
width：宽度 px
height：高度
宽高同时设置时会出现失真的现象,若需要等比例 缩放,则只需要设置其中一个即可.
路径：
①绝对路径：
操作系统绝对路径：windows： 以盘符开头的路径为绝对路径；c：\Program Files\xxxx.jpg
linux / Unix / Mac： 以/(根目录)开头的路径为绝对路径
/home/soft01/xxx.jpg：网络端绝对路径：
以http：//开头的url路径： http：//tts6.tarena.com.cn/xxx.jpg
②相对路径：
指的是通过当前html文档和目标文件生成的路径.
相对路径也可以指向目标文件.
不以盘符和/(根目录)开头的路径：
网页所支持的图片格式：
JPG/JPEG： 体积小 图像有较小的失真
png： 显示颜色种类较多 体积较大 图像保存完好
gif： 支持动态图 体积小 显示的颜色非常少
png/gif： 支持透明色
jpg： 不支持
5、a链接：
<a> 链接文本 </a>
属性：href： 点击链接之后跳往的目标地址
点击图片跳转 ：
<a href="">
<img src=""/>
</a>
图片热点链接：这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：<img><map><area>。
<img src="图形文件名" usemap="#图的名称">
<map name="图的名称">
<area shape=形状 coords=区域座标列表 href="URL资源地址">
<!--可根据需要定义多少个热点区域-->
<area shape=形状 coords=区域座标列表 href="URL资源地址">
</map>
【1】shape -- 定义热点形状
shape=rect： 矩形
shape=circle：圆形
shape=poly： 多边形
【2】coords -- 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
语法：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
例：
<img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="http：//www.qq.com" onFocus="this.blur()"/>
<area
- 点赞
- 收藏
- 关注作者
评论（0）