html入门知识点(一)

来源：互联网发布：supreme淘宝正品店编辑：程序博客网时间：2024/06/05 07:45

1. html简介

1.1 什么是HTML

Hyper Text Mark-up Language 超文本标记语言
超文本：可以实现页面内包含图片，链接，甚至音乐，视频，程序等
网页文件本身是一种文本文件，通过标记符号来标记要显示的网页内容
标签浏览器遇到对应的标签符号时，会解析成相应的功能
扩展名:.html 或者 htm
包含头部分（head）,主体部分（body），其中头部分提供关于网页的信息，主体部分提供网页的内容。

2.html文件结构

<html>  <!--HTML 文件的声明开始-->    <head></head> <!--HTML文件的头部部分-->    <body></body> <!--HTML文件的主体部分--></html>  <!--HTML 文件的声明结束-->

<head></head>标签之间的内容不会在浏览器中显示(<title>标签除外)，但其间的标签都有特殊作用
<body></body>标签之间的文本是可见的网页主体内容

3.标签分类与书写规则

3.1 标签分类

分为双边标签和单边标签
双边标签通常成对出现，第一个代表开始，后一个代表结束，中间一般为内容
单边标签一般单独出现，内容在标签内部标签属性赋值

3.2 书写规则

HTML标签由一对尖括号包围的关键词：<html>
标签名不区分大小写，建议使用小写
标签中有属性时，属性与标签名之间要有一个空格，多个属性也用空格隔开，属性要写在开始标签中
属性的值要加上引号，单引号和双引号都可以
每一个标签都需要关闭，双边标签靠结束标签关闭，xtml中单边标签用反斜线关闭，html5则不用
标签的嵌套只能顺序嵌套，不能交叉嵌套
标签可以由若干属性，也可以不带属性

4. body标签的属性

说明：标签、标记、元素、节点这四个名词它们指的是同一个东西！

属性名功能background用于给网页设置背景图片bgcolor用于给网页设置背景颜色

5. 文本修饰标签

标签名功能<b></b>给文本加粗<i></i>给文本设置斜体<u></u>给文本设置下划线<s></s>给文本设置删除线<sup></sup>给文本设置上标<sub></sub>给文本设置下标<font></font>给文本设置大小(size 1-7) 颜色(color) 字体(face)

6. 排版标签

标签名功能<p><p>段落标签 align 对齐属性。默认左对齐，取值left,center,right<h1></h1>标题标签 h1最大，h6最小<br />换行标签<hr />水平线标签可设置颜色(color),宽度(width,取值固定值[单位px]或者百分比[参照父级标签]),粗细(size),去阴影(noshade=”noshade”),对齐(同上)<pre></pre>预格式化标签,里面的空格和换行会保留

7. 注释

写注释方便其他程序员以及自己了解自己的代码，以便进行分析和修改

7.1 注释的格式

8. div与span标签

标签名功能<div></div>块级标签，无实际意义,通过css为其赋予不同表现<span></span>行级标签，其他同上

8.1 区别

块级元素 p,h1~h6
- 独占一行，不能与其他元素并列
- 能有宽、高属性
- 如果不设置宽，则默认为父级元素的100%
行内元素 b,i,u,font,sup,sub
- 可以与其他元素并排
- 不能设置宽高，默认宽度就是内容宽度

9. 字符实体

html中有些符号时预留的，例如<和> 会被误认为标签，所以有些字符要用字符实体替代

字符字符实体空格 >gt;<lt;&&¥¥版权©注册®X×÷÷

10. 图片标签

能够在网页中使用的图片类型有：jpg(jpeg)、png、gif、bmp

10.1 语法

<img src="图片地址" />

10.2 alt属性

alternate的简写，当图片无法访问时，显示的文字信息

10.3 其它属性

属性名功能title鼠标悬浮在图片上时显示的文字信息width给图片设置宽度height给图片设置高度

注意：不要同时设置宽高，会导致变形。

11. 文件地址

用于描述文件在磁盘上的位置，分为相对路径和绝对路径。

11.1 绝对路径

文件在磁盘上的真实位置，是包括盘符在内的完整路径。例如’d:\Program Files\Adobe\Adobe PhotoShop CS\PhotoShop.exe’

11.2 相对路径

文件相对于当前文件所在的位置。

平级关系目标文件和当前文件在同一个目录下面
./文件名
直接写文件名
上级关系目标文件在当前文件的上级目录下面
../ 上一级
../../ 上两级

12. 超级链接

12.1 基本用法

<a href="链接的目标地址">内容</a>

href 属性 “hypertext reference”,中文意思超级链接
title 标题鼠标悬浮在链接上显示的文本信息
target 链接的目标文件打开方式
_blank 在新窗口打开
_self 默认，在原窗口打开

12.2 空链接

<a href="#">内容</a>
<a href="javascript:void(0)">内容</a>

12.3 锚点链接

定义一个锚点
<a name="锚点名"></a>
或者 <a id="锚点名"></a>
定位锚点<a href="#锚点名"></a>

13. 列表标签

无序列表、有序列表、定义列表

13.1 无序列表

表示没有分先后顺序的列表项

语法：

<ul>    <li></li>    <li></li>    <li></li>    <li></li></ul>

组标签，必需成组出现，li标签无法单独存在，必需包裹在ul标签内部,ul内部也不允许其他标签。
li标签内部可以放任何内容
无序列表解析后，默认列表前有一个小圆点。用type属性表示，取值为：disc (默认值，实心圆点)、circle(空心圆)、square(实心方块)

13.2 有序列表

表示有先后顺序之分的列表项

语法：

<ol>    <li></li>    <li></li>    <li></li>    <li></li></ol>

属性:- type:表示序号的样式
取值：1(默认值)、a、A 、i(小罗吗)、I(大罗马)- start:表示序号的开始值
取值：数值

13.3 定义列表

由三组标签组成，dl,dt，dd
dl：defintion list 表示定义列表
dt: defintion title 表示定义列表的标题
dd: defintion description 表示对标题的描述
dt、dd只能在dl标签里面,反过来也一样
每一个dt后可以写多个dd,表示对标题的不同解释

阅读全文

0 0