【html5基础学习速成】

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的.

1，我们先来学习简单的标签。

2，创建列表

3.创建表单

4，视频获取

5，图片设置以及分区块响应

今天我们先从基础开始介绍，我用的是idea编辑器，觉得挺好用的，走Javaweb推荐使用，首先我们先来创建一个HTML文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

在上面的代码中 !DOCTYPE 表示文档类型，<html lang="en">可以删除也可以保留，他是一种自动翻译的语句，在谷歌之类的浏览器中打开会进行自动翻译的（前提是拥有翻译插件），<meta charset="UTF-8">这个是设置的编码为UTF-8的，<head> <meta charset="UTF-8"> <title>Title</title> </head> 在这里就可以设置标题，通过字面意思理解也是这样的，head就是头部，也就是显示在这里的东西。<body></body>就是你的主体部分，你需要在里面写你的网页标签。

1，我们先来学习简单的标签。

粗体标签

<!--粗体标签-->
<b>夏伯伯</b>

斜体标签

<!--斜体-->
<em>斜体</em>

下划线标签

<!--下划线-->
<u>haha</u>

中划线标签

<!--中划线-->
<s>中划线</s>

标题标签

h标签：<h1></h1>标题标签最多只能有6个h标签，一个h标签独占一行注意点：企业开发中，一个界面只能有一个h1标签。

段落标签

p标签：哪些文字是一个段落格式：<p>中间是需要段落的文字</p>注意点：被p标签包裹的内容，在浏览器中单独占一行

分割线标签

hr标签：在浏览器中显示一条分割线格式: <hr/>注意点:在浏览器中单独占据一行

2，创建列表

在创建列表中，可以创建有序列表，当然也就可以创建无序列表，在有序列表中你可以设置他的排序方式：顺序和倒序。还可以设置排列方式，比如：123或者abc等等，下来我们一起实践以下。

创建无序列表，ul表示无序标签，li表示每一列有啥。
```
 <ul><li>ka</li><li>la</li></ul>
```
创建有序列表，其中 reversed 表示倒序。

 <ol reversed><li>a</li><li>12</li><li>123</li></ol>

加入三种排序方式的有序列表

    <ol type="1"><li>a</li><ol type="A"><li>12</li><ol type="I"><li>123</li></ol></ol></ol>

3.创建表单

利用FROM进行表单定义

单行文本框表单

 <input type="text"><!--单行文本框--><br><br>

具有占位符的表单

 <input value="庞陈勃"><!--占位符--><br><br>

浅文字不占字符的表单

 <input placeholder="庞陈勃"><!--浅文字不占文本框内容--><br><br>

设置最大输入长度

 <input placeholder="最大长度为8" maxlength=8"> <!--最大能输入内容--><br><br>

```
输入文本的最大长度
```

  <input placeholder="haha" size="50"> <!--输入文本的最大长度--><br><br>

表示只读

  <input value="haha" readonly><br><br>

表示密码

 <input placeholder="密码" type="password"><br> <br>

表示文本区域，row表示大小

 <textarea rows="10">faffafafaffafafa</textarea><br><br>

按钮设置（三种不同，但是后两者用的比较多）

 <input type=button value="按钮"><button>按钮</button> <!--与js合作并且绑定事件--><input type="submit" value="提交"><!-- 提交表单--><br><br>

设置滑动条（min和max设置范围，value设置从哪里开始，step设置每次滑动距离）

 <input type="range" min="0" max="500" step="100" value="0"><br><br><input type="range" min="-100" max="500" step="100"> <!--数字滑动--><br><br>

手动输入数字（可以设置大小）

<input type="number" min="100" max="200" value="0"> <!--手动输入--><br><br>

点击选择框

<input type="checkbox" value="0"> 记住我<!-- ，只有进行选择才可以上传到服务器--><br><br>

进行选择操作

<input type="radio"> 选择我，不可以取消<!-- 进行三选一操作，注意NAME值必须一样，选择按钮随着你的选择而改变--><!--check选中其中一个-->选择一个符合的 <br><input type="radio" name="1" checked>haha<input type="radio" name="1">haha<input type="radio" name="1">haha

进行选择，不可添加自己的东西

<!--在三个中进行选择，不可添加自己的东西--><select><option>苹果</option><option>苹果</option><option>苹果</option></select>

进行选择，可添加自己的东西

<!--进行选择，但是可以添加自己的东西--><input type="text" list="datalist"><datalist id="datalist"><option>苹果</option><option>苹果</option><option>苹果</option></datalist>

获取具体格式

  <input type="email">获取邮箱地址<input type="tel">获取手机号<input type="url">获取网页地址<input type="date"> <!--获取时间--><input type="color"> <!--获取颜色--><input type="hidden" value="123456">隐藏文本框，在服务器建立连接之后显示给后端<input type="image" src="u=2825254904,2431021151&fm=26&gp=0.jpg">插入图片<br><br>

获取文件，multiple同时选取多个

<br><br><!--multiple选择多个文件--><input type="file" multiple>

4，视频获取

<video src="2018-06-09-1323-10.mp4" height="500px" controls preload="metadata" poster="139-150HG44344.jpg"></video>

具体看图啊啊啊啊啊啊啊啊啊啊啊啊

5，图片设置以及分区块响应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片的分区块响应</title>
</head>
<body>
<img src="u=2825254904,2431021151&fm=26&gp=0.jpg" usemap="#map1">
<br><br>
<!--使用from元素可以得到图片的像素大小（其实就是各点的位置）-->
<from><input type="image" src="u=2825254904,2431021151&fm=26&gp=0.jpg">
</from>
<!--利用map属性进行分区块响应，shape和coords必须有-->
<map name="map1"><area href="htmljichu.html" shape="rect" target="_blank" coords="38,62,175,200"><area href="htmlform2.html" shape="rect" target="_blank" coords="200,60,350,200">
</map>
<br><br>
<!--在圆形结构中进行操作-->
<img src="u=2825254904,2431021151&fm=26&gp=0.jpg" width="128" usemap="#map2">
<map name="map2"><area href="u=2825254904,2431021151&fm=26&gp=0.jpg" shape="circle" coords="64px,64px,64px" target="_blank">
</map>
<!--利用在a标签中进行对比，在其中任意区域都可以进行点击-->
<a target="_blank" href="index.html" width="100"><img src="u=2825254904,2431021151&fm=26&gp=0.jpg">
</a>
</body>
</html>

余生很长，别秃头！！！！！！！！！！！！！！！！！！！！！！！！

【html5基础学习速成】相关推荐

HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
前端（HTML5基础学习笔记）
以下学习路线都是基于自己看的黑马程序员视频总结而来学习路线:HTML5 -> CSS3 -> H5C3 一.HTML简介 1. 网页 2. 常用游览器 3. Web标准(重点) 二.HT ...
HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
HTML5 在线学习网站
HTML5 在线学习网站摘要: HTML5的强大,让更多的人想要系统的学习它.但面对网上五花八门的搜索结果,是否无法抉择?文章作者以自己的实践经验,筛选出来11个在线学习HTML5开发的网站,让HT ...
HTML html5基础详细笔记第一个模块
第01章-前端核心技术-HTML5基础学习目标了解什么是HTML 掌握HTML标签.元素的概念重点掌握HTML常用头部元素的使用重点掌握HTML标题.段落.文本.图片等排版重点难点掌 ...
html5代码_干货篇！零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...
html5语句大全,html5基础语句（学习）
起风了兼容性问题文档类型设定字符设定常用新标签新增的input type属性值: 常用新属性综合案例兼容性问题文档类型设定 document HTML http://blog.sina ...
Python学习笔记：22 HTML5基础和CSS基础
了解一些HTML5的基础知识和CSS基础知识有助于爬虫的学习,在学习这些基础知识之前,首先要安装HBuiderX工具.直接到官网下载标准版即可. HTML基础可以到HTML教程学习一下HTML基础知 ...

【html5基础学习速成】

1，我们先来学习简单的标签。

2，创建列表

3.创建表单

4，视频获取

5，图片设置以及分区块响应

【html5基础学习速成】相关推荐

最新文章

热门文章