3-1 H5基础知识

最新推荐文章于 2022-01-28 18:33:22 发布
最新推荐文章于 2022-01-28 18:33:22 发布
阅读量263 收藏
点赞数
分类专栏： 前端 学习笔记 文章标签： html 蓝桥杯 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgd123abc/article/details/122532751
版权

1 HTML页面简介

<!--

HTML 超文本标记语言 HyperText Markup Language

HTML是用来描述网页的一种语言

HTML页面包含了HTML标签(也称为：元素)和文本内容

-->

<!-- 明确HTML版本为HTML5版本，简称H5;只有明确版本，浏览器才能正确显示HTML页面 -->

<!DOCTYPE html>

<!-- HTML页面的根元素 -->

<html>

<!-- head标签包含HTML页面元数据， head标签中的信息不会显示在浏览器上-->

<head>

<!-- 网页编码格式 -->

<meta charset="utf-8">

<!-- 搜索引擎关键词-->

<meta name="keywords" content="前端，思途，青岛" />

<!-- 网站描述，涉及到SEO优化 -->

<meta name="description" content="思途前端学习" />

<!-- 标题 -->

<title>思途，首页</title>

</head>

<!-- body标签包含了全部的页面可见的内容 -->

<body>

</body>

</html>

2 HTML常用标签

2.1 基本标签

<h1></h1>

标题标签，<h1>的标题最大

<h6></h6>

标题标签，<h6>的标题最小

<p>段落</p>

段落标签

<p>标签单独占一行

<br/>

换行标签

<hr/>

水平线标签

<!-- 注释 -->

注释

2.2 文本格式化标签

<b></b>

粗体

<i></i>

斜体

<small></small>

比普通文本更小的字体

<strong></strong>

等价于粗体

<del></del>

删除字体，标记文本中间一条横线

2.3 链接

<!-- 超链接：点击文字，页面跳转到链接的地址 -->

<!-- href是a标签的属性，表示要跳转的页面地址 -->

<a href="https://www.taobao.com">淘宝</a>

<a href="../page/index.html">首页</a>

<!-- 书签 -->

<div id="tips">提示部分</div>

<a href="#tips">跳到提示部分</a>

2.4 图片标签img

<!-- src是img标签的属性，表示图片文件的地址 -->

<!-- width-宽度属性 单位是像素-->

<!-- height-高度属性 单位是像素-->

<img src="../img/icon.jpg" title="图片说明" width="200px" height="200px"/>

绝对路径

从项目根目录开始，根目录用/表示；

示例：项目中的某个图片路径

/img/001.jpg

相对路径

从当前文件开始，向上一级目录用../表示

示例：当前文件的上一级目录中的某个文件路径

../page/index.html

2.5 列表

<!-- 无序列表 -->

<ul>

<li>aaa</li><!-- 列表的行标签 -->

<li>bbb</li>

<li>ccc</li>

</ul>

<!-- 有序表标签 -->

<ol>

<li>111</li>

<li>222</li>

<li>333</li>

</ol>

2.6 表格标签table

<!-- border-边框属性，控制边框粗细，0-表示不显示边框 -->

<!-- cellpadding 指定单元格内容与单元格边界之间的空白距离的大小-->

<!-- cellspacing 指定表格各单元格之间的空隙，参数值是数字，表示单元格间隙所占的像素点数 -->

<table border="1" cellspacing="0" cellpadding="50">

<!-- 行标签  -->

<tr>

<td rowspan="2">123</td><!-- 单元格标签，列标签 -->

<td>abc</td>

<td>@@@</td>

</tr>

<tr>

<!-- colspan-横向合并单元格 -->

<td colspan="2" align="center">abc</td>

</tr>

</table>

2.7 框架标签frameset

<!-- frameset标签不能body标签同时用 -->

<!-- rows表示当前页面上下分区，有两个值表示分两个区，上半区占10%，下半区占90% -->

<frameset rows="10%, 90%" border="1">

<!-- src属性，引入页面路径 -->

<frame src="top.html" />

<!-- 嵌套frameset表示下半区继续分区 -->

<!-- cols属性表示左右分区 -->

<frameset cols="30%, 70%" border="1">

<frame src="left.html" />

<frame src="right.html" />

</frameset>

</frameset>

2.8 嵌套页面iframe

a.html

<body>

<!-- 嵌套页面 -->

<!--  name属性，iframe标签的名字，用于指定其他链接跳转页面位置  -->

<!-- scrolling启用滚轮 auto自动 yes启用 no禁用 -->

<iframe src="https://www.bilibili.com/" name="main_page"

width="100%" height="425px" scrolling="auto">

</iframe>

</body>

b.html

<!-- 嵌target指定页面跳转的位置，main_page表示a.html中的iframe标签 -->

<a href="login.html" target="main_page">表单</a>

2.9 表单标签form

<!-- form表单标签 -->

<!-- action属性 表单数据的提交到后台服务的地址 -->

<!-- method属性 比较表单的方式get/post -->

<form action="" method="post">

<!-- 文本框 type="text" value属性表示文本框的内容（值）-->

<input type="text" value="" />

<!-- 密码框 type="password" -->

<input type="password" value="" />

<!-- 单选框 type="radio" 单选框需要指定相同的name属性才能控制单选 -->

<input type="radio" name="sex" title="单选框" value="1"/>男

<input type="radio" name="sex" value="0" />女

<!-- 复选框 type="checkbos" 多个复选框标签的name属性相同，可以多选-->

<input type="checkbox" name="cb1" title="复选框1"/>

<input type="checkbox" name="cb1" title="复选框2"/>

<!-- 下拉框  -->

<select>

<option>济南</option>

<option selected="selected">青岛</option><!-- selected默认选中 -->

<option>烟台</option>

</select>

<!-- textarea文本域 -->

<!-- maxlength限定文本域字数 -->

<!-- disabled 禁用文本域 -->

<textarea maxlength="20"></textarea>

<!-- 按钮 -->

<input type="button" value="普通按钮" />

<input type="submit" value="提交按钮" />

<input type="reset" value="重置按钮" />

<!-- 隐藏框，不在浏览器显示，用于缓存临时数据 -->

<input type="hidden" value="隐藏框" />

</form>

2.10 实体Entities

在HTML中，某些字符是预留的。在HTML中不能使用小于号< 和大于号> ，因为浏览器会误认为是标签。如果要正确地显示预留字，必须在HTML源代码中使用字符实体。

实体名称对大小写敏感。

< 等同于小于号<

>; 等同于大于号>

  等同于空格

© 等同于©

3 块级元素

块级元素永远独占一行，表现为另起一行开始，而且其后面的元素也不能跟块级元素处在同一行；

宽度width、高度height、内边距padding、外边距margin都可以控制；

块级元素即使设置了宽度，仍然是独占一行；

常见块级元素汇总：

div

常用的块级元素，用于页面分区

form

表单标签

h1 … h6

标题标签

ol

有序列表

ul

无序列表

p

段落标签

table

表格标签

center

居中对齐块

4 内联元素

和相邻的内联元素在同一行；

宽度width、高度height无法改变，尺寸就是标签中文字或图片的大小；

内联元素的水平方向的padding, margin-left, margin-right都产生边距效果，但是竖直方向的margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

a

超链接标签

b

粗体

br

换行

em

强调

font

字体设定（不推荐使用）

u

下划线

i

斜体

s

中划线

img

图片

input

输入框

label

表格标签

select

下拉选择框

textarea

文本域，多行文本输入框

噫嘻在上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
判断iframe页面是否是顶层页面
weixin_34080951的博客
09-12 545
if (self!=top) { 　　window.parent.location.reload();} 转载于:https://www.cnblogs.com/rickons/p/9635171.html
js判断第一次打开页面
小河流水
09-26 6413
if(!window.name) { //console.log("第一次打开"); window.name = "myname" //第一次打开时设置name localStorage.clear(); //清全部缓存 }
vue单页项目中判断有没有上一页
前端小师姐迪迪_的博客
01-28 7429
场景：判断一个页面有没有上一页，没有就关闭页面，有的话就返回上一页 测试了多种方法后，最后用window.sesstionStorage 结合router.afterEach实现了。 我解决的思路： 1）用window.history.length，如果 =1则是关闭页面，否则是返回上一页。最后发现history.length只增不减，它只记录你一共看了多少个页面；放弃； 2）用document.referrer.它的值为url,当前页面就是从这个 url 所代表的页面跳转或打开的.但是我发现我的项目中.
H5手机端监听用户点击返回时自动刷新上一个页面
weixin_45966674的博客
01-09 2023
相信大家 在用H5语法写手机端页面时大概率会遇到点击手机自带返回按钮返回上一页 数据错乱 没有刷新等问题 那么我们改怎么监听用户返回这个事件从而去做页面刷新 或者其他操作呢 window对象的pageshow事件可以监听到返回按钮 window.location.reload() 可以刷新当前页面 那么 假定我们的需求是 从页面A跳转向页面B 在从页面B点击手机自带的返回按钮 返回到页面A 当返回时 页面A自动刷新 其实这个操作和 页面B一点关系都没有 我们只需要在页面A中编写事件
H5-3D赛车游戏源码
02-22
通过学习和分析这个H5-3D赛车游戏源码，开发者不仅可以了解WebGL和H5游戏开发的基本流程，还能掌握3D图形编程、物理模拟、用户交互设计等多个领域的知识。这不仅有助于提升个人技能，也为创建自己的H5游戏或交互式...
0-基础知识-model1
08-04
在本文中，我们将深入探讨神经网络和机器学习的基础知识，特别是使用Keras和TensorFlow这两个强大的深度学习框架。首先，确保你已经安装了Keras和TensorFlow。如果你正在使用虚拟环境，例如虚谷号教育版，它们可能...
wechat-h5-boilerplate-master
09-21
在实际开发中，开发者需要了解HTML5、CSS3、JavaScript（包括ES6语法）以及Egret引擎的基础知识。对于微信H5小程序，还需要熟悉微信开发者工具的使用，以及微信小程序的特定API和生命周期。Webpack的使用也是现代...
H5游戏3D魔方.zip
06-22
1. **HTML5的WebGL**：WebGL允许在浏览器中进行硬件加速的3D图形渲染，是实现3D魔方游戏的基础。 2. **JavaScript**：作为主要的编程语言，JavaScript用于控制游戏逻辑、处理用户交互以及与WebGL接口交互。 3. **...
1_H5知识点.docx
最新发布
07-06
HTML5基础知识点 本文档主要介绍了HTML5的基础知识点，包括HTML5的定义、标签的分类、head标签中的meta标签、title标签、body标签等内容。 一、HTML5的定义 HTML5是超文本标记语言的第五个版本，添加了一些新标签...
h5通过js 获取上一级页面中的参数问题
xionggegehao的博客
06-20 2219
1.上一级页面跳转 ：   window.location.href= encodeURI("product1-show.html?name=znyj");（1）.product1-show.html 页面，（2）.name=znyj 拼接参数。2.下级页面js 接收。   var url = window.location.search;   var urlResult=[];   var ar...
使用history.length判断是否有上一页面，如果没有就返回到指定页面
热门推荐
钾盐的博客
09-02 3万+
使用history.length判断是否有上一页面，如果没有就返回到指定页面，一般是返回到首页 function goBack(){ if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') 0)){ // IE if(history.length >
关于移动端H5页面返回上一页的问题记录
qq_34166594的博客
03-12 1万+
最近第一次接触公众号开发，虽然也是H5页面的开发，但是真心伤不起，坑好多......  突然理解做前端的童鞋为啥会最讨厌那句话：前端不就js吗？息怒息怒....  公众号有初始为注册流程，注册成功后，菜单列表的每个模块点击会进入相应的页面。没有注册，则会直接转发到注册页面。然而坑来了，其中一个模块点击进去后有两个下级页面，1.为数据列表展示，点击某条数据进入下一级具体数据展示2页面。就当2返回1 ...
H5页面浏览器返回时的处理
MyBlog
03-03 9882
一、多页面下浏览器返回     多页面时浏览器返回的上一个页面如果数据是用ajax加载的则页面会显示不出数据，可以通过以下方法判断在浏览器的返回前进时刷新当前页面，以下方法放到jquery的ready或者HTML的onload方法里，主要针对移动端H5开发 function backForwardListen(){ //window.performance.navigation.type=...
简单辨认是否存在H5页面（判断一个页面是原生的还是H5页面）
akuiblog的博客
09-24 1248
1.打开手机开发人员选项—“显示布局边界” 2.点击想要检查的页面 当页面元素没有小框边界时就说明直接使用原生方式去定位元素不可行了
JS如何判断有没有上一页？
wxyoo1 的技术人生
09-17 9644
一个页面分享出去，上面有返回按钮，如果第一次打开，会没有上一页历史记录。 window.history.go(-1) 会返回空白或者501 错误。 可以这样实现： document.referrer === '' ? window.location.href = 'http://m2.paipai.com/index.shtml' : wi
小程序判断是否有上一页
weixin_38694789的博客
01-26 2961
小程序判断是否有上一页做法：重点是用getCurrentPages()这个方法 //返回按钮 <view bindtap='navback'></view> //js方法 navback(){ let pages = getCurrentPages(); if(pages[pages.length - 2]){ //如果有上一页，就返回上一页 wx.navigateBack({//返回 delta: 1 }) }e
h5中返回上一页常见的问题
小毛驴的博客
05-21 4857
1.返回上一页获取的数据不正确 需求： A --> B页面，B页面操作数据，返回A页面，A页面刷新数据并显示 问题 在pc的浏览器中B使用window.history.go(-1)实现页面的回退，回退后发现A页面请求数据，但是为老的数据，并不是新的数据，但是在NetWork中发现确实请求了，重新刷新A页面后，数据就是新的了 原因 ajax缓存了，可以在请求的header中加上 'Cach...
判断页面是否是由上一页返回
weixin_33693070的博客
07-07 2142
1 <input type="hidden" id="history_back" /> 2 <script> 3 (function() { 4 var historyBack = document.getElementById('history_back') 5 var val =...
HTML5+CSS3基础知识大全
**CSS3基础知识点** 1. **CSS简介**：CSS（Cascading Style Sheets）是一种样式表语言，用于控制网页的布局和样式。 2. **CSS结构**：CSS结构主要包括选择器、属性和值，选择器用于选择要样式化的元素，属性用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值