文章目录
1. HTML 概念
① HTML,英文全称 Hyper Text Markup Language,翻译过来就是①超文本②标记语言,这是一种用于创建网页的标准标记语言。
-
超文本:超文本就是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
-
标记语言:
- 标记语言由标签构成的语言,例如 html,xml等,都是标签语言。
- 标记语言不是编程语言。
- 标记语言由标签构成的语言,例如 html,xml等,都是标签语言。
② HTML 的优点:
- 简易性:HTML版本升级采用超集方式,从而更加灵活方便。
- 可扩展性:HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。
- 平台无关性:DOM为HTML文档定义了一个与平台无关的程序接口,使用该接口不可以控制文档的结构。
学会 HTML 对写博客非常有帮助,比如这篇作业就是使用 markdown 编写的,在markdown中可以内嵌HTML标签,来让自己的文章更好看。例如下面我就使用了 标签来处理了部分文字。
③ HTML 是编程语言吗?
不少人初学者可能会认为 HTML 是因为一种编程语言,因为其独特的语法格式。但从本质上来说,HTML 是一种超文本语言,它只是重新定义了文本的格式,并不能进行选择,循环等可以进行逻辑功能的语句。
2. HTML 基础
1. 注意事项:
① HTML 文档后缀名 .html 或者 .htm
② HTML 标签分为:
- 围堵标签:有开始标签和结束标签。如
- 自闭和标签:开始标签和结束标签在一起。如
③ 标签之间可以嵌套,并且需要正确嵌套,不能你中有我,我中有你
④ 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
⑤ html的标签不区分大小写,但是建议使用小写。
<html>
<head>
<title>titletitle>
head>
<body>
<FONT color='red'>Hello Worldfont><br/>
<font color='green'>Hello Worldfont>
body>
html>
2. 标签学习:
1. 文件标签:构成html最基本的标签
标签:
标签 | 说明 |
---|---|
|
html文档的根标签 |
|
头标签。用于指定html文档的一些属性。引入外部的资源 |
|
标题标签。 |
|
体标签 |
|
html5中定义该文档是html文档 |
2. 文本标签:和文本有关的标签
标签:
标签 | 属性 | 属性的属性 | 说明 |
---|---|---|---|
|
注释 | ||
…
|
标题标签,h1~h6:字体大小逐渐递减 | ||
|
段落标签 | ||
|
换行标签 | ||
|
展示一条水平线 | ||
color | 颜色 | ||
width | 宽度 | ||
size | 高度 | ||
align | 对其方式 | ||
center | 居中 | ||
left | 左对齐 | ||
right | 右对齐 | ||
|
字体加粗 | ||
|
字体斜体 | ||
|
字体标签 | ||
|
文本居中 |
3. 图片标签:
标签:
标签 | 属性 | 说明 |
---|---|---|
img | 展示图片 | |
src | 指定图片的位置 |
示例代码:
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.4d9cd2e53dddfc238a06e750b73cd023?rik=MsMCKPGumufOyQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fc2accfe637f86fb6f11949cb8651a09b.jpg&ehk=ia2TVXcow6ygWUVZ1yod5xH4aGd8565SYn6CRpxkNoo%3d&risl=&pid=ImgRaw&r=0" />
4. 列表标签:
标签:
标签 | 说明 |
---|---|
|
有序列表 |
|
无序列表 |
|
列表的项目 |
5. 链接标签:
标签:
标签 | 属性 | 属性的属性 | 说明 |
---|---|---|---|
|
定义一个超链接 | ||
href | 指定访问资源的URL(统一资源定位符) | ||
target | 指定打开资源的方式 | ||
_self | 默认值,在当前页面打开 | ||
_blank | 在空白页面打开 |
示例代码:
<a herf="https://www.baidu.com/">百度a>
效果展示:
百度
6. div和span:
标签 | 说明 |
---|---|
|
每一个div占满一整行。块级标签 |
|
文本信息在一行展示,行内标签 内联标签 |
7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。
语义化标签是html5中为了提高程序的可读性,提供了一些标签。
标签:
标签 | 说明 |
---|---|
|
页眉 |
|
页脚 |
8. 表格标签:
标签 | 属性 | 说明 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
暂无评论内容