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

HTML基本知识点

2017-08-01 10:01 204 查看

1、html基础
(1)什么是html?
hypertext markup language,超文本标记语言。
用于开发网页的语言，由浏览器解释执行。
html文件以.html/.htm结尾。

什么是html5?
HTML 5 是下一代的 HTML。 HTML5 仍处于完善之中。
然而，大部分现代浏览器已经具备了某些 HTML5 支持。
特别移动设备中的浏览器，对html5的支持更好！
基于html5技术的手机web应用，不排除有超越原生本地app的趋势！

(2)html文件的基本结构
<html>
<head>
<title>标题</title>


<meta http-equiv="content-type"
content="text/html;charset=utf-8">

<script>

<style>

<link>
</head>
<body>

</body>
</html>
(3)web开发标准 (建议)
w3c建议，开发一个页面，应该这样设计：
页面的结构（包括了数据），由html文档来负责。(程序员为主，美工为辅）
页面的外观，由css文档来负责。（美工为主，程序员为辅）
页面的行为，由javascript/jq/...文档来负责。（前端程序员为主，美工为辅）

全栈工程师

2. HTML的基本标签

(1). 链接
a,基本使用
<a href="url地址" target="_blank">描述</a>
_blank:在新的窗口中打开url地址所对应的内容
_self: 在当前窗口打开（默认）
b,使用图片作为链接
<a href="url地址"><img src="图片地址" width=""
height="" border=""/></a>
c,使用热点
<img src="index.jpg" width="500"
height="500" border="0" usemap="#m1" />
<map name="m1" id="m1">
<area shape="rect" coords="…" href="#" />
<area shape="circle" coords="…" href="#" />
<area shape="poly" coords="…" href="#" />
</map>
当shape="rect"（矩形）时，coords的值为
左上角和右下角的坐标值; 当shape="poly"（多边形）时，
为各顶点值; 当shape="circle"（圆形）时，为圆心坐
标值和半径值。 coords值依照图片大小的不同
和所希望链接区域的不同而有所不同
d,使用锚点:在同一个页面内部跳转
<a name="top"></a>
<a href="#top"></a>

e,发送邮件
<a href="mailto:sally@126.com?subject=hello">
</a>
f,链接中的伪样式（css中再讲）

(2)列表
a,无序列表 <ol>
b,有序列表 <ul>
c,列表嵌套

(3)表格
a, 基本使用
<table border="" cellpadding="" cellspacing=""
width="">
<tr>
<td align="">id</td><td>name</td><td>salary</td>
</tr>
<tr>
<td>1</td><td>zs</td><td>2000</td>
</tr>
</table>
border:边框的宽度
cellpadding:单元格里面的数据与单元格边框之间的距离
cellspacing:单元格之间的距离
width:60%/600 宽度
align: 水平位置 left/center/right
valign:垂直位置 top/middle/bottom
b,不规则的表格
cospan:跨列合并
rowspan:跨行合并
c,表格的另一种写法
<table>
<caption>标题</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
<tbody></tbody>
</table>
thead:表头，0/1
tfoot:表脚,0/1
tbody:表体,1/n
d,表格可以嵌套

(4)表单
什么是表单：用于收集用户的信息，比如
登录表单可以让用户输入登录的用户名、密码，
这些信息会提交给服务器来验证。
<form>
<input type="text"/>
</form>
input标记:
type="text": 文本输入框
type="submit":
c33e
提交按钮
type="reset":重置按钮
type="password":密码输入框
type="radio":单选
type="checkbox":多选
type="file":上传文件(
必须给form添加enctype="multipart/form-data")
type="hidden":隐藏域
非input标记:
<textarea>:多行文本输入框
<select>:下拉列表/多选框

(5)框架
什么是框架，用来将一个窗口划分成多个
子窗口。
a,<frameset>,<frame>
注意：frameset不能写在<body>里,
可以嵌套使用。
b,<iframe>
可以使用在<body>里，表示嵌入一个子窗口。

(6)其它标记
<h1>...<h6>:标题
行内标记:
不单独占一行的标记
<span></span>
<strong></strong>
块级标记:
另起一行的标记
<h1>...<h6>
<table>
<form>
<p>
<div>

(7)实体
在html页面中，出现了空格、>,<,",&,
应该使用实体来代替。
空格
> >
< <
" "
&

3. html/xhtml: 标签的规范性
xhtml:扩展的超文本标记语言。
w3c按照xml语法要求重新定义了html中的标记与
相应的属性。比如要求标签必须层层嵌套，
属性必须用""引起来，标签必须要结束。
尽量使用小写。
<font size=red>:error!
<font size="red"> : ok!
<br> :error!
<br/> :ok!
html/xhml文档类型声明
常见的文档类型声明
XHTML 过渡型
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 严格型
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
HTML严格型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML松散型
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

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

标签：

相关文章推荐

新的分享

章节导航