html5基础了解---前端结构
目录
- 一、HTML（Hyper Text Markup language）
- 1.1W3C
- 二、网页基本标签
- 2.1标题标签
- 2.2 段落标签
- 2.3换行标签
- 2.4 水平线
- 2.5 字体样式标签
- 2.6 特殊符号
- 三、图像标签
- 3.1 常见的图像格式
- 3.2 图像标签的基本使用
- 四、链接标签
- 4.1 文本超链接
- 4.2 图像超链接
- 4.3 锚链接
- 4.4 功能性链接
- 4.4.1 邮件链接 mailto
- 4.4.2 QQ链接
- 五、行内元素和块元素
- 5.1 块元素
- 5.2 行内元素
- 六、列表标签
- 6.1 列表
- 6.2 列表地分类
- 无序列表
- 有序列表
- 自定义列表
- 七、 表格标签
- 7.1 基本结构
- 八、媒体元素
- 视频元素
- 音频元素
- 九、页面结构分析
- 十、iframe内联框架
- 十一、表单语法
- 10.1 表单元素格式
- 10.2 文本框 input,type="text"
- 10.3 密码框 input,type = "pwd"
- 10.4 单选框 input,type="radio",value,name
- 10.5 多选框 input,type="checkbox"
- 10.6 按钮 input type="button"/"image"/"submit"/"reset",name,value
- 10.7 下拉框 select,option,value
- 10.8 滑块
- 10.9 表单应用
- 10.10 表单的初级验证
- 10.11 其他常用标签
- 搜索框 input ,type"search"
- 增强鼠标可用性 label id
- 文本域 textarea，cols，rows
一、HTML（Hyper Text Markup language）
html,css,javascript:对应着前端界面中的，结构，表现，交互
超文本标记语言
超文本包括：文字，图片，音频，视频，动画等
1.1W3C
World Wide Web Consortum（万维网联盟）
web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括：结构化标准语言(HTML、XML);表现标准语言(CSS)、行为标准(DOM、ECMAScript)
二、网页基本标签
2.1标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
网页效果：
2.2 段落标签
<!--段落标签-->
<p>沁园春·雪 - 百度汉语</p>
<p>北国风光，千里冰封，万里雪飘。</p>
<p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
<p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
<p>须晴日，看红装素裹，分外妖娆。</p>
<p>江山如此多娇，引无数英雄竞折腰。</p>
<p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
<p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
<P>俱往矣，数风流人物，还看今朝。</P>
网页效果
2.3换行标签
<!-- 换行标签 -->
沁园春·长沙 - 百度汉语<br/>
独立寒秋，湘江北去，橘子洲头。<br/>
看万山红遍，层林尽染；漫江碧透，百舸争流。<br/>
鹰击长空，鱼翔浅底，万类霜天竞自由。<br/>
怅寥廓，问苍茫大地，谁主沉浮？<br/>
携来百侣曾游。忆往昔峥嵘岁月稠。<br/>
恰同学少年，风华正茂；书生意气，挥斥方遒。<br/>
指点江山，激扬文字，粪土当年万户侯。<br/>
曾记否，到中流击水，浪遏飞舟？<br/>
网页效果：
2.4 水平线
<hr/>
网页效果
2.5 字体样式标签
<!-- 字体样式标签 -->
``<strong>粗体</strong>``
``<em>斜体</em>``
网页效果：
2.6 特殊符号
空 格
>
<
版权符：©
网页效果：
三、图像标签
3.1 常见的图像格式
- JPG
- GIF
- PNG
- BMP
3.2 图像标签的基本使用
src:图片路径 alt：图像替代文字 title：鼠标悬停提示文字 width：图像宽度 height：图像高度
不建议使用绝对路径
绝对路径写法
<img src="D:/IdeaProjects/studyForHTML/kuangCourse20210924/resources/image/photo.jpg" alt="图像一加载失败" title="图一" width="100" height="100"/>
<!--相对地址 ../上一级目录-->
相对路径写法
<img src="../resources/image/photo.png" alt="图像二加载失败" title="图2" width="300" height="300"/>
四、链接标签
<a herf = "path" target = "目标窗口位置">链接文本或图像</a>
- herf属性：目标页面地址
- target属性：目标页面打开地址
参数一：_blank：在新页面打开
参数二：_self：在当前页面打开
- 页面间链接：从一个页面，跳转到另外一个页面
4.1 文本超链接
<a href="图像标签.html" target="_blank">点击跳转</a>
4.2 图像超链接
<a href="图像标签.html" target="_self"><img src="../resources/image/photo.png" alt="图像二加载失败" title="点击图片进行跳转" width="50" height="50"/>
</a>
4.3 锚链接
- 1、需要一个锚标记
使用name作为锚标记
<a name="top"></a> - 2、跳转到标记
<a href="#top"><img src="../resources/image/photo.png" alt="图像加载失败" title="点击图片回到顶部" width="50" height="50"/></a>
- 跳到指定页面的指定锚标签的地方
<a href="pagename.html#top">点击跳转到指定页面指定位置</a>
4.4 功能性链接
4.4.1 邮件链接 mailto
<!--邮件链接-->
<a href="mailto:1981526644@qq.com">点击发送邮件给我</a>
4.4.2 QQ链接
<!--QQ链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1981526644:52" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
五、行内元素和块元素
5.1 块元素
- 无论内容多少，该元素独占一行
- (p\h1-h6…)
5.2 行内元素
- 内容撑开宽度，左右都是行内元素的开源排在一行
- (a.strong.em…)
六、列表标签
6.1 列表
列表就是学习资源的一种展示形式。它可以使学习结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应地信息
6.2 列表地分类
无序列表
<!--无序列表-->
<ul><li>java</li><li>c</li><li>Python</li><li>Go</li><li>Html5</li></ul>
网页效果
有序列表
<!--有序列表-->
<ol><li>java</li><li>c</li><li>Python</li><li>Go</li><li>Html5</li></ol>
网页效果
自定义列表
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl><dt>课程列表</dt><dd>Java</dd><dd>Linux</dd><dd>Python</dd><dd>C</dd></dl>
网页效果
应用场景举例：Oracle官网底部列表
七、 表格标签
7.1 基本结构
单元格 table、行tr、列td、跨行rowspan、跨列colspan
<!--表格标签table
行 tr rows
列 td
border 属性：边框宽度
-->
<table border="1px">
<!--一行四列--><tr><!--colspan跨列--><td colspan="4">1-1</td></tr><tr><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-2</td><td>3-3</td><td>3-4</td></tr></table>
网页效果
八、媒体元素
视频元素
<!--
视频播放参数
src：资源路径
autoplay ：自动播放
controls：控制条
title: 鼠标悬浮显示信息
自动播放--><video src="../resources/video/vedioname.mp4" controls title="a cat" autoplay>小猫咪</video>
音频元素
<audio src="../resources/audio/xxx.mp3" controls ></audio>
九、页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域地内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域(用于整个页面或页面地一块区域) |
| section | Web页面中地一块独立区域 |
| article | 独立地文章内容 |
| nav | 导航类辅助器 |
十、iframe内联框架
<!--
src:引用页面地址 name:框架标识名
w - h :宽度高度
-->
<!--例，哔哩哔哩地视频分享内联框架-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>--><!--自定义内联框架-->
<iframe src="https://www.bilibili.com" frameborder="0" width="1000px" height="1000px"></iframe>
<iframe src="../resources/video/小猫咪观察主任日记.mp4" frameborder="0" name=""></iframe>
十一、表单语法
10.1 表单元素格式
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、pwd、checkbox、radio、submit、reset、file、hidden、image、button，默认为txt |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为dadio时必须指定一个值 |
| size | 指定表单的初始宽度。当type为text或pwd时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为txt或pwd时，输入的最大字符 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
10.2 文本框 input,type=“text”
代码：
<p>姓名 <input name="name" type="text" placeholder="请输入用户名"></p>
网页效果
10.3 密码框 input,type = “pwd”
<p>密码 <input name="pass" type="password"></p>
网页效果
10.4 单选框 input,type=“radio”,value,name
<!--单选框--><p>性别：<!--使用radio标签必须要有的三个属性：type/value/name--><!--分组:name相同表示在同一个组默认选中：checked --><input type="radio" value="boy" name="sex" checked>男<input type="radio" value="girl" name="sex">女</p>
网页效果
10.5 多选框 input,type=“checkbox”
<!--多选框--><p>兴趣：<input type="checkbox" name="inters" value="badminton" checked>羽毛球<!--disabled 禁选属性--><input type="checkbox" name="inters" value="volleyball" disabled>排球<input type="checkbox" name="inters" value="football" checked>足球<input type="checkbox" name="inters" value="basketball">篮球</p>网页效果：
10.6 按钮 input type=“button”/“image”/“submit”/“reset”,name,value
<!--按钮button 普通按钮image 图片按钮submit 提交按钮reset 重置按钮--><p><input type="button" name="btn1" value="点击"><input type="image" src="../resources/image/cat.jpg" value="点击图片跳转" width="40" height="30"></p><!--文件域--><p><input type="file" name="files"><input type="button" value="上传文件" name="upload"></p><p><input type="submit" name="Button" value="提交"><input type="reset" name="Reset" value="重填"></p>
网页效果：
10.7 下拉框 select,option,value
<!--下拉框--><!--selected 默认选中--><p>国籍：<select name="列表名称" id=""><option value="US">美国</option><option value="China" selected>中国</option><option value="UK">英国</option><option value="French">法国</option></select></p>
10.8 滑块
<!--滑块--><p>滑块：<input type="range" min="0" max="100" step="2"></p>网页效果
10.9 表单应用
readonly ：只读
hidden ：隐藏 通过隐藏域传递默认值
disabled：禁选
<!--多选框--><p>兴趣：<input type="checkbox" name="inters" value="badminton" checked>羽毛球<!--disabled 禁选属性--><input type="checkbox" name="inters" value="volleyball" disabled checked readonly >排球<input type="checkbox" name="inters" value="football" >足球<!--隐藏篮球选项,默认选中--><input type="checkbox" name="inters" value="basketball" hidden checked>篮球</input></p>
网页效果
10.10 表单的初级验证
placeholder：提示信息
required：非空判断
pattern：正则表达式
<p>电话：<input type="number" placeholder="请输入电话号码" required pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"></p>
网页效果
10.11 其他常用标签
搜索框 input ,type"search"
<!--搜索框--><p>搜索<input type="search" name="search"></p>
网页效果
增强鼠标可用性 label id
<!--增强鼠标可用性--><p>增强鼠标可用性测试，点击“输入”锁定输入框<p><label for="mark">输入</label><input type="text" id="mark"></p></p>
网页效果
文本域 textarea，cols，rows
<!--文本域--><p>座右铭：<textarea name="座右铭" cols="30" rows="5">填写内容</textarea></p>网页效果
html5基础了解---前端结构相关推荐
- 零基础学HTML5和CSS3前端开发第一课
课程目标: 使用HTML5进行网站布局 使用CSS3进行网站美化 开发精美的商业网站 第一章 HTML5基础 概念: 网页 :互联网的基础,网络页面,网页:文字.图片.声音.视频.VR虚幻等:网站:淘 ...
- 零基础选择前端还是后端？
其实Java和前端的发展前景都是非常不错的,就看你个人的喜好了.至于报班还是自学,全看你个人的学习能力,学习环境和经济水平~ 最好的判断自己适合哪个学科的方法就是先在网上找找教程,看看哪个能学的进去, ...
- HTML5基础之代码入门
HTML5基础之代码入门 2016-11-12 15:24 515人阅读 评论(0) 收藏 举报 分类: HTML & HTML5(13) 作者同类文章 X 版权声明:本文为博主原创文章,如需 ...
- HTML html5基础详细笔记 第一个模块
第01章-前端核心技术-HTML5基础 学习目标 了解什么是HTML 掌握HTML标签.元素的概念 重点 掌握HTML常用头部元素的使用 重点 掌握HTML标题.段落.文本.图片等排版 重点 难点 掌 ...
- Html5基础知识笔记
学习笔记,供个人快速查阅使用!! 公开分享,不喜勿喷! Html5基础介绍 h1标签 <h1>Hello World</h1> p标签 如果想在网页上显示文章,这时就需要< ...
- HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...
- 第一章 HTML5基础
第一章 HTML5基础 什么是前端开发? 以一个网站为例包括网站设计.前端开发.程序开发 等.网站设计就是网站的外观,平面的东西.程序开发也 好理解就是功能实现.而前端开发,简单来说,就是把 平面效果 ...
- HTML5基础——笔记
HTML5基础--笔记 近几年来,互联网+.大数据.云计算'物联网'虚拟现实'人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- 一期完结《一篇文章让你从HTML零基础入门前端开发》12.28
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRcXH9FM-1672214813897)(./assets/%E7%8E%84%E5%AD%90Shaer-%E4% ...
- html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发 编辑 锁定 讨论 上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
最新文章
- digitalocean添加ssh_keys
- SQL游标(cursor)详细说明及内部循环使用示例
- 疫情可以来，但比赛不能断
- ug11许可证文件路径安装在哪_Matlab2012a安装教程
- numberformatexception是什么异常_译文《最常见的10种Java异常问题》
- sql中在查询语句中加判断，控制输出的内容
- mysql表添加完整性约束_SQL语句——完整性约束
- linux降低eigen3版本_玩转 Windows 自带的 Linux 子系统 （图文指南）
- Exchange 接收连接器（Client、Default）区别
- hdu 1856 并查集——ac的不一定正确
- 【AI视野·今日NLP 自然语言处理论文速览 第六期】Fri, 11 Jun 2021
- 能上QQ，不能打开网页
- subs php,nginx subs_filter对输出内容进行替换
- 分享微云普通用户不限速下载方法
- 2021年西式面点师（初级）考试平台及西式面点师（初级）模拟考试
- 面试算法 香槟塔 ，算法：暴力算法
- Linux 使用ffmpeg修改和压缩视频文件格式
- React--》UI组件库ant-design的介绍与使用
- 电子邮件发错了怎么撤回？原来邮件误发也有“后悔药”
- Spring注解@profile的使用