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@gmail.com"/>
	
	<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>

HTML与H5_第1张图片
table属性,一般由前端工程师书写CSS,了解即可
HTML与H5_第2张图片

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 />

HTML与H5_第3张图片

下拉框

<select name="">
	<option value="0" selected>请选择option>
	<option value="1">1option>
	<option value="2">2option>
	<option value="3">3option>
	<option value="4">4option>
select>

多行文本框