目录
一、简介
1.什么是HTML
HTML叫做超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
2.什么是CSS
CSS是层叠样式表,是一种表示HTML文件样式的计算机语言,CSS 使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性
3.什么是JavaScript
JavaScript简称JS,是一种***解释型脚本***语言,在HTML主要用于添加交互动作
二、HTML基础内容
1.基本标签
(1)html标签
<html>标签告知浏览器这是一个 HTML 文档,<html>标签是 HTML 文档中最外层的元素
(2)head标签
<head>标签式所有头部元素的容器,必须包含文档的标题(title),可以包含脚本(script)、样式(css)、meta 信息
内部标签 | 说明 |
---|---|
meta | 提供了 HTML 文档的元数据 |
title | 定义文档的标题,在所有 HTML 文档中是必需的 |
style | 内部样式,定义 HTML 文档的样式信息。 |
link | 外部样式,链接样式表。 |
script | 包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。 |
对此只需要了解就可,前期只需要用到<style>和<link>标签
2.标题、段落及文本标签
(1)标题标签
<h1> 定义最大的标题。 <h6> 定义最小的标题。
下面展示 h1~h6标签代码
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题</title>
</head>
<body>
<h1>这是第一标题</h1>
<h2>这是第二标题</h2>
<h3>这是第三标题</h3>
<h4>这是第四标题</h4>
<h5>这是第五标题</h5>
<h6>这是第六标题</h6>
</body>
</html>
(2)段落标签
<p>是块级元素,显示一个段落
下面展示段落标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题</title>
</head>
<body>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
<p>这是第四个段落</p>
<p>这是第五个段落</p>
</body>
</html>
(3)文本标签
标签 | 说明 |
---|---|
b | 定义粗体文本 |
em | 定义着重文字 |
i | 定义斜体字 |
samll | 定义小号字 |
strong | 定义加重语气 |
sub | 定义下标字 |
suq | 定义上标字 |
del | 定义删除字 |
下面展示 文本标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标题</title>
</head>
<body>
<p>
<b>这是一段粗体文本</b>
</p>
<p>
<em>这是着重文字</em>
</p>
<p>
<i>这是一段斜体字</i>
</p>
<p>
<small>这是一段小号字</small>
</p>
<p>
<strong>这是一段加重语气</strong>
</p>
<p>
这是一段<sub>下标字</sub>
</p>
<p>
这是一段<sup>上标字</sup>
</p>
<p>
<del>这是一段删除字</del>
</p>
</body>
</html>
3.常用块元素和行内元素
(1).块状元素
块级元素会独占一行,其宽度自动填满其父元素宽度
块级元素可以设置 width, height属性
块级元素即使设置了宽度,仍然是独占一行的
常见的块级元素
标签 | 描述 |
---|---|
div | 定义文档中的节 |
p | 定义段落 |
h1-h6 | 定义HTML标题 |
form | 定义供用户输入的 HTML 表单 |
table | 定义表格 |
li | 定义列表的项目 |
ol | 定义有序列表 |
(2).行内/内联元素
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
行内元素设置width, height无效
常见的行内元素
标签 | 描述 |
---|---|
span | 定义文档中的节 |
lable | 定义 input 元素的标注 |
a | 定义锚 |
input | 定义输入控件 |
img | 定义图像 |
4.列表
(1)常见的三种列表
有序列表
标签 | 描述 |
---|---|
ol | 定义有序列表 |
li | 定义列表项 |
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
</head>
<body>
<ol>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
<li>这是一个有序列表</li>
</ol>
</body>
</html>
无序列表
标签 | 描述 |
---|---|
ul | 定义无序列表 |
li | 定义列表项 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
</head>
<body>
<ul>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
<li>这是一个无序列表</li>
</ul>
</body>
</html>
自定义列表
标签 | 描述 |
---|---|
dl | 定义列表 |
dt | 自定义列表项目 |
dd | 定义自定列表项的描述 |
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
</head>
<body>
<dl>
<dt>我的电脑</dt>
<dd>C盘</dd>
<dd>D盘</dd>
<dd>E盘</dd>
<dt>控制面板</dt>
<dd>防火墙</dd>
<dd>管理工具</dd>
<dd>默认程序</dd>
</dl>
</body>
</html>
5.表格
标签 | 描述 |
---|---|
table | 定义表格 |
th | 定义表格的表头 |
tr | 定义表格的行 |
td | 定义表格单元 |
caption | 定义表格标题 |
colgroup | 定义表格列的组 |
col | 定义用于表格列的属性 |
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table border="2">
<caption >表格标题</caption>
<th>表头1</th>
<th>表头2</th>
<tr>
<td>行1,列1</td>
<td>行2,列2</td>
</tr>
<tr>
<td>行2,列1</td>
<td>行2,列2</td>
</tr>
</table>
</body>
</html>
6.图像
图像标签img是一个自闭合标签,常用的有三个属性
属性 | 描述 |
---|---|
src | 规定显示图像的 URL,就是图像的文件地址 |
alt | 规定图像的替代文本,就是图像不显示的时候显示的文字 |
title | 鼠标移到图片上的提示文字 |
插入图片代码
<img src="图像文件地址" alt="图像显示不出来的文字" title="鼠标移到图片上的文字">
图像地址有相对路径与绝对路径之分
请自行搜寻理解
7.链接
<a href="链接地址" target="链接窗口打开方式">链接文本</a>
target属性 | 描述 |
---|---|
_self | 默认方式,即在当前窗口打开链接 |
_blank | 在一个全新的空白窗口中打开链接 |
_top | 在顶层框架中打开链接 |
_parent | 在当前框架的上一层里打开链接 |
一般情况:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线
8.表单
常用表单标签:
标签 | 描述 |
---|---|
form | 定义供用户输入的表单 |
input | 定义输入域 |
textarea | 定义文本域 (一个多行的输入控件) |
select | 定义了下拉选项列表 |
option | 定义下拉列表中的选项(配合select 使用) |
(1)input标签
input代码描述
<input type="表单类型" value="值" name="命名">
属性 | 说明 |
---|---|
text | 单行文本框 |
password | 密码文本框 |
button | 按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
image | 图像提交按钮 |
radio | 单选按钮 |
checkbox | 复选框 |
hidden | 隐藏字段 |
file | 文件上传 |
(2)textarea标签
<textarea rows="10" cols="30"></textarea>
属性 | 说明 |
---|---|
cols | 规定文本区域内可见的宽度 |
rows | 规定文本区域内可见的行数 |
name | 规定文本区域的名称 |
placeholder | 规定一个简短的提示,文本区域期望的输入值 |
maxlength | 规定文本区域允许的最大字符数 |
(3)select标签
select和option标签配合使用
select标签代码
<select>
<option value="">选项1</option>
<option value="">选项2</option>
<option value="">选项3</option>
<option value="">选项4</option>
</select>
属性 | 说明 |
---|---|
autofocus | 规定在页面加载时下拉列表自动获得焦点 |
disabled | 当该属性为 true 时,会禁用下拉列表 |
multiple | 当该属性为 true 时,可选择多个选项 |
name | 定义下拉列表的名称 |
required | 用户在提交表单前必须选择一个下拉列表中的选项 |
size | 规定下拉列表中可见选项的数目 |