视频链接：https://www.bilibili.com/video/av5862916?from=search&seid=12139895566389560177

我的第一个html

  1. <!DOCTYPE html><!-- 告诉浏览器这是什么类型的文件（可以省略）-->
  2. <html lang="en">
  3. <head>
  4.     <meta charset="iso8859-1"><!-- 设置显示到浏览器的格式-->
  5.     <title>tittle name</title>
  6. </head>
  7. <body>
  8.     HelloWorld!
  9.     张
  10. </body>
  11. </html>

解决浏览器显示乱码问题：将iso8859-1改为utf-8

运行：将上述代码保存为htm或者html格式用浏览器打开就可以看到效果了。

常用元素介绍：

  1. <!DOCTYPE html><!-- 告诉浏览器这是什么类型的文件（可以省略）-->
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8"><!-- 设置显示到浏览器的格式-->
  5.     <title>tittle name</title>
  6. </head>
  7. <body>
  8.     <b>加粗</b><br>
  9.     <strong>加粗起强调作用</strong><br>
  10.     <i>斜体</i><br>
  11.     <em>斜体</em><br>
  12.     <br><!--换行-->
  13.     <u>下划线</u><br>
  14.     <s>删除</s><br>
  15.     <a href=https://search.bilibili.com/all?keyword=html target="_blank"> 超链接</a><br><!-- 原窗口跳转至链接-->
  16.     <a href=https://search.bilibili.com/all?keyword=html target="_self"> 超链接</a><br><!-- 新建窗口跳转至链接-->
  17.     张
  18. </body>
  19. </html>

　　

 列表标签（list）：

列表分为有序和无序：ordered list和unordered list

最基础的用法：

  1. 　　　 <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>MyFirstPage</title>
  6. </head>
  7. <body>
  8.         <ol>
  9.             <li>a</li>
  10.             <li>b</li>
  11.             <li>c</li>
  12.         </ol>
  13.     <br>
  14.         <ol reversed>
  15.             <li>a</li>
  16.             <li>b</li>
  17.             <li>c</li>
  18.         </ol>
  19.         <ol type="a">
  20.             <li>sdfs</li>
  21.             <li>sdfs</li>
  22.             <li>sdfs</li>
  23.         </ol>
  24.  
  25.     <ul>
  26.         <li>a</li>
  27.         <li>b</li>
  28.         <li>c</li>
  29.     </ul>
  30. </body>
  31. </html>

　

表中有表：

  1. <!DOCTYPE html><!-- 告诉浏览器这是什么类型的文件（可以省略）-->
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8"><!-- 设置显示到浏览器的格式-->
  5.     <title>tittle name</title>
  6. </head>
  7. <body>
  8.  
  9. <ol type="1" reversed><!-- 逆序有序列表 -->
  10. <li>第一项</li>
  11. <ol type="a">
  12. <li>1.1</li>
  13. <li>1.2</li>
  14. <li>1.3</li>
  15. </ol>
  16. <li>第二项</li>
  17. <ol type="a"><!-- 列表中还可以加表 -->
  18. <li>2.1</li>
  19. <li>2.2</li>
  20. <li>2.3</li>
  21. </ol>
  22. <li>第三项</li>
  23. <ol type="a">
  24. <li>3.1</li>
  25. <li>3.2</li>
  26. <li>3.3</li>
  27. </ol>
  28.  
  29. <ol>
  30. <br>
  31.  
  32. <ul ><!-- 顺序无序列表 -->
  33. <li>第一项</li>
  34. <li>第二项</li>
  35. <li>第三项</li>
  36. <li>第四项</li>
  37. <li>第五项</li>
  38. <ul>
  39.  
  40. </body>
  41. </html>

　　

 表格标签：

  1. 　　　 <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>MyFirstPage</title>
  6. </head>
  7. <body>
  8.  
  9. <table border="1px" align="center">
  10.         <thead>
  11.             <tr>
  12.                 <th>名字</th><!-- table head 表头-->
  13.                 <th>性别</th>
  14.                 <th>密码</th>
  15.             </tr>
  16.         </thead>
  17.         <tbody>
  18.             <tr>
  19.                 <td>张三</td>
  20.                 <td>男</td>
  21.                 <td>123</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>李四</td>
  25.                 <td>女</td>
  26.                 <td>456</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>王五</td>
  30.                 <td>男</td>
  31.                 <td>789</td>
  32.             </tr>
  33.         </tbody>
  34.         <tfoot>
  35.             <tr><!-- 表示当前行 -->
  36.                 <th>名字</th>
  37.                 <th>性别</th>
  38.                 <th>密码</th>
  39.             </tr>
  40.         </tfoot><!-- table foot 表脚-->
  41.     </table>
  42. </body>
  43. </html>

　

合并两个单元格可以看视频

 表单标签

  1. <form action="" method ="post"><!--action里面写转的jsp或者相应servlet别名-->
  2.  
  3. <br/>
  4.  账号:<input type="text" placeholder="输入账号" name="uname"><!--不占位-->
  5. <br>
  6.    密码:<input type="password" placeholder="输入密码" name="pwd">
  7. <br>
  8. 单选：
  9. 选择题<br>
  10. <input type="radio" name="choseA" checked>A
  11. <input type="radio" name="choseA">B
  12. <input type="radio" name="choseA">C
  13.  
  14. <br>
  15. 下拉选择：
  16. <select>
  17.     <option>苹果</option>
  18.     <option>香脚</option>
  19.     <option>西瓜</option>
  20. </select>
  21. <br>
  22. </form>

　

插入视频

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.  
  5. <video width=50% height=50% controls autoplay muted>
  6.     <source src=" http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4"  alt="Second slide" style="width: 100%">
  7.  </video>
  8.  
  9. </body>
  10. </html>

　

视频链接·： http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp

 插入音频

<audio src="FlowerFire.mp3" controls></audio>

html常用整理的更多相关文章

  1. List常用整理

            长期更新,主要记录List的各种常用操作整理. 对List进行排序 // Collections.sort(重写toString()进行排序区分) List<ObjectName ...

  2. hive sql常用整理-hive引擎设置

    遇到个情况,跑hive级联insert数据报错,可以尝试换个hive计算引擎 hive遇到FAILED: Execution Error, return code 2 from org.apache. ...

  3. 【转】数据分析sql常用整理

    [SQL 数据分析常用语句] • 1 基础查询 • 2 字符串数字日期时间 • 3 聚合数据查询 • 4 子查询 • 5 联接组合查询 • 6 高级查询 • 7 更新数据 阅读提醒:点击图片放大可看清 ...

  4. 数据分析sql常用整理

    [SQL 数据分析常用语句] 2017-07-20 00:00 数据分析 来源:datakong 转自:大数据 • 1 基础查询 • 2 字符串数字日期时间 • 3 聚合数据查询 • 4 子查询 • ...

  5. Eclipse 常用整理

    1.编译 eclipse默认是修改程序后自动编译的,如果不能自动编译,你可以查看project->build automatically选项是否被选中. 手动编译整个工程,可以使用Project ...

  6. MAC OS X 终端命令入门 （简单常用整理）

    在这里记下..防止丢失 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd .. 上级目录 cd ~ 返回root cd - 返回上一个访问的目录 rm 文件名 ...

  7. 01-artDialog4.1.7常用整理

    关闭弹出框的几种常见方法: 1,artDialog可以通过鼠标双击关闭对话框,esc关闭对话框等.为了在关闭对话框要执行某一方法,不能仅仅在弹框中的关闭按钮中写.这时提供了一个函数:close.无论在 ...

  8. <c:forEach 的常用整理

    <c:forEach items="${images}" var="img" varStatus="status"> <d ...

  9. STL常用整理

    S T L Sting: << 判断拼音序 size length 字符串长度 str[n] 代表字符串中的一个字符 可用作左值 string::size_type 用于表示字符串长度计量 ...

随机推荐

  1. 安装Anaconda3时出现conda不是内部或者外部命令

    在win10,64位,python版本为3.7的环境下安装anaconda3的时候,无法在命令行执行conda命令,一直提示conda不是内部或者外部命令,参考网上的修改环境变量,修改完后还是没有用, ...

  2. wordpress Error establishing a database connection问题

    最近这场大雨,快把帝都给淹了,我也快被这不定向问题折磨疯了,本来把项目放在A服务器,nginx ,php7,mysql,然后换到了B服务器,环境一模一样,结果呢,传上去就出现了 哎,话说我的配置也没啥 ...

  3. nginx 解决 connect() failed (111: Connection refused) while connecting to upstream,

    嗯哼,刚装了个ubuntu的lnmp,我的天啊,踩的坑比我脂肪还多了 比如刚装完的时候访问显示502, 也不知道什么问题,就去看了一下nginx日志  /var/log/nginx/error.log ...

  4. dfs（迷宫）

    问题 J: 棋盘行走 时间限制: 1 Sec  内存限制: 128 MB[命题人:admin] 题目描述 小Biu在玩一个棋盘游戏,这个游戏给出一个n*m的棋盘,并且每个点上有一个棋子,棋子的颜色 用 ...

  5. windows maven配置

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  6. 00-Docker基本安装

    目录 00-Docker基本安装 参考 安装与配置 启动与测试 00-Docker基本安装 Docker Version: 19.03.5

  7. HTML 入门第一课

    HTML 简单认识 HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行. 1.H ...

  8. 登录oracle ORA-12541: TNS:no listener报错

    初次安装Oracle是通过VMware在虚拟机上安装的,安装Oracle过程,解锁了两个用户,分别是Scott和HR,也设置了密码,安装完成后输入sqlplus scott/admin123(scot ...

  9. gatling高性能测试工具

    使用mvn命令直接测试.  (loadrunner-----) 1.新建maven工程 2.在pom中导入依赖 <dependencies> <dependency> < ...

  10. map或者对象转换

    map或者对象转换为具有相同字段的对象 List<Example> errorCodeExcelBeanList = JSONObject.parseArray(((JSONObject) ...