h5基本内容
一 简介
html
超文本标记语言
W3C
中立技术标准机构
W3C标准包括
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM,ECMAScript)
二 入门例子
<!--告诉浏览器使用规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head>
<!--meta 描述性标签 -->
<meta charset="UTF-8">
<meta name="keywords" content="网页关键词">
<meta name="description" content="网页描述">
<!--标题-->
<title>Title</title>
</head>
<body>
<!--网页主体-->
Hello World !
</body>
</html>
三 网页基本标签
标签生成快捷键 p+tab ==
标题标签 h
段落标签 p
水平线标签 hr
换行标签 br
特殊符号 &nsbp
链接标签 a
锚标签 a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<a name="top">顶部</a>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎 - 贝瓦儿歌</p>
<p>两只老虎两只老虎</p>
<p>跑得快跑得快</p>
<p>一只没有耳朵</p>
<p>一只没有耳朵</p>
<p>真奇怪真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎 - 贝瓦儿歌 <br/>
两只老虎两只老虎 <br/>
跑得快跑得快<br/>
一只没有耳朵<br/>
一只没有耳朵<br/>
真奇怪真奇怪<br/>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体 <b>hello word</b>
斜体 <i>hello word</i>
<hr/>
<!--特殊符号-->
空 格:
<br/>
>
<br/>
<
<br>
©版权所有
<!--图像标签-->
<!--src 图像地址(必填)
相对地址(推荐使用) 绝对地址
./ 上一级目录
图像替代文字(必填)
当图片不存在的时候出现
鼠标悬停文字
图像宽度
图像高度 -->
<img src="./resource/timg.jpg" alt="temp" title="悬停文字" width="" height="" />
<!--链接标签-->
<!--
href 必填
链接路径
target
表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己网页打开
-->
<br/>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="1第一个HTML.html"></a>
<a href="1第一个HTML.html">
<img src="./resource/timg.jpg" alt="temp" title="悬停文字" width="" height="" />
</a>
<!--锚链接
在需要的位置,设置一个锚标记<a name="top">顶部</a>
跳转到标记 <a href="#top">回到顶部</a>
-->
<a href="#top">回到顶部</a>
<a href="1第一个HTML.html#down">跳转到第一个页面的底部</a>
<!--功能性链接
邮件联系 mailto
-->
<a href="mailto:1013482790@qq.com">发送邮件</a>
</body>
</html>
四 行内元素和块元素
块元素:无论内容多少行,该元素独占一行
(h1~h6、p、div、ul、table)
行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(无法设置宽度和高度)
(span、a、input)
五 列表
分类:
无序列表
<ul>
<li>java</li>
<li>C</li>
<li>python</li>
</ul>
有序列表
<ol>
<li>java</li>
<li>C</li>
<li>python</li>
</ol>
自定义列表
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>位置</dt>
<dd>北京</dd>
<dd>上海</dd>
</dl>
适用于网页底部
六 表格标签
<!--table
tr 行 rows
td 列
colspan 跨列
rowspan 跨行
-->
<table border="1px">
<tr>
<!--colspan 跨列数=实际占的列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
</table>
七 视频元素和音频元素
video
audio
<!--视频和音频 src 路径 controls 控制条
-->
<video src="./resource/video/视频.mp4" controls></video>
<audio src="./resource/audio/音频.mp3" controls></audio>
八 页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容 |
footer | 标记脚部的内容 |
section | web页面的一块独立区域 |
artive | 独立的文章内容 |
aside | 相关内容或应用(侧边栏) |
nav | 导航类辅助内容 |
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
九 iframe内联框架
使用一:无name直接跳转
<iframe name="hello" src="https://www.baidu.com" frameborder="0" width="300px" height="300px"></iframe>
使用二:有name(就是target)还在当前网页,点击跳转
<iframe name="name" src="" frameborder="0" width="300px" height="300px"></iframe>
<a href="1第一个HTML.html" target="name">点击跳转</a>
十 表单
表单元素格式
属性 | 说明 |
---|---|
type | 指定元素的类型 text password checkbox radio submit reset file hidden image button 默认text |
name | 指定表单元素的名称 |
value | 元素的初始值 |
placeholder | 提示输入 |
maxlength | 输入的最大字符数 |
checked | type为radio checkbox 是否选中 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
action:表单提交的位置 可以是网站或者请求处理地址
method: get post
get不安全但是高效
post 比较安全在network request 的from data,可以传输大文件
-->
<form method="" action="1第一个HTML.html">
<p>名字: <input type="text" name="username" placeholder="请输入" /></p>
<p>密码: <input type="password" name="password" /></p>
<p>性别:
<!--单选框
value 表示值
name 相同表示一个组
-->
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman" checked/>女
</p>
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="sing" name="hobby">唱歌
<input type="checkbox" value="run" name="hobby">跑步
</p>
<p>按钮:
<!--value是按钮的名字-->
<input type="button" name="btn" value="点击变长">
</p>
<p>下拉框:
<select name="nation" id="">
<option value="China">中国</option>
<option value="Japan">日本</option>
<option value="England">英国</option>
</select>
</p>
<p>文本域:
<textarea name="" id="" cols="30" rows="10">文本内容</textarea>
</p>
<p>数字:
<input type="number" name="number" min="0" max="100" step="2">
</p>
<p>音量 滑块:
<input type="range" name="range" min="0" max="100" step="2">
</p>
<p>搜索:
<!--多了一个清空的叉叉-->
<input type="search" >
</p>
<p><input type="submit"><input type="reset" /></p>
</form>
</body>
</html>
表单应用
readonly 只读
hidden 隐藏域
<input type="text" name="id" hidden />
disabled 禁用
<!--增强鼠标可用性
点击文字锁定文本框
for="id"
-->
<p>
<label for="mark">点击我</label>
<input type="text" id="mark" />
</p>
h5基本内容的更多相关文章
- H5小内容(一)
HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) ...
- H5简单内容
1.简单认识H5 HTML5不仅仅是作为HTML标记语言的一个最新版本,更重要的是它指定了Web开发的一系列标准,成为第一个将Web作为应用开发平台的HTML语言. 我们日常讨论的H5其实是有一个泛称 ...
- H5小内容(六)
Web Worker 基本内容 单线程与多线程 Worker可以模拟多线程的效果 定义 - 运行在后台的javascript 注意 - 不能使用DOM ...
- H5小内容(五)
Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯 ...
- H5小内容(四)
SVG 基本内容 SVG并不属于HTML5专有内容 HTML5提供有关SVG原生的内容 在HTML5出现之前,就有SVG内容 SVG,简单来说就是矢量图 ...
- H5小内容(三)
Canvas(画布) 基本内容 简单来说,HTML5提供的新元素<canvas> Canvas在HTML页面提供画布的功能 在画布中绘制各种图形 C ...
- H5小内容(二)
音视频处理 视频处理 基本内容 使用Flash技术处理HTML页面中的视频内容 包含音频.动画.网页游戏等 特点 浏览器原生不支持(IE浏览器要求安装A ...
- 如何使用charles抓包H5页面内容
安装charles 这里推荐直接去官网下载 https://www.charlesproxy.com/latest-release/download.do 根据自己的电脑选择合适的安装包,我这里选择m ...
- h5新增内容
1.新的input type值 email url search tel color range number date month week time datetime datetime-local ...
随机推荐
- 微信小程序在Android和Ios端的获取时间兼容性问题
an端 var time = new Date() 例如:2020-01-01 01:01:00 ios端 var time = new Date() 例如:2020/01/01 01:01:00 ...
- android分析之Parcel
将数据打包,跨进程传输(通过Binder).看看这货究竟是啥玩意: Parcel.java : public final class Parcel { private static final boo ...
- 常用开发库 - MapStruct工具库详解
常用开发库 - MapStruct工具库详解 MapStruct是一款非常实用Java工具,主要用于解决对象之间的拷贝问题,比如PO/DTO/VO/QueryParam之间的转换问题.区别于BeanU ...
- MySQL中where和on,where和having 的区别
where和on的区别 用到连接查询时on会常用到,我们以左连接为例,来了解on的作用. on是在生成临时表使用的条件,不管on子句的条件是否为真,其都会返回左表的数据,如果条件为真则右表对应的数据也 ...
- java四种字符串拼接方式
1.直接用"+"号 2.使用String的方法concat 3.使用StringBuilder的append 4.使用StringBuffer的append
- Hive中静态分区和动态分区总结
目录 背景 第一部分 静态分区 第二部分 动态分区 第三部分 两者的比较 第四部分 动态分区使用的问题 参考文献及资料 背景 在Hive中有两种类型的分区:静态分区(Static Partitioni ...
- jQuery核心函数和静态方法
jQuery核心函数 从jQuery文档中可以看出,jQuery核心函数一共3大类4小类 jQuery(callback) 当DOM加载完成后执行传入的回调函数 <script> $(fu ...
- Java中对象的生与灭- 核心篇
前言 大家好啊,我是汤圆,今天给大家带来的是<Java中对象的生与灭- 核心篇>,希望对大家有帮助,谢谢 文章纯属原创,个人总结难免有差错,如果有,麻烦在评论区回复或后台私信,谢啦 简介 ...
- manjaro配置攻略
2021.1.30 更新 1 概述 本文主要讲述了新安装的Manjaro一些常用的配置,包括源.常用软件.快捷键.终端以及一些效率工具的配置. 2 pacman源 首先是pacman源的选择: sud ...
- 玉帝传美猴王上天,大闹天宫之Java设计模式:命令模式
目录 示例 改进代码 命令模式 定义 意图 主要解决问题 何时使用 优缺点 玉帝传美猴王上天 命令模式和策略模式的区别 示例 系统需要设计一个命令行界面,用户可输入命令来执行某项功能,系统的功能会不断 ...