基础学习速成】"/>
【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基础学习速成】
发布评论