为什么要学习HTML，学习HTML可以用来做什么？<详情猛戳>
通过链接了解对html的一些简单的认识，那么先简单概述一下
HTML概念
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
- HTML文档通过web浏览器来解析,显示所写内容
- HTML文档的后缀名一般是.html(推荐)
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如<br/>换行 <hr/> 下划线 <input /> <img />
|
1
|
<标签>内容</标签> |
HTML标签属性
- 通常是以键值对形式出现的. 例如 name="alex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
<!DOCTYPE>标签声明
- <!DOCTYPE>声明有助于浏览器中正确显示网页。
- 网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
- doctype 声明是不区分大小写的
上述对HTML有了一些简单的认识,那么可以看一下简版html文档树形结构图(如图参考)
由图可得,根元素html分为俩部分元素head和元素body,又基于这俩部分进行一些甚至更多的拓展
又例如在IDE工具pycharm新建一个html文件,可以看到pycharm会为这个文件默认添加一些内容,即必须要有的。
接下来对head和body这俩部分进行阐释
head标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
如图可得head标签下面有俩条内容,那么它们是什么呢?
下面这些标签可用在 head 部分(详情可点击)：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
提示：应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签或 <frameset> 标签之前。
提示：请记住始终为文档规定标题！
如题,下面代码简单阐释了下head头部信息的一些标签(当然还有其它的)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html> # 声明<html lang="en"> <head> # 头部信息,包含的数据并不会真正作为内容显示给用户 <meta charset="UTF-8"> # 如果有中午,设定一下编码格式 <title>病毒尖er</title> # 标题描述 <!--<meta http-equiv="Refresh" content="2;url=https://www.baidu.com">--> # 此代表刷新的概念,即过俩秒跳转到指定的url <meta http-equiv="Refresh" content="2"> # 即每俩秒自动刷新 <meta name="keywords" content="管道工,超级马里奥"> # 搜索关键词 <meta name="description" content="马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色"> # 描述内容 <link rel="icon" href="马里奥.ico"> # 标题图片</head><body> # body标签里面所包含是真正呈现给用户的数据 <h1 style="color: chartreuse">我是修水管的马里奥</h1> </body></html> |
body标签
所有标签统分为 块级和内联
块级标签
HTML块级通过标签<div>来定义,以上标签可以称之为块级标签
注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
提示：请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。
内联标签
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike><del>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span>
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
特殊符号有很多很多,例如 < 小于 > 大于 © 版权,更多点击
标题
HTML标题通过标签<h1>-<h6>来定义
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
|
1
2
3
4
5
6
7
8
|
<body> <h1 style="color: chartreuse">我是修水管的马里奥</h1> <h2>我</h2> <h3>我</h3> <h4>我</h4> <h5>我</h5> <h6>我</h6></body> |
注释: 浏览器会自动地在标题的前后添加空行。
换行
换行的方式有俩种<p>和<br>
<p>(段落换行)有俩个作用换行和隔行 定义一个段落
|
1
2
3
4
5
6
|
<body> <h1 style="color: chartreuse">我是修水管的马里奥</h1> <p>我靠吃蘑菇成长</p> <p>特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子.</p> <p>与我的双胞胎兄弟路易基一起，我们长年担任任天堂的招牌角色.</p></body> |
<br>只是单纯的换行
|
1
2
3
4
5
6
|
<body> <h1 style="color: chartreuse">我是修水管的马里奥</h1> <br/>我靠吃蘑菇成长 <br/>特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子. <br/>与我的双胞胎兄弟路易基一起，我们长年担任任天堂的招牌角色.</body> |
如图
水平线
HTML水平线通过标签<hr>来定义
|
1
2
3
4
|
<body> <h1 style="color: chartreuse">我是修水管的马里奥</h1> <hr/></body> |
注释
HTML注释通过标签<!--被注释标签-->
|
1
|
<!--<h1 style="color: chartreuse">我是修水管的马里奥</h1>--> |
链接
HTML 链接通过标签 <a> 来定义
|
1
|
<a href="http://www.cnblogs.com/leguan1314">病毒尖er博客</a> |
|
1
|
<a href="http://www.cnblogs.com/leguan1314" target="_blank">病毒尖er博客</a> 在新的标签页中打开 |
上面叙述的是文本超链接,也可以通过图像进行点击超链接(如题,就可以通过1.jpg这张图像可以访问到百度的主页)
|
1
2
3
4
5
6
7
8
|
<body><p>您也可以使用图像来作链接：<a href="https://www.baidu.com"><img border="0" src="1.jpg"/></a></p></body> |
<a></a>也有另外一个作用,锚的概念
例如链接到同一页面的某个位置(也可以通过一个箭头返回顶部的图像返回页面顶部)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<body><p><a href="#C4">查看 Chapter 4。</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter 10</h2><p>This chapter explains ba bla bla</p><h2>Chapter 11</h2><p>This chapter explains ba bla bla</p><h2>Chapter 12</h2><p>This chapter explains ba bla bla</p><h2>Chapter 13</h2><p>This chapter explains ba bla bla</p><h2>Chapter 14</h2><p>This chapter explains ba bla bla</p><h2>Chapter 15</h2><p>This chapter explains ba bla bla</p><h2>Chapter 16</h2><p>This chapter explains ba bla bla</p><h2>Chapter 17</h2><p>This chapter explains ba bla bla</p></body> |
图像
HTML 图像通过标签 <img> 来定义
|
1
|
<img src="logo.jpg" width="120" height="60" /> |
- img 表示创建一个图片对象
- src 表示图片的路径
- width 图片的宽度
- height 图片的高度
- alt 图片没有加载成功的提示
- title 鼠标悬浮时的提示信息(当然还有其它的属性)
表单标签(form)
HTML表单通过标签<form>来定义
input，可以理解为输入属性，input属性type="如下"
- text 文本输入
- password 密文输入
- checkbox 多选框
- radio 单选框
- file 上传文件，form表单需要加上属性enctype="multipart/form-data"
- reset 重置;即所填写的内容进行清空操作
- submit 提交按钮
- button 按钮;需要配合js使用
input类型补充(以下属性被设置在input类型中)
- name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在cssjavascript中使用的
- value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同
- checked: radio 和 checkbox 默认被选中
- readonly: 只读. text 和 password
- disabled: 对所用input都好使.
select，即下拉框
- mutiple 多选
- size 显示在页面的最大限制
- name 提交项的键 以上三个属性为select内的属性
- option下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
- optgroup 为每一项加上分组
textarea，即文本编辑框
- name: 表单提交项的键. 文本框内容即为提交的值
- cols: 文本域默认有多少列
- rows: 文本域默认有多少行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data"> <h1 style="color: chartreuse">欢迎加入博客园</h1> 用户 <input type="text" placeholder="手机号/邮箱/用户名"><br><br> 密码 <input type="password" placeholder="密码"><br><br> 喜好 音乐<input type="checkbox"> 电影<input type="checkbox"><br><br> 性别 男<input type="radio" name="sex" value="boy"> 女<input type="radio" name="sex" value="girl"> <p><input type="file" name="filename"></p> <input type="button" value="注册"> <input type="submit" value="注册"> <input type="reset" value="重置"><br><br> 山西省 <select name="sx" id="" size="1" multiple> <optgroup label="山西省"> <option value="jc">晋城</option> <option value="ll">吕梁</option> <option value="dt">大同</option> <option value="ty">太原</option> <option value="cz">长治</option> <option value="jz">晋中</option> <option value="yc">运城</option> <option value="gp">高平</option> </optgroup> </select> 个人简历 <textarea name="desc" cols="30" rows="10">个人简历</textarea> </form> </body> </html>
html一些其它标签、表格标签、列表标签 更多猛戳
更新中......