HTML5
(一)
1.html:超文本标记语言(标记语言是一套标记标签)。
2.html 基本结构标签:
根标签 <html></html>
头部标签 <head></head>
文档的标题 <title></tiitle>
文档的主题<body></body>
3.文本格式化标签:
(1)字体加粗:<strong></strong>,<b></b>
斜体:<em></em>,<i></i>
删除线:<del></del>,<s></s>
下划线:<ins></ins>,<u></u>
<div></div>相当于一个盒子-大盒子,用来装内容,一行只能放一个。
<span></span>相当于一个盒子-小盒子,一行可以放多个。
(2)图像标签:<img src=“图像地址” 属性=“属性值”/>。
属性 | 属性值 | 说明 |
src | 图片路径 | |
alt | 文本 | 替换文本,图片不能显示时,显示文字 |
title | 文本 | 提示文本,鼠标放在图片显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
(3)相对路径:图片相对于HTML页面的位置。
绝对路径:目录下的绝对位置,直接到达目标位置。(如:“D:\web\img\logo.gif”或者完整的网络地址:“http://www.baidu.com”)。
相对路径分类 | 符号 | 说明 |
同一路径 | 图片位于html文件同一位置 | |
下一路径 | / | 位于html文件的下一级 |
上一路径 | .../ | 位于html文件的上一级 |
(4)超链接标签:<a href = “跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>
属性 | 作用 |
href | 用于指定目标的URL地址 |
target | 用于指定链接页面的打开方式,_self为默认值,当前窗口打开,_blank为在新窗口打开方式 |
外部链接 | 例子:<a href="http://www.baidu.com" target="black"></a> |
内部链接 | 网站内部页面之间的相互链接,直接写链接内部页面名称 <a href="ilizi.html"></a> |
空链接 | 没有确定链接目标时,用“#”代替 <a href="#">首页</a> |
下载链接 | herf里面的地址是一个文件或者压缩包,会下载这个文件 <a href="img.zip">下载文件</a> |
网页元素链接 | 在网页中的各种元素,如文本,图像等都可以添加超链接 <a href="http://www.baidu.com"><img src="img.jpg"/></a> |
锚点链接 | 点击链接可以快速定位到页面的某一个位置 <a href="#名字"></a> <p id="名字"</p> |
4.注释格式:<!-- -->,快捷键:ctrl+/
5.
特殊字符 | 描述 | 字符代码 |
space | 空格符 |   |
< | 小于号 | &it |
> | 大于号 | > |
(二)
1.表格标签:
<table></table>定义表格的标签
<tr></tr>定义表格的行
<td></td>定义表格的单元格
<th></th>表示表格的表头部分
<thead></thead>定义表格的头部区域
<tbody></tbody>定义表格的主体区域
2.表格属性
属性名 | 属性值 | 描述 |
align | left,right,center | 规定表格相对周围元素的对齐方式 |
borden | 1或“” | 规定表格是否拥有边框,默认为“”,表示没有 |
cellpadding | 像素值 | 规定单元格之间的空白,文字与边框的距离,默认1像素 |
cellingspace | 像素值或百分比 | 规定单元格的宽度,边框与边框的距离 |
如:<table align="center" borden="1" cellpadding="1" cellingspace="0" width="500" heigth="300"></table>
3.合并单元格
跨行合并:rowspan,目标单元格,最上侧单元格
跨列合并:colspan,目标单元格,最左侧单元格
方式:找到单元格,标记合并方式,合并的单元数量,最后删除多余的单元格。
如:<td rowspan="2"></td>
<td colspan="2"></td>
4.列表标签
(1)无序列表<ul></ul><li></li>
注意:<ul>只能嵌套<li>,而<li>之间可以容纳所有容器。
(2)有序列表<ol></ol><li></li>
注意:<ol>只能嵌套<li>,而<li>之间可以容纳所有容器。
(3)自定义列表
<dl>定义列表
<dt>定义项目或名字
<dd>描述每一个项目
5.表单标签
(1)表单组成: 表单域,表单控件,提示信息
(2)<form></form>定义表单域
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式 |
name | 名称 | 用于指定表单名称,以区分同一个页面下的多个表单元素 |
如:<form action="url地址" method="提交方式” name="表单域名称”></form>
(3)表单控件
<inport>输入表单元素
type属性
属性值 | 描述 |
text | 定义当行输入字段,默认宽度为20个字符 |
password | 定义密码字段,该字段字符被隐藏 |
radio | 定义单选按钮 |
checkbox | 定义复选框 |
button | 定义可点击按钮 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
file | 定义输入字段和浏览按钮,供文件上传 |
reset | 定义重置按钮,清楚表单中所有数据 |
submit | 定义提交按钮,把表单数据发送到服务器 |
name | 定义input元素的名称 |
value | 定义input元素的值 |
checked | 规定此input元素首次加载时应当被选中 |
maxlength | 规定输入字段中的字符最大长度 |
注意:要求单个按钮和复选框name值相同
(4)<label></ label>用于绑定一个表单元素,当点击标签内文本时,浏览器光标会自动将焦点转到对应的表单元素上。
如:<label for ="sex">男</label>
<input type="radio" name="sex" id="sex"/>
(5)下拉表单元素<select></select><option></option>
如:<option selected>选项</option>,当前项即为默认选项。
(6)文本域表单元素<textarea></textarea>:可以创建多行文本输入框
cols="每行中的字符” rows="显示的行数”
如:<textarea rows="20" cols="5">文本内容</textarea>