
- 中文
- 超文本标记语言
- 外文名
- Hyper Text Markup Language
- 类 型
- 标记语言
- 阅读方式
- 网页浏览器
- 中文名
- 超级文本标记语言
-
8小时学会HTML网页开发
2015-03-18 20:46:18一说学网页,学编程,大家都下意识觉得要"吃苦","熬夜",哪有那么复杂,一定是你... 挑一个阳光的午后,关掉手机,用6个小时,看看十八哥如何把一个公司的保安教会HTML,Div,CSS的. 课程共8小时,57小集,轻松一点,你将马上学会. -
HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
2017-08-11 18:25:02最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。...放上示范的html代码:<body> <div class="main">最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
水平居中直接加上<center>
标签即可,或者设置margin:auto;
当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法
放上示范的html代码:<body> <div class="main"> <h1>MAIN</h1> </div> </body>
- 方法一:
div使用绝对布局,设置
margin:auto;
并设置top、left、right、bottom的值相等即可,不一定要都是0。.main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
效果如图:
- 方法二:
仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
- 方法三:
对于水平居中,可以使用最简单的<center>
标签,不过已经过时了,用法如下:
<p><center>123</center></p>
这个
<center>
标签就是相对于<p>
标签里的文字,可以使其居中。由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:
<p style="text-align:center;">123</p>
欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet -
HTML技法-HTML加密解密/压缩优化与HTML乱码分析/防360拦截/HTML万能解密器
2016-06-28 14:02:29课程内容包含乱码的原因分析、代码的压缩与优化、JavaScript/html前端代码加密解密、前端加密防360浏览器拦截、html代码解密原理分析、万能解密神器、手动解密html代码等等。 -
HTML5
2020-09-11 15:57:21HTML入门实例: <!-- DOCTYPE: HTML5规范声明 --> <!DOCTYPE html> <html lang="en"> <!-- 网页头部 --> <head> <!-- meta描述性标签,供机器解读(告诉机器该如何解析这个...- HTML入门实例:
<!-- DOCTYPE: HTML5规范声明 --> <!DOCTYPE html> <html lang="en"> <!-- 网页头部 --> <head> <!-- meta描述性标签,供机器解读(告诉机器该如何解析这个页面),一般用来做SEO --> <meta charset="UTF-8"> <meta name="keywords" content="java,java教程,HTML,CSS,DOM,JavaScript,jQuery,AJAX,MySQL"> <meta name="description" content="这是一个学习java的网站"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 网页标题 --> <title>index</title> </head> <!-- 网页主体 --> <body> Hello,World! </body> </html>
- 标题标签
<body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body>
- 段落标签
<body> <p>床前明月光,疑是地上霜。</p> <p>举头望明月,低头思故乡。</p> </body>
- 换行标签、水平分割线标签、字体样式标签
<body> 床前明月光,疑是地上霜。 <br/> 举头望明月,低头思故乡。 <hr/> <strong>粗体</strong> <em>斜体</em> </body>
- 转义符号
空格符号: 大于号>:> 小于号<:< 版权符号©:©
- 图像、链接、图像链接
<body> <!-- 图像 --> <img src="../static/image/1.jpg" alt="1.jpg" title="悬停文字" width="300" height="300"></img> <br> <!-- 链接 --> <a href="https://www.baidu.com" target="_self">百度</a> <br> <!-- 图像链接 --> <a href="https://www.baidu.com" target="_blank"> <img src="../static/image/1.jpg" alt="1.jpg" width="300" height="300"></img> </a> <!-- 锚链接 --> <a href="#top">回到顶部</a> <!-- 功能性链接 --> <a href="mailto:22771177@qq.com">我的邮箱</a> </body>
- 行内元素与块元素
块元素独占一行:
<p></p> <h1></h1>
行内元素宽度由内容决定:
<a></a> <strong></strong>
- 列表
<!-- 有序列表 --> <ol> <li>Java</li> <li>Python</li> <li>JavaScript</li> </ol> <!-- 无序列表 --> <ul> <li>Java</li> <li>Python</li> <li>JavaScript</li> </ul> <!-- 自定义列表 --> <dl> <!-- 列表名称 --> <dt>学科</dt> <!-- 列表元素 --> <dd>Java</dd> <dd>Python</dd> <dd>JavaScript</dd> <dt>位置</dt> <dd>南京</dd> <dd>上海</dd> <dd>重庆</dd> </dl>
- 表格
<table border="1px"> <tr> <td colspan="4">th</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td rowspan="2">21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>32</td> <td colspan="2">33</td> </tr> </table>
- 视频和音频
<video src="video/a.mp4" controls autoplay></video> <audio src="audio/a.mp3" controls autoplay></audio>
- 页面结构分析
header 头部区域 footer 脚部区域 section 独立区域 article 文章区域 aside 侧边栏区域 nav 导航栏
- iframe内联框架
<body> <iframe src="https://player.bilibili.com/player.html?aid=55200553&bvid=BV1S4411N7T9&cid=96524184&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> <iframe src="https://www.baidu.com" width="300px" height="300px"></iframe> </body>
- 表单
<form action="b.html" method="POST"> <p>用户名:<input type="text" name="username" value="BLU" size="60" placeholder="请输入用户名" required></p> <p>密码:<input type="password" name="password" maxlength="16" placeholder="请输入密码" required></p> <p>性别(单选): <!-- radio单选框,一组单选框的name必须相同 --> <input type="radio" name="gender" value="boy" checked> 男 <input type="radio" name="gender" value="girl"> 女 </p> <p>爱好(多选): <!-- checkbox多选框,一组多选框的name必须相同 --> <input type="checkbox" value="sleep" name="hobby"> 睡觉 <input type="checkbox" value="study" name="hobby" checked> 学习 <input type="checkbox" value="game" name="hobby" checked> 游戏 </p> <p> 下拉框(国家): <select name="list"> <option value="1">中国</option> <option value="2">美国</option> <option value="3" selected>日本</option> </select> </p> <p>文本域:<textarea name="textarea" cols="40" rows="10" required></textarea></p> <p>普通按钮:<input type="button" name="btn1" value="Click Me"></p> <p> 上传文件: <input type="file" name="myfile" id=""> <input type="button" name="btn2" value="点击上传"> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p> </form>
<form action="b.html" method="POST"> <p>邮箱:<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p> <p>URL:<input type="url" name="url"></p> <p>数字:<input type="number" name="number" min="0" max="100" step="5"></p> <p>滑块:<input type="range" name="range" min="0" max="100"></p> <p>搜索:<input type="search" name="search"></p> <p>只读域:<input type="text" value="hello" readonly></p> <p>隐藏域:<input type="text" value="hello" hidden></p> <p>性别(单选): <input type="radio" name="gender" value="boy" disabled> 男(禁选) <input type="radio" name="gender" value="girl" checked> 女 </p> <p> <label for="mark">点我编辑(增强鼠标可用性)</label> <input type="text" id="mark"> </p> <p><input type="submit" value="提交(禁用)" disabled><input type="reset" value="重置"></p> </form>
-
如何在HTML中限制input 输入框只能输入纯数字
2018-02-27 15:23:29在输入框输入任何非数字内容,都会自动退格并清除!...DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="U限制
input
输入框只能输入纯数字1、onkeyup = "value=value.replace(/[^\d]/g,'')"
使用
onkeyup
事件,有bug
,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母2、onchange = "value=value.replace(/[^\d]/g,'')"
使用
onchange
事件,在输入内容后,只有input
丧失焦点时才会得到结果,并不能在输入时就做出响应3、oninput = "value=value.replace(/[^\d]/g,'')"
使用
oninput
事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>input</title> </head> <body> 只能输入纯数字的输入框:<input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')"> </body> </html>
以上代码均已在谷歌、火狐、百度、UC、IE11、360急速、QQ、Edge浏览器下测试完毕,请放心使用,
感谢
qq_38726717
、小小小欣
两位小伙伴在评论区的反馈。 -
HTML 5移动开发从入门到精通
2015-01-14 20:16:03本课程讲述了HTML 5移动开发的各种技术,通过本课程的学习,用户可以掌握HTML 5移动开发的技巧 -
VSCode代码自动补全html标签、css属性及值 - 无插件
2019-09-24 13:41:13不需要插件,VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 效果图 · 演示如下: 操作步骤 · 如下: 本编辑器已经汉化,所以截图如下。 首先,取消选中(控制在活动...不需要插件
,VSCode代码自动补全(html标签
、style样式
、css属性及值、),修改配置文件即可完成!
效果图 · 演示如下:
操作步骤 · 如下:
本编辑器已经汉化,所以截图如下。
首先,取消选中(控制在活动代码片段内是否禁用快速建议)
修改路径(截图示下):
设置 -->
文本编辑器 (建议)-->
- 取消选中
Suggest:Snippets Prevent Quick Suggestions (控制在活动代码片段内是否禁用快速建议)
- 完成第一步。剩下的就是修改配置文件:
settings.json
如何修改配置文件
settings.json
?-
首先找到文件(截图示下) · 找到并点击 “设置”:
-
然后,弹出(如下图所示)弹框界面:
-
然后,点击(如上图)的 “黄色的空心矩形框”,弹出
settings.json
文件(截图如下)。
-
开始修改文件
settings.json
修改之前 · 全部代码如下:{ "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom" }
修改之后 · 全部代码如下:
{ "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "editor.suggest.snippetsPreventQuickSuggestions": false, "files.associations": { "*.vue":"html" } }
附:参考文章
以上就是关于“ VSCode代码自动补全html标签、、css属性及值 - 无插件 ” 的全部内容。
-
HTML(css+div)登录界面
2018-05-31 23:53:39HTML(css+div)登录界面 -
HTML入门与进阶以及HTML5
2019-12-12 21:04:45(1)HTML是什么? (2)CSS (3)JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊... -
如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)
2018-04-03 14:44:58如何实现多个.html静态页,引用同一个header.html和footer.html文件? 前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight、友情链接等部分) HTML... -
springboot返回html和jsp
2018-07-04 09:32:04一、返回html(1)添加maven依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</... -
【方法】HTML网页调用本地Python程序
2018-05-07 11:15:00首先声明,在HTML中调用本地Python程序是十分不推荐的,一是因为网页调用本地程序的权限正在被取消,二是因为真不如JS写直接,三是只能在自己本地调用。 但如果你要用,像我一样,需要在课堂上进行一个Python代码的... -
12个优秀的 HTML5 网站设计案例欣赏
2018-05-20 14:39:5612个优秀的 HTML5 网站设计案例欣赏 欣赏地址:12个优秀的 HTML5 网站设计案例欣赏 -
教你玩转HTML(html5)h5网页设计,网站开发
2015-07-17 12:31:36教你玩转HTML(html5)h5网页设计,网站开 -
用HTML+CSS代码制作3D旋转相册
2018-09-19 21:37:53DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&... -
HTML5适合的情人节礼物有纪念日期功能
2020-02-09 20:51:24利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下... -
-
纯HTML个人简历模板代码
2019-08-23 16:37:02html> <body background=http://p1.so.qhmsg.com/t01ed5a885549b6bf3b.jpg> <table border="1" align="center" cellpadding="10" width="800"> <tr> <th colspan="7" bgcolor="B... -
“代码雨”纯HTML源码实现及效果
2017-05-08 15:19:36先看看效果 1、绿色: 2、彩色: 3、背景色: 4、绿色逐渐变浅: 源代码: ...DOCTYPE html>...html>...meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <ti... -
【Emmet】HTML速写之Emmet语法规则
2018-07-16 18:17:31Emmet—写HTML/CSS快到飞起 在前端开发的过程中,最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等,头疼。这里推荐一个Emmet语法规则,让你写的时候爽到飞起,能大大提高代码书写,只需要敲一行... -
HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验
2017-07-20 10:03:36用什么代码实现?不允许有白色底色产生,...html,body{ width:100%; height:100% } 再加一段 body{ font-family: &amp;amp;quot;华文细黑&amp;amp;quot;; background:url(&amp;amp;quo -
HTML5浪漫爱心表白动画在线演示程序
2014-02-12 23:50:10HTML5浪漫爱心表白动画在线演示.htm 修改一下情人节送女友 -
html转pdf,截图保存
2020-09-27 09:14:08html2canvas.js :将html页面区域截图为base64编码的图片资源 java+js 1. 准备资源 itext.jar www.baidu.com html2canvas.js www.baidu.com 2.前端代码: //进行截图操作,document.querySelector("body... -
快速查找html中的链接
2020-12-30 15:09:38def getUrlList(html_str): pattern = r'<a href="(https.*?/[0-9]{9})".*' url_list = re.findall(pattern,html_str) return list(set(url_list)) -
HTML入门学习笔记+案例
2020-02-21 15:30:02一、HTML简介 1.HTML是什么? HTML:hyper text markup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作用 制作网页,控制网页和内容的显示 插入图片、音乐、视频、... -
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机...
2014-06-21 20:24:31最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案。因此我就在这里做一个demo,供大家相互学习。html5开发越来越流行了,而对于视频这一块也是必不可少的一部分。如何让你的网站... -
html - html5 audio 音乐自动播放,循环播放等9款播放器
2016-02-01 15:22:01说明随着HTML5越来越流行,越来越规范,音频播放支持和兼容改的平台越来越多,这里找到HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法,下面这9款 HTML5 音频播放器都是基于 audio 元素开发的,能够帮助你... -
html 空格
2019-09-20 15:59:31html 空格 -
实现html和word的相互转换(带图片)
2018-06-16 13:29:10目前从html转换的word为doc格式,而图片处理支持的是docx格式,所以需要手动把doc另存为docx,然后才可以进行图片替换。 一.添加maven依赖 主要使用了以下和poi相关的依赖,为了便于获取html的图片元素,还使用了... -
sublime / vscode 快捷生成HTML代码
2020-07-06 15:38:36文章转载自https://www.cnblogs.com/suitongyu/p/12043791.html 目录基本html结构生成div加类名的快捷键带类名的div带id的div属性 []后代 >兄弟 +上级 ^乘法 *文本 {}自增符 $隐式转换 基本html结构 输入 !+...
-
tnsnames.ora
-
Jsplumb从入门到实战
-
php隐藏手机号中间4位方法总结
-
1396 设计地铁系统
-
Java8实战读书笔记-第9章 默认方法
-
MyEMS
-
Flink窗口全解析:三种时间窗口、窗口处理函数使用及案例
-
《牙齿保卫战》读后感
-
2014年下半年 系统集成项目管理工程师 上午试卷 综合知识 软考真题【含答案和答案解析】
-
生成预约时间数组
-
第一章:数据提取与清洗策略
-
Redis.zipredis
-
simhash:中文文档simhash值计算-源码
-
屠龙-荣耀之锋(美化)(替换rez3里的017).zip
-
关系型数据库的优化
-
BabylonJS Maya2019
-
朱老师c++课程第3部分-3.5STL的其他容器讲解
-
Mycat 实现 MySQL的分库分表、读写分离、主从切换
-
使用非常简单的录音软件
-
-- Found cuDNN: v? (include: /usr/include, library: /usr/lib/x86_64-linux-gnu/libcudnn.so) CMake Er