01【Web】基础-HTML
01【Web】基础-HTML(P1)
本系列文章，针对Web前端的相关知识进行了详细的介绍
文章目录
- 01【Web】基础-HTML(P1)
- Chapter01 HTML概述
-
- 1. Internet起源
- 2. HTML发展过程
- 3. HTML文档结构
-
- 3.1 组成部分
- 3.2 文档类型声明
-
- 3.2.1 头部第一行的定义
- 3.2.2 头部第二行的定义
- 3.2.3 头部第三行定义
- 4. HTML编写注意事项
- Chapter02 HTML各元素说明
-
- 1. head
-
- 1.1 title元素
- 1.2 meta元素
- 2. 文本元素
-
- 2.1 标题标签
- 2.2 文本修饰符
- 2.3 特殊字符
- 3. 文档排版元素
- 4. 列表元素
-
- 4.1 有序列表
- 4.2 无序列表
- 4.3 定义列表
- 5. div与span
-
- 5.1 语法格式
- 5.2 span宽度失效处理
- 6. 图片标签
- 7. 超链接标签
-
- 7.1 统一资源定位符
- 7.2 超链接应用
-
- 7.2.1 文本连接
- 7.2.2 锚点连接
- 7.2.2 图片链接
- 7.2.4 图片热区链接
- 7.2.5 其他超链接
- 8. 表单及内部控件元素
-
- 8.1 表单概述
- 8.2 表单form与表单属性
-
- 8.2.1 表单内容
- 8.2.2 表单语法
- 8.2.3 表单属性
- 8.3 表单域
-
- 8.3.1 通用属性
- 8.3.2 input->text
- 8.3.3 input->password
- 8.3.4 input->radio;checkbox
- 8.3.5 input->file
- 8.3.6 textarea
- 8.3.7 select->option
- 8.4 表单按钮
- 8.5 表单分组
- Chapter03 表格与框架
-
- 1.表格
-
- 1.1 表格的组成
- 1.2 表格的属性
- 1.3 单元格 td (th)
- 1.4 行标签 tr
- 1.5 表格分组
-
- 1.5.1 行分组
- 1.5.2 列分组
- 1.6 表格的嵌套
- 2.框架集与框架
-
- 2.1 框架集
- 2.2 框架
- 2.3 框架集的嵌套
- 2.4 内联框架iframe
- 2.5 框架之间的链接
Chapter01 HTML概述
1. Internet起源
- 20世纪40年代左右，人们希望计算机设备之间互联，实现网络资源共享，但是受Web和Internet底层基础设施的限制，数据交换经常受困。
- 1960年左右，美国军方ARPA计划启动，联合计算机公司和大学共同研制出ARPnet网络，主要用于军事研究，1969年投入使用，ARPnet成为现代网络诞生的标志。
- 20世纪80年代左右，Internet几经周转，用户由军方变成了教育机构，于是ARPnet分裂成为军用的MILNET和民用的ARPnet。后来广域网和局域网的篷布发展对Internet的进一步发展起到重要作用
2. HTML发展过程
- 超文本标记语言（Hyper Text Markup Language，HTML）时Internet上用来编写网页的主要语言，目前为止HTML已经从1.0发展到5.1.并在W3C(万维网联盟)组织的关注下继续不断完善
- 2001年1月HTML 4.01版本中增加了更加严格的规则，形成了著名的可扩展超文本标记语言(Extensible Hyper Text Markup Language，XHTML)
- 2010年，HTML5.0版本以其极佳的兼容性和市场的受众程度高而广受新项目的追捧，目前已经是最好的选择（其中HTML5.1于2014年10月推出，距今2022年已8年左右）
3. HTML文档结构
3.1 组成部分
- HTML的基本组成单位是元素（或者类比其为C#中的控件，Java的Gui），语法结构即：<标签> 内容，如< div>一个简单页面< /div>
- HTML文档结构由< html>、< head>、< body>三部分组成
<html>：
<head>：
<body>：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-01一个简单的HTML界面title>
head>
<body>
<h2>1-1HTML文档结构h2>
网页正文部分
<br>
<img src="./img/logo.png">
<img src="./img/hotpic.png">
<img>
<br>
<table border="" cellspacing="" cellpadding="">
<tr><th>Headerth>tr>
<tr><th>Hello world!th>tr>
table>
body>
html>
3.2 文档类型声明
3.2.1 头部第一行的定义
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 上面的代码被称作DOCTYPE声明，document type (文档类型)的简写，用来说明所使用的xthml或者html是什么版本
- DTD叫做文档类型，内部包含了文档规则，浏览器根据DTD解释页面标识并加以展示
- 要建立符合标准的页面，DOCTYOPE是必不可少的关键组成部分，是决定CSS等内容是否生效的协议，需要对xhtml进行正确的定义
3.2.2 头部第二行的定义
<html xmlns="http://www.w3.org/1999/xhtml">
- xmlns是XHTML namespace的缩写，叫做命名空间。为了解决xmln允许自己定义的标识和其他人定义的标识名称相同但含义不同而带来的冲突，
- 实现了这一技术理念，即xmln，它采用命名空间，允许用户通过一个网址来识别自己的标识
3.2.3 头部第三行定义
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312（简体中文）或utf-8，
- 制作多国语言页面时也可能用到Unicode、ISO-8859-1等
补充：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/xhtml4/DTD/xhtml1-transitional.dtd">
- 上述定义表示采用HTML4.01的过度版本。同时XHTML是区分大小写的所以html要小写
- 在HTML5中，已经不再需要可以声明版本了，因为W3C希望一份html代码使用所有的HTML版本，代码更加简洁，通用即：
DOCTYPE html>
4. HTML编写注意事项
大部分HTML标签是由起始和结束标签两部分构成，如:< p>…< /p>，空标签 是一类特殊的标签，即不包含任何文本也不包含任何子标签,有:'< br/> < hr/> < img />
编写HTML的注意事项：
- 大小写：HTML不区分大小写，XHTML区分大小写，HTML5又恢复了大小写的不区分，在设计页面中应遵守规范，并建议使用小写提高代码的可读性
- HTML标签的属性与属性值：标签具有一个或多个属性，属性与其属性值成对出现，如
<img src="walk.jpg" Height="50px" />
-
标签属性：
-
理论上简单属性的 属性值 可以不带引号，也能正常显示，但不带引号使用 JS 编写脚本时会出问题；XHTML 规定必须使用引号。属性值最好用单或双引号引起来。
-
**属性值必定要区分大小写，**试想WALK.jpg和walk.jpg指向的图片并不一定是一幅图；因为Linux上的Web服务器对文件名区分大小写，而Windows中不区分大小写。
-
-
HTML的空格：
- HTML 文档页面中加多少空格制表符都只显示一个空格。需采用 特殊字符 或者全角方式输入中文空格的办法进行处理。
-
HTML中的注释：
- 标签可以嵌套使用，但不能出现交叉
Chapter02 HTML各元素说明
1. head
1.1 title元素
设计页面是应为每个页面添加标题，标题要与页面内容具有相关性，且要尽可能简洁
1.2 meta元素
用于向客户传递信息和命令，而不是现实内容，一个head内可以包含多个meta。该标签常用的属性特征描述如下 （Hbulider meta 快捷键 输入 metanocache 回车）
- name
| 属性值 | 描述 |
|---|---|
| keywords； | 定义页面的关键词，词之间用逗号隔开 |
| description； | 定义页面描述的内容，描述过长会显示成… |
| robots； | 用来告诉搜索引擎页面是否允许索引与查询。 content的参数有all,none,index,noindex,follow,nofollow，默认all |
| author | 标注网页作者 |
- http-equiv
| 属性值 | 描述 |
|---|---|
| content-type； | 设定页面的字符集， |
| refresh； | 自动刷新并转到新页面. 使用content属性提供刷新或跳转的时间以及跳转的地址 |
| set-cookie； | 设置页面缓存过期时间。如果网页过期， 那么存盘上的cookie将被删除 |
| expires | 用于设定网页的到期时间。如果网页到期， 必须从服务器上从新加载内容 |
- context
| 属性值 | 描述 |
|---|---|
| Text； | 文本描述，一般用于描述name或http-equiv属性的内容 |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="5; url=http:101.132.152.252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="漫步时代广场,时尚，购物，影视，餐饮">
<meta name="description" content="游客漫步时尚广场，可以漫步湖畔步行街，可以在国际名品点、时尚金品店徜徉，在电影区感受视听震撼，在咖啡厅，酒吧一条街放松身心，在世界特色餐厅享受到美味">
<meta name="author" content="CloudWhales">
<meta name="robots" content="all">
<title>漫步时尚广场 E &Stitle>
head>
<body>
<h2>1-03 meta标签的使用h2>
meta标签，5秒进入cloudWhales个人空间
body>
html>
2. 文本元素
2.1 标题标签
< h1> 、、< h6>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-4标题的演示title>
head>
<body>
<h1>1级标题 - CloudWhales Bolgh1>
<h2>2级标题 - Walking Fashionh1>
<h3>3级标题 - 购物广场h1>
<h4>4级标题 - 男装区h1>
<h5>5级标题 - 上衣区h1>
<h6>6级标题 - 衬衣h1>
body>
html>
2.2 文本修饰符
| 标签 | 描述 |
|---|---|
| < font>…< /font> | 设置文本字体样式 |
| < b>…< /b>；< strong>…< /strong> | 以加粗方式显示内容 |
| < i>…< /i> | 斜体方式现实文本内容 |
| < s>…< /s> | 为文本内容添加一条删除线 |
| < u>…< /u> | 为文本内容添加一条下划线 |
| < sup>…< /sup> | 文本内容以上标形式显示 |
| < sub>…< /sub> | 文本内容以下标形式显示 |
| < big>…< /big> | 比周边字体大一个字体尺寸 |
| < small>…< /small> | 比周边字体小一个字体尺寸 |
2.3 特殊字符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-05文本修饰标签与特殊字符title>
<link rel="stylesheet" href="./css/democommon.css">
head>
<body>
<h2>1-05-1文本修饰标签与特殊字符h2>
<div class='panel_bg'>
<div class="panel">
<h4>1-05-1 font标签修饰字体样式h4>
<font face="隶书" size="10" color="blue"> 通过font标签设置字体样式font>
<font face="楷书" size="+3" color="#FF0000"> 通过font标签设置字体样式font>
<font face="黑体" size="-1" color="gray"> 通过font标签设置字体样式font>
<h4>1-05-1 dbo 文本方向标签h4>
<bdo dir="ltr">123456789bdo> <br>
<bdo dir="rtl">123456789bdo>
<h4>1-05-2 文本修饰符h4>
2012年08月25号，<b>我从家乡安徽淮北b>到<big>河北廊坊big>防灾科技学院报道，大学的
招生<i>办公室i>工作人员，组织我们进行学籍建立，以及自行决定是否进行<small>校园集体户口small>
的办理。随着事件的推移，2016年从大学毕业，本来规画了一条人生 V<sub>1.0sub> 版本的学术道路
最后未能如愿以偿，走向了一天V<sup>2.0sup>.这样的选择虽然是不得已，但也是 <u>无怨无悔的付出和努力u>。
人都没有前后眼，面对未来不能想出来，只能走出来，<s>迷茫与内耗只会浪费光阴s>
div>
<div class="panel">
<h4>1-05-3 特殊字符h4>
<table width="600" border="1" rules="all">
<tr>
<th>特殊字符th>
<th>写法th>
<th>特殊字符th>
<th>写法th>
tr>
<tr align="center">
<td>左箭头（←）td>
<td>& larr ; td>
<td>右箭头（→）td>
<td>& rarr ; td>
tr>
<tr align="center">
<td>上箭头（↑）td>
<td>& uarr ; td>
<td>下箭头（↓）td>
<td>& darr ; td>
tr>
<tr align="center">
<td>左右箭头（↔）td>
<td>& harr ; td>
<td>↙左下箭头（↵）td>
<td>& ararr ; td>
tr>
<tr align="center">
<td>左双箭头（⇐）td>
<td>& lArr ; td>
<td>右双箭头（⇒）td>
<td>& rArr ; td>
tr>
<tr align="center">
<td>上双箭头（⇑）td>
<td>& uArr ; td>
<td>下双箭头（⇓）td>
<td>& dArr ; td>
tr>
<tr align="center">
<td>大于号（<）td>