前端三剑客之HTML
@()
what is html
- (hypertext marked language)超文本标记语言，负责页面文本、图片内容的编辑排布；
- 特点:
- 使用的是一对一对的标签组成
双标签 可嵌套其他的标签；单标签或不可嵌套其他标签； - 标签之间可以相互嵌套，但不可以交叉嵌套
-
若是有多个相同的标签，可使用id或name属性去区分
<tag1 id="20130705" name="a"></tag1> <tag1 id="20140603" name="b"></tag1>重点:HTML的核心在与标签的使用、标签属性的使用
- 使用的是一对一对的标签组成
html基本格式
-
网页的每个界面都是一个独立的HTML文件：
<!---基本格式-----> <html> <!---页面 start-----> <head> <!---头部 start-----> <title>这里写网页页面的标头</title> <!---头部 end-----> </head> <body> 书写内容的地方 </body> <!---主体 start-----> <!---页面 end-----> </html>
html常用标签及其属性
文本修饰
<font> 属性
size 字体大小 最大值是7
color 字体颜色 用单词表示 “red” “green” “blue” RGB表示rgb(0,0,255) 十六进制表示#0000ff
face 字体类型 黑体、楷体、宋体、华文彩云等 必须浏览器支持
字符实体
含义：就是讲一些特殊含义符号例如空格( )、引号(“)等显示在html中， 在编写时可以键入实体名或者实体编号来表示，但是在有些浏览器不支持某个字符实体的实体名但是编号时所有都支持的，所以建议都是用实体编号；
字符实体查阅
<br> 换行标签，达到换行的目的，一个<br>但标签就是往下一行；
段落修饰
<p> 段落标签 使元素成块 可以内嵌其他标签来修饰段落内文本的显示效果；
align 对其属性 left 左对齐 center居中对其 right右对齐
标题修饰
<h1> 标题标签 使元素成块 可以使h1 – h6 共六个标题 标题依次变小 h1标签建议只在页面中出现一次，多次出现不利于搜索引擎的识别；
align 对其属性
它和段落一样没有color样式，如需修改文本样式可以嵌套其他标签实现
<hr> 水平分隔线
有color颜色
size高度
width宽度
align对其
序列修饰
特点：块元素，独立成行有行间距会自动缩进；
无序序列
<ol>
<li></li>
<li></li>
</ol>
有序序列
<ul>
<li></li>
<li></li>
</ul>
在序列里 <ol>标签表示无序序列<ul>标签表示有序序列<li>则表示序列元素，有几个<li>标签就表示有几个标签元素，而<ol>和<ul>则用来区分这些序列元素的类型，序列类型可以相互嵌套但是会再次缩进；
<ol>属性：type 1、a 、A 、i、 I
<ul>属性：type
start 起始数
<li>属性：type disc(实心圆) 、circle(空心圆) 、square(实心方块)
图片
<img>alt 图片丢失显示内容
src 图片源
width 图片宽度
height 图片高度
border 图片边框
音频
<bgsound> 注：只对IE有效果
src=””
<embed>src=””
width
hight
视频
<embed>支持mp3、mp4
src =”” 文件路径
width 宽度
height 高度
字体其他样式
加粗 b 斜体 i 下划线 u
<b>加粗内容</b>
<i>斜体内容</i>
<u>下划线内容</u>超级文本
<a>属性:
href 资源的路径地址
target 是否在新页中打开，默认是在当前页打开，target=”_blank”则在新页中打开，target=”_self” 或者”_top”当前页打开;
执行效果:
1.跳转到本地或者网络的资源地址;
url 网络资源
<a href ="www.baidu.com">path 本地资源
<a href ="luomit.txt">2.调动本地邮件客户端进行发送邮件
<a href="mailto:14125@qq.com">发送信息到14125@qq.com邮箱\</a>3.调用JavaScript脚本文件
<a href="javascript:alert("你点我干哈啊！")">调用JavaScript脚本\<a>4.设置锚点(书签) 设置书签跳转的功能
表格
<table>width 表格宽
height 表格高
cellspcing 单元格间距
cellpading 内容与单元格边框的距离
align 对齐 left center right
brckground 背景图片
bgcolor 背景颜色
<tr>行</tr>
<td>列</td> align 对齐(水平) left center right
valign 对齐(垂直) left center right middel top bottom
brckground 背景图片
bgcolor 背景颜色
<th></th>th = td +居中+加粗
单元格的合并
行合并 rowspan <td rowspan=”2″>10</td> 这就把当前单元格和下一列的并列一个单元格合并
列合并 colsoan
<caption>表格的标头</caption> 写在表格开始处