我要正经的讲一节课，咳咳！

HTML简介（废话）

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML书写规范（HTML最小集）

以下最小的HTML最小集就是说，一个符合规则的HTML文件最小是这样子的

  1. <html> 				表示整个html 页面的开始
  2. 	<head> 			头信息
  3. 		<title>		标题</title> 标题
  4. 	</head>
  5. 	<body> 			body 是页面的主体内容
  6. 					页面主体内容
  7. 	</body>
  8. </html> 			表示整个html 页面的结束
  9. <!-- 我是HTML注释-->

HTML标签

1.标签的格式:

  1. <标签名>封装的数据</标签名>

2.标签名大小写不敏感。

3.标签拥有自己的属性。

  • 分为基本属性：bgcolor=“red” 可以修改简单的样式效果
  • 事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。

4.标签又分为，单标签和双标签。

  • 单标签格式： <标签名/> </br> 换行</hr> 水平线
  • 双标签格式: <标签名> …封装的数据…</标签名>

5标签的语法：

  • 双标签一定要结束
  • 标签不能交叉嵌套
  • 属性必须有值，属性值必须加引号
  • 注释不能嵌套

HTML常用标签

知道常用的就行，一般在开发过程中，都是查阅需要的标签。这点应付考试和入门绝对够用！

1.HTML标题标签：

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

align： 属性是对齐属性

  • left： 左对齐(默认)
  • center： 剧中
  • right： 右对齐

标题1

标题2

标题3

标题4

标题5
标题6

标题7

这是以上内容的代码

  1. <h1 align="left">标题1</h1>
  2. <h2 align="center">标题2</h2>
  3. <h3 align="right">标题3</h3>
  4. <h4>标题4</h4>
  5. <h5>标题5</h5>
  6. <h6>标题6</h6>
  7. <h7>标题7</h7>
2.HTML 段落标签
  1. 段落是通过 <p> 标签定义的。

我是第一段

我是第二段

很明显，你看到了单独两段内容，我们给出源代码

  1. <p>我是第一段</p>
  2. <p>我是第二段</p>
3.HTML font 字体标签

font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)

  • color 属性修改颜色
  • face 属性修改字体
  • size 属性修改文本大小

我是红色黑体七号字

  1. <font color="red" face="黑体" size="7">我是红色黑体七号字</font>

其中还有别的属性，就不推荐大家学了，因为都淘汰了，还是使用CSS更佳。

4.HTML 超链接（链接）标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a>标签是超链接</a>

  • href 属性设置连接的地址
  • target 属性设置哪个目标进行跳转
  • _self 表示当前页面(默认值)
  • _blank 表示打开新页面来进行跳转

你可以先点击以下标签感受一下，我下文将会给出介绍。

百度

百度直接跳转

百度新标签跳转

如果你没感受出有什么差别，那么一定是你的浏览器设置的原因，我们还是给出原代码。

  1.  <a href="http://www.baidu.com">百度</a><br/>
  2. <a href="http://www.baidu.com" target="_self">百度直接跳转</a><br/>
  3. <a href="http://www.baidu.com" target="_blank">百度新标签跳转</a><br/>
5. HTML列表标签

HTML 支持有序、无序和定义列表，常用的为前两者。

1. 无序列表

<ul type=" xxx"> 是无序列表

- type 属性可以修改列表项前面的符号

- li 是列表项

  1. 比如：
  • 赵四
  • 刘能
  • 小沈阳
  • 宋小宝
  1. 	<ul type="none">
  2. 	<li>赵四</li>
  3. 	<li>刘能</li>
  4. 	<li>小沈阳</li>
  5. 	<li>宋小宝</li>
  6. 	</ul>

2. 有序列表

  1. Coffee
  2. Milk
  3. Tea
  1. <ol>
  2. <li>Coffee</li>
  3. <li>Milk</li>
  4. <li>Tea</li>
  5. </ol>

3. 定义列表

这个真没用过，我偷个懒不讲了。

6.HTML 图像标签

<img />标签可以在html 页面上显示图片。

  • img 标签是图片标签,用来显示图片
  • src 属性可以设置图片的路径 <img src="url" />
  • width 属性设置图片的宽度
  • height 属性设置图片的高度
  • border 属性设置图片边框大小
  • alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容<img src="boat.gif" alt="Big Boat">

源代码：

  1. <img
  2. src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238718249,2298049977&fm=26&gp=0.jpg"
  3. alt="Big Boat "
  4. width="200"
  5. height="200"
  6. border="2" <!-- 可能你看不到边框 -->
  7. />
  9. <img  src=" 0.jpg  " alt="我故意放错的">

这里我们简单讲一下Web中的路径问题：

在web 中路径分为相对路径和绝对路径两种

  • 相对路径:

    . 表示当前文件所在的目录

    .. 表示当前文件所在的上一级目录

    文件名表示当前文件所在目录的文件,相当于./文件名./ 可以省略
  • 绝对路径:

    正确格式是: http://ip:port/工程名/资源路径
7.HTML表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • border 设置表格标签
  • width 设置表格宽度
  • height 设置表格高度
  • align 设置表格相对于页面的对齐方式
  • cellspacing 设置单元格间距
  • tr 是行标签
  • th 是表头标签
  • td 是单元格标签
  • align 设置单元格文本对齐方式
  • b 是加粗标签
  • colspan 属性设置跨列
  • rowspan 属性设置跨行
1.1 1.3 1.4 1.5
2.1 2.2 2.3 2.4 2.5
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4

可能不是很清楚，因为markdown不能完全兼容HTM的代码，将就一下，下面是源码。

  1. <table width="500" height="500" cellspacing="1" border="2">
  2. <tr>
  3. <td colspan="2">1.1</td>
  4. <td>1.3</td>
  5. <td>1.4</td>
  6. <td>1.5</td>
  7. </tr>
  8. <tr>
  9. <td rowspan="2">2.1</td>
  10. <td>2.2</td>
  11. <td>2.3</td>
  12. <td>2.4</td>
  13. <td>2.5</td>
  14. </tr>
  15. <tr>
  16. <td>3.1</td>
  17. <td>3.2</td>
  18. <td>3.3</td>
  19. <td colspan="2" rowspan="2">3.4</td>
  20. </tr>
  21. <tr>
  22. <td>4.1</td>
  23. <td>4.2</td>
  24. <td>4.3</td>
  25. <td>4.4</td>
  26. </tr>
  27. </table>
8.常用的特殊字符集

一定是常用的，因为太多了，如果全写出了，那得好几个篇幅了，我知道你们不爱看，我就跳过了！

结果 描述 实体名称 实体编号
空格 &nbsp;  
" 引号 &quot; "
' 撇号  &apos; '
& 和号 &amp; &
< 小于号 &lt; <
> 大于号 &gt; >

剩下的自己去查就完事，这时候有小伙伴要问了，换行换行!<br>我的错，我忘记说换行标签了，我错了！

9.iframe 框架标签(内嵌窗口)

我倒是挺想写个窗口给大家演示的，但是mark down不允许！可惜！

  1. <body>
  2. <!--ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
  3. ifarme 和a 标签组合使用的步骤:
  4. 1 在iframe 标签中使用name 属性定义一个名称
  5. 2 在a 标签的target 属性上设置iframe 的name 的属性值
  6. -->
  7. <iframe src="https://me.csdn.net/blog/weixin_43627118" width="500" height="400" name="mubiao"></iframe>
  8. <br/>
  9. <ul>
  10. <li><a href="https://blog.csdn.net/weixin_43627118" target="mubiao">他的博文</a></li>
  11. <li><a href="https://blog.csdn.net/weixin_43627118/category_9800870.html" target="mubiao">JAVA专栏</a></li>
  12. <li><a href="https://blog.csdn.net/weixin_43627118/category_9800862.html" target="mubiao"> 数据库专栏</a></li>
  13. </ul>
  14. </body>

可以把代码粘贴到记事本后改扩展名为HTML然后试一下，体验体验。

效果大概是这样的



10表单标签

表单就是html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

<form> 标签就是表单

  • input type=text 是文件输入框value 设置默认显示内容
  • input type=password 是密码输入框value 设置默认显示内容
  • input type=radio 是单选框name 属性可以对其进行分组checked="checked"表示默认选中
  • input type=checkbox 是复选框checked="checked"表示默认选中
  • input type=reset 是重置按钮value 属性修改按钮上的文本
  • input type=submit 是提交按钮value 属性修改按钮上的文本
  • input type=button 是按钮value 属性修改按钮上的文本
  • input type=file 是文件上传域
  • input type=hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域(提交的时候同时发送给服务器）
  • select 标签是下拉列表框
    • option 标签是下拉列表框中的选项selected="selected"设置默认选中
    • textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
    • rows 属性设置可以显示几行的高度
    • cols 属性设置每行可以显示几个字符宽度

给出一个样例：



同样的，可粘贴后自己运行体验一下啊！

  1. <form>
  2. <h1 align="center">用户注册</h1>
  3. <table align="center">
  4. <tr>
  5. <td> 用户名称：</td>
  6. <td>
  7. <input type="text" value="默认值"/>
  8. </td>
  9. </tr>
  10. <tr>
  11. <td> 用户密码：</td>
  12. <td><input type="password" value="abc"/></td>
  13. </tr>
  14. <tr>
  15. <td>确认密码：</td>
  16. <td><input type="password" value="abc"/></td>
  17. </tr>
  18. <tr>
  19. <td>性别：</td>
  20. <td>
  21. <input type="radio" name="sex"/>男
  22. <input type="radio" name="sex" checked="checked" />女
  23. </td>
  24. </tr>
  25. <tr>
  26. <td> 兴趣爱好：</td>
  27. <td>
  28. <input type="checkbox" checked="checked" />rap
  29. <input type="checkbox" />唱
  30. <input type="checkbox" />跳
  31. <input type="checkbox" />篮球
  32. </td>
  33. </tr>
  34. <tr>
  35. <td>国籍：</td>
  36. <td>
  37. <select>
  38. <option>--请选择国籍--</option>
  39. <option selected="selected">中国</option>
  40. <option>美国</option>
  41. <option>小日本</option>
  42. </select>
  43. </td>
  44. </tr>
  45. <tr>
  46. <td>自我评价：</td>
  47. <td><textarea rows="10" cols="20">请在此区域书写</textarea></td>
  48. </tr>
  49. <tr>
  50. <td><input type="reset" /></td>
  51. <td align="center"><input type="submit"/></td>
  52. </tr>
  53. </table>
  54. </form>
  55. </body>

表单提交细节:

<form >标签是表单标签

action 属性设置提交的服务器地址

method 属性设置提交的方式GET(默认值)或POST

accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。

autocomplete 规定浏览器应该自动完成表单（默认：开启）。

enctype 规定被提交数据的编码（默认：url-encoded）。

name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate 规定浏览器不验证表单。

target 规定 action 属性中地址的目标（默认：_self）。

表单提交的时候，数据没有发送给服务器的三种情况：

1、表单项没有name 属性值

2、单选、复选（下拉列表中的option 标签）都需要添加value 属性，以便发送给服务器

3、表单项不在提交的form 标签中

GET 请求的特点是：

1、浏览器地址栏中的地址是：action 属性[+?+请求参数]

请求参数的格式是：name=value&name=value

2、不安全

3、它有数据长度的限制

POST 请求的特点是：

1、浏览器地址栏中只有action 属性值

2、相对于GET 请求要安全

3、理论上没有数据长度的限制

何时使用 GET？何时使用 POST？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

刚才的代码是不能正常提交，下面的代码经过修改时可以提交的，仔细观察一下有什么区别。

  1. <form action="http://localhost:8080" method="post">
  2. <input type="hidden" name="action" value="login" />
  3. <h1 align="center">用户注册</h1>
  4. <table align="center">
  5. <tr>
  6. <td> 用户名称：</td>
  7. <td>
  8. <input type="text" name="username" value="默认值"/>
  9. </td>
  10. </tr>
  11. <tr>
  12. <td> 用户密码：</td>
  13. <td><input type="password" name="password" value="abc"/></td>
  14. </tr>
  15. <tr>
  16. <td>性别：</td>
  17. <td>
  18. <input type="radio" name="sex" value="boy"/>男
  19. <input type="radio" name="sex" checked="checked" value="girl" />女
  20. </td>
  21. </tr>
  22. <tr>
  23. <td> 兴趣爱好：</td>
  24. <td>
  25. <input name="hobby" type="checkbox" checked="checked" value="java"/>唱
  26. <input name="hobby" type="checkbox" value="js"/>跳
  27. <input name="hobby" type="checkbox" value="cpp"/>rap
  28. <input name="hobby" type="checkbox" value="cpp"/>篮球
  29. </td>
  30. </tr>
  31. <tr>
  32. <td>国籍：</td>
  33. <td>
  34. <select name="country">
  35. <option value="none">--请选择国籍--</option>
  36. <option value="cn" selected="selected">中国</option>
  37. <option value="usa">美国</option>
  38. <option value="jp">小日本</option>
  39. </select>
  40. </td>
  41. </tr>
  42. <tr>
  43. <td>自我评价：</td>
  44. <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
  45. </tr>
  46. <tr>
  47. <td><input type="reset" /></td>
  48. <td align="center"><input type="submit"/></td>
  49. </tr>
  50. </table>
  51. </form>
  52. </body>
11.其他标签

标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

看下边：

div 标签1
div 标签2

span 标签1
span 标签2

p 段落标签1

p 段落标签2

你看这个像什么！

░░░░░░░░░░░▄▄

░░░░░░░░░░░█░█

░░░░░░░░░░░█░█

░░░░░░░░░░█░░█

░░░░░░░░░█░░░█

███████▄▄█░░░██████▄

▓▓▓▓▓▓█░░░░░░░░░░░░█

▓▓▓▓▓▓█░░░░░░░░░░░░█

▓▓▓▓▓▓█░░░░░░░░░░░░█

▓▓▓▓▓▓██████████████

HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）的更多相关文章

  1. Apache Shiro系列三，概述 —— 10分钟入门

     一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...

  2. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  3. Markdown - Typora 10分钟入门 - 精简归纳

    Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...

  4. kafka原理和实践（一）原理：10分钟入门

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

  5. [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作

    前言 本人是服务端程序员,同时需要兼职前端开发.常用的就是原生态的HTML.Javascript,也用过ExtJS.Layui.可是ExtJS变公司后非常难用.Layui上手还行,用过一段时间,会觉得 ...

  6. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  7. Webpack 10分钟入门

    可以说现在但凡开发Single page application,webpack是一个不可或缺的工具. WebPack可以看做是一个模块加工器,如上图所示.它做的事情是,接受一些输入,经过加工产生一些 ...

  8. 「从零单排canal 01」 canal 10分钟入门（基于1.1.4版本）

    1.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Servi ...

  9. 10分钟入门git简易教程

    在注册了github账号之后,一度不知道该如何使用. 在仔细研究了github的官方说明文档.廖老师的教程.还有许多博主的文章之后,总算对github的操作和体系有了较为深刻的了解,还有这篇简单的入门 ...

随机推荐

  1. pip 命令参数以及如何配置国内镜像源

    文章更新于:2020-04-05 注:如果 pip 命令不可以用,参见:python pip命令不能用 文章目录 一.参数详解 1.命令列表 2.通用参数列表 二.实际应用 1.常用命令 2.`pip ...

  2. Java第二十六天，多线程等待换新机制（严格执行化）

    代码: 1.老板类: package com.lanyue.day26; public class bossRunnable implements Runnable { public myLock l ...

  3. CARS: 华为提出基于进化算法和权值共享的神经网络结构搜索，CIFAR-10上仅需单卡半天 | CVPR 2020

    为了优化进化算法在神经网络结构搜索时候选网络训练过长的问题,参考ENAS和NSGA-III,论文提出连续进化结构搜索方法(continuous evolution architecture searc ...

  4. matplotlib TransformWrapper

    2020-04-09 23:26:53 --Edit by yangray TransformWrapper 是Transform的子类, 支持在运行中替掉一个变换(可以是不同类型, 但维度必须相同) ...

  5. 运行jmeter.bat时 提示 not able to find java executable or version

    安装过好几次,这是第一次遇到运行jmeter.bat时 提示 not able to find java executable or version Please check your Java in ...

  6. git中常用命令的总结

    一.git stash  1.git  stash 保存当前工作进度,会把暂存区和工作区的改动保存起来.执行完这个命令后,在运行git status命令,就会发现当前是一个干净的工作区,没有任何改动. ...

  7. Java 理论与实践: 流行的原子

    Java 理论与实践: 流行的原子 新原子类是 java.util.concurrent 的隐藏精华 在 JDK 5.0 之前,如果不使用本机代码,就不能用 Java 语言编写无等待.无锁定的算法.在 ...

  8. JAVA获取EXCEL列头

    FileInputStream fileInputStream = new FileInputStream(rootPath + path + "/" + fileName); L ...

  9. python简易的大乐透数据获取及初步分析

    该项目从网上爬取并分析彩票数据,为用户查看和初步分析往期数据提供一种简易的工具. https://github.com/unknowcry/Lottery # -*- coding: utf-8 -* ...

  10. CSS躬行记（6）——滤镜

    滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜. 一.调色滤镜 调色滤镜可控制元素的模糊.颜色.亮度等变化,并且多个滤镜可组合在一起使用.这些滤镜大部 ...