HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题title>
head>
<body>
body>
html>
头部:在
与之间的部分注释:
基本语法:
<标签名称 属性名1=“属性值” 属性名2=“属性值” … >文本内容
单标签后面的/可有可无
标签 | 作用 |
---|---|
, |
换行, 在所有浏览器中都是有效的 |
网页中插入水平线 | |
标题标记,#:1,2,3,4,5,6 | |
段落标记 | |
黑体标记 | |
斜体标记 | |
加重标记 | |
字体标记 | |
定义作品的标题 标题 The 效果:标题 The |
|
标签定义块引用,标签之间的所有文本都会从常规文本中分离出来经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体也就是说,块引用拥有它们自己的空间 |
HTML 属性
属性总是以名称/值对的形式出现,比如:name=“value”
属性和属性值对大小写不敏感
用于定义页面元信息,也就是指定一些name-value键值对。该标记写在head标记内
<head>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="H5,CSS,JS" />
<meta name="description" content="前端学习,包括H5,CSS,JS..." />
<meta name="revised" content="2520/05/20" />
<meta http-equiv="Pragma" content ="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content ="0">
<meta name="author" content="name, [email protected]"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
head>
<link href="img/head/top_logo.jpg" rel="icon" />
<title>前端学习title>
<script type="text/javascript" src="js/test.js">script>
<link type="text/css" rel="stylesheet" href="css/test.css">
<a href="http://www.baidu.com/" title="悬浮显示的信息">超链接名称或图片a>
<a href="http://www.baidu.com/" target="_blank">新开页面的超链接a>
<a href="html/loader/index.html">此处为超链接a>
<a href="#">链接到本页a>
<a href="#home">此处为超链接a>
<a href="文件名#锚点名">此处为超链接a>
<a name="home">a>
target属性取值
属性值 | 作用 |
---|---|
_self | 链接在自身窗口中显示,它是target的默认值 |
_blank | 链接在新窗口中显示 |
_parent | 链接在父窗口中显示,用在框架中 |
<img src="img/logo.png" alt="加载不成功后的替代文本" title="图片悬停名称">
<meta http-equiv="refresh" content="1" />
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
<div id="层编号">...div>
<span id="">...span>
<p class="" id="" style="" >段落标记p>
HTML 分组标签
用来组合文档中的行内元素, 内联元素(inline)
<ol type="序号类型">
<li>...li>
<li>...li>
<li>...li>
...
ol>
<ul type="类型样式">
<li>...li>
<li>...li>
<li>...li>
...
ul>
<dl>
<dt>列表项一dt>
<dd>-列一dd>
<dt>列表项二dt>
<dd>-列二dd>
dl>
属性 | 属性值 | 说明 |
---|---|---|
align | left,center,right | 左,中,右 |
color | red,blue | |
size | 6px,1-7 | |
width | 60% | 占网页的百分比 |
<table border="1">
<caption>表格标题caption>
<tr>
<th>列名一th>
<th>列名二th>
<th>列名三th>
tr>
<tr>
<td>数据1.1td>
<td>数据1.2td>
<td>数据1.3td>
tr>
<tr>
<td colspan="3">横向合并单元格td>
tr>
<tr>
<td colspan="2">横向合并单元格td>
<td rowspan="2">纵向合并单元格td>
tr>
<tr>
<td colspan="2">横向合并单元格td>
tr>
table>
<form name="表单名" action="处理程序" method="提交方法">
form>
<form name="" action="" method="">
<input type="button" value="警告对话框"
onclick="test()"><br/>
form>
以往input中的name和value要随着form表单一起提交,form表单必须包裹input , 而现在可以通过input的form属性綁定
<form id="testform">
<input type="text" />
form>
<input form=testform />
<select name="">
<option value="0" selected>请选择option>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
<option value="4">4option>
select>
<textarea name="asd" rows="" cols="" maxlength="30"
value="sad" wrap="off|virtual|physical"
style="width:100%; height:70px; resize:none;">
默认值
textarea>
<video width="300" height="200" controls>
<source src="media/movie.mp4" type="video/mp4">
<source src="media/movie.ogg" type="video/ogg">
浏览器不支持video标签
video>
<audio src="media/123.mp3" loop="loop" controls="controls">
浏览器不支持audio标签
audio>
<marquee direction="up|down|left(默认)|right"
behavior="scroll|slide|alternate"
scrollamount="文字每次移动的长度(像素)"
scrolldelay="两步间的时间间隔(毫秒)"
loop="循环次数" bgcolor="背景颜色"
width="宽度" height="高度"
hspace="距周围水平距离" vspace="距周围垂直距离">
要滚动的文字
marquee>
属性 | 属性值以及说明 |
---|---|
direction | up、down、left (默认) 和 right |
behavior | scroll 循环滚动,默认效果 slide 只滚动一次就停止 alternate 来回交替进行滚动 |
scrollamount | 设置滚动文字每次移动的长度,以像素为单位 |
scrolldelay | 滚动延迟属性,两步间的时间间隔(毫秒) |
width、height | 滚动范围属性 |
bgcolor | 滚动背景颜色属性,文字背景颜色设置为 16 位颜色码 |
loop | 循环次数 |
hspace | 距周围水平距离 |
vspace | 距周围垂直距离 |
<base href="" target="_blank">
字符 | 标识 |
---|---|
空格 |
|
< |
< |
> |
> |
“ |
" |
× |
× |
§ | § |
& | & |
© | © |
® | ® |
™ | ™ |
标签 | 作用 |
---|---|
保留文本原始排版方式 | |
… | 下划线 |
删除线 | |
… | 上标 |
… | 下标 |
内容居中 | |
右缩进 | |
强制不换行 |
<iframe src="/test" width="100%" height="500">
iframe>
<frameset rows="高度1,高度2…"
或者 cols="宽度1,宽度2…">
<frame src="网页1" name="">
<frame src="网页2" name="">
frameset>
<noframes>
<body>浏览器不能处理框架body>
noframes>
属性 | 说明 | 例子 |
---|---|---|
rows | 横向分割网页,把网页形成一行一行 属性可以为百分比或者整数,也可以为*,*代表剩余空间 |
rows=“15%,85%” |
cols | 竖向分割网页,把网页形成一列一列 | cols=“100,100,140” |
noresize | 框架是不可调整尺寸的 | noresize=“noresize” |
border | 设置框架的边框粗细 | |
bordercolor | 设置框架的边框颜色 | |
frameborder | 设置是否显示框架边框 | 0为不显示边框,1为显示边框 |
bordercolor | 设置框架的颜色 |
body{
margin: 0;
padding: 0;
}
frameset{
margin: 0px;
padding: 0px;
border: none;
}
frame{
width: 100%;
margin: 0px;
padding: 0px;
border: none;
}
<frameset rows="" frameborder="no" framespacing="0">
<frame frameborder="no" marginwidth="0" marginheight="0"/>
frameset>
<fieldset>
<legend>标题1legend>
内容1
fieldset>
<fieldset>
<legend>标题2legend>
内容2
fieldset>
<iframe src="文件" width="宽度" height="高度"
name="框架名称" scrolling="auto|yes|no"
frameborder="0|1">
iframe>
bgcolor=“#xxxxxx”:背景颜色
background=“背景图片”
text=“文本颜色”
link:链接字体颜色
vlink:访问过后的链接字体颜色
alink:设定鼠标正在单击链接时的颜色
topmargin,leftmargin:body距浏览器边界的距离
页面缓存指的还是有网络状态下,而离线web应用指的是在没有网络状态可以运行应用
if(window.applicationCache){
//支持离线应用
}
manifest文件是核心,记录着哪些资源文件需要离线应用缓存,要使用manifest,只需要在html标签中添加属性
<html manifest="cache.manifest">
cache.manifest的文件格式如下
CACHE MANIFEST
#缓存的文件
index.html
test.js
#不做缓存
NETWORK
/images/
FALLBACK
offline.html index.html