注:本文根据黑马前端视频学习而来。
一、什么是 HTML?
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言
- 是一套标记标签 (markup tag) HTML
- 使用标记标签来描述网页
二、常见的浏览器
浏览器 | 内核 | 备注 | 浏览器名称 |
---|---|---|---|
IE | Trident | E、猎豹安全、360极速浏览器、百度浏览器 | IE浏览器 |
Firefox | Gecko | 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友 flash、神一样的对手chrome。 | 火狐浏览器 |
Chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心), 内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大 部分国产浏览器最新版都采用Blink内核。二次开发 | 谷歌浏览器 |
Safari | Webkit | 从Safari推出之时起,它的渲染引擎就是Webkit,一提到 webkit,首先想到的便是 chrome,可以说,chrome 将 Webkit内核 深入人心,殊不知,Webkit 的鼻祖其实是 Safari。 | Safari浏览器 |
Opera | Blink | 现在跟随chrome用blink内核。 | 欧朋浏览器 |
三、Web标准
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色、大小等) |
行为 | JavaScript | 网页模型 |
四、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词。
HTML 标签通常是成对出现的。
标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。
1、排版标签
<!-- 标题标签 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!-- 段落标签 -->
<p></p>
<!-- 换行标签 -->
<br>
<!-- 水平线标签 -->
<hr>
2、文本格式化标签
<!-- 文本格式化标签 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
<code>电脑自动输出</code><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
3、图片标签
<!-- 图片标签 -->
<img src="image.jpg" alt="图片加载失败时,才会显示的替换文本" title="当鼠标悬停时才显示的提示文本" width="宽度" height="高度">
4、路径问题
4.1、绝对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径或者网络地址。
src=“F:\前端学习笔记\1.jpg”
4.2、相对路径
同级目录:当前文件和目标文件在同一目录下
src=“1.jpg”
src="./1.jpg"
上级目录:目标文件在下级目录中(1.jpg在images文件夹里面)
src=“images/2.jpg”
src="./images/2.jpg"
上级目录:目标文件在上级目录中(html文件在page文件夹里面)
src="…/3.jpg"
5、音频标签
<!-- 音频标签 -->
<audio src="../music.mp3" controls autoplay loop></audio>
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
6、视频标签
<!-- 视频标签 -->
<video src="../video.mp4" controls autoplay muted loop></video>
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需要配合muted实现静音播放) |
loop | 循环播放 |
muted | 静音 |
7、链接标签
7.1、超链接
<!-- 链接标签 -->
<a href="http://www.baidu.com" target="_blank">超链接</a>
<a href="./index.html">超链接</a>
特点:
a标签存在默认下划线
a标签未点击过,默认文字显示蓝色
a标签点击过之后,文字显示紫色(清除浏览器历史记录可恢复蓝色)
target属性:
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
7.2、空链接
<!-- 空标签 -->
<a href="#">空链接</a>
点击之后回到网页顶部
开发中不确定该链接最终跳转位置,用空链接占个位置
8、列表标签
8.1、有序列表
<!-- 有序列表 -->
<!-- ol表示有序列表的整体 -->
<!-- li表示有序列表的每一项 -->
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ol>
标签组成:
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表的每一项,用于包含每一行的内容 |
显示特点:
列表的每一项前默认显示序号标识
注意点:
ol标签只允许包含li标签
li标签可以包含任意标签
8.2、无序列表
<!-- 无序列表 -->
<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项 -->
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
标签组成:
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
显示特点:
列表的每一项前默认显示圆点标识
注意点:
ul标签只允许包含li标签
li标签可以包含任意标签
8.3、自定义列表
<!-- 自定义列表 -->
<!-- dl表示自定义列表的整体 -->
<!-- dt表示自定义列表的主题(标题) -->
<!-- dd表示自定义列表中的每一项解释说明 -->
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
标签组成:
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
显示特点:
dd前会默认显示缩进效果
注意点:
dl标签只允许包含dt/dd标签
dt/dd标签可以包含任意标签
9、表格标签
基本标签:
标签名 | 说明 |
---|---|
table | 表示整体,可用于包裹多个tr |
tr | 表示每行,可用于包裹td |
td | 表示单元格,可用于包裹内容 |
注意点:
标签的嵌套关系:table > tr > td
常见相关属性:
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
其他标签:
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并且居中显示 |
注意点:
caption标签书写在table标签内部
th标签书写在tr标签内部
结构标签:
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
注意点:
表格结构标签内用于包裹tr标签
表格的结构标签可以省略
合并单元格:将水平或垂直多个单元格合并成一个单元格
上下合并,只保留最上的,删除其他
左右合并,只保留最左的,删除其他
给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
注意点:
只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead,tbody,tfoot)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--border表示边框的宽度-->
<!--width表示表格的宽度-->
<!--height表示表格的高度-->
<!--caption:表格整体的大标题-->
<!--th:表头单元格,表格一列的小标题-->
<!--thead:表示表格的头部-->
<!--tbody:表格表格的主体-->
<!--tfoot:表格表格的底部-->
<table border="1" width="300" height="300">
<caption><h3>学生成绩单</h3></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100</td>
<td>真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<!-- <td>100</td>-->
<td>真漂亮</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
<!-- <td>郎才女貌</td>-->
</tr>
</tfoot>
</table>
</body>
</html>
10.表单标签:
input系列标签:可以通过type属性值得不同,展示不同效果
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于之后上传文件 |
input | submit | 提交按钮,用于提交 |
input | reset | 重置按钮,用于重置 |
input | button | 普通按钮,默认无功能,之后配合js添加功能 |
属性名 | 说明 |
---|---|
placeholder | 占位符。提示用户输入内容的文本 |
value(延伸) | 用户输入的内容,提交之后会发送给后端服务器 |
name(延伸) | 当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义 |
name | 分组。有相同name属性值得单选框为一组,一组中同时只能有一个被选中 |
checked | 默认选中 |
multiple | 多文件选择 |
注意:
如果要实现以上按钮功能,用form标签把表单标签一起包裹起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
<!-- 1.文本框:text-->
昵称:<input type="text" placeholder="请输入您的昵称" value="" name="neckname"><br>
<!-- 2.密码框:password-->
密码:<input type="password" placeholder="请输入您的密码"><br>
<!-- 3.单选框:radio-->
性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br>
<!-- 4.多选框:checkbox-->
爱好:<input type="checkbox" checked>敲代码
<input type="checkbox" checked>看小说
<input type="checkbox">刷视频<br>
<!-- 5.文件选择:file-->
<input type="file" multiple><br>
<!-- 6.提交按钮:submit-->
<input type="submit">
<!-- 7.重置按钮:reset-->
<input type="reset">
<!-- 8.普通按钮:button-->
<input type="button" value="普通按钮">
</form>
</body>
</html>
button按钮标签:
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮。点击之后提交数据给后端服务器 |
button | reset | 重置按钮。点击之后恢复表单默认值 |
button | button | 普通按钮。默认无功能,之后配合js添加功能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>button按钮标签</title>
</head>
<body>
<form>
昵称:<input type="text" placeholder="请输入您的昵称" value="" name="neckname"><br>
<!-- 提交按钮-->
<button type="button">button提交按钮</button>
<!-- 重置按钮-->
<button type="reset">button重置按钮</button>
<!-- 普通按钮-->
<button type="button">button普通按钮</button>
</form>
</body>
</html>
select下拉菜单标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select下拉菜单按钮</title>
</head>
<body>
<!--select:表示下拉菜单的整体-->
<!--option:表示下拉菜单的每一项-->
<!--selected:表示下拉菜单的默认选中-->
所在城市:<select>
<option>上海</option>
<option>北京</option>
<option selected>广州</option>
<option>深圳</option>
</select>
</body>
</html>
textarea文本域标签:用于多行文字的书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea文本域标签</title>
</head>
<body>
<!--cols:规定了文本域内可见宽度-->
<!--rows:规定了文本域内可见行数-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!--在网页显示中可以拖拽改变大小-->
</body>
</html>
label标签:用于绑定内容与表单标签的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label标签</title>
</head>
<body>
<!--方法1:-->
<!--1.用label标签把内容(如:文本)包裹起来-->
<!--2.在表单标签上添加id属性-->
<!--3.在label标签的for属性中设置对应的id属性值-->
爱好:<input type="checkbox" id="one"><label for="one">敲代码</label>
<!--方法2:-->
<!--1.用label标签把内容(如:文本)和表单标签一起包裹起来-->
<!--2.把label标签的for属性删除-->
<label><input type="checkbox">看小说</label>
</body>
</html>
没有语义的布局标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有语义的标签</title>
</head>
<body>
<!--div标签:一行只显示一个(独占一行)-->
<!--span标签:一行可以显示多行-->
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
</body>
</html>
有语义的布局标签:
属性名 | 说明 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有语义的布局标签</title>
</head>
<body>
<header>网页的头部</header>
<nav>网页的导航</nav>
<footer>网页的底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
</body>
</html>
常见字符实体:
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
’ | 撇号 | '(IE不支持) |
¢ | 分(cent) | ¢ |
£ | 镑(pound) | £ |
¥ | 元(yen) | ¥ |
€ | 欧元(euro) | € |
§ | 小节 | § |
© | 版权(copyright) | © |
® | 注册商标 | ® |
™ | 商标 | ™ |
× | 乘号 | × |
÷ | 除号 | ÷ |