HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）
我要正经的讲一节课，咳咳！
HTML简介（废话）
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
HTML书写规范（HTML最小集）
以下最小的HTML最小集就是说，一个符合规则的HTML文件最小是这样子的
<html> 表示整个html 页面的开始
<head> 头信息
<title> 标题</title> 标题
</head>
<body> body 是页面的主体内容
页面主体内容
</body>
</html> 表示整个html 页面的结束
<!-- 我是HTML注释-->
HTML标签
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
这是以上内容的代码
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>
2.HTML 段落标签
段落是通过 <p> 标签定义的。
我是第一段
我是第二段
很明显，你看到了单独两段内容，我们给出源代码
<p>我是第一段</p>
<p>我是第二段</p>
3.HTML font 字体标签
font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
- color 属性修改颜色
- face 属性修改字体
- size 属性修改文本大小
我是红色黑体七号字
<font color="red" face="黑体" size="7">我是红色黑体七号字</font>
其中还有别的属性，就不推荐大家学了，因为都淘汰了，还是使用CSS更佳。
4.HTML 超链接（链接）标签
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a>标签是超链接</a>
- href 属性设置连接的地址
- target 属性设置哪个目标进行跳转
- _self 表示当前页面(默认值)
- _blank 表示打开新页面来进行跳转
你可以先点击以下标签感受一下，我下文将会给出介绍。
百度
百度直接跳转
百度新标签跳转
如果你没感受出有什么差别，那么一定是你的浏览器设置的原因，我们还是给出原代码。
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度直接跳转</a><br/>
<a href="http://www.baidu.com" target="_blank">百度新标签跳转</a><br/>
5. HTML列表标签
HTML 支持有序、无序和定义列表，常用的为前两者。
1. 无序列表
<ul type=" xxx"> 是无序列表
- type 属性可以修改列表项前面的符号
- li 是列表项
比如：
- 赵四
- 刘能
- 小沈阳
- 宋小宝
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
2. 有序列表
- Coffee
- Milk
- Tea
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
3. 定义列表
这个真没用过，我偷个懒不讲了。
6.HTML 图像标签
<img />标签可以在html 页面上显示图片。
- img 标签是图片标签,用来显示图片
- src 属性可以设置图片的路径
<img src="url" /> - width 属性设置图片的宽度
- height 属性设置图片的高度
- border 属性设置图片边框大小
- alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容
<img src="boat.gif" alt="Big Boat">
源代码：
<img
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238718249,2298049977&fm=26&gp=0.jpg"
alt="Big Boat "
width="200"
height="200"
border="2" <!-- 可能你看不到边框 -->
/>
<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的代码，将就一下，下面是源码。
<table width="500" height="500" cellspacing="1" border="2">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td colspan="2" rowspan="2">3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
8.常用的特殊字符集
一定是常用的，因为太多了，如果全写出了，那得好几个篇幅了，我知道你们不爱看，我就跳过了！
| 结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | | ||
| " | 引号 | " | " |
| ' | 撇号 | ' | ' |
| & | 和号 | & | & |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
剩下的自己去查就完事，这时候有小伙伴要问了，换行换行!<br>我的错，我忘记说换行标签了，我错了！
9.iframe 框架标签(内嵌窗口)
我倒是挺想写个窗口给大家演示的，但是mark down不允许！可惜！
<body>
<!--ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme 和a 标签组合使用的步骤:
1 在iframe 标签中使用name 属性定义一个名称
2 在a 标签的target 属性上设置iframe 的name 的属性值
-->
<iframe src="https://me.csdn.net/blog/weixin_43627118" width="500" height="400" name="mubiao"></iframe>
<br/>
<ul>
<li><a href="https://blog.csdn.net/weixin_43627118" target="mubiao">他的博文</a></li>
<li><a href="https://blog.csdn.net/weixin_43627118/category_9800870.html" target="mubiao">JAVA专栏</a></li>
<li><a href="https://blog.csdn.net/weixin_43627118/category_9800862.html" target="mubiao"> 数据库专栏</a></li>
</ul>
</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 属性设置每行可以显示几个字符宽度
给出一个样例：
同样的，可粘贴后自己运行体验一下啊！
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input type="checkbox" checked="checked" />rap
<input type="checkbox" />唱
<input type="checkbox" />跳
<input type="checkbox" />篮球
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="20">请在此区域书写</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</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 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
刚才的代码是不能正常提交，下面的代码经过修改时可以提交的，仔细观察一下有什么区别。
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td>
<input type="text" name="username" value="默认值"/>
</td>
</tr>
<tr>
<td> 用户密码：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>唱
<input name="hobby" type="checkbox" value="js"/>跳
<input name="hobby" type="checkbox" value="cpp"/>rap
<input name="hobby" type="checkbox" value="cpp"/>篮球
</td>
</tr>
<tr>
<td>国籍：</td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn" selected="selected">中国</option>
<option value="usa">美国</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
11.其他标签
标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）
看下边：
span 标签1
span 标签2
p 段落标签1
p 段落标签2
你看这个像什么！
░░░░░░░░░░░▄▄
░░░░░░░░░░░█░█
░░░░░░░░░░░█░█
░░░░░░░░░░█░░█
░░░░░░░░░█░░░█
███████▄▄█░░░██████▄
▓▓▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓▓▓██████████████
HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）的更多相关文章
- Apache Shiro系列三，概述 —— 10分钟入门
一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...
- JavaScript 10分钟入门
JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...
- Markdown - Typora 10分钟入门 - 精简归纳
Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...
- kafka原理和实践（一）原理：10分钟入门
系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...
- [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作
前言 本人是服务端程序员,同时需要兼职前端开发.常用的就是原生态的HTML.Javascript,也用过ExtJS.Layui.可是ExtJS变公司后非常难用.Layui上手还行,用过一段时间,会觉得 ...
- [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用
前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...
- Webpack 10分钟入门
可以说现在但凡开发Single page application,webpack是一个不可或缺的工具. WebPack可以看做是一个模块加工器,如上图所示.它做的事情是,接受一些输入,经过加工产生一些 ...
- 「从零单排canal 01」 canal 10分钟入门（基于1.1.4版本）
1.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Servi ...
- 10分钟入门git简易教程
在注册了github账号之后,一度不知道该如何使用. 在仔细研究了github的官方说明文档.廖老师的教程.还有许多博主的文章之后,总算对github的操作和体系有了较为深刻的了解,还有这篇简单的入门 ...
随机推荐
- php--phpstorm使用正则匹配批量替换
1.首先勾选正则规则 如图勾选右侧的Match Case和Regex 2.编写正则规则:无须添加//左右分解符,直接写正则表达式,注意应该转义的部分,需要原封不动替换的部分加上括号 3.编写替换规则: ...
- python 函数--生成器
一.生成器函数: 常规定义函数,使用yield语句而不是return语句返回结果.yield语句一次返回一个结果. 好处在于,不会一下占用很多内存生成数据. 本质:就是一个迭代器. python中提供 ...
- Java Random 随机数
package myrandom; import java.util.Random; /* * Random:用于产生随机数 * * 使用步骤: * A:导包 * import java.util.R ...
- Python线程和协程CPU资源利用率测试
前言介绍 协程 ,又称为微线程,它是实现多任务的另一种方式,只不过是比线程更小的执行单元.因为它自带CPU的上下文,这样只要在合适的时机,我们可以把一个协程切换到另一个协程.通俗的理解: 在一个线程中 ...
- Java成长第四集--文本处理IO流
Java IO流在实际业务中使用的频率还是蛮高的,一些业务场景比如,文件的上传和导出,文件的读取等基本都是通过操作IO流来实现的,所以IO流是我们现在学习过程中必须要掌握的技能之一,熟练的使用IO流, ...
- Volatile不保证原子性（二）
Volatile不保证原子性 前言 通过前面对JMM的介绍,我们知道,各个线程对主内存中共享变量的操作都是各个线程各自拷贝到自己的工作内存进行操作后在写回到主内存中的. 这就可能存在一个线程AAA修改 ...
- java nio消息半包、粘包解决方案
问题背景 NIO是面向缓冲区进行通信的,不是面向流的.我们都知道,既然是缓冲区,那它一定存在一个固定大小.这样一来通常会遇到两个问题: 消息粘包:当缓冲区足够大,由于网络不稳定种种原因,可能会有多条消 ...
- x86汇编之栈与子程序调用
什么是栈 栈与普通数据结构所说的栈的概念是相似的,遵循后进先出原则.不同的是汇编中所说的栈是一个在内存中连续的保存数据的区域,也即是实际存在的内存区域,进栈和出栈遵循后进先出原则. 在x86架构中,栈 ...
- 如何用python爬虫从爬取一章小说到爬取全站小说
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...
- RxHttp ，比Retrofit 更优雅的协程体验
1.前言 Hello,各位小伙伴,又见面了,回首过去,RxHttp 就要迎来一周年生日了(19年4月推出),这一年,走过来真心....真心不容易,代码维护.写文章.写文档等等,经常都是干到零点之后,也 ...