HTML快速讲解

什么是HTML

HTML(Hyper Text Marked Language)称为超文本标记语言,是一种标识性的语言。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。百度百科

HTML是网页的骨架,是开始学习制作网页的第一步,它是由一堆标签组合起来的

必需了解

  • 每个标签都要有开始和结束,如:
    • <p></p><p>为开标签,</p>为闭标签,这种用于中间需要插入数据的标签,可以对插入的数据产生效果
    • <br/> 这个的开始和结束写到了一起,用于不会对文本产生效果的标签;这里的这个标签意思为换行,不会对文本产生效果
  • 有时候忘记写关闭标签了也不会报错,浏览器会自动解析,但是真正写项目不能忘
  • 文件名后缀为.html.htm
  • 在文本上打多个空格时,html会自动将其变为一个;后面会说如何打多个空格
  • html不区分大小写: 比如上面的<br/><BR/>效果一样,但是一般建议小写
  • 注释: <!--注释内容-->

块元素和行内元素

简单了解,下面会详细介绍

后期可通过css把这两个互换

  • 行内元素(内联元素):
    • 和其他元素都在一行上
    • 高度、行高和顶以及底边距都不可改变
    • 宽度就是它的文字或图片的宽度,不可改变
  • 块元素
    • 总是在新行上开始,占据一整行
    • 高度,行高以及外边距和内边距都可控制
    • 宽度始终是与浏览器宽度一样,与内容无关
    • 它可以容纳内联元素和其他块元素

基本定义参考自百度百科

  • 基本的行内元素有:<a><b><em><i><u>……
  • 基本的块元素有: <p><div><span><h1>~<h6>……

基本文件结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
这是内容主体
</body>
</html>
  • <!DOCTYPE html>: 代表该文档使用html编写
  • <html lang="en"></html>: 所有的文件都写在这个标签的内部,lang="en"可以删除,不删除也可以写中文,只是让浏览器是否显示翻译为en则翻译
  • <head></head>: 网页头部信息
  • <meta charset="UTF-8">: 使用UTF-8编码
  • <title>HTML</title>: 网页标题
  • <link rel="stylesheet" href="style.css">: 引入css文件
  • <body></body>: 网页主体信息,我们主要修改这个地方

常用的标签

标题标签

只有六级,如果定义了其他级的,就会被复原成普通文本大小

1
2
3
4
5
6
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

效果:
标题

常用的没有实际意义的标签

没有实际意义,就是不会产生效果

  • <p>标签,段落标签,是块元素,常用于定义一个段落,方便对那一个段落进行操作
  • <div>标签,对文档里的一个部分进行定义,是块元素,方便对那一个部分进行操作,也可以使逻辑更加清晰
  • <span>标签,定义文档的里的某一部分,是行内元素,比如对一段话中的两个字使用<span>就可以单独对那两个字进行操作
1
2
3
4
5
<!--常用操作-->
<div>
<p>这是一个段落</p>
<p>这是<span>第二</span></p>
</div>

效果:


这是一个段落

是第二段


其他

标签名 介绍
<header> 头部信息
<nav> 导航栏
<aside> 侧边栏
<main> 内容区域
<footer> 底部信息
<article> 文章详情
<section> 页面分区

特殊标签

1
2
3
4
5
这是换行<br/>标签

这是
<hr/>
分割线标签

效果:


这是换行
标签

这是


分割线标签

文本样式标签

这些均可以用css实现

name 用法
<b> 加粗
<i> 斜体
<sub> 下标
<del> 删除线
1
2
3
4
5
<b>这是加粗的文本</b><br />
<i>这是斜体</i><br />
带下标 X<sub>3</sub><br />
<del>带删除线</del><br />
带上标 X<sup>2</sup>

效果:


这是加粗的文本

这是斜体

带下标 X3

带删除线

带上标 X2


列表标签

  • <ul>无序列表
  • <ol>有序列表
1
2
3
4
5
6
7
8
9
10
11
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<br />
<ul>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ul>

效果:


  1. 列表项1
  2. 列表项2
  3. 列表项3

  • 列表项4
  • 列表项5
  • 列表项6

超链接标签

用于从一个网页跳转到另一个网页

1
<a href="http://www.baidu.com/" target="_blank">点我跳转到百度</a>
  • href:用于指定跳转到的网页
  • target:指定打开该网页的方式
    • _blank:在一个新的标签页上打开
    • _self: 在当前标签页打开

效果:


点我跳转到百度


媒体标签

1
2
3
4
5
6
7
8
<!--图片标签-->
<img src="Test.png"/>

<!--视频标签-->
<video src="Test.mp4" controls>如果浏览器不支持,将显示这段话</video>

<!--音频标签-->
<audio src="Test.mp3" controls>如果浏览器不支持,将显示这段话</audio>
  • src:图片/视频/音频文件地址,可以用本地的或者网上的
  • controls: 向用户显示一个播放按钮,可更换为
    • autoplay: 视频/音频在就绪后马上播放
    • loop: 每当播放结束后重新开始播放
    • muted: 音频/音频默认为静音播放

没有音视频,所以不演示了

表格

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
<table align="center" border="1px" width="400px" height="200px">
<thead>
<tr>
<th >1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
</thead>

<tfoot>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tfoot>

<tbody>
<tr>
<td colspan="2">3-1</td>
<td>3-2</td>
</tr>
<tr>
<td rowspan="2">4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
<tr>
<td>5-2</td>
<td>5-3</td>
</tr>
</tbody>

</table>
  • <table>:说明我们要定义的是表格
    • border:css样式,定义边框
    • width和height:定义高和宽
    • align: 相对于周围元素的对齐方式,可取值有:
    • center:居中
    • left: 左对齐
    • right: 右对齐
  • <thead>:表格头部,不管是否在最上面定义,都会把这个标签中的内容放到第一行
  • <tbody>:表格体,主要内容
  • <tfoot>: 表格脚部,会把这个标签下的所有内容放到最后一行
  • <tr>: 定义一行
  • <th>: 用于定义头部的元素,会加粗显示
  • <td>: 用于定义每一个表格中的元素
  • colspan: 元素跨列,从左往右,不可从右往左
  • rowspan: 元素跨行,从上往下,不可从下往上

效果:


1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2
4-1 4-2 4-3
5-2 5-3

表单

用于收集用户数据

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
58
59
60
61
<!--这里用了表格的一些标签帮助美化表单-->
<form action="www.hellowar.club" method="post">
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" value="默认输入" name="username"/></td>
</tr>

<tr>
<td>密码:</td>
<td><input type="password" name="password"/></td>
</tr>

<tr>
<td>确认密码:</td>
<td><input type="password"/></td>
</tr>

<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked" value="boy"/>
<input type="radio" name="sex" value="girl"/>
</td>
</tr>

<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" value="java" name="hobby"/>Java
<input type="checkbox" value="c" name="hobby"/>C
<input type="checkbox" value="js" name="hobby"/>JavaScript
</td>
</tr>

<tr>
<td>国籍:</td>
<td>
<select name="county">
<option selected="selected" value="null">—请选择国籍—</option>
<option value="China">中国</option>
<option value="Japan">日本</option>
<option value="USA">美国</option>
</select>
</td>
</tr>

<tr>
<td>自我评价</td>
<td>
<textarea rows="10" cols="20" name="docs">这里是默认值</textarea>
</td>
</tr>

<tr>
<td><input type="reset"/></td>
<td><input type="submit"/></td>
</tr>

</table>
</form>
  • <from>:表单标签
    • action : 设置服务器提交地址
    • method : 设置提交方式
    • get : 把数据直接添加到网址后,传输给服务器,通过查看网址可以看到数据,不安全,且传输数据量小(默认)
    • post : 将表单数据附加到 HTTP 请求的 body 内,不显示数据,较安全,且数据量没有限制
  • <input type="">:type等于的值可以写为以下的
    • text : 单行文本输入框
    • password : 密码输入框,输入密码可自动隐藏
    • radio : 单选框
    • 必须要统一name的值
    • checkbox : 多选框
    • reset : 重置按钮,不设置value时默认显示为重置
    • submit : 提交按钮,不设置value时默认显示为提交
    • button : 按钮,默认无文字显示

从这里往上的定义的value的值均为输入框的默认值或按钮显示的文字


  • <input type="">
    • file : 选择文件
    • hidden : 隐藏域,不可见,针对开发者使用
  • <select>: 下拉列表框
    • <option>: 下拉列表框中的选项
    • selected="selected" : 设为默认选中
    • value : 上传数据时的标识
  • <textarea>: 多行文本输入框
    • rows : 输入框的显示的行数
    • cols : 输入框显示的列数

表单没有正确提交给服务器的原因:

  • 没有设置name属性,只有表单中的项设置name属性后才能传给服务器
  • 单选、复选、下拉列表项都应该value属性,以便于发给服务器后做识别
  • 表单项不在<from>标签中

效果:


表单

iframe内联框架

在一个网页中显示另一个网页,不常用

1
<iframe src="http://www.baidu.com" width="300px" height="300    px"></iframe>

效果:



转义字符

字符 转义字符
空格 &nbsp;
<
>

很多请看字符对照表

HTML实例

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
<!DOCTYPE html>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<nav>
<a href="/">首页</a>
<a href="/about/index.html">关于</a>
<nav>
<header>
头部信息,欢迎来到我的博客
</header>
<aside>
侧边栏
</aside>
<main>
<section>
<article>这是一篇博客</article>
</section>
<section>
<div>
<p>这是一些描述</p>
<p>不知道写啥</p>
</div>
</section>
</main>
<footer>
底部信息
</footer>
</body>
</html>

效果:


Test

差不多就这样了~

评论