HTML5

最新推荐文章于 2021-12-09 19:27:52 发布
最新推荐文章于 2021-12-09 19:27:52 发布
阅读量10w+ 收藏 13
点赞数 2
分类专栏： 前端技术 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BLU_111/article/details/108534447
版权
  • 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>
  • 转义符号
空格符号：&nbsp;
大于号>：&gt;
小于号<：&lt;
版权符号©：&copy;
  • 图像、链接、图像链接
<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>

在这里插入图片描述

BLUcoding
关注
专栏目录
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
html5-内联框架
weixin_34208283的博客
09-08 334
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联框架</title></head><body style="height: 600px">当body设置style样式的时候垂直百分比有效。<br...
HTML5样式
Mrchuncui的博客
03-22 154
环境Windows 工具vscode 标签 <style>:样式定义 <link>:资源应用，比如可以应用css 属性 rel = “”：link标签的一个可选项，规定当前文件和被链接的url(使用href=""指定)之间的关系 type = “”:引入文档的类型 margin-left/right：控制边距 样式表插入方法 外部样式表： <li...
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
★★光亭★★
12-22 1万+
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
前端面试指南！2021年百度、字节跳动等大厂面试真题集合！
QIANDXX的博客
06-28 428
这份面试题文档的主要内容包括九个相关模块：HTML相关，CSS相关，JavaScript相关，jQuery相关，浏览器相关，HTTP相关，Vue相关，React相关，小程序相关。 HTML \ CSS 相关 网络中使用最多的图片格式有哪些 请简述css盒子模型 视频/音频标签的使用 HTML5新增的内容有哪些 HTML5 新增的语义化标签有哪些 CSS3新增的特性 清除浮动的方式有哪些？请说出各自的优点 定位的属性值有何区别 子元素如何在父元素中居中 Border-box与content-box的区别.
HTML，HTML5，脚本，样式
weixin_43924896的博客
06-21 210
发展历史 1993年，IETF团队提出了一个草案，并不是成型的标准。可以认为是HTML1 1995年，HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的 1997年1月，HTML 3.2 作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本 1997年12月，HTML 4.0 作为W3C推荐标准发布 2000年5月，ISO/IEC 15445:2000作为ISO/IEC国际标准发布（“ISO HTML”，基于HTML 4.01严格版） 2014年10月28日，HTML 5 作为
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
纯HTML5拓扑图编辑器源代码
04-07
屌爆的纯HTML5拓扑图编辑器源代码，找了很久终于申请到，运行就是这个效果 http://www.hightopo.com/blog/wp-content/uploads/2014/08/Screen-Shot-2014-08-12-at-8.57.11-PM.png 可参考这篇博客 ...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
HTML5CSS样式
weixin_52148546的博客
11-16 276
wed的标准结构：HTML：结构，css：表现， Javascript: css定义：层叠样式表（cascading style sheetd）也叫css样式表，级联样式表，也是一种标记语言 1.内联样式：用标签的style属性实现 ·``` 2.内部样式：用style标签来实现 3.外部标签：第一步：在css文件夹下新建.css文件，写样式。第二部：在head里用<link />，引入，href：链接.css文件路径。rel:stylesheet. <link href="css/lxh
HTML5_CSS入门（内部样式、外部样式、内联样式、选择器）
热门推荐
itszt888的博客
08-06 2万+
1、内部样式、外部样式、内联样式 内联方式：样式定义在单个的HTML元素中 CSS语法：只需要将分号隔开的一个或多个属性/值对作为元素的style属性和值； 属性和属性值之间用：链接； 多对属性之间用；分号隔开 内部样式表：样式定义在HTML页的头元素中 样式表规则位于文档头中的<style>元素内：在文档的<head>元素内添加<style>元素 在<style>
html prompt 样式,html – 类似Github的内联代码样式
weixin_40003451的博客
06-23 279
工作副本：http://jsfiddle.net/hdy44/3/pre {border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #BCBEC0;background: #F1F3F5;font:12px Monaco,Consolas,"Andale Mono","Deja...
HTML 样式
Ybianyi的博客
04-19 1445
HTML 样式 style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。 在 HTML 4 中，有若干的标签和属性是被废弃的。例如：center、font 和 basefont、s 和 strike标签，align、bgcolor、color属性。以上这些标签和属性将使用样式代替！ 样式实例 - 背景颜色 style 属性淘汰了旧的属性。 background-color 属性...
php和html5框架,内联框架和html5标签
weixin_39747341的博客
03-17 90
iframe标签案例实例html>内联框架标签看片平台爱奇艺优酷暴风腾讯视频运行实例 »点击 "运行实例" 按钮查看在线实例css优先级demo实例html>Title/*内联样式*/span{color:red;}css优先级设置html小白成功之路运行实例 »点击 "运行实例" 按钮查看在线实例实例span{color:green;}运行实例 »点击 "运行实例" 按钮查看在线...
操作内联样式
weixin_30265171的博客
07-27 619
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用DOM操作CSS</title> 6 </head> 7 <script type="text/javas...
CSS：CSS的内联样式
Thumb_的博客
12-09 1743
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS内联样式</title> </head> <body> <!-- 内联样式以属性的形式定义在标签内部，只对本标签起作用 --> <p style="color: lightcoral; font-weight: bold
初学HTML5－－CSS样式（四）
Summer_shining的博客
08-09 497
－CSS属性(红色表示常用) 可继承属性：父标签的属性值会传递给子标签，一般都是文字控制属性 a.所有标签可继承（） visibility、cursor b.内联标签可继承 letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-var
怎么创建css样式表,为HTML5表单创建CSS样式
weixin_34195649的博客
08-03 454
为HTML5表单创建CSS样式基于XFA的表单模板的HTML5呈现版本由多个HTML元素组成。 这些元素按顺序排列。 每个元素都有定义良好的CSS类。 您可以使用这些CSS类来选择和更改元素的外观。注意在CSS类中，请不要更改宽度、高度、边框粗细、顶部、左、右、底部、内边距、边距以及其他位置和大小属性的值。 位置和大小属性的任何更改都会导致表单布局发生更改。CSS类 (元素)每个元素都包含定义良...
HTML5设计原理探索
"HTML5设计原理" HTML5设计原理是指创建HTML5规范时所依据的核心理念和考虑因素。HTML5作为现代网页开发的基石，其设计目标是为了提升用户体验，简化开发者的工作流程，并增强网络应用的功能。在讨论HTML5设计原理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值