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定义最里面的圆
1658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
