您的位置：首页 > Web前端 > HTML

html入门

2014-01-23 12:30 197 查看

1 html 定义：
hypertext markup language-超(超级链接)文本标记语言,
是一种编写网页的标记语言(纯文本),后缀为htm或者html的文件,
由浏览器软件解释运行(标记错误,意想不到的后果).
2 页面的标准结构:
DTD定义的版本信息
根元素为 html

<head>:对于整个文档的描述信息 **
<title>:为网页添加标题
<meta>:元数据--单标记
<meta http-equiv="refresh" content="3">
定义消息头,常用于留言论坛的页面
<meta http-equiv="content-type" content="text/html;charset=utf-8">
定义编码格式
<link>:引入外部的其他文件,比如 CSS 文件
<style>:内部样式表
<script>:引入脚本文件,比如 js文件/vbs文件
<body>:页面的主体展示内容
3 文本标记:文本默认显示的
<p>:段落标记,常用于文章的编辑
<br>:单标记,代表换行
用<p>或者两个 <br>,实现单独的行,默认情况下,<p>有较大的段落间距
<hn>:<h1>--<h6>,代表1号--6号标题,将一些文本以标题的方式突出显示
<span>和<div>:分区显示元素,常用于分别设置样式外观
<span>:不影响原有的布局,适用于同一行的分组
<div>:独占一行,适用于不同行不同元素的分组
4 图像和超级链接
图像 <img>:单标记
src:设置显示的图片的路径(相对或者绝对)
width/height:尺寸
title:提示性的文本信息
<img src="http://bbs.tarena.com/images/logo.gif"
<img src="d:/a.jpg">
<img src="a.jpg">
超级链接:<a> 标记---<a>被点击的文本或者其他元素<a>
href:url地址(相对或者绝对)---页面间跳转
<a href="http://bbs.tarena.com.cn"></a>:友好链接
<a href="home.jsp">主页</a>:当前站点跳转
target:页面在何处打开(原有的窗口,新窗口)
_blank:查看详细
_self:前后逻辑顺序
name:定义锚点---当前页面上的不同部分之间的跳转
一个 <a> 定义锚点:使用name 属性
一个 <a> 定义链接: href="#锚点名称"
整幅图像只有一个链接:<a href=""><img></a>
为一副图像添加多个链接:热点映射
<map name="aaa">
<area shape="" coords="" href="">定义一个区域,单标记
<area shape="circle" coords="x,y,r">
<area shape="rect" coords="x1,y1,x2,y2">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,.....">
</map>
<img src="" width="" title="" usemap="#aaa">
5 表格
显示规则化数据
页面的布局
主要元素:<table> <tr> <td>,内容只能显示在td里
table 元素可以附带一些属性:
border
width/height:默认大小是自适应的
设置大小后,按照行列中内容的比例自动分配
cellpadding:单元格内容与单元格的边距
tr和td元素也可以设置一些属性:格子之间(边框)的间距
width/height:
align:水平方向的对齐 left/center/right
valign:垂直方向的对齐 top/middle/bottom
表格的完整结构
<caption>:为表格定义标题
行分组:适应于为多行统一的样式定义的时候
<thead>:表头,一个
<tbody>:表主体,可以有多个
<tfoot>:表的页脚部分,一个
例子：

<table border="1" width="200" height="100">
<caption>描述性的标题</caption>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>b</td>
<td>2</td>
</tr>
<tr>
<td>c</td>
<td>3</td>
</tr>
</tbody>
</table>

不规则表格:

td 元素属性
rowspan:跨多行
colspan:跨多列

<table border="1">
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>

表格的嵌套：
td 元素中包含整个table 的定义

<table border="1">
<tr>
<td colspan="2">
aaaa
</td>
</tr>
<tr>
<td>
原有的文本
<table border="1">
<tr><td>111</td></tr>
<tr><td>aaa</td></tr>
</table>
</td>
<td>c</td>
</tr>
</table>

6 表单:页面的数据录入/选择和提交
<form>:包含表单元素,以表单为单位提交
action="register.jsp"
method="post"
<input>标记:单标记
type 属性:决定输入元素的类型
type="text":文本输入框
type="password":密码输入框,用掩码的方式显示文本
type="checkbox":核选框,多选框,
checked属性:设置默认选中
type="radio":单选,一组实现互斥的选择
通过name属性来实现分组
按钮相关
type="submit":提交类型的按钮
type="reset":重置类型的按钮,恢复到加载时
两种
type="hidden":隐藏域控件--界面上不显示,专用于记载那些不希望用户看见的关键数据
type="file":文件上传
value属性:如果是文本框或者密码框,value的值将显示在
如果是核选框/单选框,记载发送给服务器端的关键数据
如果是按钮类型,设置按钮上的文本
非<input>标记:
<select>和<option>:下拉框或者列表框(依靠size属性)
select 的常用属性:multiple实现多选,只能用于列表框
<textarea>:多行的文本区域
<label>:用来包含文本的,包含的文本和表单元素关联起来
for 属性: <label for="元素的id的值">文本</label>
例子：

<input id="chkSwimming" type="checkbox" value="1" checked="checked">
<label for="chkSwimming">游泳</label>
<input type="checkbox" value="2">跑步
<input type="checkbox" value="3">羽毛球

7 列表:将一系列的选项按照分行对齐显示
<ol>:有序列表
<ul>:无序列表
<li>:list item
嵌套实现导航菜单的效果
例子：
生成订单的步骤如下:
<ol>
<li>加入购物车</li>
<li>填写订单信息</li>
<li>支付</li>
</ol>
本章包含如下知识点:
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<h2>列表的嵌套</h2>
<ul>
<li>
java系列版
<ul>
<li>core java</li>
<li>jdbc</li>
<li>html</li>
</ul>
</li>
<li>
php系列版
<ul>
<li>unix</li>
<li>html</li>
</ul>
</li>
</ul>
效果：

8 框架元素(了解)
作用:在一个浏览器窗口或者页签中显示多个html页面
使用方式:
新建一个html文件,代码中使用框架元素划分页面并引入其他html文件
不需要body元素,包含如下:
<html>
<head>
</head>
<frameset rows="200,*">---使用rows或者cols属性划分
<frame src="a.html">---单标记,引入html页面
<frame src="b.html">
</frameset>
</html>
<iframe>标记:在一个非框架页面(普通html页面)上嵌入一个其他页面
<iframe src="first.html"></iframe>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航