HTML笔记（上）

来源：互联网发布：观星台软件编辑：程序博客网时间：2024/06/13 09:56

一、HTML 标签的分类

一.主体结构标签

一个网页上，只会出现一次

1.<html> </html>

主要用于告诉浏览器，此文档是html文档，需要使用html语法进行解释。所有的标签必须位于此标签内，所以说html是一个根标签，顶级标签。html标签中包含 head、body标签

2.<head></head>
head标签里的内容一般不可见，主要用于对html文档进行说明。
head标签中包含，title、meta、link、style、script

3.<title></title>
主要用于设置网页的标题

4.<meta/>
主要用于对html文档的属性进行设置，比如：作者、时间、网页描述、关键字，刷新或跳转，还可以自定义属性。
示例1：设置显示编码
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
设置2：设置网页描述
<meta name="description" content="一句网页的描述"/>
设置3：关键字列表
<meta name="keywords" content="关键字列表" />

5.<link/>
link，链接的意思，主要用于引入外部的一个样式文件 css

语法：

<link 属性=“值” 属性=“值”.../>

常用的属性：
rel：主要用于描述当前文档与被引入的文件的关系
href：被引入的文件的路径
type：设置被引入的文件类型

例：
<link rel="stylesheet" href="test.css" type="text/css">

6.<style></style>
主要用于书写内部css样式代码
如：
<style type="text/css">
*{

color:red;
}

</style>

7.<script></script>
主要用于书写内部js代码或引入外部的js脚本文件
常用的属性：
type ：用于设置代码的类型（类型有 text/vbscript、text/javascript）
src ：用于指定被引入的外部的js脚本文件的路径

主体示例：

<html>

<head>

<title>网页标题</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

</head>

<body>

网页主体

</body>

</html>

8、<body></body>
主要用于书写网页的主体内容
常用的属性：text 、bgcolor、background、leftmargin、topmargin、rightmargin、bottommargin
text：用于设置文字的颜色
bgcolor：用于设置背景色
background：用于设置背景图片
leftmargin：左外边距
topmargin：上外边距
rightmargin：右外边距
bottommargin：下外边距

二.文字标签&实体字符

1.文字标签

<p></p> 段落
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<sup><sup> 上角标
<sub><sub> 下角标
<q></q> 表示引用（自带双引号）
<cite></cite> 表示引用标题（方便SEO优化）
<blockquote></blockquote> 用于引用大段的内容
<pre></pre> 预格式化标签，保留空格、tab、换行等格式
<br/> 换行符
<font></font> 主要设置文字的字体、大小、颜色、属性

常用的属性：
face：用于设置文字的字体，字体文本主要是在操作系统的 windows/fonts/ 目录下，若操作系统没有这个字体，则显示默认字体
color：用于设置文字的颜色，体现就近原则
size：主要用于设置文字的大小。取值：1-7个等级

2.实体字符：

1.用于输出被html语言所占用的特殊的字符（<>）

2.用于输出空格。由于浏览器会把多个空格合并为一个空格来显示

3.输出从键盘上无法输入的字符

实体字符有哪些？

< <

> >

  空格

& &

× ×
÷ ÷

¥ ￥

® ®

© ©

注意：html标签不区分大小写，但是实体字符区分大小写。

二、标签的语法

1.每一个标签必须书写在<> 括号中

2.在html标签中有很多是双边标签，双边标签有开始必须有结束

3.html标签不区分大小写，但是为了满足xhtml文档的格式严格，建议使用小写

4.html标签可以嵌套，但不能交叉嵌套

5.html标签就是信息的载体

6.双边标签语法

<标签属性1=“值1” 属性2=“值2”...>内容</标签>

说明：属性是可选的，属性值必须使用双引号或单引号括起来。

属性与属性值之间使用 =

属性与属性之间使用空格

7.单边标签语法

<标签属性1=“值1” 属性2=“值2”.../>

单边标签的内容由属性引出，如<img src="test.jpg">

三、代码编辑器

1.增强的代码编辑器

editplus ，特点：体积小，加载速度快，有关键字高亮显示，缺点：没有错误检查功能、语法提示、自动补全功能。

2.集成的开发环境（IDE）

ZendStudio，特点：功能强大，具有错误检查功能、语法提示、自动补全功能。收费！

四、段落标签

1.标题标签(都是双边标签)

h1、h2、h3、h4、h5、h6

主要用于定义标题，（用于对网页内容进行格式）

常用的属性：

align 用于设置水平对齐方式

取值：

left、center、right

2.<p></p>

主要用于修饰一个段落

特点：

独占一行，p标签的首尾会多一个空行

3.<hr/>

在当前标签位置划一行水平线

常用的属性：

size 用于设置线的粗细

width 用于设置线的宽度

color 用于设置线的颜色

noshade 取消线的阴影

align 设置水平对齐方式

取值： left、center、right

四、通用属性&事件属性

1.通用属性

几乎每个标签都会有的属性：

id：主要用于CSS进行样式的设置，及JS进行元素的获取

class：主要用于CSS样式

name：主要用于为表单元素设置name属性

title：主要用于设置标签的提示信息

style：主要用于书写行内样式

2.事件属性

主要说的是用户的行为（例如：键盘事件、鼠标事件）

1.鼠标事件：

onmouseover：当鼠标移到某个标签时，触发的一种事件，执行JS代码

onmouseout：鼠标移出

onmousemove：鼠标移动

onmousedown：鼠标按下

onmouseup：鼠标抬起

2.键盘事件：

onkeydown：当键盘的键子按下触发的事件

onkeypress：位于按下与抬起之间的一种事件

onkeyup：当键盘的键子抬起的事件

3.基本事件：

onclick：鼠标点击

ondblclick：鼠标双击

onblur：当文本框失去焦点时触发的一个事件

onfocus：当文本框获得焦点时

onchange：

当下拉列表的列表项更改时触发的事件

当文件上传表单所选中的文件更改时，触发的事件

onselect：

当选中文本框的内容时触发的一个事件

4.window事件：

onload：当一个html文档的内容全部被加载完毕后才触发的一个事件

五、列表标签

列表标签是一个标签组，主要是用于显示具有一些级别关系的信息。

1.有序列表：列表前有序号

语法：

<ol>

<li>标签项A</li>

<li>标签项B</li>

......

</ol>

常用的属性：

type：用于定义列表项序号的类型，作用于ol

取值阿拉伯数字：1，小写英文：a，大写英文：A，小写罗马：i，大写罗马：I

start：用数字定义起始的序号

2.无序列表：列表前无序号

语法：

<ul>

<li>标签项A</li>

<li>标签项B</li>

......

</ul>

常用的属性：

type：用于设置列表项目符号类型

取值：disc（实心圆），circle（空心圆），square（方块）

3.列表标签的嵌套：

<ul>

<li>标签项A

<ul>

<li>二级标签项A</li>

<li>二级标签项B</li>

......

</ul>

</li>

<li>标签项B</li>

......

</ul>

4.定义列表：

<dl>

<dt></dt>

<dd></dd>

</dl>

说明：

dl ：定义列表

dt ：列表标题

dd ：列表内容

定义列表主要用于修饰，具有一定逻辑关系的数据，dd的内容是对dt标题的解释、说明、描述的

5.ul、ol与dl的匹配

ul与ol中的li都是平级的，没有主次关系

dl中的dt是用于定义主体，dd是用于描述主体的一些附属信息

0 0