HTML小白入门笔记
一、HTML简介
1. HTML是什么
HTML：Hyper Text Markup Language超文本标签语言
由各种标签组成，用来制作网页，告诉浏览器该如何显示页面
2. 版本
W3C：World Wide Web Consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是W3C制定的标准
两个版本：HTML4.01、HTML5
官网：http://w3school.com.cn/
3. 后缀名
HTML文件以 .html 为后缀
二、HTML文档结构
1. 基本结构
-
HTML标签是由尖括号包围的关键词，如
，通常都是成对出现，如（也有不成对出现的特殊标签，如
） -
以
为根标签，包含头部和主体部分 -
头部提供关于网页的相关信息，如标题、字符编码、关键字等摘要信息
-
主体部分提供网页的具体内容，真正显示在页面中
-
可以在网页文件的第一行使用
声明文档的类型，表示使用HTML5版本规范 -
合理的进行缩进；标签名不区分大小写，但一般都习惯全小写
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> 欢迎来到HTML! body> html>
2. 标签组成
2.1 标签组成
一个完整的HTML标签的组成：
<标签名 属性名="属性值">内容标签名>
属性值要用引号引起来，一般使用双引号
2.2 标签分类
根据标签是否关闭，可以分为：关闭型、非关闭型
-
关闭型，有结束标签
<title>title> <body>body> <h1>h1> -
非关闭型，没有结束标签
<br> <hr> <meta>
根据标签是否独占一行，可以分为：块级标签、行级标签
-
块级标签：显示为块状，独自占一行
<h1>h1> -
行级标签：在行内显示，可以与其他内容在同一行显示
<span>span>
3. 注释
注释在浏览器中不会显示，但通过查看源代码可以看到
4. 实体字符
也称为特殊字符，用于显示一些特殊符号，如：<、>、&、空格等
语法：
&实体字符名称;
常用实体字符：
< < 小于号 less than
> > 大于号 more than
空格 space 对于连续的空白字符(包含空格、缩进、换行等)，在浏览器中显示时只会显示为一个空格
&; & 与
©; © 版权符号 copyright
®; ® 注册符号 register
注：实体字符名称区分大小写，即大小写敏感
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body bgcolor="#ffe4c4">
欢迎来到HTML!
<hr>
<h1>Java软件工程师h1>
welcome to
<br>
nanjing
<hr>
<span>嘿嘿span>哈哈
<hr>
书名:<<HTML从入门到放弃>>
<br>
好好 学习，天天向上
<br>
在HTML中使用<表示小于号<
<br>
在HTML中使用©表示版权符号©
<br>
在HTML中使用®表示注册符号®
<hr>
<p>HTML：Hyper Text Markup Language超文本标签语言p>
<p>由各种标签组成，用来制作网页，告诉浏览器该如何显示页面p>
<hr>
<h2>Javah2>
<h3>Webh3>
<h4>Androidh4>
<h5>IOSh5>
<h6>Pythonh6>
body>
html>
三、常用标签
1. 基本标签
| 标签 | 含义 | 说明 |
|---|---|---|
| br | 换行标签 | 非关闭型 |
| p | 段落标签 | 关闭型，块级标签，前后有明显的间隔 |
| h1、h2…h6 | 标题标签 | 按照h1到h6逐渐变小，块级标签，加粗显示 |
| div | 分区标签 | 常作为容器来使用，一般用在页面布局中，块级标签 |
| span | 范围标签 | 默认没有任何效果，一般用来设置行内的特殊样式 |
| ol、li | 有序列表 | 有顺序的项目列表 |
| ul、li | 无序列表 | 无顺序的项目列表 |
| hr | 水平线标签 | 非关闭型，块级标签 |
| img | 图像标签 | 非关闭型，行级标签 |
hr标签的常用属性：
-
color 颜色
两种写法：
颜色名称，如red、green、blue、white、black…
16进制的RGB：Red、Green、Blue，用法：#RRGGBB，每个颜色的范围是0255，转换为16进制 是00—FF
如#FF0000红、#00FF00绿、#0000FF蓝、#FFFFFF白、#000000黑、#CCCCCC灰色、#FF7300橙色
特定情况下可以简写，要求每种颜色的两位值各自必须都相同，如#0f0、#00f、#ccc
-
size 粗细
-
width 宽度
两种写法：
像素，绝对值（固定值）
百分比，相对值，相对于父容器的宽度百分比
-
align 对齐
取值：center（默认值）、left、right
img标签的常用属性：
-
src：source 指定图片的路径，必须有
如果图片和html页面在同一个文件夹中，可以直接写图片名称
习惯上，我们会把多个图片统一放到特定文件夹中，如images，此时需要在图片名称前添加文件夹的名 称images/
-
alt：当图片无法显示时的提示信息
-
title：当鼠标停留在图片上时显示的提示信息
-
width/height： 设置图片的宽和高
默认按图片原尺寸显示
如果只设置其中一个，则另一个按比例缩放
如果同时设置宽和高，可能会导致图片变形
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="width: 1200px; height: 100px; background: antiquewhite">顶部的导航菜单div>
<div style="width: 1200px; height: 400px; background: beige">
中间的主体部分
<br>
iPhone XR不要9998，也不要1888，只要<span style="color: brown; font-size: 30px">198span>!
<hr>
<h2>期末考试前三名h2>
<ol>
<li>唐伯虎li>
<li>秋香li>
<li>石榴姐li>
ol>
<h2>可爱的同学们h2>
<ul>
<li>张三li>
<li>李四li>
<li>王五li>
ul>
<h2>hr标签的常用属性h2>
<hr color="#00F" size="5px" width="50%" align="left">
div>
<div style="width: 1200px; height: 120px; background: aquamarine">
底部的版权部分
<br>
<img src="image/like.jpg" alt="这是一张图片" title="你敢点我试试" width="160px">
div>
body>
html>
2. 标签嵌套
标签不能瞎嵌套，如以下嵌套就是错误的，p标签中不能嵌套div标签
<p>
<div>worlddiv>
p>
浏览器渲染后显示的页面代码与编码时可能会有所不同
3. 开发者工具
用来帮助开发人员查看和调试页面，浏览器基本上都提供了类似的工具
如何打开：
-
在页面中右击——>检查/查看元素/审查元素
-
按F12
常用工具：
-
Console：控制台，显示各种警告和错误信息
-
Elements：从浏览器的角度查看页面，浏览器渲染页面时的HTML、CSS、DOM等
-
Network：查看网络请求信息，浏览器向服务器请求了哪些资源、资源的大小以及加载资源花费的时间
四、超链接
1. 简介
使用超链接可以从一个页面跳转到另一个页面，实现页面间的导航
当把鼠标移动到超链接上时，鼠标箭头会变成一只小手
- 普通链接，跳转到另一个页面
- 锚链接，跳转到锚点
- 功能性链接，实现特殊功能
2. 超链接的种类
分为三种：
- 普通链接，跳转到另一个页面
- 锚链接，跳转到锚点
- 功能性链接，实现特殊功能
2.1 普通链接
语法：
<a href="链接地址" target="链接打开位置">链接文本或图像a>
常用属性：
-
href 链接地址/路径，必须的
-
target 链接打开的位置，常用取值： _self (自身、当前，默认值)、 _blank (空白、新的)
路径分类：
-
相对路径
相对于当前文件的路径
如果链接目标文件和当前页面文件在同一个文件夹，可以直接写名称如果不在同一个文件夹中，则需要指定相对路径
.表示当前位置..表示上一级位置 -
绝对路径
以根开始的路径
D:/software/dd.html
https://www.baidu.com/
-
2.2 锚链接
点击链接后跳转到指定的位置（锚点anchor）
使用步骤：
- 定义锚点(标记)
<a name="锚点名称">目标位置a>
-
链接锚点
<a href="#锚点名称">当前位置a>
2.3 功能性链接
<a href="images/heihei.gif">点击此处下载图片a>
<a href="javascript:alert('胆子不小！')">点我试试a>
3. URL
Uniform Resource Locator 统一资源定位符，用来定位资源所在位置，最常见的就是网址
URL组成： 协议://域名:端口/路径/资源?参数#锚点
示例：http://www.baidu.com:8080/shop/product/add.html?name=tom&age=21#abc
-
协议 ，通信的协议，如：http、https、ftp、file
-
域名，服务器的地址，一般开发中使用ip地址，如：192.168.1.8；项目上线后使用域名，如
www.baidu.com
-
端口，通信时使用的端口号，如：http默认使用80、https默认使用443、ftp默认使用21
如果使用的是默认端口，则端口可以省略；如果使用的不是默认端口，则端口不能省略
-
路径，目标文件所在的路径结构，如：/shop/product
-
资源，要访问的目标文件，如：add.html
-
参数，也称为查询字符串，以?开头，参数名和参数值之间以=隔开，多个之间以&隔开，如：? name=tom&age=21
-
锚点，以#开头，如：#abc
五、表格
1. 简介
表格是一个规则的行列结构，每个表格由若干行组成，每行由若干单元格组成。
table、row、column
2. 基本结构
2.1 table标签
用来定义表格
常用属性：
- border 边框，默认为0
- width/height 宽度/高度
- align 水平对齐，取值：left、center、right
- bordercolor 边框颜色
- bgcolor 背景颜色
- background 背景图片
- cellspacing 间距，单元格与单元格之间的距离
- cellpadding 边距，单元格内容与边界之间的距离
2.2 tr标签
用来定义行，table row
常用属性：
- align 水平对齐，取值：left、center、right
- valign 垂直对齐，取值：top、middle、bottom
- bgcolor 背景颜色
- background 背景图片
2.3 td标签
用来定义单元格，table data
常用属性：align、valign、bgcolor、background
注： 表格必须由行组成， 行必须由单元格组成， 数据必须放到单元格td中
2.4 使用idea插件快速建表小技巧
比如要建一个两行两列的表
步骤：
1.输入table>(tr>td{td$}*2)*2
#花括号里代表td的内容，$代表序号按照列数自动增长，tr括起来*行数，td*列数
2.按下Tab
3.自动转换成如下代码
<table>
<tr>
<td>td1td>
<td>td2td>
tr>
<tr>
<td>td1td>
<td>td2td>
tr>
table>
3. 合并单元格
也称为表格的跨行跨列
两个属性：
-
rowspan
设置单元格所跨的行数，如rowspan=2，表示跨越2行
-
colspan
设置单元格所跨的列数，如 colspan=4，表示跨越4列
步骤：
- 在跨越的单元格中设置rowspan/colspan属性
- 将被跨越的单元格删除
注： 必须要保证每行的实际列数是相同的， 否则表格可能会出现错乱
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1px" width="500px" height="300px" align="center" bordercolor="#f00" bgcolor="#ffe4c4"
background="image/like.jpg" cellspacing="0px" cellpadding="0px">
<tr align="center" bgcolor="#ffe4c4">
<td>HTMLtd>
<td>HTMLtd>
<td>HTMLtd>
<td>HTMLtd>
tr>
<tr valign="top">
<td>HTMLtd>
<td valign="bottom">HTMLtd>
<td>HTMLtd>
<td>HTMLtd>
tr>
<tr>
<td>HTMLtd>
<td>HTMLtd>
<td>HTMLtd>
<td>HTMLtd>
tr>
<tr>
<td>HTMLtd>
<td colspan="3">HTMLtd>
tr>
table>
body>
html>
4. 高级标签
-
caption标签，表格的标题
-
thead标签，表格的头部 table head
-
tbody标签，表格的主体 table body（浏览器会自动为表格添加tbody）
-
tfoot标签，表格的脚部 table foot
-
th标签，表格的头部标题 table head title，一般用在thead中，设置列的标题，替代td标签，与td的区别在于：加粗和居中对齐
注：使用thead、tbody、tfoot标签来划分表格结构的好处：
可以同时修改一部分表格的样式
比如设置tbody里面的字体全部居中显示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="500px" height="200px" align="center">
<caption><h2>学生信息表h2>caption>
<thead>
<tr>
<th width="20%">编号th>
<th width="20%">姓名th>
<th width="20%">年龄th>
<th width="20%">性别th>
<th width="20%">爱好th>
tr>
thead>
<tbody align="center" bgcolor="#ccc">
<tr>
<td>1001td>
<td>张三td>
<td>td3td>
<td>td4td>
<td>td5td>
tr>
<tr>
<td>1002td>
<td>李四td>
<td>td3td>
<td>td4td>
<td>td5td>
tr>
<tr>
<td>1003td>
<td>王五td>
<td>td3td>
<td>td4td>
<td>td5td>
tr>
<tr>
<td>1004td>
<td>赵六td>
<td>td3td>
<td>td4td>
<td>td5td>
tr>
<tr>
<td>1005td>
<td>乔七td>
<td>td3td>
<td>td4td>
<td>td5td>
tr>
tbody>
<tfoot>
<tr>
<td>总人数:td>
<td colspan="4">6td>
tr>
tfoot>
table>
body>
html>
六、表单
1. 简介
表单是一个包含若干表单元素的区域，用于获取不同类型的用户信息
表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉列表、按钮等
2. 基本结构
2.1 表单语法
<form action="表单提交的地址" method="表单提交的方式" enctype="数据传输的方式">
多个表单元素
form>
2.2 form标签
用来定义表单，可以包含多个表单元素
常用属性：
-
action 提交数据给谁处理，默认为当前页面
-
method提交数据的方式，取值：get (默认值)、post
get和post的区别：
- get: 以查询字符串形式提交、地址栏能看到、长度有限制、不安全
- post: 以表单数据组形式提交、地址栏中看不到、长度无限制、安全（较常用）
-
enctype 数据传输的方式，默认为application/xwwwformurlencoded，上传文件时要改为multipart/form data
3. 普通表单元素
大多数表单元素都是使用input标签，通过type属性设置表单元素的类型
<input type="表单元素类型">
| 表单元素类型 | 含义 | 说明 |
|---|---|---|
| text | 单行文本框 | 省略不时写默认就是text |
| password | 密码框 | 输入时以点号显示，安全 |
| radio | 单选按钮 | 只能选择其中的一个 |
| checkbox | 复选框 | 可以同时选择多个 |
| submit | 提交按钮 | 提交表单数据 |
| reset | 重置按钮 | 重置表单元素的初始值 |
| image | 图像按钮 | 可以使用图片作为按钮，也具有提交的功能 |
| button | 普通按钮 | 默认无功能 |
| file | 文件选择器 | 选择要上传的文件 |
| hidden | 隐藏域 | 在页面上不显示，但会提交，可以用来存储数据 |
3.1 单行文本框
常用属性：
-
name 名称，很重要，如果没有name，则该表单元素的数据不会被提交
-
value 初始值
-
placeholder
-
size 宽度
-
maxlength 最大字符数，默认没有限制
-
readonly 只读，readonly=“readonly”，可简写为readonly，即只写属性名
-
disabled 禁用，完全不能用
注：readonly和disabled区别：readonly的数据会提交，而disabled的数据不会提交
表单元素被提交的两个条件：1.有name属性 2.非disabled
3.2 单选按钮
常用属性：
- name 名称，多个radio的name属性值必须相同，才能实现单选（互斥）
- value 值
- checked 默认是否选中，两种状态：选中、未选中
3.3 复选框
常用属性和radio类似
3.4 文件选择器
常用属性：
-
name 名称
-
accept 设置可选的文件类型，用来限制上传的文件类型
使用MIME格式字符串对资源类型进行限制
常用MIME类型：
纯文本：text/html、text/css、text/javascript、text/xml、text/plain
图像：image/jpeg、image/png、image/gif
注：可以通过类似
image/*来匹配所有图像文件
4. 特殊表单元素
| 表单元素 | 含义 | 说明 |
|---|---|---|
| select | 下拉列表 | |
| option | 下拉列表的选项 | |
| textarea | 文本域/多行文本框 | 用来创建多行文本框 |
4.1 下拉列表
select常用属性：
- name 名称
option常用属性：
-
value 选项值
-
selected 设置默认选中项
4.2 文本域
textarea常用属性：
- name 名称
- rows 行数
- cols 宽度
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h2>用户注册h2>
<form action="" method="post" enctype="application/x-www-form-urlencoded">
编号: <input type="text" name="id" value="1" readonly> <br>
用户名:<input type="text" name="username" placeholder="请输入用户名"> <br>
手机号:<input type="text" name="phone" size="10px" maxlength="11"> <br>
密码: <input type="password" name="password"> <br>
性别: <input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女 <br>
爱好: <input type="checkbox" name="hobby" value="eat" checked>吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="play">打豆豆 <br>
头像: <input type="file" name="header" accept="image/png"> <br>
学历: <select name="degree">
<option value="0" selected>--请选择学历--option>
<option value="1">大专option>
<option value="2">本科option>
<option value="3">研究生option>
<option value="4">博士option>
select>
<br>
简介: <textarea name="introduction" cols="30" rows="10">textarea> <br>
<input type="hidden" name="_id" value="3"> <br>
<input type="submit" value="注 册">
<input type="reset" value="重 置">
<input type="image" src="image/like.jpg" height="20px">
<input type="button" value="普通按钮">
form>
body>
html>
七、内嵌框架
1. 简介
使用iframe可以在一个页面中引用另一个页面，实现复用，灵活
2. 基本用法
语法：
<iframe src="" width="" height="">iframe>
常用属性：
- src 引用的页面
- width/height 宽度/高度，像素或百分比
- frameborder 是否显示边框，取值：0、1（默认）
- scrolling 是否显示滚动条，取值：yes、no、auto（默认）
- name 为框架定义名称
3. 在框架中打开链接
<iframe name="content">iframe>
<a href="" target="content">a>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<iframe src="top.html" frameborder="0" height="130px" width="800px" name="nav">iframe>
<div style="height: 400px; width: 800px; background: #ccc">
页面的主体部分 <br>
<a href="test01.html" target="nav">打开test01页面a>
div>
<div>
底部的版权部分
div>
body>
html>
八、多媒体标签
1. audio标签
在页面中插入音频，不同浏览器对音频格式的支持不一样
audio标签常用属性：
- src 音频文件的来源
- autoplay 是否自动播放，默认不自动播放
- controls 是否显示控制面板，默认不显示
- loop 是否循环播放
注：不一定所有的浏览器都支持该标签或属性，比如Chrome就不支持autoplay属性
可以通过网址：
2. video标签
在页面中插入视频，不同浏览器对视频格式的支持不一样
用法与audio标签基本相同，增加属性：
- width/height 视频播放器的尺寸
- poster 在视频加载前显示的图片
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<audio src="audio/water.mp3" autoplay controls loop>audio>
<hr>
<video src="video/cloud.mp4" autoplay controls width="500px" poster="image/like.jpg">video>
body>
html>