HTML5
1.初识HTML
- HML:Hyper Text Markup Language(超文本标记语言)
- 包括:文字、图片、音频、视频、动画等等;
- 所有的浏览器都支持HTML5
- 跨平台
- W3C标准
- World Wide Web Consortium(万维网联盟)
- Web技术领域最权威和影响力的国际中立技术标准机构
- http://www.w3.org/ (org表示开源)
- http://www.chinaw3c.org/
- W3C标准包括【重要】
- 结构化标准语言(HTML【超文本标记语言】、XML【配置文件】)——>基本结构
- 表现标准语言(CSS)——>美化界面
- 行为标准(DOM、ECMAScript【JavaScript】)——>实现交互
- 常见的IDE
- IDE
- WebStorm
创建第一个网页
在IDE中新建一个html的文件就会出现
标签
-
<head></head>等成对的标签,分别叫***开放标签和闭合标签***,单独呈现的标签(空元素),如
,自闭合标签表示用/来关闭元素; -
注释:<!-- 内容 -->,ctrl+/快捷键
-
DOCTYPE:告诉浏览器我们需要使用的规范;
-
<html>,</html>总标签,所有的东西都要写在这里面,否则无效;
-
meta:描述性标签,一般用来做SEO,搜索引擎
-
title:网页的标题
2.网页基本标签
2.1 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签的学习</title>
</head>
<!--写在body之间-->
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
2.2 段落标签
快捷键:p+tab可以实现
<p>你是那满城的烟雨</p>
<p>你是那山川的河流</p>
<p>你是那伟岸的山河</p>
2.3 换行标签
<br/>属于自闭和标签
你是那满城的烟雨<br/>
你是那山川的河流<br/>
你是那伟岸的山河<br/>
2.4水平线标签
<hr/>:hr+tab就可以自动括起来
2.5粗体,斜体
粗体:<strong></strong>
斜体:<em></em>
<strong>你是那满城的烟雨</strong><br/>【加粗+换行】
<em>你是那山川的河流</em>
2.6 注释和特殊符号
空格:在html中表示可以空多个格, :表示一个空格;
>:>
<:<
版权符号:©
<!--特殊符号-->
空 <br/>
><br/>
<<br/>
©<br/>
特殊符号记忆
- &+字母去看看是不是需要的;
3.图像标签
3.1常见的图像格式
JPG、GIF、PNG、BMP(位图)
<img src ="path" alt = "text" title = "text" width ="x" height ="y">
src =“path”:图像的地址
- 相对路径:从当前目录进行资源所在目录的访问**【…/表示返回上一级目录】**
- 绝对路径:从盘开始写“F:/”
alt="":图片加载不出来显示的文字;
title = “”:鼠标悬停提示的文字
width= “”:图像的宽度
height=""图像的高度
注意:在IDE中所要用到的图片等资源文件全部放在固定的资源文件夹中,在项目中新建资源集合文件夹
<img src="../resources/images/haimian.jpg" alt="查找不到图片!">
3.2 超链接标签a标签
文本超链接
图像超链接
- 超链接
<a href=“https://www.baidu.com” target="_blank">百度</a><br/>
<p><a href="First_NetPage.html">HelloWorld</a></p>
<a href="https://www.baidu.com">百度</a><br/>
<!--图片超链接-->
<a herf ="https://www.cbaidu.com">插入imag的标签内容</a>
<a href="https://www.baidu.com"><img src="../Resources/images/haimian.jpg" alt="海绵宝宝" width="200" height="180" title="百度"></a><br/>
href[Hypertext reference]:跳转到哪个界面【本地的html名字;域名网址】
target:规定在何处打开链接
- _blank:重新打开一个空白页;
- _parent:在父窗口或者包含链接引用的框架的框架集中打开
- _self:在本页或者本框架内部打开;
- _top:在框架中有一个链接,如果设置成_top属性,当访问这个连接的时候会跳出框架,将此页面全屏显示,忽略所有框架;
- framename:指定框架名的页面打开;
两个标签之间:链接载体(可以是文字也可以是图片或者其他)
target:表示窗口在哪里打开【可以是当前页面也可以是,新打开一个页面】
- _blank:表示在新标签也打开
- _self:在自己的网页中打开
-
锚链接
简介:锚链接实际上就是链接文本,又叫锚文本,一种特殊的超链接;锚点,<a href="#文本"></a> 可以在同一个页面中不同的位置间跳转,依据文本的内容
同一页面的跳转
-
1)使用name作为标记在顶部,设置锚标记;
<!--没有用href这个不是超链接只是一个标记--> <a name="top">顶部</a>
-
2)在底部进行连接到顶部,设置跳转;
<a href ="#top">回到顶部</a>
不同页面的锚点跳转:<a href=“a.html#文本”></a>
<!--1.在基本标签.html设置锚标记--> <a name="top">顶部</a> <!--2.在链接标签.html中设置链接设置--> <a href="基本标签.html#top" target="_blank">跳转到基本标签页顶部</a><br/>
- 功能性链接
-
邮件链接:mailto
<a href="mailto:1160736238@qq.com" >点击联系我</a>
行内元素和块元素
**块元素:**无论内容多少,该元素独占一行;【p、h1-h6标签】
**行内元素:**内容撑开宽度,左右都是行内元素的可以在排一行;【a、strong、em…】
4.列表标签
-
列表:信息资源的一种展示形式。它可以使得信息结构化和条理化,并且以列表的样式显示出来;
-
分类:
-
有序列表
- <ol></ol>:Ordered list的简称,有序列表
- <li><\li>:List Item的简称;列表项目
- 应用范围:试卷、问答…
<ol> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/c++</li> </ol>
-
无序列表
- <ul></ul>:Unordered List,无序列表简称;
<ul> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/c++</li> </ul>
- 应用范围:导航,侧边栏…
-
自定义列表
-
<dl></dl>:Definition List,自定义列表;
-
<dt></dt>:Definition Term,定义术语,列表的名称
-
<dd></dd>:Definition Description,定义描述(列表的内容);
<dl> <dt>Projects</dt> <dd>Java</dd> <dd>Python</dd> <dd>C/c++</dd> <dt>Location</dt> <dd>xian</dd> <dd>chongqing</dd> <dd>shanghai</dd> <dd>zhejiang</dd> </dl>
-
-
3.应用:公司底部
-
混搭【自己加的】
<dl> <dt>Projects</dt> <br/> <li>Java</li> <li>Java</li> <li>Java</li> </dl>
5.表格标签
-
基本结构【表:table标签】
- 单元格:table data cell【表格中的一个单元格】
- 行:<tr></tr>(table row的缩写)
- 列:可以通过单元格实现
- 跨行:就是合并的行方向的单元格,colspan
- 跨列:合并两个列方向的单元格,rowspan
-
实现:5行3列的表格
<table border="1px"><!--设置边框的粗细--> <tr> <td colspan="3"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
6.媒体元素:视频和音频
6.1视频元素
标签:video
<body>
<!--音频和视频-->
<!--src:资源路径-->
<!--参数controls:出现播放的控制条,否则什么都不会出现-->
<!--autoplay:实现自动播放-->
<video src="../Resources/Video/Sherlock.mp4" controls autoplay>播放视频</video>
</body>
6.2音频元素
标签:Audio
<body>
<audio src="../Resources/Audio/nana.mp3" controls autoplay></audio>
</body>
注意:在Chrome中不会进行自动播放,在系统自带浏览器就会自动播放;
7.页面结构
导航栏、侧边栏、主体、条目、页底;
元素构成【标签】
- header:标题头部区域的内容(用于页面或页面中的一块区域)
- footer:标记脚部区域的内容(用于整个页面或页面的一块区域)
- section:Web页面中的一块独立区域;
- article:独立的文章内容;
- aside:相关内容或应用(常用于侧边栏);
- nav:导航类辅助内容;
8.iframe内联框架
内联框架:实现网页中嵌套另一个网页
嵌入代码:<iframe src="//player.bilibili.com/player.html?aid=372484815&bvid=BV18Z4y1L7TQ&cid=244627086&page=1" scrolling=“no” border=“0” frameborder=“no” framespacing=“0” allowfullscreen=“true”> </iframe>
标签:<iframe src =“引用页面地址” name =“mainFrame框架标识名”></iframe>
属性
- frameborder:(0,1)是否显示框架周围的边框
- marginheight:定义顶部和底部的边距;
- marginwidth:定义左侧和右侧的边距;pixels像素
- scrolling:(yes,no,auto)是否显示滚动条;
- src:URL,规定在页面中显示的HTML内容;
- width:iframe的宽度;
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="300px" height="300px"></iframe>
</body>
<!--src:需要跳转的链接或者路径-->
<!--name:给框架窗口命名为Hello-->
<body>
<iframe src="https://www.baidu.com" name= "Hello" frameborder="0" width="1000px" height="800px"></iframe>
<!--target:在何处打开连接文档,此时在名为Hello的iframe打开链接-->
<a href="First_NetPage.html" target="Hello">点击跳转</a>
</body>
<!--此时该链接只是在Hello这个框架中打开而已-->
9.表单语法【重要】
表单:表单是一个包含表单元素的区域,标签:form建立一个表单
表单属性:在<form 属性></form>
- **method:**用于规定发送表单数据的HTTP方法(get,post)
- post:比较安全,不会暴露用户名和密码;并且可以传输大文件
- get:不太安全,会暴露密码和用户名,不能提交大文件;
- **name:**表单的名字;
- **action:**URL,规定提交表单时向何处发送表单数据,提交后跳转到哪个页面;
- **target:**规定在何处打开action的URL;
表单元素:表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
9.1 输入元素
input:<input type=“类型” name=“名字” />,自闭和标签
-
type:
-
text(文本域)大多数情况下文本域默认20个字符;
-
password(密码):密码字段不会显示明文,以星号和原点代替;
-
提交按钮:submit
-
重置:reset
<body> <h1>Register</h1> <form action="First_NetPage.html" method="post" name="user_info" target="_blank"> <!--文本输入框:input type"text"--> <p>Username:<input type="text" name="username"/></p> <!-- 密码框:input type="password"--> <p>Password:<input type="password" name="password"/></p> <!-- 提交:type ="submit"--> <p> <input type="reset" name="Reset"/> <input type="submit" name="Submit"/> </p> </form> </body>
-
单选按钮(RadiosButtons):radio
<!--单选框一定要放在name相同的一个组之中才会使是单选框--> <p>性别: <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p>
注意
标签外面的值是不会被选中的,只有标签中的value="boy"才是选中后可以传输的数据;外面的“男”只是用于页面属性的修饰;
-
复选框:checkbox
<!--复选框--> <!--一组选项同样要放在name相同的一个组里面--> <!--checked:表示默认选中--> <p>爱好: <input type="checkbox" name="hobby" value="coding">敲代码 <input type="checkbox" name="hobby" value="sleep" checked>睡觉 <input type="checkbox" name="hobby" value="chatting">聊天 </p>
-
按钮:button
<p> <!-- value中的值就是显示在按钮上的字--> <input type="button" name="btn1" value="开始测试"> </p>
-
图片按钮:image
<!--跟submit效果一样进行数据提交--> <input type="image" src="../Resources/images/haimian.jpg">
-
-
name:指定表单元素的名字
-
**value:**元素初始值,type为radio的时候必须设置一个值
-
size:指定表单元素的初始宽度,当为type为txt或password**的时候,表单元素大小以***字符***为单位,对于其他类型宽度以***像素***为单位;
-
**maxlength:**text和password时输入的最大字符串;
-
checked:type为radio或checkbox时,指定按钮是否被选中;
9.2列表框文本域
下拉框:<select ></select>,成对标签;
属性:
- name:列表名称
- id:全局属性,在所有的HTML标签中都适合,规定元素的唯一id
元素:
- <option value=“选项的值”>显示的选项内容</option>:
<p>国家:
<!--name:表示该下拉框的属性名称为Country-->
<select name="Country" >
<!--selected:表示默认选中状态-->
<option value="China" >中国</option>
<option value="USA">美国</option>
<option value="UK" selected>英国</option>
<option value="Japan">日本</option>
</select>
</p>
文本域:多行的文本输入,比如反馈可以输入文本的框
标签:<textarea></textarea>
<p>意见反馈:
<!-- clos:表示列数;rows:表示行数-->
<textarea name="feedback" cols="30" rows="10"></textarea>
</p>
9.3 文件域
文件域:上传文件的框,使用input标签**<input type =“file”/>**
<p>
<input type="file" name="files"/>
<!--增加了一个上传按钮-->
<input type="button" value="上传文件" name="upload"/>
</p>
9.4搜索滑块和简单验证
-
简单验证
<!-- 邮箱验证--> <p>邮箱: <input type="email" name="email"> </p> <!-- 网址验证--> <p>URL: <input type="url" name="url"> </p> <!-- 数字验证--> <p>商品数量: <input type="number" name="number" max="10" min="0"> </p>
-
滑块
也是input标签,type="range"
<p>音量: <input type="range" name="voice" max="10" min="0" step="1"> </p>
3. 搜索
也是input,type=“search”;
<p>搜索框:
<input type="search" name="search">
<input type="button" value="搜索">
</p>
9.5表单的应用
-
隐藏域
hidden
<p>Password:<input type="password" name="password" value="123456" hidden></p>
2. 只读
readonly参数
<p>Username:<input type="text" name="username" value="Admin" readonly></p>
-
禁用
disabled
<input type="radio" value="girl" name="sex" disabled/>女
4. 点击文字就能够锁定文本框
label标签:<label></label>
<p>
<!-- for:跳转的对象-->
<label for="mark">邮箱</label>
<!--id设置全局标记-->
<input type="email" name="email" id="mark">
</p>
9.6表单的初级验证【重要】
初级验证:在前端就 对输入进行一个简单的提示和验证保证输入的准确性;
1.placeholder:提示用户的信息输入;
<p>Username:<input type="text" name="username" placeholder="请输入用户名"></p>
2. required:非空
加了这个参数,则框内必须填写信息,否则无法提交;
<!--required:非空判断-->
<p>Username:<input type="text" name="username" placeholder="请输入用户名" required></p>
3.pattern:正则表达式
<p>生日:
<input type="text" name="birthday" placeholder="1997-01-01" pattern="\\d{4}-\\d{2}-\\d{2}" required>
</p>
10.总结
- <标签名称 标签内部进行属性,参数的设置,值的设置会进行存储和读取>显示到网页可以看见得标题,内容等</标签名称>
- 标签内部设置得属性名称都是小写;
- 自己感觉成对标签里面可以再嵌套其他标签;
- 标签前后、成对标签中间位置输入得内容只是显示在页面的内容,不会被读取;