HTML与H5
HTML与H5
-
- 简介
- 标签
-
- 元信息标记meta
- 标题前的小图标
- 加载资源
- HTML 链接
- HTML 图像
- 刷新
- 层标记
- 列表标签
- 常用属性
- 表格
- form表单以及input
- 下拉框
- 多行文本框\标记
- HTML 视频
- HTML 音频
- 滚动字幕
- 基底网址标记
- 特殊字符
- 补充标记
- 窗口的分割与设置frameset
- 网页元素分组fieldset
- 内部框架iframe
- 其它
- 离线web应用
简介
- W3C标准：一个网页主要由3个部分组成：结构，表现，行为
- HTML基础知识
- HTML 指的是超文本标记语言：HyperText Markup Language
- 不是一种编程语言，而是一种标记语言
- 扩展名：“.html"或”.htm"
- HTML 标签对大小写不敏感，推荐使用小写
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
<标签>内容 - HTML文档也叫做 web 页面
HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点
- 文档是一个文档节点
- 所有的HTML元素都是元素节点
- 所有 HTML 属性都是属性节点
- 文本插入到 HTML 元素是文本节点
- 注释是注释节点
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”
属性和属性值对大小写不敏感
元信息标记meta
-
用于定义页面元信息，也就是指定一些name-value键值对。该标记写在head标记内
- http-equiv：用于指定元信息名称，该属性指定的名称具有特殊意义
- name：用于指定元信息名称，可随意指定
- content：用于指定元信息的值
<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">
HTML 链接
<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 | 链接在父窗口中显示，用在框架中 |
HTML 图像
<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 分组标签
<\div> 定义了文档的区域，块级 (block-level)用来组合文档中的行内元素， 内联元素(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>
table属性，一般由前端工程师书写CSS，了解即可
form表单以及input
<form name="表单名" action="处理程序" method="提交方法"> form>- input
<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>多行文本框