HTML学习笔记

<!DOCTYPE html><!-- 表示HTML5文档协议声明标签，协议的不同会影响整个页面的显示效果 -->
<html><!-- 表示文档标签 -->
<head><!-- 标签表示文档的头部标签，在<head>标签中的信息是用于给浏览器识别的内容，如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 我是注释，不会显示在网页上，注释的内容写在符号之间 -->
    <title>我的第一个HTML文件</title>
</head>
<body><!-- 标签为我们在浏览器中看到的内容 -->
    我的第一个HTML文件
</body>
</html>

注释内容不会显示在网页上

如<title>、</title> 成对的标签，分别叫开放标签和闭合标签。

单独呈现的标签（空元素），如<hr/>；意为用 / 来关闭空元素。

4.HTML头部标签

1）DOCTYPE标记

<!DOCTYPE> 标记位于文档的最前面，告诉浏览器，我们要使用什么规范。

主要用于浏览器解析文档标签的依据，协议的不同会影响整个页面的显示效果。

2）html标记

<html> -- </html> --里面包括<head>和<body>等标记, HTML文件中所有的内容都应该在这两个标记之间。

可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档。如：<html lang="zh-cn"></html>表示当前文档语言为中文。 <html lang="en"></html>表示当前文档语言为英文。

3）head标签

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后。

主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。

一个HTML文档只能含有一对<head>标记，head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

4）meta标签

描述性标签，一般用来做SEO。（Search Engine Optimization，搜索引擎优化），必须位于<head>标记之内。

<meta name="keywords" content="HTML,ASP,PHP,SQL">
<meta name="description" content="来这个地方可以学习HTML">

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

5）title标签

<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。

<title>我的网页标题</title>

title标签对于网站SEO至关重要，标题的好坏直接影响网站的SEO。

6) link标签

<link rel="stylesheet" type="text/css" href="theme.css" />

此外还可以用来引入网站的icon图标

<link rel="shortcut icon" href="<http://www.baidu.com/favicon.ico>" />

5.HTML内容标签

1）标题标签

标题标签用<h1> - <h6> 来表示，其中<h1> 定义最大的标题。<h6> 定义最小的标题。

从<h1> - <h6>，相对于当前文档的重要性递减。

<h1>一级标题是重中之重，一般运用于网站标题或者头条新闻上；

<h2>二级标题主要出现在页面的主体内容的文章标题和栏目标题上。

<h3>三级标题一般出现在页面的边侧栏上。

由于页面层级关系不能太深，<h4>、<h5>和<h6>一般较少出现。

建议h1标签在整个页面中最多出现一次（当然可以超过，但是不利于搜索SEO）。

标题标签是用于体现文档内容的重要性，不要仅仅是为了产生粗体或大号的文本而使用标题。

ps：浏览器会自动地在标题的前后添加空行。

2）段落标签

段落是通过<p>标签定义的，p标签之间不会相互共用一行，会独占一行或者多行的空间。

3）水平线标签

hr标签，表示在页面中插入一条水平线，hr标签是单标签，不需要闭合标签。

4）换行标签

<p>标记中的属性align能够设置段落中文字的对齐方式，对齐方式分为左对齐，居中和右对齐。

语法：<p align="对齐方式"> — </p> （ left，center，right ）

5）span标签

<span>标签被用来组合文档中的行内元素，span标签可以跟其他的span标签共用一行。

通常情况下，需要给span标签应用样式，否则与页面上的其他文本没有什么任何区别。

6）div标签

<div>标签用来组合块级元素，这样就可以使用样式，对他们进行格式化。

7）img标签

<img> 标签向网页中嵌入一幅图像。从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。

<img> 标签创建的是被引用图像的占位空间。最好专门创建一个文件夹放resource。

alt 属性：（图像显示不出时，图像备选文本）。

title属性：（鼠标在图像上悬停时，出现的文字）

../ 表示当前页面的上一级目录（相对路径）

<img> 标签有两个必需填的属性：src 属性和 alt 属性。

8）字体样式标签

粗体 <strong> </strong> 斜体 <em> </em>

9）滚动标签

<marquee>标记可以让文字滚动，常用属性有：滚动方向（direction）、滚动方式（behavior）、滚动次数（loop）、滚动速度（scrollamount）、滚动延迟（scrolldelay）、背景颜色（bgcolor）、宽度（width）、高度（height）等。

<marquee direction="滚动方向" behavior=“滚动方式” >滚动的文字</marquee>

direction的值有up、down、left、right，向左滚动是默认情况；

behavior的值有scroll、slide、alternate（循环滚动、只滚一次，来回交替滚动）；

loop的值为整数；

scrollamount的值为文字每次移动的长度，以像素为单位；

scrolldelay的单位是毫秒。

10）多媒体标签（bgm/音频/视频）

背景音乐：<bgsound src="音乐文件的路径及名称" loop=“播放次数”> （单标签）

多媒体文件：<embed src="多媒体文件的路径及名称" width=“播放器宽度” height=“播放器的高度”></embed>

视频：<video src="视频文件的路径及名称" controls autoplay></video>

音频：<audio src="音频文件的路径及名称" controls autoplay></audio>

路径可以是相对路径也可以是绝对路径

相对路径：是以当前文件所在的路径为基准进行相对文件的查找。

绝对路径：是完全路径，是文件在硬盘上的真正路径。

11）超链接标签

超链接的作用是建立从一个位置到另一个位置的链接。成对出现

利用超链接不仅可以进行网页间的相互访问，还可以使网页链接到其他相关的多媒体文件上。

../ 表示当前页面的上一级目录（相对路径）

同一级别目录下可以省略路径名。

<a href=“链接路径（必填）” target=“目标窗口的打开方式”>链接内容（文字or图片）</a>

target的值有_self、_blank、 _top、 _parent，_self是默认值。

_blank表示目标页面会在一个新的空白窗口中打开；

_top表示目标页面会在顶层框架中打开；

_parent表示目标页面会在当前框架的上一层打开。

12）锚链接

定位文章具体位置，类似于书签。

首先在页面上命名锚记

             如在页面顶部如下代码<a id="top">（可以写字可以不写）</a>（id做锚记）

然后在页面的最下面可以这样写<a href="#top">回到顶部</a>。

图片锚链接

文字锚链接

<a href="所要链接的地址" target="_blank">输入的文字</a>

LOGO锚链接

把以下代码加在已经存在的面板里（想选那种方式就加那段代码，不要全部都加）

13）功能性链接

<a href="mailto:邮箱地址“>点击联系我</a>

QQ链接，QQ推广（先在页面登录QQ页面会自动生成代码）

14）特殊符号

空格 &nbsp

15) iframe内联框架（实现了网页的拼装组合）

和<a href="跳转地址" target=“iframe的名字”>点击跳转</a> 搭配使用

在iframe里面打开href的地址

6.块元素和行内元素

块元素

无论内容多少，该元素独占一行。（p段落、h1-h6几级标题）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行。（a、strong、em）

可以放在一行里的标签，都是行内元素

7.HTML高级标签

1）列表标签

a. 无序列表（unorder list）（导航、侧边栏）

无序列表用<ul>标签来表示。在每个列表项目文字之前，以项目符号作为每条列表项的前缀。

项目符号默认是●，可以通过<ul>的type属性，改变无序列表的项目符号。

type的值有disc ●，circle○，square■。

其中的列表项用<li>标签表示，无序列表的各个列表项之间没有顺序级别之分，是并列的。

b. 有序列表（order list）（试卷、问答）

有序列表用<ol>标签来表示。也有项目类型，可以通过type属性设置自己的项目类型。

项目序号默认是数字。

type的值有1（1、2、3、4····）、a（a、b、c、d···）、A（A、B、C、D····）、i（i、ii、iii、iv···）、Ⅰ（Ⅰ、Ⅱ、Ⅲ、Ⅳ···）

可以通过start属性改变项目序号的起始值，起始值只能是数字，但同样对字母、罗马数字起作用。

其中的列表项也用<li>标签表示，其各个列表项按照一定的顺序排列定义。

c. 自定义列表

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

自定义列表用<dl>标签来表示；

其中的列表项用<dt>标签表示；

每个列表项的解释用<dd>标签表示。

2）表格标签

简单的 HTML 表格由 table 元素

以及一个或多个 tr、th 或 td 元素组成（行、列、单元格组成）

表格的code都需写在<table></table>之间 table的属性有border、style。

colspan=“跨的列数值”，rowspan=“跨的行数值”，align=“对齐格式”

table的属性，border=“边框（像素）”

tr 元素定义表格行；row

th 元素定义表头；head

td 元素定义表格单元

3）表单标签

表单就是用户提交数据到后台的一个虚拟单子，表单一般由文本框、下拉列表、单选、多选、文本域等组成。

A.表单语法框架

<form method="post" action="result.html">
	<p> 名字：<input name="name" type="text"></p>
	<p> 密码：<input name="pass" type="password"></p>
	<p>
	  <input type="submit" name="Button" value="提交"/>
	  <input type="reset" name="Reset" value="重填"/>
	</p>
</form>

面试必考！

method的值有get、post，提交方式

get 可以直接在URL中看见我们提交的信息（高效、不安全、默认值）

post 在URL中看不见我们提交的信息（比较安全，可以传输大文件）

可以在审查元素中抓住post，network，headers，form data中看见密码！（可以加密）

action 表示向何处发送表单数据（必填）（可以是网站 or 请求处理地址）

From标签

<form></form>表单的域标签，用于包裹整个表单的内容。

Input标签

Input标签是文本框、单选、多选、按钮等。Type属性不同的取值决定了input标签的作用。

<input /> 自闭合标签

name属性，指定表单元素的名称，一般所有都要写！

value属性，元素的初始值。type为radio时必须指定一个值。

size属性，指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。文本框长度

maxlength属性，type为text或password时，输入的最大字符数。

type的值有text、password、checkbox（多选）、radio（单选）、submit（）、reset（清空表单）、file、hidden、image和button，默认值是text。

B.文本框与密码框

type的值为text，表示是单行文本框，输入内容以单行显示。（可以输入数字、字母、文本）

type的值为password，表示是密码框，在其中输入的字符都以星号*****或者圆点●显示。

此时value可以是用户自定义或官方设定默认值

C.单选框和多选框

radio单选框，一般由○表示，name一般写成同一组，name不一样就可以同时选。

checkbox多选框，一般由□表示，name一般写成同一组。（数组形式获取）

checked属性，属性值只有一个checked，可以省略属性值，在单选按钮和多选按钮中表示此按钮被选中。type为radio或checkbox时，指定按钮是否是被选中。可以用户自选或官方默认选中

D.按钮

实现和用户的交互，主要配合脚本语言（JavaScript）来进行表单的处理。

此时value中的值是可以显示在按钮框里

关闭窗口：<input type="button" value="关闭" οnclick="window.close()"/>

type值为image时，也可以跳转。

Select标签

select 元素可创建单选或多选菜单，<select> 元素中的 <option> 标签用于定义列表中的可用选项。

1.下拉列表

selected 直接写出，表示默认选中某一项。

2.列表标签

列表标签（左）

Multipe：也是一个单属性。值只有一个multiple。设置了此属性，表示select标签表现为列表标签，否则表示下拉列表标签。

文本域

文本域实现上传照片或文件的功能，由文本框和“浏览”按钮组成。

文本框<textarea name="" id="" cols="30" rows="10"></textarea>

文件域 type=“file”

文件域，可以选择直接输入上传文件的路径，“浏览”按钮可以选择文件。

使用文件域上传文件时，一定不要忘记设置form表单信息提交编码方式为（enctype=“multiple/form-data”）

Lable标签

Lable标签，可以在你点击文本时，让label指向的表单标签获得焦点。

8.页面结构分析

标题头部区域的内容

标记脚部区域的内容

section

Web页面中的一块独立区域

article

独立的文章内容

aside

相关内容或应用（常用于侧边栏）

nav😁

导航类辅助内容

9. 简单验证

邮箱验证

<input type="email" name="邮箱名字"> （自动验证）

URL验证

<input type="url" name="url"> （自动验证）

数字验证

<input type="number" name="num" max="100" min="0" step="1">（自动验证）

滑块

搜索框

10.表单的应用

隐藏域

hidden （属性还在，但是隐藏了，可以传递默认值，提前设定value）

只读

value=“定值” readonly （就不能改了）

禁用

disabled （点不了选不了了）

11.表单初级验证

为了安全，减轻处理压力。

方框里的灰色提示信息

文本框中才有用 placeholder=“提示信息”

非空判断

required 直接使用

正则表达式 😁

pattern="用什么查什么"

脚本之家官网 & 常用正则表达式

12.HTML的不足之处

HTML不可扩展。

HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。

HTML只能用于信息显示。

HTML可以设置文本和图片显示方式，但没有语义结构。

即HTML显示数据是按照布局而非语义的。

随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如：当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。

HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。

13.参考

百度百科HTML

清华大学出版社出版：Java Web开发（从入门到实战）ISBN：978-7-302-52911-8

文章基本框架参考，我做了扩展：HTML入门

视频参考：哔哩哔哩【狂神说Java】HTML5

sako_P

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

目录1.W3C2.HTML定义3.HTML基本结构4.HTML头部标签1）DOCTYPE标记2）html标记3）meta标记4）title标签几.HTML的不足之处1.W3CW3C（World Wide Web Consortium）即万维网联盟。W3C中国W3C标准包括：结构化标准语言：HTML、XML表现标准语言（CSS）行为标准（DOM、ECMAScript）2.HTML定义HTML（Hyper Text Markup La.
复制链接

扫一扫