01 HTML介绍

2022-01-02 11:13:22

1. HTML介绍

1.1 HTML是什么

HTML （Hyper Text Markup Language）表示超文本标记语言
HTML 文件是一个包含标记的文本文件，标记会告诉浏览器如何显示这个页面
HTML 文件的后缀名必须是htm或者html
HTML 文件可以用一个简单的文本编辑器创建

1.2 HTML标签解释

HTML文档中，第一个标签是<html>，这个标签会告诉浏览器这是HTML文档的开始。HTML文档的最

后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。在<head>和</head>标签之间

文本的是头信息。在浏览器窗口中，头信息是不被显示的。在<title>和</title>标签之间的文本是文

档标题，它被显示在浏览器窗口的标题栏。在<body>和</body>标签之间的文本是正文，会被显示在浏

览器中。

2. HTML标签

2.1 什么是HTML标签

HTML标签就是用不同的标签实现不同的功能

2.2 HTML标签的书写格式

一般标签都是成对出现的，比如：<body></body>，但是也有单独出现的，如：<br>
第一个标签表示开始，第二个表示结束
开始标签和结束标签之间的文本是内容
标签大小写无所谓

2.3 HTML标签的属性

标签可以拥有很多属性，属性能够为页面上的HTML元素提供附加属性

举例：

正常的主体标签是：
<body></body>

但是我现在想让页面的背景变成红色，那么可以这么样写：
<body bgcolor="red"></body>

再举个例子，我想创建一个表格，但是这个表格不希望他有边框，可以这样写: 
<table border="0"></table>

3. HTML基本标签

3.1 HTML基本标签组成

HTML中最重要的标签是定义标题元素，段落和换行的标签。

举个栗子：

<html>
  <body>
    我的第一个HTML网页
  </body>
</html>

3.2 标题元素

标题元素是由标签<h1>到h6定义
<h1>定义了最小的标题元素
<h2>定义了最大的标题元素

举个栗子：

<html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

3.3 段落

段落是用<p>标签定义的，HTML自动在一个段落前后各添加一个空行

举个栗子：

<html>
  <body>
    <p>这是第1段话</p>
    <p>这是第2段话</p>
    <p>这是第3段话</p>
    <p>这是第4段话</p>    
  </body>
</html>

3.4 换行

<br>会在网页上显示一个换行，无论在那都会强制换行

<html>
  <body>
	 第一行
    <br>
     换行啦啦啦
    <br>
  </body>
</html>

3.5 居中的标题

在标签中可以设置属性align="center"就会把标签的内容居中

<html>
	<body>
		<h1 align="center">这是居中的标题</h1>
		<p>这是一段文字,没什么意义,反正我也不知道自己在打什么哈哈哈</p>
	</body>
</html>

3.6 插入水平线

<hr>会在网页上显示一条水平线

<html>
	<body>
	下面是一条水平线		
    <hr>
  </body>
</html>

3.7 背景颜色

通过在标签中设置属性bgcolor="red"实现

<html>
	<body bgcolor="red">
    <h2>这是红色的背景！</h2>
	</body>
</html>

4. HTML格式

4.1 什么是HTML格式

HTML定义了很多的格式化输出 , 比如加粗斜体等

4.2 常用格式化

标签	功能
`<b></b>`	加粗
`<strong></strong>`	加粗
`<big></big>`	放大文本
`<small></small>`	缩小文本
`<i></i>`	倾斜
`<em></em>`	倾斜
`<sup></sup>`	上标
`<sub></sub>`	下标
`<s></s>`	删除线
`<del></del>`	删除线
`<u></u>`	下划线
`<ins></ins>`	下划线

4.3 格式化代码

<pre>标签会把文本内容是什么样就展示什么样

<html>
	<body>
		<b>预处理格式用来显示代码非常好</b>
		<pre>
            def func():
            	pass
		</pre>
	</body>
</html>

4.4 文本倒着输出

<bdo dir="rtl">必须设置dir属性为rtl

<html>
	<body>
		<bdo dir="rtl">
		这段文字是倒着的
		</bdo>
	</body>
</html>

5.HTML实体

5.1 什么是HTML实体

有些符号你是无法通过输入法打出来后在页面上正常显示的，这个时候就需要HTML实体来显示我们的

内容了

实体	解释
&nbsp	空格
&lt	小于
&gt	大于
&amp	and符合
&quot	引号

6. HTML链接

6.1 什么是HTML链接

就是通过点击链接跳转到其他页面或其他的网站 , 通常用<a>标签实现跳转 , 在<a>标签的herf属性

写上需要跳转的具体地址即可。

a标签的属性

href 要链接的地址
- 为空时表示一个空连接，代表自身
- #top代表回到顶部，我们可以定义一个空标签，来进行定位
```
<h6 id="top"></h6>
<a href="#top">回到顶部</a>
```
target 在哪里打开页面
- _self 当前页面（默认值）
- _blank 新的空白页
title 鼠标悬浮在标签上时现实的文字

6.2 跳转到其他本地文件

<!-- 前提是在当前目录下有下一页.html这个文件-->
<html>
  <body>
    <a href="下一页.html">点击跳转</a>到其他页面<br>
  </body>
</html>

6.3 跳转到其他网站

<html>
  <body>
    <a href="https://www.baidu.com">点击跳转</a>到其他网站<br>
  </body>
</html>

6.4 跳转到指定位置

<html>
  <body>
    <a href="#c3">点击跳转到第三章</a>
     <h1>第一章</h1>
     <h1>第二章</h1>
     <h1 id="c3">第三章</h1> <!--a标签也可以写name属性为c3-->
     <h1>第四章</h1>
     <h1>第五章</h1>
     <h1>第六章</h1>
  </body>
</html>

7. HTML框架

7.1 什么是HTML框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。
这样的HTML文档被称为框架页面，它们是相互独立的。

7.2 标签解释

frameset标签

1.<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小

frame标签

<frame>标签定义了每个框架中放入什么文件。

7.3 垂直分栏

<html>
<frameset cols="25%,75%">
	<frame src="index1.html">
	<frame src="index2.html">
</frameset>
</html>

0.通过cols的值进行分栏
1.第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。
2.页面“index1.html”被放在第一个分栏中，“index2.html”被放在第二个分栏中。

7.4 水平分

<html>
<frameset rows="25%,50%,25%">
	<frame src="index1.html">
	<frame src="index2.html">
    <frame src="index3.html">
</frameset>
</html>

0.通过rows的值进行分栏
1.第一个被设置成窗口高度的25％，第二个被设置成窗口高度的50％,第三个被设置成窗口高度的25％。
2.页面“index1.html”被放在第一个分栏中，“index2.html”被放在第二个分栏中,“index3.html”被放在第三个分栏中。

7.5 不可改动的分栏

<html>
<frameset rows="50%,50%">
    <!--noresize="noresize"设置分栏不可改动-->
	<frame noresize="noresize" src="frame_a.htm">
	<frameset cols="25%,75%">
		<frame noresize="noresize" src="frame_b.htm">
		<frame noresize="noresize" src="frame_c.htm">
	</frameset>
</frameset>
</html>

7.6 使用导航框架跳转到指定章节

index.html

<html>
<frameset cols="200,*">
	<frame src="frame_linksection.html">
	<frame src="frame_a.html" name="showframe">
</frameset>
</html>

frame_linksection.html

<a href ="frame_a.html" target ="showframe">Frame a</a><br>
<a href ="frame_b.html" target ="showframe">Frame b</a><br>
<a href ="frame_c.html" target ="showframe">Frame c</a><br>

frame_a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>aaaaa</h1>
</body>
</html>

frame_b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>bbbbbbbbbbb</h1>
</body>
</html>

frame_c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>cccccccccccc</h1>
</body>
</html>

8. HTML表格

8.1 什么是HTML表格

表格就是你认为的那个表格

table标签

tr标签，表示一行
- th标签，表示表头，会加粗
- td标签，表示表格数据

8.2 有边框的表格

<html>
  <body>
	<table border="1">
		<tr>
			<td>第1行第1列</td>
			<td>第1行第2列</td>
		</tr>
		<tr>
			<td>第2行第1列</td>
			<td>第2行第2列</td>
		</tr>
	</table>
	</body>
</html>

table属性：

border 设置表格边框
cellspacing 设置表格单元格间隔

9. HTML列表

9.1 什么是列表

HTML支持有序、无序和自定义列表。

9.2 无序列表

<html>
<body>
<h4>无序列表</h4>
<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ul>
</body>
</html>

无序列表属性type,改变列表项前端样式

circle 空心圆点
square 方块

9.3 有序列表

<html>
<body>
<h4>有序列表</h4>
<ol>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ol>
</body>
</html>

有序列表属性type,改变序号种类

默认为1，表示阿拉伯数字

10. HTML表单

10.1 什么是HTML表单

HTML表单用来选择不同种类的用户输入。用input标签显示输入框

input标签，输入框

input的属性：
- value属性，提交的数据的键值对中的值
- name属性，提交的数据的键值对中的键
- type属性，修改输入框的种类
  - text 文本输入框
  - password 密码输入框
  - submit 提交按钮，会提交表单。默认按钮上的文字为提交，可通过input的value属性修改
  - radio 单选框，几个单选框起相同的name，表示为一组，互斥。添加checked属性表示默认选中
  - checkbox 多选框，添加checked属性表示默认选中
  - datetime-local 日期框
  - file 上传文件选择框
label标签，和input输入框进行关联。label的for属性的值和input的id值相同，两个标签会产生关联，点击label标签，输入框也会聚焦

10.2 文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username">
    </p>
    <p>
        <label for="phonenum">手机号:</label>
        <input type="password" id="phonenum">
    </p>
</form>
</body>
</html>

10.3 密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form action="">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username" name=‘username‘>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name=‘password‘>
    </p>
</form>
</body>
</html>
<!-- 表单提交的数据是username="用户输入的账号"和password="用户输入的密码"-->

10.4 单选按钮

<form>
	<input type="radio" name="sex" value="male">男
	<br>
	<input type="radio" name="sex" value="female">女
</form>

10.5 复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
	<input type="checkbox" name="bike" checked="">自行车 默认选中
	<br>
	<input type="checkbox" name="car">小汽车
	<input type="checkbox" name="big">大汽车
</form>
</body>
</html>

10.6 下拉框

select标签，下拉列表，内部包裹option标签表示下拉选项。默认选中selected。可以通过设置multiple属性多选

下拉列表。

<html>
<body>
<form action="" method="" enctype="application/x-www-form-urlencoded">
    <select name="gender" id="">
        <option value="male">男</option>
        <option value="female">女</option>
    </select>
</form>
</body>
</html>

10.7 文本框

<html>
<body>
    <p>下面是一个文本输入框</p>
    <textarea rows="10" cols="30">请输入你的内容</textarea>
</body>
</html>

10.8 按钮

按钮的文本内容就是input标签的value值

<html>
<body>
<form>
    <input type="button" value="点我一下">
</form>
</body>
</html>

01 HTML介绍

码农公寓

1. HTML介绍

1.1 HTML是什么

1.2 HTML标签解释

2. HTML标签

2.1 什么是HTML标签

2.2 HTML标签的书写格式

2.3 HTML标签的属性

3. HTML基本标签

3.1 HTML基本标签组成

3.2 标题元素

3.3 段落

3.4 换行

3.5 居中的标题

3.6 插入水平线

3.7 背景颜色

4. HTML格式

4.1 什么是HTML格式

4.2 常用格式化

4.3 格式化代码

4.4 文本倒着输出

5.HTML实体

5.1 什么是HTML实体

6. HTML链接

6.1 什么是HTML链接

6.2 跳转到其他本地文件

6.3 跳转到其他网站

6.4 跳转到指定位置

7. HTML框架

7.1 什么是HTML框架

7.2 标签解释

7.3 垂直分栏

7.4 水平分

7.5 不可改动的分栏

7.6 使用导航框架跳转到指定章节

8. HTML表格

8.1 什么是HTML表格

8.2 有边框的表格

9. HTML列表

9.1 什么是列表

9.2 无序列表

9.3 有序列表

10. HTML表单

10.1 什么是HTML表单

10.2 文本框

10.3 密码框

10.4 单选按钮

10.5 复选框

10.6 下拉框

10.7 文本框

10.8 按钮

相关文章