学习使用HTML5第一次小结

最新推荐文章于 2022-07-26 15:08:45 发布
最新推荐文章于 2022-07-26 15:08:45 发布
阅读量408 收藏
点赞数 1
分类专栏： 学习前端网页制作 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42457255/article/details/104217136
版权

本文主要参考来自b站《星月教你做网站》
图片部分参考http://www.myaijarvis.com/index.php/archives/280
本文主要关于HTML5部分，关于CSS的之后会再做小结。

  1. HTML基本元素
<!DOCTYPE html>
<!--让浏览器得知自己要处理的内容是html-->
<html lang="en">
<!--文档中html部分的开始-->
<!--让谷歌浏览器有自动翻译的功能，ch，en-->
<head>
    <!--提供有关文档内容和标记信息-->
    <meta charset="UTF-8">
    <!--源数据，多次功能访问，utf-8的方法对网页进行编码-->
    <title>Title</title>
    <!--标题-->
</head>
<body>
<h1>big</h1>
<a href="http://hao.qq.com/?unc=o400493_1&s=2&s=o400493_1">hao123</a>
<a href="http://hao.qq.com/?unc=o400493_1&s=2&s=o400493_1" target="_blank">hao123</a>
<!--超链接-->
<b>粗体</b>
<em>斜体</em>
<u>下划线</u>
<s>删除线</s>
</body>
</html>

<h1>big</h1>
<a href="">title</a>  超链接
<b>粗体</b>
<em>斜体</em>
<u>下划线</u>
<s>删除线</s>
  1. HTML表格元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px" align="center">
    <thead>
    <tr>
        <th>user</th>
        <th>sex</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>admin</td>
        <td>male</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>user</td>
        <td>sex</td>
    </tr>
    </tfoot>
</table>
<br>
<table border="1px">
    <tr>
        <th rowspan="2">aaa</th>
        <th>aaa</th>
        <th>aaa</th>
        <th>aaa</th>
    </tr>
    <tr>
        <!--<td>aaa</td>-->
        <td colspan="2">aaa</td>
        <!--合并单元格-->
        <td>aaa</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
    </tr>
</table>
</body>
</html>


<table border="1px" align="center">//表的边框和格式
    <thead>
    </thead>

    <tbody>
    </tbody>
   
    <tfoot>
    <tr>//表的行
        <td>user</td>//表的列
        <td>sex</td>
    </tr>
    </tfoot>
 <th rowspan="2">aaa</th>//合并单元格
 <td colspan="2">aaa</td>//合并单元格
</table>
  1. HTML列表元素
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<ol reversed>
    <li>a</li>
    <ol type="a">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <li>b</li>
    <li>c</li>
</ol>
<ol type="a">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
<ul>
    <li>a</li>
    <li>b</li>
</ul>
</body>
</html>


<ol>//有序列表
    <li>a</li>
</ol>
<ol reversed>//倒序列表
<ul>//无序列表
    <li>a</li>
</ul>
  1. 表单元素
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表单</title>
</head>
<body>
<form>
    <input type="text" value="yyx">
    <br><br>
    <input type="text">
    <br>
    <!--text单行文本框，value占位符 placeholder不占文本框的位置 maxlength最大能输入的字符-->
    <input type="text" placeholder="yyx">
    <br>
    <input type="text" placeholder="maxlength" maxlength="8">
    <br>
    <input type="text" placeholder="yyx" size="50"><!--拓宽单行文本框-->
    <br>
    <input type="text" placeholder="yyx" readonly>
    <br><br><br>
    <input type="password" placeholder="password">
    <br>

    <textarea rows="20" cols="8">yyx</textarea>

</form>
<form>
    <input type="button" value="button">
   <button>button</button> <!--js合作，并且作为绑定事件-->
    <input type="submit" value="submit"><!--提交表单，获取用户输入的值-->

</form>

<form>
    <input type="range" min="-100" max="100" step="100" value="0">
    <input type="number" min="-100" max="100" value="0">
   <!--数字滑动和手动输入数字-->
    <br>
    <input type="checkbox">
    <input type="radio" name="a" checked>
    <select>
        <option>a</option>
        <option>a</option>
        <option>a</option>
    </select>

    <input type="text" list="datalist">
    <datalist id="datalist">
        <option>a</option>
        <option>a</option>
        <option>a</option>
    </datalist>
</form>-->

<form>
    <!--<input type="email">
    <input type="tel">
    <input type="url">
    <input type="date">获取日期
    <input type="color">获取颜色
    <input type="search">
    <input type="hidden" value="123">-->隐藏文本框
    <input type="image" scr="1.png" width="40px">图片按钮
    <input type="file" multiple>


</form>
</body>
</html>


  
    <!--text单行文本框，value占位符 placeholder不占文本框的位置 maxlength最大能输入的字符-->
    <input type="text" value="yyx">
    <input type="text">
    <input type="text" placeholder="yyx">
    <input type="text" placeholder="maxlength" maxlength="8">
    <input type="text" placeholder="yyx" size="50"><!--拓宽单行文本框-->
    <input type="text" placeholder="yyx" readonly>只读
密码password
    <input type="password" placeholder="password">
textarea多行文本框
    <textarea rows="20" cols="8">yyx</textarea>
按钮
    <input type="button" value="button">
   <button>button</button> <!--js合作，并且作为绑定事件-->
    <input type="submit" value="submit"><!--提交表单，获取用户输入的值-->
<!--数字滑动和手动输入数字-->
    <input type="range" min="-100" max="100" step="100" value="0">
    <input type="number" min="-100" max="100" value="0">

    <input type="checkbox">
    <input type="radio" name="a" checked>
    <select>
        <option>a</option>
        <option>a</option>
        <option>a</option>
    </select>

    <input type="text" list="datalist">
    <datalist id="datalist">
        <option>a</option>
        <option>a</option>
        <option>a</option>
    </datalist>
</form>-->

<form>
    <!--<input type="email">
    <input type="tel">
    <input type="url">
    <input type="date">获取日期
    <input type="color">获取颜色
    <input type="search">
    <input type="hidden" value="123">-->隐藏文本框
    <input type="image" scr="1.png" width="40px">图片按钮
    <input type="file" multiple>
</form>
  1. 嵌入图片和创建分区相应图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建图片</title>
</head>
<body>
<!--<a href="idea1.html" target="_blank">
    <img scr="1.png" alt="download button">
</a>-->
<img src="1.png" usemap="#map1">
<form>
    <input type="1.png">
</form>
<!--创建客户端分区相应图-->
<map name="map1">
    <area href="idea1.html" shape="rect" coords="38,62,175,200" target="_blank">
    <area href="table.html" shape="rect" coords="227,62,364,200" target="_blank">
    <area>
    <area>
    <area>
    <area>
    <area>
</map>
<!--<img scr="timg.jpg">
<img scr="1.png" width="128px" height="200px">
<img scr="1.png" alt="download button">-->

</body>
</html>
多喝
关注
专栏目录
HTML5学习总结
qq_53329531的博客
07-26 911
html5学习总结
HTML5 学习总结（一）——HTML5概要与新增标签
weixin_33975951的博客
11-24 622
一、HTML5概要 1.0、写在最前面 1.0.1、行业前景 https://www.lagou.com/ http://www.51job.com/ 1.0.2、课程中用到的开发工具 HBuilder、IntelliJ IDEA、MySQL、NodeJS、Spring MVC、PHP、Photoshop HBuilder：www.dcloud.c...
html5-学习总结
づ開始懂了的博客
11-30 804
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 cale
学习使用HTML5第二次小结——CSS篇
weixin_42457255的博客
02-09 103
CSS初步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建CSS</title> <!--将外部样式表引入至html文档--> <link rel="stylesheet" t...
学习HTML5总结（一）
m0_58144335的博客
07-26 813
WEB学习中阶段性知识点总结
每天一篇javascript学习小结（String对象）
10-23
如果不带标志，则替换第一次匹配的子串。replacement 参数可以是字符串，也可以是一个函数，根据匹配的模式返回特定的替换文本。 ### split() 方法 split() 方法用于把一个字符串分割成字符串数组。它通过指定的...
JavaScript事件学习小结(二)js事件处理程序
11-25
在JavaScript事件学习小结(二)中，主要探讨的是如何处理这些事件，即事件处理程序。事件处理程序是当特定事件发生时执行的函数，如用户点击按钮或页面加载完成。以下是关于JavaScript事件处理程序的详细解释： 1. *...
PHP 函数学习简单小结
10-29
preg_match()搜索匹配到的第一次结果，而preg_match_all()搜索所有的匹配结果。它们在处理复杂的文本匹配和验证时非常有用。例如，preg_match_all('/<[^>]+>/', "<p>test</p>", $matches)可以用来匹配并提取所有的...
HTML5 学习总结1
PzLu's Blog
07-19 389
主要记录 web 发展新纪元 web网页发展三阶段 Web1.0 ——HTML+CSS Web2.0 ——Ajax Web3.0 ——HTML5+CSS3 三大NB组织 WHANTWG——Web Hypertext application technology Working Group W3C——World wide web consortium IETF——Inter...
HTML5学习总结————（一）
qq_39565343的博客
03-04 431
一、
html5学习记录总结
weixin_42347240的博客
06-14 427
html5学习记录总结
【HTML5学习小结(1)】
橙子的博客
04-09 965
HTML5学习小结了解Web一、web网页1.什么是网页？2.构成网页的要素有哪些？3.动态网页与静态网页。4.web页面的组成。二、web标准1、结构标准2、样式标准3、行为标准二、HTML5(H5)超文本标记语言：1、web页面的开发环境2、网页的基本结构3、标签4、常用标签5、标签的属性6、颜色的使用7、设置页面的背景色或背景图像 了解Web 一、web网页 1.什么是网页？ 可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。（如我们平时打开的浏览器页面） 2.构成网页的要
HTML5总结
fiao666的博客
05-17 237
关于HTML5 超文本标记语言——HTML,顾名思义，是一种标记语言，也就是采用一系列标签将网页设计成人们心中最美观的形式的语言。HTML又分为多个版本，现在用的最多的是HTML5，相比其他版本，HTML5的功能就明显强大了许多，例如HTML5 规定了一种通过 video 元素来包含视频的标准方法、语义化标签的使用等等。通过这两天学习，了解了一些HTML标签的使用，和大家分享一下。 1、常见的标签 <!DOCTYPE html>：<!DOCTYPE> 声明必须是 HTML 文档
使用HTML5与JavaScript自制简单视频播放器
"本文将介绍如何使用JavaScript实现一个简单的HTML5视频播放器，结合HTML5的新特性，创建一个跨平台、适应未来趋势的网页播放器。我们将探讨如何控制视频播放、调整音量、全屏切换等功能，并展示核心的JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值