HTML基础学习打卡

最新推荐文章于 2022-06-28 16:43:45 发布

gegejiawei

最新推荐文章于 2022-06-28 16:43:45 发布

阅读量672

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端开发工程文章标签： html

本文链接：https://blog.csdn.net/gegejiawei/article/details/105744530

Web前端开发工程专栏收录该内容

27 篇文章

订阅专栏

HTML概念

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML发展史

1、1993 ietf HTML1.0版本
2、1995 W3c(www)万维网更新HTML2.0
3、1996 - 1999 html4.0(基础)
4、2000 XHTML1.0(xml html)
5、2014至今 HTML5.0

HTML特点

1、HTML不需要编译，直接通过浏览器展现
2、HTML文件是一个文本文件
3、必须使用HTML /HTM作为文件的后缀名
4、大小写不敏感，HTML与html一样

HTML基本结构

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
	网页主题内容
	</body>
</html>

添加标签的属性的语法如下：
语法：<标签名属性名1=”属性值” 属性名2=”属性值”>…</标签名>

文档段落

1、文档类型声明 DOCTYPE
2、<!DOCTYPE>声明必须放在HTML文档的第一行
3、<!DOCTYPE>声明不是HTML标签

网页编码设置

问题：当网页显示出现乱码
解决：在之间添加处理中文乱码标签

<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html";charset=utf-8"
</head>

文字和段落

标题标签：h1-h6
段落标签：p

align属性 – 对齐方式的属性：
left 左对齐内容
Right 右对齐
Center 居中
Justify 对行进行伸展，这样使得每行都会有相等的长度

修饰标签和特殊符号：

1、水平线：hr
2、文字斜体：i em
3、加粗：b strong
4、下标：sub
5、上标：sup

列表标签三种

1、无序列表
type属性：
disc 圆点
Square 正方形
Circle 空心圆

2、有序列表;ol
type属性：
1 数字 1 2 3。。。。
a 小写字母 a b …
A 大写的字母 A B …
i 小写罗马数字i ii iii
I 大写的罗马数字I II III

3、定义列表:
dl > dt(列表项名字)/dd(具体列表内容)
说明：
1、定义标签内可以有多个dt
2、对于每一个dt可以有多个dd

图像和超链接

图像标签：
语法：<img src=”” alt=””/>
img属性：
1、 Src – url – 显示图像的地址
2、 Alt – 文字 – 图像替代文本
3、 Height – 数值和百分比 – 图像的高
4、 Width – 数值和百分比 – 图像的高

Img下的src属性 – 设计到图像的路径问题：
1、绝对路径 – 指的是具体盘符下的具体路径
2、相对路径 – 指的是相对于当前文件的这个图片的路径
(1) 处于同一级目录中
(2) 图片处于文件的上一级
(3) 图片在img文件的下一级

Img还有alt属性，当图片显示不出来的时候，会显示alt的值
1、网速太慢
2、Src属性值错误
3、用户无法查看图像的时候

超链接

语法：<a href=”” >内容</a>
Href:链接地址，可以是内部链接也可以是外部链接
Target：链接的目标窗口 – _self _blank _top _parent
Titile:链接提示文字
Name:链接命名

Target：
1、_self – 和默认形式一样，都是默认当前打开页面
2、_blank – 表示点击另开一个页面

锚链接

语法：<a href=”” >内容 – 同一个页面内
1、Href
2、Name
3、形式如下：
(1) <a href=”#锚名1”>目录1
(2) <a href=”…” name=”锚名1”>内容

超链接扩展功能：电子邮件链接

文件下载

href属性
1、如果是url地址，那么会打开地址对应的网页
2、如果是文件，就会相应的下载
3、语法：<a href=”下载的文件地址”>…</a>

课程总结

1、HTML基本结构 – 头部网页 HTML文件
2、声明标签 – – 不是html标签 – 声明必须放第一行
3、出现乱码 – 添加meta
4、标题标签 – h1 - h6 – 段落 – p – align
5、换行

6、文字斜体：i em
7、加粗 b strong
8、下标sub 上标 sup
9、无序列表 ul li type
10、有序列表 ol li type
11、定义列表 dl dt dd dd dt dd dd dd
12、图片标签 – img – src – alt – height – width
13、超链接 – a – href – target – titile – name
14、锚点
15、电子邮件
16、下载文件