HTML学习笔记

  • A+
所属分类：Web前端
摘要

<! DOCTYPE html>这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前.
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
便宜好用的国外VPS推荐

HTML学习笔记

1、HTML简介

什么是网页？

  • 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
  • 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm 或.html后缀结尾的文件，因此将其俗称为HTML文件。

什么是HTML？

  • HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。
  • 所谓超文本，有2层含义∶
  1. 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
  2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。

网页的形成

  • 网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
  • 前端人员开发代码---->浏览器显示代码（解析、渲染）----->生成最后的Web页面

为什么需要web标准？

  • 浏览器不同，它们显示页面或者排版就有些许差异，所以需要标准去约束他们。

Web标准的组成

  • 主要包括结构( Structure )、表现( Presentation )和行为( Behavior )三个方面。
    HTML学习笔记
    简单理解∶结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

2、HTML语法规范

基本语法概述

  • HTML标签是由尖括号包围的关键词，例如<html>。
  • HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  • 有些特殊的标签必须是单个标签(极少情况），例<br/>我们称为单标签。

标签的关系

  • 包含和并列关系

第一个 HTML

  • 每个网页都会有一个基本的结构标签(也称为骨架标签），页面内容也是在这些基本标签上书写。
    HTML学习笔记
    总结：
    HTML学习笔记

文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

HTML学习笔记
<! DOCTYPE html>这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前.
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

lang语言种类：用来定义当前文档显示的语言

  • en定义语言为英语
  • zh-CN定义语言为中文
    简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

Character set字符集

  • 字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
  • 在标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
  • <meta charset=" UTF-8"> charset常用的值有:GB2312、BlG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
    注意:上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8”，不要写成"utf8"或"UTF8"。
    HTML学习笔记

HTML标签（上）

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

标题标签（双标签）

HTML学习笔记

段落标签（双标签）

  • 在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
  • <p>我是一个段落标签</p>。单词paragraph [ ' paerograef]的缩写，意为段落。
  • 标签语义:可以把HTML文档分割为若干段落。特点∶
    1.文本在一个段落中会根据浏览器窗口的大小自动换行。
    2.段落和段落之间保有空隙。

换行标签（单标签）

  • br：单词break的缩写，意为打断、换行

文本格式化标签（双标签）

粗体、斜体、下划线、删除线
HTML学习笔记

<div>和<span>标签（双标签）

  • <div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
  • <div>这是头部</div>、 <span>今日价格</span>
  • div是division的缩写，表示分割、分区。span意为跨度、跨距。
    特点∶
    1.<div>标签用来布局，但是现在一行只能放一个。大盒子
    2.标签用来布局，一行上可以多个。小盒子

图像标签（单标签）和路径

  • 图像标签：单词image的缩写，意为图像
    <img scr=”图像URL”>其中，scr是该标签的必须属性，他用来指定图片的路径和文件名。
    HTML学习笔记

其中宽度和高度我们修改一个就行了，另一个自动改变。
举例：
HTML学习笔记

图像标签属性注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取“键值对”的格式，即key= “value"的格式，属性=“属性值”。

路径：

  • 绝对路径：准确的位置，从盘符开始

  • 相对路径：相对的位置
    HTML学习笔记

  • 区别目录文件夹和根目录

  1. 目录文件夹：新建一个文件夹就是一个目录文件夹
  2. 根目录：点开一个文件夹所显示的就是一个根目录

超链接标签

  • 在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
    1．链接的语法格式
    <a href= "跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>单词anchor的缩写，意为:锚。
    两个属性的作用如下∶
    HTML学习笔记
    HTML学习笔记

2、链接的分类
a．外部链接:例如< a href="http:// www.baidu.com ">百度</a >。
b．内部链接:网站内部页面之间的相互链接。同一个目录下的页面，直接链接内部页面名称即可，例如< a href=" index.html">首页</a>。
以上两种链接都可以使用target（_self和_blank）
c．空链接:如果当时没有确定链接目标时，<a href="#">首页</a > 。
d．下载链接:如果href 里面地址是一个文件或者压缩包，会下载这个文件。
e．网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接（点击多媒体就会跳转另一个目标页面）。
f. 锚点链接:点我们点击链接,可以快速定位到当前页面中的某个位置。
①在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
②找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集的介绍</h3>
③返回到页面首部。<a href="javascript:scroll(0,0)">返回顶部</a>
HTML学习笔记

注释标签

<!-- 注释文档 --> 快捷键 Ctrl+/ 可以开始注释也可以解除

特殊字符

Sub下标 sup上标
HTML学习笔记

HTML标签（下）

表格标签

表格的主要作用：

  • 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。
  • 注意：表格不是用来布局页面的,而是用来展示数据的.
    HTML学习笔记

表格属性：
HTML学习笔记

表格结构标签

  • <thead> </thead>:用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
  • <tbody> </tbody> :用于定义表格的主体，主要用于放数据本体。
  • 以上标签都是放在<table> </table>标签中。

合并单元格

  • 跨行合并：rowspan=”合并单元格个数”
  • 跨列合并：colspan=”合并单元格个数”

合并单元格三步曲:

1.先确定是跨行还是跨列合并。
2.找到目标单元格.写上合并方式=合并的单元格数量。比如: <td colspan= “2”> </td>.
3.删除多余的单元格。

列表标签

  • 列表作用：用来布局的。
  • 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
  • 根据使用情景不同，列表可以分为三大类︰无序列表、有序列表和自定义列表。
    1.无序列表：<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
    无序列表的基本语法格式如下∶
    HTML学习笔记

2.有序列表：即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下∶
HTML学习笔记

3.自定义列表：自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
HTML学习笔记

在HTML标签中，<dl>标签用于定义描述列表(或定义列表），该标签会与<dt>(定义项目/名字)和<dd>（描述每一个项目/名字)一起使用。
HTML学习笔记

总结：
HTML学习笔记

注意∶
1.学会什么时候用无序列表，什么时候用自定义列表。
2.无序列表和自定义列表代码怎么写?
3.列表布局在学习完CSS后再来完成。

表单标签：

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素)和提示信息3个部分构成。
HTML学习笔记

①表单域：表单域是一个包含表单元素的区域。在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。
HTML学习笔记

②表单控件：在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

Input 输入表单元素

  • 在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息。在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

1.<input>标签为单标签
HTML学习笔记

2.type属性设置不同的属性值用来指定不同的控件类型
HTML学习笔记

例如：
HTML学习笔记

HTML学习笔记

HTML学习笔记

除type属性外，<input>标签还有其他很多属性，其常用属性如下:
HTML学习笔记

HTML学习笔记

HTML学习笔记

注意：1. name和value是每个表单元素都有的属性值,主要给后台人员使用。
2. name表单元素的名字,要求单选按钮和复选框要有相同的name值
3. value在输入框里会显示出来，而在单复选框中不会，是给后台人员核对的
4. 在控件元素后面加上checked=”checked”，checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素。

Label标签

  • <label>标签为input元素定义标注(标签)。
  • <label>标签用于绑定一个表单元素,当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
    HTML学习笔记

核心：<label>标签的for属性应当与相关元素的id属性相同。
HTML学习笔记

select 下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
HTML学习笔记

textarea 文本域元素

使用场景:当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
HTML学习笔记
HTML学习笔记

便宜好用的国外VPS推荐