A02-HTML5入门
目录
0.HTML自己学习网址
1.什么是HTML
2.HTML的作用
3.HTML版本
4.h5和h4的区别
4.1 简化的语法
4.2 新的canvas标记代替flash
4.3 新的header与footer标记
4.4 新的section与article标记
4.5 新的audio与video标记
5.HTML的标准结构
6.IDE介绍
7.HbuilderX介绍
8.HTML基本结构
8.1 HTML文档基本结构
8.2 head中常用标签
8.3 body中常用标签
8.4 格式化标签
8.5 字符实体
9.超链接和多媒体标签
9.1 超链接标签a
9.1.1 基本使用
9.1.2 设置锚点
9.2 图片标签img
9.3 音频标签audio和视频标签video
10.列表标签
10.1 有序列表ol
10.2 无序列表ul
10.3 自定义列表dl
10.4 列表嵌套
11.表格标签table
11.1 表格特点
11.2 thead tbody tfoot th
11.3 单元格合并
0.HTML自己学习网址
在线帮助文档：https://www.w3school.com.cn/
查看全部标签地址：https://www.w3school.com.cn/tags/index.asp
1.什么是HTML
2.HTML的作用
3.HTML版本
4.h5和h4的区别
4.1 简化的语法
h5语法更加简单。
4.2 新的canvas标记代替flash
4.3 新的header与footer标记
4.4 新的section与article标记
4.5 新的audio与video标记
5.HTML的标准结构
开始写代码：
HTML语法不严格：
6.IDE介绍
我们使用的是HbuilderX。
安装参考链接：(1条消息) HBuilder安装教程_一个匿名游客的博客-CSDN博客_hbuilder安装教程
7.HbuilderX介绍
新建项目：
8.HTML基本结构
8.1 HTML文档基本结构
- 注释：ctrl+shift+斜杠 <!-- -->
- 和浏览器之间的配置信息需要写到head中。
- <meta charset='utf-8'> 告诉浏览器按照utf-8(中文编码)的编码解析该网页。
- <title>nice</title> 网页的名字叫nice。
- <body>hello 张梦姣</body> 展示给用户的内容。
- 【总之一句话，想告诉浏览的放入head中，想告诉用户的放到body中】
8.2 head中常用标签
- <标签中的属性 属性名='值'>
- 设置网页的解析字符：<meta charset='utf-8'>
- 提升网页的搜索效率的标签：
- 设置网页的关键字：<meta name='keywords' content='关键字1,关键字2'/>
- 设置网页内容的描述：<meta name='description' content='。。。'>
- 设置网页的作者：<meta name='author' content='。。。'>
- 设置n秒后自动跳到指定界面：
<meta http-equiv='refresh' content='5;http://www.baidu.com'/>
8.3 body中常用标签
- 标题标签hn[1-6]：<h1>。。。</h1>数字越大,等级越小（粗细 黑度 大小)；自动换行。
- 对齐方式：align='center'/'left'/'right'
- 分割线：<hr/> ==》单标签
- 属性大小：<hr size='400px' width="400px"/> size指垂直像素大小,width指水平。
- 对齐方式：align=‘left'/'right'/'center'
- 颜色[英文,RGB(),RGBA()透明度,#B0B0B0]：color=’red'
- 段落标签：<p>。。。</p> 不会自动换行；两个p标签之间有段间距。
- 属性换行标签：<br/> eg:<p>我<br />爱<br />你</p> ;
br*50再按下tab键一下子50个<br/>标签- 一个空格：
<p> 我爱你！<br /> 我想你！<br /> 我喜欢你！<br /></p>
- 预文本标签【了解，不建议用】：<pre>。。。</pre> 作用会按照我们自己写的格式原封不动的输出到浏览器 识别我们的动作，比如手动换行，而不是像p标签那样需要添加一个<br/>。
因为该标签太灵活了，所以我们开发人员不使用该标签。
8.4 格式化标签
这些小标签都不会自动换行。需要在外面手动加换行标签<br/>。
这些标签可以组合 嵌套使用。
w3school在线文档：https://www.w3school.com.cn/
文档地址：https://www.w3school.com.cn/html/html_formatting.asp
- 加粗标签：<b>。。。</b> 或者 <strong>。。。</strong>
- 变大变小标签：<big>。。。</big> 和 <small>。。。</small>
- 斜体标签：<i>。。。</i> 或者<em>。。。</em>
- 区别：i标签不能加属性，em可以
- 下划线标签：<ins>。。。</ins>
- 删除线标签：<del>。。。/del>
- 下角标标签：log<sub>10</sub>(100)==2<br />
- 上角标标签：e<sup>2</sup>
- 字体属性：<font 一堆属性值>。。。</font>==》 已经过时，以后用span标签
- 大小：size='6'
- 颜色：color='。。。'
- 风格样式：face='仿宋'/'幼圆'/'楷体'
- eg：
<font size='6' color='blue' face='楷体'>HTML好简单</font><br />
8.5 字符实体
字符实体查询地址： https://www.w3school.com.cn/html/html_entities.asp
9.超链接和多媒体标签
9.1 超链接标签a
<a href="http://www.bjsxt.com">北京尚学堂</a>
超链接作用：
- 进行页面之间的跳转。<a href='http://www.baidu.com' target='_blank'>百度</a>
- 进行锚点功能：可以快速的跳转到页面中的某一个位置。
- 同一个页面中的锚点：<a href='#bottom' name='top'>跳转到本页底部</a>
- 不同页面中的锚点：<a href='自定义.html#bottom'>外链接页面</a>
9.1.1 基本使用
9.1.2 设置锚点
9.2 图片标签img
img标签也不会自动换行；img标签可以结合超链接标签组合使用。
属性值：
- src：引入图片的路径{本地路径，网络路径（必须在联网状态下才可以加载出来）}。
- width/height：如果只给定其中一个属性，另外一个属性会进行等比例缩放；若都给，那各自设置。
- alt：图片加载失败时候显示的内容。
- title：鼠标悬停显示的文字
<!DOCTYPE html>
<html><body><hr/><h3 align='center'>图片</h3><!-- img标签也不会自动换行src='引入图片的路径{本地路径，网络路径（必须在联网状态下才可以加载出来}' --><img src="img/前端.png" width="400" alt='失败了' title="前端图片呀"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F5453005f74be2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667192199&t=fa244b5414ca761f278a55a331ce86af" width="400px"> <!-- {网络路径} --><!-- 鼠标点击图片跳转链接 --><br><a href="http://www.baidu.com"><img src="img/百度.png" alt="百度.png加载失败了" width="400px" title="百度">/></a><hr /></body>
</html>
9.3 音频标签audio和视频标签video
audio属性值：
- controls='controls'或者只写一个controls:音频播放控制栏，必须设置，否则没效果。
- loop：单曲循环
- autoplay：自动播放【谷歌不支持此属性】
- muted：默认静音
如果当前的属性值和名称是一样的，就可以只写一个就行。
video属性值：
- src：引入地址
- controls：播放控制栏
- width：宽度 height：高度
- loop：循环播放
- muted：静音播放
- autoplay：自动播放
- poster：视频播放前加载的图片
<html><body><hr /><h3 align='center'>音频标签audio</h3><audio src="img/花之塔吉他版.mp3" controls='controls' loop></audio> <!-- controls：音频播放控制栏；loop：循环播放；autoplay:自动播放；muted:默认静音 --><h3 align='center'>视频标签video</h3><video src="img/花之塔吉他版.mp4" controls loop width="500" poster="img/花之塔.png"></video></body>
</html>10.列表标签
三大类：
- 有序列表‘(Ordered list)：ol
- 无序列表：ul
- 自定义列表：dl
10.1 有序列表ol
ol属性值：
- 指定序号类型：type='1 a A i I'
<ol type="i"><li>张梦姣</li><li>张梦姣</li><li>张梦姣</li> </ol>
10.2 无序列表ul
ul属性值：
- type='circle'：空心圆
- type='dics'：实心圆【默认】
- type='square'：正方形
10.3 自定义列表dl
特点：
- 列表前面没有指定的标识
- 存放在dd中的内容会自动缩进
10.4 列表嵌套
有序ol和无序列表ul的使用场景：滑动门，导航栏，菜单展示...
自定义列表dl：
- dt：一般存放图片
- dd：一般存放文字
<dl><!-- dt存放图片，dd存放文字 --><dt><img width="450" src="https://img13.360buyimg.com/n7/jfs/t1/176264/30/24075/106271/62b41560Ea424f1b9/013168c3ed002d93.jpg" alt="手机图片加载失败" title="X13PRO"></dt><dd><p><font size='6'><font color='red'>¥579.00</font> <i><del><font color='gray'>¥779.00</font></del></i></font></p><p>新品多亲(QIN) F22 Pro防沉迷学生手机小爱同学初高中生<br>戒网瘾电话4G全网通智能触屏按键机4+64g铁灰色</p><p></p></dd>
</dl>
效果图：
11.表格标签table
11.1 表格特点
表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。
table表格的基本语法：
- tr：代表的是行
- td/th：列
- th：标题列，自动加粗和居中
- td：普通列
table属性值：【后设置的覆盖先设置的】
- border：必须添加此属性才能显示表格。border='2px'
- 表格大小：可以设置到table后，也可以设置在tr和th后面【更灵活】
- width='300px' height='400px'
- 如果直接加到table上这个时候每一个单元格的大小会根据内容进行划分
- tr行高、th列宽：更灵活，分别设置
- 背景颜色：bgcolor=‘bisque'/'yellowgreen'/...
- 位置设置：align='center'/'left'/'right'
- 表格整体居中：属性align加到table后
- 单元格内容剧中：属性align加到tr或th后
- 单元格外框和内框的距离【外边距】：cellspacing='10px' 【只能加到table后】
- 内容和单元格内框的距离【内边距】：cellpadding=’5px'
简单展示如下：
快捷方式：>
table>tr>td 然后tab键 ==》一行一列
table>tr*4>th*3 然后tab键 ==》四行三列
11.2 thead tbody tfoot th
头 身体 脚：头和脚一样，身体很长。
好处：便于批量处理，这三个标签本身没有意义，只是为了把当前表格进行划分。
11.3 单元格合并
重要属性：
- rowspan=‘2’：合并2行
- colspan=‘3’：合并3列
- 一句话要点：合并哪些单元格，就在第一单元格前面加属性，并同时删去被合并的其他单元格，注意单元格宽和高。
A02-HTML5入门相关推荐
- html编程入门指南,给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...
- 给萌新HTML5 入门指南
HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员前端技术也成了必备技能之一,本篇文章的目的是为了帮助萌新的入门指导,也同时希望能为老鸟起到一定查漏补缺的作用,那么让我们开始 ...
- html5 移动页面,html5入门到精通，移动设备的html5页面布局
移动设备的html5页面布局 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. HTML5标准添加的新元素当中,用于 ...
- HTML5 入门（ 一）
HTML5 入门( 一) html5简介 新特征 HTML5 的一些改进 HTML5 的多媒体 注释: 基础 标题 HTML 段落 HTML 链接 一个简单的代码例子 html5简介 HTML5是构建 ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- HTML5入门以及常用标签
HTML5入门以及常用标签 今日内容 web技术简介 什么HTML? W3C 浏览器 第一个HTML网页 web技术简介 web技术中的三大内容 HTML[基本内容] CSS[界面美化] JavaSc ...
- HTML5入门之有序列表
HTML5入门之有序列表 有序列表 说明 语法 演示 ------代码 ------效果 属性 reversed属性 代码 效果 type属性 代码 效果 start属性 代码 效果 默认样式 < ...
- HTML5入门之无序列表
HTML5入门之无序列表 无序列表 说明 语法 演示 ------代码 ------效果 属性 默认样式 <ul> <li> 清除默认样式 清除完的效果 无序列表 说明 ul标 ...
- HTML5入门（创建项目）
HTML5入门学习(创建项目) ps:本文章讲解的创建过程是基于HBuilder工具的 步骤 文件->新建->web项目 填写项目名称 选择项目保存地址 选择模板(一般情况下选择的模板是默 ...
- HTML5入门（ajax网络数据请求）
HTML5入门(ajax网络数据请求) 参考文章地址:http://www.w3school.com.cn/jquery/ajax_ajax.asp jquery官网地址:https://jquery ...
最新文章
- Coursera吴恩达《卷积神经网络》课程笔记（4）-- 人脸识别与神经风格迁移
- 不唐突的JavaScript的七条准则
- POJ 1804 Brainman （归并排序 -- 求逆序对数）
- php解析验证码,全面解析PHP验证码的实现原理 附php验证码小案例
- shardingsphere 分片策略_ShardingSphere系列(二) 分片策略
- SpaceX将送首个全平民机组进入地球轨道进行为期三天的任务
- python标准库os.path中_Python零基础入门学习19：常用标准库之os.path子库
- ArcGIS API for JavaScript——给图层添加标注
- 自学python后自己接单-自学Python 后端一年半，如何写简历包装自己得到面试机会？...
- 温湿度传感器实验-传感器原理及应用实验
- 抽象代数之循环群的自同构群是循环群
- codevs 2980 买帽子 题解报告
- python和c 情侣网名_超可爱超有趣的情侣ID
- PixelLink: Detecting Scene Text via Instance Segmentation算法详解
- netstat查看网络状态（windows）
- iOS开发 DarkMode 暗黑模式
- 13、Nepxion Discovery 之 全链路调用链监控
- 电脑硬盘怎样合并分区？
- 阿里云服务器|centos查看并发数调优
- JAVA和H5的优势有哪些