HTML(1)

boss44 · 发表于 2017-6-21 21:22:58

HTML介绍

　　html(hyper text markup language)----超文本标记语言
　　html标准---W3C
　　超文本--在文本内容的基础上，添加更加丰富的信息（图片、动画、声音等）
　　标记（markup--标签）：<单词></单词>---挨着<是标记
　　标记通常有两层含义：

表形：每一个标签都具有一定的表现形式
表意：每一个标签都具有一定的意义

　　语言特点：可以直接被浏览器解析，是一种超文本标记语言，与程序语言不同。

HTML的标签分类

　　1.双标签：由开始标签和结束标签构成，内容放入开始标签和结束标签之中
　　语法：<标签名属性名="属性值">.....内容....</标签>
　　属性可理解为人的特征性别="女"  体重="45"  身高="165"
　　例如 <div></div> <body></body>.....
　　2.单标签：只有开始标签，没有结束标签，没有内容
　　语法：<标签名  属性名="属性值"  属性名="属性值"  />  注意：一定要闭合
　　例如：<link/>  <img/>  <meta/>  <br/>

HTML基本骨架结构

　　<html>
　　 <head>
　　       <title>网站的标题</title>
　　 </head>
　　  <body>
　　  </body>
　　</html>
　　文件的扩展名是xxx.html
　　html结构说明：    1.<html>含义：告诉浏览器网页的代码用什么格式来解析
　　2.<head>含义：告诉浏览器网页的汉字用什么字符集，使用的字符集不正确就会出现乱码。
　　gb2312 简体中文 (汉字操作系统下默认使用的字符集) gbk 国际码    utf-8  多国语言
　　3.<title>含义：便于搜索引擎
　　4.<body>含义：网站的内容，99%的内容都放入<body></body>中，只有放在该标签中，才能在窗口显示
　　注意：tab键可以缩进

HTML书写规范

　　1.Html不区分大小写，但是w3c使用的是小写的<body>,不推荐<BODY>
　　2.Html如果有标签嵌套，必须顺序嵌套，不能交叉
　　3.单标签一定要闭合,例如<br/>
　　4.属性：每一个标签有没有属性，有多少属性----已经由w3c规定好
　　5.属性值：双引号引起来，如<body background="black"></body>

HTML文本标签

　　font  设置文本的颜色  文本的字体  文本的大小
　　<font color="设置颜色" size="设置大小"  face="设置字体"> 设置的内容</font>
　　<b></b> 加粗
　　<strong></strong>  加粗  加强语气
　　<i></i>  倾斜
　　 <em></em>  倾斜  加强语气
　　<u></u>  下划线
　　<ins></ins> 插入的是文本  例如 * | 之类的
　　<sup></sup> 上标  使文本上标
　　 <sub></sub> 下标  使文本下标

Html段落标签

　　<p></P>    一段
　　段落的属性有：
　　 Align(居中方式)  取值  left  center  right
　　
　　标题：
　　<h1></h1>  标题1
　　......
　　<h6></h6>  标题6
　　属性：Align :  left  center  right
　　Pre标签：预定义标签，保留原有的空格和换行
　　Div标签：区域划分作用，独占一行，块标签 (p h1 table  ul ol... )
　　Span标签：本身并没有什么含义，但是也是网站使用最多的标签之一，结合CSS一起使用构成功能，行内标签 (span em i  b strong u)
　　注意：一般是块标签内含有行内标签

无序列表

　　语法：
　　 <ul>
　　                <li>
　　                </li>
　　                <li>
　　                </li>
　　          </ul>
　　ul的属性：
　　type 设置列表前面的项目符号的样式 circle(空心圆)    disc(实心圆)    square(方形)

图片标签(单标签、行内标签)

　　语法：<img 属性名="属性值" />
　　属性：图片的路径  src="图片的地址"(图片要放到同一个站点下，即和html文件放在同一个文件夹)
　　图片的宽度 width="数值" 以像素为单位的px，但是在html标签中不写单位，如 width="300"
　　图片的高度 height="数值" 以像素为单位的px，但是在html标签中不写单位，如 height="200"
　　图片的边框 border="数值"
　　图片的解释 alt="对图片的描述内容"
　　       （  图片和内容左右之间的距离 hspace="数值"
　　图片和内容上下之间的距离 vspace="数值" ）通常不用这两个，用CSS 实现
　　  注意：图片等比例缩放，只设置宽度或高度

表格介绍

　　语法：
　　 <table>
　　             <tr>
　　                   <td>
　　                   </td>
　　             </tr>
　　       </table>
　　通常表格<table</table>包括行<tr></tr>  行里面包括单元格<td></td>
　　属性：表格的边框  border  默认值是0
　　表格宽度 width
　　表格高度 height(不建议使用)
　　居中方式 align="居中方式" 取值  left  center  right
　　表格中的内容和单元格之间的距离  cellpadding="数值"    默认数值是 2px
　　表格中的单元格和单元格之间的距离 cellspacing="数值"    默认数值是 2px
　　表格的背景颜色 bgcolor="颜色值"
　　表格的背景图片 background="图片地址"(背景图片不能含有中文) ----修饰作用
　　       表格的合并边框线  rules="all" (w3c不推荐使用用CSS实现)
　　       表格的边框线颜色  bordercolor="颜色值"  (不建议使用)
　　       注意：背景图片的优先级高于背景颜色
　　 <tr>的属性：
　　行的高度  height
　　背景颜色  bgcolor
　　背景图片  background
　　水平对齐方式  align 取值 left  center  right
　　垂直对齐方式  valign  取值 top  middle  bottom
　　<td>的属性：
　　背景颜色  height
　　背景图片  background
　　宽度　　  width
　　高度　　  height
　　内容在单元格中的水平对齐方式 align 取值 left  center  right
　　内容在单元格中的垂直对齐方式 valign 取值 left  center  right

表格的扩充

　　合并单元格的问题：
　　横向合并(即左右合并)：若干个单元格合并为一个单元格
　　cosplan="数值" 　　例如：cosplan="3"　　横向合并3个单元格
　　纵向合并(即上下合并)
　　rowspan="数值"　　　例如：rowspan="3"　　纵向合并3个单元格

链接

　　语法  <a 属性="属性值"> 　　内容　　 </a>
　　属性：
　　链接的地址  href="链接的地址" url 绝对地址  或相对地址
　　打开目标文件的窗口　 target
　　_blank　　在新的窗口中打开目标文件
　　　_self　　  在原来的窗口打开目标文件(原来的窗口被覆盖)
　　定义锚点的名称　　 name

绝对地址(网络地址)

　　语法 <a href="http://www/taobao.com"> 淘宝 </a> 网络地址
　　<a href="file:///C:/video/www/test.html"> 本地的html文件 </a> 本地地址

相对地址

　　在同一个站点下，在同一个文件夹
　　目标文件和当前文件在同一个目录，直接写名称
　　目标文件在当前文件的下一级目录，xx表示文件夹名　　xx/文件名称
　　目标文件在当前文件的下两级目录下 xx/xx/文件名称
　　目标文件在当前文件的上一级目录　 ../文件名称　
　　目标文件在当前文件的上两级目录 ../../文件名称

特殊链接

　　下载链接
　　文件不用下载可以直接做链接 .html .jpg
　　文件必须下载链接  .zip  .exe
　　邮件链接
　　<a href=mailto:邮件的地址> 内容　　</a>
　　空链接
　　在当前页面做链接 <a href="#">  　　内容　　</a>　　　
　　Javascript链接
　　<a  href="javascript:window.close()">　　内容　　</a>

锚点

　　
　　同一个页面的不同区域跳转
　　定义锚点　　<a name="自定义名称"></a> 在页面中的任一处定义　　<a></a>之间不加内容，给链接中的target用
　　跳转锚点　　<a href="#锚点名称">内容</a> 跳转到定义锚点的位置
　　

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] HTML(1)

扫码加入运维网微信交流群