HTML学习笔记
一、HTML是什么?
- HTML:超文本标记语言,用在前端,里面可以显示的文字、图片、语音、视频、超链接等。
- 是一种标记语言,不是编程语言。由一个个的标签组成。每个标签由特殊的含义,也叫标签语义化
二、骨架标签简介
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stage-frontWeb</title>
</head>
<body>
<p>这是第一个前端页面程序1</p>
</body>
</html>
<!DOCTYPE html>
文档类型申明标签,不是HTML标签的,只是用来声明运用的HTML版本。必须放在html文件的首行。<html></html>
根标签,这个标签在一个html文件中只有一个,用来组织其他标签。<head></head>
头部标签,用来定义网页的头部元素,是htm标签的下级标签。title
用来定义浏览器头部中显示的标题。<body></body>
用来定义网页内容的元素,是html标签的下级标签,与head标签同级。lang属性
用来声明浏览器是中文网页还是英文网页,或者其他语言的网页。放在head标签中使用charset字符集
用来声明浏览器使用的字符集编码,一般是utf-8
,这个标签很重要,未声明,浏览器会出现乱码现象。
三、常用标签
1、标题标签h1~h6
- 标题标签独占一行
- h1-->h6重要性一次递减
- 标题标签标记的字体会加粗,随着标签等级,加粗效果会不同。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签使用</title>
</head>
<body>
<h1>我是一个标题标签</h1>
<h2>我是一个标题标签</h2>
<h3>我是一个标题标签</h3>
<h4>我是一个标题标签</h4>
<h5>我是一个标题标签</h5>
<h6>我是一个标题标签</h6>
</body>
</html>
2、段落标签 p
与换行标签br
- 被p标签标记的文字会分成一段,段落雨段落之间有较明显垂直距离。
<br/>
换行标签是单标签也叫自闭合标签,作用是文本进行强制换行。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签与换行标签使用</title>
</head>
<body>
<p>文章包括各种文体的著作、作品,如诗歌、戏剧、小说、科学论文,记叙文、议论文、说明文、应用文等等。</p>"千古文章未尽才""文章千古事""文章憎命达""板凳要坐十年冷、文章不写一字空""积句而成章,积章而成篇""言出为论,下笔成章"等,都是现在所说的文章的意思。<br/>更广义的文章,也包含"学问""奥秘"等意思,如"洞明世事皆学问,人情练达即文章"就是。
</body>
</html>
3、div和span
- div和span标签没有语义,只是一个盒子,用来组织承载其他标签元素的容器,常用来布局使用。
- div标签独占一行,可以看做一个大的盒子。
- span标签是个小盒子,一行中可以有多个span标签。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div和span标签使用</title>
</head>
<body>
<div>我是一个div,我独自占一行</div>
<div>我是一个div,我独自占一行</div>
<div>我是一个div,我独自占一行</div>
<span>java</span>
<span>python</span>
<span>c++</span>
</body>
</html>
4、图像标签img
和路径(重点)
- img标签后必须接的属性是
src
,src="图片的路径和文件名"
,这个属性是必须的,属性值是图片的路径名与文件名。 - 图片标签是自闭合标签,
<img src=""/>
。 alt
属性,当图片显示失败是用来替换图片显示的文字或者其他提示信息。title
属性,当鼠标悬浮在图片上时的提示信息,对图片的解释说明。width
属性,设置图片的显示宽度。一般情况设置了宽度,高度就自动按照比例缩放,防止图片失真,所以宽度和高度一般设置一个就好了。height
属性,设置图片的显示高度。一般情况设置了高度,宽度就自动按照比例缩放,防止图片失真,所以宽度和高度一般设置一个就好了。border
设置图片的边框。这个一般使用css样式来解决,了解即可。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片标签使用</title>
</head>
<body>
<img src="img-01.png" alt="刘德华老师" title="刘德华" width="500" />
</body>
</html>
4-1、目录文件夹和根目录
- 我们双击打开的文件夹就是目录文件夹。
- 目录文件夹下的位置路径就是根目录路径。
4-2、相对路径(重点学习)
相对前对象来查看的一种路径查找方式,就叫相对路径。
-
如果被引用的资源与当前对象处于同一个路径下,就直接写引用的资源名就可以。
-
如果被引用的资源在当前对象路径的下级路径,则使用
/
来查找。 -
如果被引用的资源在当前对象的上级路径下,则使用
../
来查找。
4-3、绝对路径(了解即可)
- 从根路径下开始查找,一般不建议使用,因为每个人电脑上项目目录的路径不一定是相同的,用这个方式会出错。
5、超链接标签a
(重点)
5-1、语法格式
- href 属性是必填属性
- target属性默认是
_slef
,代表当前页面打开地址,另外一个是_blank
,代表新窗口中打开目标地址。
_self
:代表当前页面打开_blank
:代表新窗口中打开_top
:代表当前页面打开_parent
:代表当前页面打开
5-2、链接分类
5-2-1、外部链接
目标地址以http://
开始
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接标签使用</title>
</head>
<body>
<h2>外部连接使用</h2>
<a href="http://wwww.baidu.com" target="_blank">百度</a>
</body>
</html>
5-2-2、内部链接
网站内部之间相互跳转的链接,直接链接内部网站的网页路径名称即可。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>超链接标签使用</title>
</head>
<body>
<h2>内部链接</h2>
<a href="04-图片标签.html" target="_blank">图标刘德华</a>
</body>
</html>
5-2-3、空链接
开发中需要跳转,但是目标链接还没开发的时候使用,空链接,不跳转。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>超链接标签使用</title>
</head>
<body>
<h2>空链接</h2>
<a href="#" target="_blank">首页</a>
</body>
</html>
5-2-4、下载链接
如果href中地址是个文件或者压缩包,会下载这个文件。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>超链接标签使用</title>
</head>
<body>
<h2>下载链接</h2>
<a href="img-01.zip" target="_blank">下载</a>
<h2>网页元素链接</h2>
<a href="img-01.zip">
<img src="img-01.png" alt="下载文件" title="下载图片" width="500"/>
</a>
</body>
</html>
5-2-5、网页元素链接
任何的元素都可做链接文字:音频、图片、文字....
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>超链接标签使用</title>
</head>
<body>
<h2>网页元素链接</h2>
<a href="img-01.zip">
<img src="img-01.png" alt="下载文件" title="下载图片" width="500"/>
</a>
</body>
</html>
5-2-6、锚点链接
点击链接,快速定位到页面中的某个位置。
使用步骤
- 在连接文本的href属性中,设置属性值为
#名字
的形式,如:<a href='#two'>第2集</a>
- 找到目标位置的标签,里面添加一个id属性=刚才的名字,如:
<h3 id='two'>第2集介绍</h3>
6、注释标签和特殊字符
6-1、注释
- 可以用来对代码解释说明。
- 可以用来注释代码。
- 注释的部分不会留浏览器执行。
<!--我是注释标签的内容-->
6-2、特殊字符
- 空格
 
一个字符就是一个 
<
小于号 用<
>
大于号 用>
- .... 查文档api
7、表格标签table
表格不是用来布局的,是用来显示数据的,使数据排列的更加整齐、美观。
7-1、标签基本语法结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签使用</title>
</head>
<body>
<!-- table标签表示整个表格 -->
<table>
<!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
<tr>
<!-- td 表示表格的单元格数据,一个单元格对应一个td,td标签嵌入在tr标签中 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
</body>
</html>
7-2表格结构标签与表格头标签
7-2-1、表格头标签th
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格标签使用</title>
</head>
<body>
<!-- table标签表示整个表格 -->
<table>
<!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
<tr>
<!-- th标签与td差不多,只是被th修饰的,会加粗显示并居中,与表格其他字段数据突出显示头部的不一样。 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</table>
</body>
</html>
7-2-2、表格头部域thead
和表格主体区域tbody
为了更好对表格的结构做规划,区分头部和主体。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格标签使用</title>
</head>
<body>
<!-- table标签表示整个表单 -->
<table>
<!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
<!-- thead标签包裹头部的tr -->
<thead>
<tr>
<!-- th标签与td差不多,只是被th修饰的,会加粗显示并居中,与表格其他字段数据突出显示头部的不一样。 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!-- tbody标签包裹表格的主体标签 -->
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>57</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td>52</td>
</tr>
</tbody>
</table>
</body>
</html>
7-3、表格标签属性(了解)
- 表格标签的数据都是写在table标签中的。
- 表格标签的属性一般是用来美化表格的,但是一般采用CSS样式来美化,这里我们只是熟悉了解一下。
7-3-1、align属性
align属性:表格对周围元素的显示位置,属性值有 left/center/right。默认是left
7-3-2、border属性
border属性:规定表格是否有边框 ,默认是"",表示没有边框。如果要加边框可以是
border="2"
。
7-3-3、cellpadding属性
cellpadding属性:规定单元格边沿与内容之间 的距离,默认是1像素。如果要表示更大的距离的话,可以这样
cellpadding="20"
。
7-3-4、cellspacing属性
cellspacing属性:规定单元格之间 的距离,默认是2像素,如果要表示没有距离的话,可以这样
cellspacing="0"
。
7-3-5、width属性
width属性:规定表格的宽度。
7-3-6、height属性
height属性:规定表格的高度。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格标签使用</title>
</head>
<body>
<!-- table标签表示整个表单 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
<!-- tr表示行标签,一个tr代表一行 tr标签嵌在table中 -->
<!-- thead标签包裹头部的tr -->
<thead>
<tr>
<!-- th标签与td差不多,只是被th修饰的,会加粗显示并居中,与表格其他字段数据突出显示头部的不一样。 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!-- tbody标签包裹表格的主体标签 -->
<tbody>
<tr>
<td>刘德华</td>
<td>男</td>
<td>57</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td>52</td>
</tr>
</tbody>
</table>
</body>
</html>
7-4、合并单元格
7-4-1、合并单元格的方式
- 跨行合并
rowspan="合并单元格的个数"
- 跨列合并
colspan="合并单元格的个数"
7-4-2、目标单元格(写合并代码的)
- 跨行合并的方式:最上侧单元格为目标单元格,写合并代码。
- 跨列合并的方式:最左侧单元格为目标单元格,写合并代码。
7-4-3、合并单元格三步骤
- 先确定合并方式:跨行?还是跨列?
- 找到目标单元格,写上合并代码
- 删除多余的单元格。
8、列表标签
- 列表标签就是用来布局的。
- 有序列表,无序列表,自定义列表。
8-1无序列表ul
(重点)
8-1-1、语法结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
- 无序列表的各个列表项没有顺序之分,属于并列关系
<ul></ul>
标签中只能是<li></li>
标签,不可以有其他标签或者元素。<li></li>
标签相当于一个容器,里面可以嵌入任何一个元素。- 无序列表会带有自己的样式属性,但在实际开发中,我们都是使用css来处理样式的。
8-2、有序列表ol
(理解)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
有序列表的列表项是有顺序的。
<ol></ol>
标签中只能是<li></li>
标签,不可以有其他标签或者元素。
<li></li>
标签相当于一个容器,里面可以嵌入任何一个元素。有序列表会带有自己的样式属性,但在实际开发中,我们都是使用css来处理样式的。
8-3、自定义列表dl
(重点)
在html中,
<dl>
标签用于定义描述列表(或定义列表),该标签与<dt>
(定义项目/名字)和<dd>
(描述每一个项目/名字)一起使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>名词1</dt>
<dd>名词1的解释1</dd>
<dd>名词1的解释2</dd>
<dd>名词1的解释3</dd>
</ul>
</body>
</html>
<dl></dl>
里面只能包含<dt>和<dd>
。<dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
。
9、表单相关标签
网页中表单主要是为了收集用户信息。
9-1、表单的组成
表单组成包括:表单域、表单控件(也称为表单元素)和提示信息。
9-2、表单域form
在html中,表单域用标签
<form>
来定义,用来实现用户信息的收集和传递。<form>
标签范围内的表单元素信息提交到服务器。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="***.php" method="post" name="表单域的名称">
各种表单元素...
</form>
</body>
</html>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 指定接受并处理表单数据的服务器地址。 |
method | get/post | 设置表单向服务器提交数据的方式。 |
name | 名称 | 设置表单域的名称,用于区分页面中不同的表单域。 |
9-3表单控件(表单元素)
9-3-1、input输入表单元素
- 表单元素中
<input>
标签用于收集用户信息。<input>
标签中属性type
是必须的,根据不同的属性值,输入的文本元素有不同形式,可以是 文本、复选框、按钮等。- 语法格式为
<input type='属性值'/>
type属性值以及描述如下:
属性值 | 描述 |
---|---|
button | 定义可点击的按钮。 |
checkbox | 定义复选框。 |
file | 定义输入字段和"浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段,该字段中的密码被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮,用来清空表单中的数据。 |
submit | 定义提交按钮,提交按钮会把表单数据提交到服务器。 |
text | 定义单行的输入字段,默认宽度为20个字符。 |
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="***.php" method="post" name="表单域的名称">
用户名:<input type="text" value="请输入名字" name="username">
密码:<input type="password" name="pwd" >
</form>
</body>
</html>
属性name 定义表单元素的名称,用来区分其他表单元素。
属性 value 定义表单元素的值。
.... 其他属性可以查找相应的api文档学习。
9-3-2、select下拉表单
页面中,如果有多个选项让用户选择,并且想要节约页面空间,就可以使用
<select>
元素控件定义下拉列表。
语法结构
html
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
...
</select>
- 标签
<select>
中至少包含一对<option>
。- 在
<option>
中定义属性selected="selected"
时,当前项默认选中状态。
9-3-3、textarea文本域元素
当用户输入内容较多的情况下,使用文本域标签元素定义。
html
<textarea rows="3" cols="20">
文本内容
</textarea>
属性 rows="3" 代表三行显示。
属性 cols="20" 代表输入的字符个数。
9-3-4 label标签
<label>
标签为input元素定义标注。<label>
标签用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验。
语法结构
html
<!--label标签元素中 属性 for的值 与input标签中属性id的值必须一致,才可以完成绑定-->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />