ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

html5个人笔记

2020-06-18 12:05:48  阅读:261  来源: 互联网

标签:第二项 笔记 个人 这是 文本框 载入 html5 网页 type


阿西,生气,好不容易写的忘记保存,打开只剩下一片空白了,只好再来一次了

6.9,这是第三次的第二次,由于漫长的寒假刚刚过去,又迎来了暑假,所以打算嗯嗯嗯,然后因为这是自学的应该会有很多的不足,希望能写的比上一次好那么一点点点点,好好学习

基本元素

  • a:超链接

    • target

      • target=“_self”:默认目标,载入并显示在相同的框架或窗口

      • target="blank":在一个新打开,未命名的窗口载入目标

      • target=“parent”:载入父窗口或者包含超链接引用的框架的框架

      • target=“top”:载入包含这个超链接的窗口,会清除所有被包含的框架并将文档载入整个浏览器窗口

  • b:粗体

  • i:斜体

  • u:下划线

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>这是网页名称</title>
</head>
<body>
<a href="https://www.baidu.com/">这是百度的超链接</a>
<br><!--这是另起一行-->
<b>这是粗体</b>
<br>
<i>这是斜体</i>
<br>
<u>这是下划线</u>
</body>
</html>

 


 

列表元素

  • ol:有序列表

    • type=“A|a|I|i”:样式

    • reserved:降序

  • ul:无序列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>这是网页名称</title>
</head>
<body>
 <ol>
 <li>这是第一项</li>
 <li>这是第二项</li>
 <li>这是第三项</li>
 <ol reversed>
   <li>这是降序第一项</li>
   <li>这是降序第二项</li>
   <li>这是降序第三项</li>
   <ol type="A">
     <li>这也是第一项</li>
     <li>这也是第二项</li>
     <li>这也是第三项</li>
     <ol type="a">
       <li>这还是第一项</li>
       <li>这还是第二项</li>
       <li>这还是第三项</li>
       <ol type="I">
         <li>这怎么还是第一项</li>
         <li>这怎么还是第二项</li>
         <li>这怎么还是第三项</li>
         <ol type="i">
           <li>这是最后一个第一项</li>
           <li>这是最后第二项</li>
           <li>这是最后第三项</li>
           <ul>
             <li>哈哈哈,这才是无序的最后一项的是第一项</li>
             <li>哈哈哈,这才是无序的最后一项的是第二项</li>
             <li>哈哈哈,这才是无序的最后一项的是第二项</li>
           </ul>
         </ol>
       </ol>
     </ol>
   </ol>
 </ol>
</ol>
</body>
</html>

 


 

表格元素

tr:行

th:表头

td:列

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>这是网页名称</title>
</head>
<body>
这是一个表格
<table border="1px"><!--表格-->

 <tr><!--行-->
   <th>我是表头</th><!--会居中的表头-->
   <th>我会居中</th>
   <th>真的吗</th>
 </tr>
 <tr>
   <td>我是第二行第一列列</td><!--列-->
   <td colspan="2">我是合并的行</td>
 </tr>
 <tr>
   <td rowspan="2">我是合并的列</td>
   <td>脖</td>
   <td>子</td>
 </tr>
 <tr>
   <td>好</td>
   <td>痛</td>
 </tr>
</table>
</body>
</html>


 

表单元素

  • form:为用户输入创建表单

    • Method:发送form-data的http方法

    • Action:当提交表单时向何处发送表单数据

    • input:搜集用户信息

      • type="text":

        • value:文本框里的值

        • placeholder:文本框内的提示

        • maxlenth:限制文本框最大字符

        • size:文本框可见的字符数目

        • readonly:文本框只读

    • type="password":输入密码的单行文本框(密码以明文传输到服务器)

      • rows:文本框的宽度

      • cols:文本框的长度

      • type="button“:按钮

      • type="checkbox":复选框(为Boolean类型)

      • type="radio":单选框(要使用name属性值相同才可以哦)

      • type="number":数字框

      • type="search":获取搜索用词

    • type=“date”:日期

      • type=“color“:获取颜色值

      • type=“image”:嵌入图片

      • type=”file“:上传文件

        • multiple:一次允许上传多个文件

        • readonly:必须上传一个文件

    • textarea:多行文本框

    • select:列表框

    • datalist:可选框,必须搭配单行文本框使用,并设置id属性(和selectd的区别:select只能从选项中选择,datalist可以手动输入其他选项)

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>这是网页名称</title>
</head>
<body>
<form>
 <input >
这是一个什么都没有的文本框
 <br>
 <input type="text" value="这是文本框内的值">
 <br>
 <input type="text" placeholder="这只是一个提示,输入时没了">
 <br>
 <input type="text" maxlength="7"value="我只能输7个字">
 <br>
 <input type="text" readonly value="你只能看看我,而不能改掉我">
 <br>
 <textarea rows="15">你看我这么长</textarea>
 <br>
 <textarea cols="60">你看我这么宽</textarea>
</form>
</body>
</html>

文本框

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>这是网页名称</title>
</head>
<body>
<form>
<input type="button" value="这是一个小按钮"><!--常和js一起使用并作为绑定事件处理-->
 <br>
 <button>这也是一个按钮</button><!--可以当任何按钮来使用-->
 <br>
 <input type="submit" value="这是一个提交按钮">
 <br>
下面是多选题
 <br>
 <input type="checkbox">这是一个复选框
 <br>
 <input type="checkbox">你可以随便选哪个
 <br>
 <input type="checkbox">你可以随便选几个
 <br><br>
下面是单选题
 <br>
 <input type="radio" name="1">这是一个单选框
 <br>
 <input type="radio" name="1">因为有了相同的name
 <br>
 <input type="radio" name="1">所以只能选一个
 <br>
 <select>
   <option>往下拉</option>
   <option>你就可以看见我了</option>
   <option>惊喜吗</option>
 </select>
 <br>
<input type="text" list="datalist">
 <datalist>
   <option>往下拉</option>
   <option>你看见我了吗</option>
   <option>好吧,这回真的看不见了</option>
   <option>你还可以选择自己输入哦</option>
 </datalist>
<!--哈哈哈哈,由于贫穷的我只有chore和ie,就看不了了,datalist只有Firefox和Opera支持-->
 <br>
 <input type="range" min="0" max="100" step="10"><!--由于不同的浏览器有不同的效果,就显示得不太一样了-->
<br>
 <input type="number" min="0" max="100" step="10"><!--数字框-->
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>网页名称</title>
</head>
<body>
<form>
这是一个日期
 <br>
 <input type="date">
 <br>
 <input type="search">获取搜索用词
 <br>
 <input type="image" src="明日何其多.jpg" width="100">
 <br>
 <input type="file" multiple>一次允许上传多个文件
 <br>
 <input type="file" readonly>必须上传一个文件
</form>
</body>
</html>

 

 

 

some1


 

图片及分区

  • img:在文档中嵌入图片

    • alt:定义图片的备用元素

  • map:客户端分区的关键元素

  • area:可以有多个,每个各自代表图像上可被点击的一块区域

    • href:网页链接

    • shape:形状(circle圆形,rect正方形,poly多边形)

    • coords:坐标

      • 圆形:圆心坐标,半径

      • 正方形:左上角坐标,右上角坐标

      • 多边形:各个点的坐标,第一个坐标要和最后一个坐标一样

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>这是网页名称</title>
</head>
<body>
<img src="0.jpg" width="100" height="100" alt="找不到图片">
<!--alt表示元素的备用内容,如果找不到img的图片,则显示alt-->
<br><br>
<a href="hello.html" target="_self"><img src="1.jpg" width="100" height="100"></a>
这个图片点进去是一个超链接,就不截图了哈
<br>
<br>
<img src="分区.jpg" usemap="#0">
<form>
 <input type="image" src="分区.jpg"  usemap="#0"><!--这个是用于确认坐标的-->
<map name="0">
 <!--多边形,小飞机-->
 <area href="picture1.html" shape="poly" coords="143,50,125,130,102,113,90,125,85,105,65,95,143,50" target="_blank" >
 <!--正方形-->
 <area href="picture2.html" shape="rect"coords="235,20,375,160" target="_blank">
 <!--圆形-->
 <area href="picture3.html" shape="circle"coords="500,90,40" target="_blank">
</map>
</form>
</body>
</html>

图片及分区


 

视频

  • video:嵌入视频

    • autoplay:自动播放

    • controls:显示控件,如:开始,暂停,进度条等

    • loop:循环播放

    • preload:预备播放,如果使用autoplay则忽略该属性

      • auto:载入整个视频

      • meta:在载入元数据(一帧)

      • none:不载入

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
<video src="工作细胞.mp4" height="500" autoplay preload="metadata" controls>
 <source src="工作细胞.ogv" type="vodeo/ogg">
</video>
</body>
</html>

  • 好吧我可能真的是一个憨憨,其实这是第三次写的,我又忘记保存了,真的是......

  • 这个就写了一点点,等我以后再慢慢补充哈

  • 明日复明日,明日何其多,真的是一天拖一天,一天又一天,嗐

标签:第二项,笔记,个人,这是,文本框,载入,html5,网页,type
来源: https://www.cnblogs.com/bell-ld/p/13156847.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有