HTML
为什么要学习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一些其它标签、表格标签、列表标签 更多猛戳
更新中......