HTML学习笔记

Posted 佩佩

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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文件中，表现写到CSS文件中，行为写到javascript文件中。

2、HTML语法规范

基本语法概述

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

标签的关系

  • 包含和并列关系

第一个 HTML

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

    总结：

文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种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标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
  • <p>我是一个段落标签</p>。单词paragraph [ \' paerograef]的缩写，意为段落。
  • 标签语义:可以把HTML文档分割为若干段落。特点∶
    1.文本在一个段落中会根据浏览器窗口的大小自动换行。
    2.段落和段落之间保有空隙。

换行标签（单标签）

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

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

粗体、斜体、下划线、删除线

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

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

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

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

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

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

路径：

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

  • 相对路径：相对的位置

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

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

超链接标签

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

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>

注释标签

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

特殊字符

Sub下标 sup上标

HTML标签（下）

表格标签

表格的主要作用：

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

表格属性：

表格结构标签

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

合并单元格

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

合并单元格三步曲:

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

列表标签

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

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

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

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

总结：

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

表单标签：

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

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

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

Input 输入表单元素

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

1.<input>标签为单标签

2.type属性设置不同的属性值用来指定不同的控件类型

例如：

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

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

Label标签

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

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

select 下拉表单元素

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

textarea 文本域元素

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

Html学习笔记

一、HTML的概述（了解）

　　a.html是什么 ： hypertext markup language 超文本标记语言
　　　　超文本：音频，视频，图片称为超文本。.
　　　　标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
　　b.作用：编写HTML页面。
　　c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).    　HTML页面直接由浏览器解析执行。

二、HTML的网络术语（明白）

* 网页 ：由各种标记组成的一个页面就叫网页 .
* 主页(首页) : 一个网站的起始页面或者导航页面 .
* 标记:<p>称为开始标记 </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
* 元素：<p>内容</p> 称为元素.
* 属性： 给每一个标签所做的辅助信息。
* xhtml： 符合XML语法标准的HTML。
* dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.

三、HTML的规范(知道)

*.HTML是一个弱势语言
*.html 不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html 的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3)body部分：我们缩写的代码必须放在此标签內。

六、HTML的各种标签(掌握)

明确：每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。
body:
bgcolor: 背景颜色
background:背景图片
text: 文本颜色


1、排版标签

所有的浏览器默认情况下都会忽略空格和空行
P： p代表一个段落
属性： align:对齐方式. 取值：left,right,center
<br> 代表是换行。
hr:
color: 线的颜色
size : 线的粗细
width: 线的长短
　　两种写法： 1) 绝对值 eg: 500　　2) 相对值： 50%
noshade: 不要阴影
align: 对齐方式 　（取值： left,right,center）

center: 内容居中
pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行
div: 块级标签 必须单独占据一行
属性： align :  校准  center（中间）
span: 块级标签 不换行字体标记

2 、字体标签

h1...h6:定义字体大小
属性： align :居中
font:
color:　字体颜色
　　　　　　颜色的写法有3种： 1)英文单词: red 　　2)十六进制：#00ffcc　　3)RGB(三原色) : new RGB(124,156,23)
size:　字体大小
face：　字体类型
特殊字符： &lt;小于 &gt;大于 &amp; &符号 &quot; 双引号&apos;单引号
&copy; 版权 &trade;商标 &nbsp;空格
扩展：&#32464; (指定输出字符)
b: 加粗
strong: 加粗
i:斜体
em: 斜体
u: 下划线
s: 中划线(删除线)
sup: 上标
sub: 下标.

3.图像标记

img: 代表是一副图片
属性： src : 图片的路径
　　两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径
　　　　　　　b) ：绝对路径
1) : 以盘符开始的路径
　　eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
2) : 网络路径
　　eg: http://www.baidu.com/images
　　width: 宽度
　　height：高度
　　Alt：当图片显示不出来的时候代替图片显示的内容
　　title： 提示性文本
　　border: 边框
　　热点： 就是特定的位置添加超链。
　　　　<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
　　　　<map name="Map" id="Map">
　　　　<area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
　　　　</map>

4.清单标记
　　列表标签：3种
　　　　a.无序列表ul
　　　　　　属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)
　　　　b.有序列表(OL)
　　　　　　属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
　　　　　　start: 从几开始
　　　　c.定义列表(dl)
　　　　　　dt: 列表项的标题
　　　　　　dd: 列表项
5.超链接
　　3种超链接:
　　　　1. 连接到其他页面
　　　　2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字
　　　　3. 连接到邮件: <a href = "mailto:[email protected]">进入我的邮箱</a>
　　属性：target: 告诉浏览器怎么显示目标页面
　　HTML中已定义4个值： _self :在同一个浏览器中显示
　　　　　　　　　　　　　_blank: 打开新的浏览器显示
　　　　　　　　　　　　　_parent: 在父窗口中显示
　　　　　　　　　　　　　_top: 在顶级窗口中显示
6.表格标记
　　table: 表格
　　　　属性：border:边框
　　　　width:宽度
　　　　height：高度
　　　　align:表格的对齐方式
　　　　cellpadding:单元格内容到边的距离
　　　　cellspacing:单元格和单元格之间的距离
　　　　bgcolor:背景颜色
　　　　background:背景图片
　　　　bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色
　　　　bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色
　　　　dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左
　　　　tr: 行
　　属性：dir:
　　　　bgcolor:
　　　　td: 单元格
　　属性： align: 内容的横向对齐方式
　　　　valign: 内容的纵向对齐方式 top,middle,bottom
　　　　width: 绝对值或者相对值(%)
　　　　height:单元格的高度

　　单元格的合并：
　　　　单元格的属性：
　　　　　　colspan: 横向合并
　　　　　　rowspan: 纵向合并
　　　　　　th: 相当于<td> + <b>
　　属性同<td>
　　　　caption: 表格的标题
　　　　属性：align: 取值：left,center,right,top,bottom
　　　　thead
　　　　tbody
　　　　tfoot
　　写与不写的区别：
　　　　　　1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。

　　　　　　2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，

　　　　　　　浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
7.框架标记及<iframe>
　　框架页面上不允许有body标签
　　frameset: 框架的集合
　　rows: 纵向分部框架.
　　cols: 横向分部框架.
　　写法有两种: 1) 绝对值 "200,*" ,*代表剩余的
　　　　　　　　2) 相对值 "30%,*"
　　frame: 框架. 一个框架显示一个页面
　　scrolling: 是否需要滚动条。默认是true
　　noresize : 固定框架大小
　　bordercolor: 给框架边框起一个颜色
　　name : 给框架起一个名字
　　内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)
　　iframe:
　　　　属性： width: 宽度
　　　　　　　height： 高度
　　　　　　　scrolling : 是否需要滚动条
8.表单标记及语义化

　　9.多媒体标记
　　　　bgsound: 背景音乐
　　　　embed: 播放多媒体文件.
　　　　marquee: 移动
　　　　属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px
　　　　behavior: 行为方式 取值：slide,alternate,scroll
　　　　scrollamount : 移动速度
　　　　loop: 循环多少圈。负值表示无限循环
　　　　scrolldelay: 移动一次休息多长时间。单位是毫秒
　　10.头标记

以上是关于HTML学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

python学习笔记012——pdb调试

C#学习笔记——需要注意的基础知识

Python 3学习笔记

ReactJs学习笔记01

JSP 学习笔记

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段