0
点赞
收藏
分享

微信扫一扫

HTML与H5

一枚路过的程序猿 2022-01-26 阅读 234
html前端html5

HTML与H5

简介

  • 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 元素是文本节点
  • 注释是注释节点
<!-- H5声明 -->
<!DOCTYPE html>
<!-- HTML 页面的根元素 -->
<html>
	<!-- 头部 -->
	<head>
		<meta charset="utf-8">
		<title>标题</title> 
	</head>
	
	<!-- 主体 -->
	<body>
	</body>
</html>

头部：在<head>与</head>之间的部分
主体：在<body>与</body>之间的部分

注释：

  • 注释不能嵌套
	<!-- 单行注释 -->
	<!--
	    多行注释
		多行注释
		多行注释
	-->

标签

基本语法：

<标签名称 属性名1=“属性值” 属性名2=“属性值” … >文本内容</标签名称>

单标签后面的/可有可无

标签作用
<br>，<br/>换行，<br> 在所有浏览器中都是有效的
<hr/>网页中插入水平线
<h#></h#>标题标记，#：1,2,3,4,5,6
<p></p>段落标记
<b></b>黑体标记
<i></i>斜体标记
<strong></strong>加重标记
<font></font>字体标记
<cite></cite>定义作品的标题
<cite>标题 The</cite>
效果:标题 The
<blockquote></blockquote>标签定义块引用，标签之间的所有文本都会从常规文本中分离出来经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体也就是说，块引用拥有它们自己的空间

  • HTML 属性

    属性总是以名称/值对的形式出现，比如：name=“value”

    属性和属性值对大小写不敏感

元信息标记meta

  • 用于定义页面元信息，也就是指定一些name-value键值对。该标记写在head标记内

    • http-equiv：用于指定元信息名称，该属性指定的名称具有特殊意义
    • name：用于指定元信息名称，可随意指定
    • content：用于指定元信息的值
<head>
	<!-- 不让百度转码,no-siteapp大于no-transform -->
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<meta http-equiv="Cache-Control" content="no-transform"/>
	<!-- 使得页面在IE8里面表现正常 -->
	<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"/>
	<!-- 忽略页面中的数字识别为电话,忽略email识别 -->
	<meta name="format-detection" content="telphone=no, email=no"/> 
	<!-- IOS中Safari允许全屏浏览 -->
	<meta content="yes" name="apple-mobile-web-app-capable">
	<!-- IOS中Safari顶端状态条样式 -->
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	
</head>

标题前的小图标

<!-- 标题小图标 -->
<link href="img/head/top_logo.jpg" rel="icon" />
<title>前端学习</title>

加载资源

<!-- 加载js -->
<script type="text/javascript" src="js/test.js"></script>
<!-- 加载CSS -->
<link type="text/css" rel="stylesheet" href="css/test.css">

HTML 链接

<a href="http://www.baidu.com/" title="悬浮显示的信息">超链接名称或图片</a>
<!-- target="_blank" 新开一个页面 -->
<a href="http://www.baidu.com/" target="_blank">新开页面的超链接</a>
<!-- 链接到本项目其它文件 -->
<!-- 
	注意路径问题,这里html与该网页同级,使用相对地址
	如果不同级  ../  表示退一级 
-->
<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 图像

<!-- height,width -->
<img src="img/logo.png" alt="加载不成功后的替代文本" title="图片悬停名称">

刷新

  • 定时刷新
<!-- 1秒刷新一次 -->
<meta http-equiv="refresh" content="1" />
  • 定时自动跳转
<!-- 3秒后跳到百度网页 -->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />

层标记

<div id="层编号">...</div>
<span id="">...</span>
<p class="" id="" style="" >段落标记</p>

  • HTML 分组标签

    <div><\div> 定义了文档的区域，块级 (block-level)

    <span><span> 用来组合文档中的行内元素， 内联元素(inline)

列表标签

<!-- 有序列表标记 -->
<!--
	“1”：编号为阿拉伯数字（默认值）
	“a”：小写英文字母
	“A”：大写英文字母
	“i”：小写罗马数字
	“I”：为大写罗马数字
-->
<ol type="序号类型">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	...
</ol>

<!-- 无序列表标记 -->
<!-- 
	disc：实心圆点（默认值）
	circle：空心圆点
	square：实心方块
-->
<ul type="类型样式">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	...
</ul>

<!-- 
	自定义列表
	每个自定义列表项以 <dt> 开始
	每个自定义列表项的定义以 <dd> 开始
 -->
<dl>
<dt>列表项一</dt>
	<dd>-列一</dd>
<dt>列表项二</dt>
	<dd>-列二</dd>
</dl>

常用属性

属性属性值说明
alignleft,center,right左，中，右
colorred,blue
size6px,1-7
width60%占网页的百分比

表格

<!-- 表格 -->
<table border="1">
	<caption>表格标题</caption>
	<tr>
		<th>列名一</th>
		<th>列名二</th>
		<th>列名三</th>
	</tr>
	<tr>
		<td>数据1.1</td>
		<td>数据1.2</td>
		<td>数据1.3</td>
	</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
<!--
	<input>标记主要有六个属性：
    type,name,value
    size,maxlength,check
-->
<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">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

多行文本框<textarea>标记

<!-- resize:none;去掉右下角的两条斜线 -->
<textarea name="asd" rows=""  cols="" maxlength="30" 
	value="sad" wrap="off|virtual|physical"
	style="width:100%; height:70px; resize:none;">
	默认值
</textarea>
<!-- 
	rows设置输入域的行数
	cols设置输入域的列数
	wrap设置是否自动换行
-->

HTML 视频

<video width="300" height="200" controls>
	<source src="media/movie.mp4" type="video/mp4">
	<source src="media/movie.ogg" type="video/ogg">
	浏览器不支持video标签
</video>

HTML 音频

<!-- autoplay="autoplay"  规定一旦音频就绪马上开始播放
	controls="controls"  出现控制组件
	loop="loop"  当音频结束后将重新开始播放
	preload="auto" 当页面加载后载入整个音频，如果使用 "autoplay"，则忽略该属性 
-->
<audio src="media/123.mp3" loop="loop" controls="controls">
	浏览器不支持audio标签
</audio>

滚动字幕

<marquee>滚动文字</marquee>

<marquee direction="up|down|left(默认)|right"
		behavior="scroll|slide|alternate" 
		scrollamount="文字每次移动的长度（像素）"
        scrolldelay="两步间的时间间隔(毫秒)"  
        loop="循环次数"  bgcolor="背景颜色" 
        width="宽度" height="高度"
		hspace="距周围水平距离" vspace="距周围垂直距离">
	要滚动的文字
</marquee>
属性属性值以及说明
directionup、down、left (默认) 和 right
behaviorscroll 循环滚动，默认效果
slide 只滚动一次就停止
alternate 来回交替进行滚动
scrollamount设置滚动文字每次移动的长度，以像素为单位
scrolldelay滚动延迟属性，两步间的时间间隔(毫秒)
width、height滚动范围属性
bgcolor滚动背景颜色属性，文字背景颜色设置为 16 位颜色码
loop循环次数
hspace距周围水平距离
vspace距周围垂直距离

基底网址标记

<base href="" target="_blank">

特殊字符

字符标识
空格&nbsp;
<&lt;
>&gt;
“&quot;
×&times;
§&sect;
&&amp;
©&copy;
®&reg;
™&trade;

补充标记

标签作用
<pre></pre>保留文本原始排版方式
<u>…</u>下划线
<s>…</s>删除线
<sup>…</sup>上标
<sub>…</sub>下标
<center>…</center>内容居中
<blockquote>右缩进
<nobr>强制不换行

窗口的分割与设置frameset

<frameset rows="高度1,高度2…"  
               或者  cols="宽度1,宽度2…">
    <frame src="网页1" name="">
    <frame src="网页2" name="">
           <!-- ... -->
</frameset>
  • 不能将body标签和frame标签同时使用，否则frame标签会失效
  • noframes标签用于当浏览器不支持框架时使用，一般都会添加
<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

  • <fieldset> 标签用于从逻辑上将表单中的元素组合起来
  • <fieldset> 标签会在相关表单元素周围绘制边框
  • <legend> 标签为 fieldset 元素定义标题
<fieldset>
	<legend>标题1</legend>
	 内容1
</fieldset>
<fieldset>
	<legend>标题2</legend>
 	内容2
</fieldset>

在这里插入图片描述

内部框架iframe

<!-- 可以在一个页面定义一个区域用于显示另一个页面内容 ，同frame有相似之处 -->
<iframe src="文件" width="宽度" height="高度" 
	name="框架名称" scrolling="auto|yes|no"
	frameborder="0|1">
</iframe>

其它

  • body标签的属性

bgcolor=“#xxxxxx”：背景颜色
background=“背景图片”
text=“文本颜色”
link：链接字体颜色
vlink：访问过后的链接字体颜色
alink：设定鼠标正在单击链接时的颜色
topmargin,leftmargin:body距浏览器边界的距离

离线web应用

页面缓存指的还是有网络状态下，而离线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
举报

相关推荐

【HTML5】H5的新标签简介

html5audiovediocanvasHTMLPython后端开发

【HTML5】H5新标签大实例

html5navplaceholderpatternmultipleJavaScript前端开发

从0-1 h5 h5 授权 适配 h5微信授权

html5vue.jsnpm

H5与Android的调试

chrome开发者模式包名Html/CSS前端开发

HTML详细基础（一）H5标签入门

服务器华为安全

H5测试

APP测试经验总结h5数据加载Spark大数据

H5 - URL

htmlweb服务器锚点Java编程语言

h5基础

htmlcss前端

Android H5

移动开发Androidhtml.netHtml/CSS前端开发

H5和android原生APP之间的区别，Android与H5混合开发

Androidwebviewandroidh5系统/运维
0 条评论