htm
Posted iam-ironman
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了htm相关的知识，希望对你有一定的参考价值。
## 01-【了解】Web前端技术概述
Web前端技术不是指单一的技术，是指由W3C制定开发网页的一系列技术。
W3C【万维网联盟】是一个公益组织，他们的职责就是给开发人员和浏览器厂商发布和维护一套制作网页的标准规范，这些标准规范，称之为 "W3C标准"。
W3C标准要求：网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
```
html — 结构标准：负责网页的内容和排版
css — 表现标准/样式标准：负责网页的外观和美化
javascript — 行为标准：负责网页的行为动作，数据交互，表单验证
```
总结：
```
1. 要制作网页就要遵守W3C标准，学习html+css+js的语法。
2. w3c标准，就是要遵守3种语言的语法来编写网页。
```
## 02-【了解】html发展历史
```
html1.0 — 1993年起草了一个草案，纯文本格式：看新闻，灵感来源于报纸
html2.0
html3.0
html4.0 — 官方意识到有问题：语法松散Aa
xhtml1.0（想要使用语法严格的xml替代html，但是担心开发者不适应，所以推出了过渡性的xhtml）
xhtml2.0 — 特别严格（不兼容原来的版本），浏览器商不同意，已经夭折
html5.0 — 官方妥协，继续在html4.01的基础上继续升级，新增标签、功能，把xhtml2.0中的功能融入进去
```
总结：
```
1. 目前我们学习的是XHTML1.0+HTML5。
2. 学习HTML5的基础是XHTML1.0的语法。
```
## 03-【了解】html网页的基本结构
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
```
总结：
```
1. 每一个网页都必须具备网页的基本结构，使用代码编辑器pycharm的时候直接在创建文档会自动提供。
2. 网页内容分两部分，网页的头部head和主体body
3. 掌握以下几个标签的作用。
<!DOCTYPE html> 文档声明，声明当前文档是html5网页
<html></html> 网页所有内容，都必须写在 <html> 和 </html>
<title></title> 整个HTML文档的标题
<body></body> 存放提供给用户查看的正文内容
<meta charset=‘utf-8‘> 设置字符编码为utf-8
<head></head> 存放HTML文档的相关信息，并不是要显示给用户看的正文内容。
```
## 04-【了解】标签[tag]是HTML网页的基本结构单位
HTML不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。
标记语言是一套标记标签(markup tag)，告诉浏览器要怎样显示页面。
```
因为翻译不同，有人称标记为标签，或者元素.
```
总结：
```
1. 什么是标签？
标签就是网页内容的标记符号，用于告诉浏览器当前网页内容的作用和类型，类似语文的标点符号。
不同的标签有着不同的意义，也代表不同功能和外观。
2. 标签有哪些？我们需要学习哪些标签？
HTML官方提供的标签有很多，可以针对不同的使用范围和场景，但是大部分的标签都是没有用的，
所以我们只会学习常用的二十几个标签就可以满足工作需要。像上面一个视频中，我们就已经学习了6个标签了。
3. 标签的语法？
标签按照书写格式分两种，我们可以通过规律来掌握：
单标签：
<标签名>
双标签：
<标签名></标签名>
```
## 05-标签的属性
属性语法：
```
<标签名 属性1="属性1的值" 属性2="属性2的值">
<标签名 属性1="属性1的值" 属性2="属性的2值"></标签>
```
注意：
```
1. 每一个标签都有属于自己的属性，也有一些属性是所有标签公共拥有的的。
我们只需要掌握的常用的即可，不常用的在需要使用的时候可以通过手册来翻查。
2. 属性都是以键值对的方式出现。
3. 属性只能写在HTML标签左边开始标签位置。
错误的写法： <标签名></标签名 属性1="属性1的值">
4. 标签中可以没有属性，也可以有多个属性。
5. 标签的属性之间使用空格隔开，并且属性值一般是双引号。
6. 在同一个标签中，同名的属性，只能出现一个，如果有多个，则后面的无效。
```
## 06-【了解】html页面中常用的标签
常用的标签，主要是指在网页中经常出现的内容需要使用的标签，例如，文章标题，段落内容，换行，图片，超链接，布局标签，表单等。
```html
<!--
1. HTML的注释，可以单行，也可以多行注释
-->
<!--
2. 段落标签，p标签
一个p标签就是一个段落，一篇文章可以有多个p段落组成。
-->
<p>好看的皮囊千篇一律 有趣的灵魂两百多斤。</p>
<!--
3. 换行标签，br标签
一个br标签，就表示换一次行。
-->
<br>
<!--
4. 标题标签，h系列标签
h系列标签可以表示网页中的某个内容板块标题，也可以表示一骗文章的标题
标题标签只有6种，从1到6，等级不断下降，表示它们的优先使用等级。
h1一般一个页面只用一次，主要用来提供给搜索引擎[百度，谷歌]收录的，提高网页的曝光度。
h2标签是二级标签，一般用于展示网页中板块的标题
h3标签是三级标签，一般用于展示网页中文档的内容标题
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
5. 图片标签，img标签
属性：
src 用于设置图片的地址
alt 用于设置在图片不显示，裂图时的提示文本。
-->
<img src="images/pic.jpg" alt="图片">
<!--
6. 超链接标签，a标签
属性：
href 设置链接地址
target 设置链接地址的打开方式
_blank 表示在浏览器的新窗口中打开网页
title 提示文本，用户鼠标在标签上方时，实现的提示文本内容，这个属性是所有标签都可以设置的。
-->
<a href="http://www.baidu.com" target="_blank" title="百度往">百度网</a>
<!--
7. div标签和span标签
这两个标签在HTML网页中表示一个内容的整体，用于网页布局。
div标签和span标签相比上面的标签，是没有任何的外观的。
div标签圈住的内容会自动换行，span标签则不会。
div标签用于嵌套其他的标签，也可以嵌套div或者span标签
span标签用于嵌套内容，也可以嵌套a标签等不自动换行的标签或者文本内容
-->
<div>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
</div>
<span>span标签</span>
```
## 07-块元素标签(块级元素)和内联元素标签(行内元素)
标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：
块元素：在布局中默认会独占一行，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。
### 07.1-常用块级元素标签
##### 1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
##### 2、段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距
```html
<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社
交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p>
<p>本人热爱研究技术，热爱编程，希望能在努力为企业服务的过程中实现自身价值。</p>
```
##### 3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式
```html
<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
<h3>自我介绍</h3>
<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社
交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p>
</div>
```
### 07.2-常用行内元素标签
##### 1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线
```html
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
<a href="#">默认链接</a>
```
##### 2、通用行内容器标签，具有行内元素基本特性，没有其他默认样式
```html
<p>这是一个段落文字，段落文字中有<span>特殊标志或样式</span>的文字</p>
```
##### 3、图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。
```html
<img src="images/pic.jpg" alt="图片" />
```
### 07.3-其他常用功能标签
##### 1、换行标签
```html
<p>这是一行文字，<br>这是一行文字</p>
```
##### 2、html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
```html
<!-- 这是一段注释 -->
```
###
## 08- 【掌握】标题标签的用法
要在网页中表示一段内容是标题，可以使用标题标签。
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
总结：
```
1. 标题标签只有6种，从1到6，等级不断下降，表示它们的优先使用等级。常用的是h1-h4
2. h1标签是所有标题标签中，等级最高的，所以一般网页只会在网页logo中使用，或者文章的主标题
h1一般一个页面只用一次，主要用来提供给搜索引擎[百度，谷歌]收录的，提高网页的曝光度。
3. h2标签是二级标签，一般用于展示网页中板块的标题
4. h3标签是三级标签，一般用于展示网页中文档的内容标题
5. 使用标题时从h1到h4 逐个套用: logo>板块标题>文档的标题>段落的标题
```
## 09-【了解】img标签的作用
要在网页中如果要显示一张图片怎么办？可以使用img标签。
```html
<img src="http://www.boxuegu.com/logo.jpg">
<img src="cat.jpg" alt="裂图时显示的替代文本">
src是标签img的属性，因为图片的内容很多，浏览器不懂，所以我们可以通过src属性告诉浏览器，我们的图片在哪个位置。
alt是替换文本。
```
总结：
```
1. 要在网页中显示图片需要使用img标签。而且必须通过src告诉浏览器图片的位置。
2. 图片中如果希望裂图的时候，还能提示浏览者图片的内容是什么，可以使用alt。
```
## 10-【了解】相对路径查找本地文件方法
相对路径；相对于当前文件所描述的文件路径。
```
./ 表示当前网页所在的目录，可以省略不写。
../ 表示当前网页的上一级所在目录
```
总结：
```
1. 在前端开发过程中，一般使用相对路径比较多。
```
## 11-【知道】超链接标签的作用
用户在来到我们的网站以后，如果觉得感兴趣想看其他页面怎么办？
我们可以使用超链接让用户通过点击跳转到指定的页面去，显示超链接就需要通过a标签来完成。
```html
/*基本格式*/
<a href="链接网址">链接显示的文字/图片</a>
<a href="URL" target="_blank" title="博学谷">博学谷</a>
# target 表示用户点击链接，打开的方式:
# target的值是固定：
# _self 在当前页面中打开新的页面[默认值]
# _blank 在新建的浏览器窗口中打开新的页面，最常用
/*图片链接网址*/
<a href="链接网址"><img src="图片地址" alt="图片加载失败时显示的文字"></a>
/*表示点击还停留在当前页面*/
<a href="#">默认链接</a>
```
总结：
```
1. 网页本身是单一的，一个网站有多个页面，页面之间的跳转需要使用a链接来完成。
2. a链接的href就是要跳转的页面地址，target表示设置打开页面的方式。
```
## 12-【了解】实体字符
HTML文档中有些字符是已经用在了语法里面，这一类的字符无法直接显示在页面中，例如，大于号，小于号，空格。那如果希望在网页内容中显示这些字符，则需要使用实体字符来替代。
```html
# 空白字符，一个空格 [& 且字符]
< # 小于号
> # 大于号
& # & 且字符
```
总结：
```
1. 实体字符的作用 显示一些在HTML中已经有特殊作用的字符
2. 实体字符很多，但是常用的就是上面几个。空格，大于号，小于号。
```
## 13-【掌握】布局标签和网页的基本布局
div常用于包含其他的标签，用于表示，网页的一整部分内容，也就是用于进行网页的布局
span常用于包含其他的标签或者普通文本内容，也是用于进行网页的内容布局。
div和span，没有任何其他的独特属性 ，无意义标签。
总结：
```
1. 用于表示网页的一个多行的板块内容，使用div圈住。
2. 用于表示网页中一个单行的板块内容，使用span圈住。
3. div和span都是没有自带外观效果的标签，需要我们后面学习到css以后就可以自由给他们加外观了。
4. 标签语义化，主要表示在对应的内容中加入正确意义的标签。不要滥用。
5. 排版网页布局的时候，注意缩进。方便开发人员来阅读HTML源代码。
6. 行内元素不要包住块级元素
行内元素：img标签，a标签
块级元素：p标签，h1-h6
```
## 01-【掌握】认识列表标签
列表标签分为：无序列表、有序列表、项目/自定义列表
用于展示一些排行榜或者一列不分先后的数据
列表标签都有一个整体的大标签嵌套着每一个小标签
- 无序列表【重点掌握】
```html
<ul> <!--ul:Unordered List-->
<li>新闻</li>
<li>娱乐</li>
<li>财经</li>
<li>体育</li>
<li>其他</li>
</ul>
```
- 有序列表【了解】
```html
<!--有序列表 ol是整体标签 li某一项-->
<ol>
<li>张三 99分</li>
<li>李四 89分</li>
<li>王五 86分</li>
<li>小黑 77分</li>
<li>小白 50分</li>
</ol>
```
- 定义列表【了解】
```html
<!--项目列表 dl是整体标签 dt标题标签 dd某一项内容-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dd>专门写给浏览给看的标记语言</dd>
<dd>学习HTML只需要掌握常用的２０多个标签即可</dd>
</dl>
```
总结：
```
1. 开发中，只有一种列表标签最常用，就是ul，重点掌握。
2. 使用列表标签时，因为列表标签的外观很丑，所以我们都会使用css清除掉列表的原有的样式。
ul{
list-style: none;
}
```
## 02-【掌握】了解表单input标签和select标签
网址：https://member.1688.com/member/join/enterprise_join.htm
让用户填写信息发送到python后端，最常用的方式就是通过表单完成。
##### 1. 表单域
表单的范围主要通过form标签控制，form标签控制器的范围，也叫表单域，在用户点击提交按钮以后，浏览器会自动把当前表单域内所有的表单控件自动上传到对应的action地址中。
```html
<form action="" method="post">
<!--action：要提交的地址-->
<input type="text" placeholder="请输入会员名" value=""><br><br>
<input type="password" placeholder="请输入密码" value=""><br><br>
<input type="submit" value="注册"> <!--点击提交数据-->
</form>
```
总结：
```html
1. input输入框有很多种，主要通过type属性来区分不同用途。
2. 文本框、密码框中的 placeholder="请输入会员名" 是提示文本
单行文本框：<input type="text" placeholder="" value="" name="username">
密码框：<input type="password" placeholder="" value="" name="password">
提交按钮：<input type="submit" value="提交">
普通按钮：<input type="button" value="普通按钮">
普通按钮：<button>普通按钮</button>
```
##### 2. 常用的表单控件：单选框和复选框
```html
单选框：
<label><input type="radio" name="sex" >男</label>
<label><input type="radio" name="sex" checked>女</label>
复选框：
<input type="checkbox" name="fav" id="coding"><label for="coding">敲代码</label>
<input type="checkbox" name="fav">看书
<input type="checkbox" name="fav" checked>音乐
```
总结：
```
1、单选按钮想要实现单选功能的话，需要加上name=""属性并且同一组的选项name的值是相同的
2、文本默认点击无效，如果想实现，点击文字也选中的话，文字和对应的输入框一起套在同一个label标签里面,可以实现点击文本勾选按钮的操作.
3、默认选中, 在input标签中加上属性checked="checked"（在html5中，如果属性和值是一样的，可以直接写上属性，即checked="checked"可以写成 checked）
```
##### 3. 其他表单控件
```html
上传文件：<input type="file">
文本域[多行文本框]：<textarea></textarea>
下拉菜单：
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
重置按钮：
<input type="reset" value="重新填写">
```
总结：
```
1. 可以使用type="file" 实现文件上传框
2. 文本域，也叫多行文本框，使用textarea，是一个双标签。
3. 设置多行文本框的时候，默认值填写在双标签内部，而且不能换行。否则多行文本框被把换行作为内容显示到浏览器中。
```
### 补充：表单域的提交数据的方式
表单的数据，被用户点击提交时，默认表单使用get方式提交数据，这种方式不安全，会把数据显示在地址栏的链接后面，这样会暴露用户的重要信息，例如密码。
```
http://localhost:63342/web/login.html?username=admin&password=123456
网络地址结构：
协议://域名:端口/path路径?查询字符串
```
所以我们要通过form标签的method属性，修改表单的提交方式。
```
method
get 使用get方式提交，通过地址栏的查询字符串方式提交数据
post 使用post方式提交，通过表单打包的方式提交数据
```
总结：
```
1. 以后表单数据提交必须使用post。post比get方式要安全。
2. 上传文件时，form标签需要声明enctype="multipart/form-data"，否则无法提交文件到后端python中。
```
## 03-【了解】深入学习浮动
##### 【扩展】文档流
```
文档流是文档中标签内容在排列时所占用的位置。在没有使用css浮动元素之前，HTML网页中的一切内容都是处于文档流中，从上往下，从左往右的顺序逐一排列。
浮动元素会被浏览器回收原来占据的位置。
当我们对HTML网页中的标签元素使用了浮动以后，这种情况，我们开发中称之为“打破文档流”，此时，被浮动的元素就不再处于文档流的位置中了，那么这样就会给HTML网页本身原有的元素，尤其是浮动元素之后的内容带来排版的影响。因为前面的内容被浮动了，那么后续的内容就会自动补充空白的位置。
所以，我们开发中，每一次使用浮动以后，都要清除一次浮动带来的影响。
```
##### 1. 对列表元素进行浮动，让列表元素可以在一行显示
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav{
list-style:none; /* 清除列表原来的项目符号 */
margin:0;
padding:0;
/*background: blue;*/
/* 因为内部的li浮动了，所以要清除浮动 */
overflow: hidden;
}
.nav li{
float: left;
/*border: 1px solid red;*/
width: 80px;
}
</style>
</head>
<body>
<!-- 浮动列表 -->
<ul class="nav">
<li>免费课</li>
<li>就业课</li>
<li>提升课</li>
<li>问答库</li>
<li>论坛</li>
</ul>
</body>
</html>
```
##### 2. 使用浮动把表单元素进行组合，放在一起
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 我们针对一些不需要的标签的默认样式可以进行初始化清除 */
input{
margin: 0;
padding: 0;
}
.search{
width: 602px;
overflow: hidden;
}
.search .text{
width: 500px;
border: 1px solid #0fad10;
height: 40px;
}
.search .btn{
background: #0fad10;
height: 40px; /* 因为上下边框会占据1px，所以是42-2 */
width: 100px;
color: #ffffff;
font-size: 18px;
outline: none; /* 去除边框的外边线 */
border: none; /* 去除按钮默认的边框外观 */
cursor: pointer; /* 设置光标的图标效果 */
}
.search .fl{
float: left;
}
</style>
</head>
<body>
<form action="" class="search">
<input class="text fl" type="text" placeholder="请输入搜索内容">
<input class="btn fl" type="submit" value="搜 索">
</form>
</body>
</html>
```
总结：
```
1. 浮动元素要遵循一个原则：同级的盒子要么都不浮动，要么都浮动
2. 清除浮动，是给浮动元素的父元素清除，因为父元素没有了高度，或者高度受影响。
```
## 04-【了解】综合案例-图文排版效果
```
整体思路：使用HTML进行结构布局，然后使用CSS美化。
步骤：
1. 分解这个版面的结构，分成若个整体。
分解的原则：从大到小，从上往下。划分到每一个标签可以容纳到的效果。
整体外围有一个边框。
整体划分：
上面标题栏：
左边 标题
右边 更多
下面内容正文：
左边 图片
右边 文本
上面 段落
下面 段落
2. 创建HTML基本的结构以及引入css文件
3. 编写HTML代码
4. 编写css
```
## 05-【掌握】了解表格标签
```html
<!--表格标签-->
<!--table 表格整体标签-->
<!--tr 行标签，一个tr表示一行-->
<!--td 单元格标签，一个td表示一个单元格-->
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
```
总结：
```
1. 一个table表示一个表格，一个tr表示表格中的1行，一个td/th表示一个单元格。
2. 在表格中的内容都是对齐的，所以设置一个单元格的宽度，会直接影响到其他行的同一列单元格。
同理，设置了一个单元格的高度，那么同一行的所有单元格的高度都会被设置。
3. css中如何设置边框合并：
border-collapse:collapse;
```
##### 【扩展】合并单元格
```
<td colspan="2">1-1</td> <!--理解成跨了两列，对应删除1-2 横向合并两个单元格-->
<td rowspan="2">1-3</td> <!--理解成跨了两行，对应删除2-3 纵向合并两个单元格-->
```
以上是关于htm的主要内容，如果未能解决你的问题，请参考以下文章
2016/2/24 . html . htm . shtml 的区别