html(Hyper Text Markup language)基本概念:
它是一种超文本标记语言(标签)
作用:通常我们通过编写HTML文档来实现网页结构。
HTML 是一种标记语言,不是一种编程语言。
特点:可以通过一个简单的记事本方式编辑
HTML:文档主要内容包含HTML 标签和纯文本内容
HTML 主要用浏览器来解释执行(简称打开)。
什么是标记:
tag 标签,同时也常被称为“元素”(Element)
<>:一对尖括号
<a> <div>
Html 书写
1.HTML 标签元素对书写时,对大小写不敏感
例如:<a> <A> 效果完全一样
2.标签的分类
2.1:单标签<元素名称/> 例如:<A/>
2.2:双标签<元素名称></元素名称> 例如:<A>...</A>
双标签通常由一个起始标签和一个结束标签,再加上内容所组成。必须有头有尾
建议:先写两头(标签),再写中间(内容)。
注意:一个应该闭合的标签没有闭合,则会导致各种错误。
3.标签与标签的互相嵌套关系
要求:必须完全嵌套
例如:<a>
<b>
</b>
<c> <d>
</d>
</c>
</a>
优点:代码层次感清晰,便于后期代码的维护。
HTML基本结构(网页的框架)
HTML 5的版本
<!DOCTYPE HTML>
<html>
<head>
<title> 通常写标题、注释、引用关系等 </title>
</head>
<body>
所有要显示在浏览器的内容,统统写在这里
</body>
</html>
<title> 通常写标题、注释、引用关系等 </title> 设置网页新窗口的标题
<p></p>段落元素,可以自动换行
<meta charset="utf-8"/> 国内常见的字符集编码格式:“UTF-8”、 "GBK"。
编码格式与解码格式不同就会出现乱码。
属性:通常添加在标签内,元素名称后。
目的:可以使元素添加各种功能和效果。
单标签<元素名称 属性名称=“对应的值”/>(双引号必须是英文输入法)
双标签<元素名称 属性名称=“对应的值”>...</元素名称>(双引号必须是英文输入法)
注意:双标签中的属性只能写在起始标签内,元素名称后,需要空格隔开。
1:<b></b>: 设置文本字体加粗
2:<i></i> :设置文本字体为斜体
3:<big></big>: 设置文体字体变大
4:<small></small>:设置文本字体变小(big和small叠加,效果不变)
5:<u></u>:设置文体字体下划线
6:<s></s> :设置文本字体加删除线
7:<sup></sup>:设置文本字体上标
8:<sub></sub>:设置文本字体下标 (sub和sup叠加效果,前面的起作用)
9:<hr/> :水平分割线
9.1:设置线段颜色和粗细(高度),通过size的属性,默认值为“1”;
例如:<hr color="red" size="5"/>
9.2:设置线段的宽度(长度),通过width属性,默认值“100”;
例如: <hr color="red" size="3" width="20%"/>
<hr color="green" size="5" width="50%"/>
<hr color="blue" size="8" width="80%"/>
9.3:设置线段的水平位置,通过align属性,默认值为”center“;
例如:<hr color="red" size="3" width="50%" align="left"/>
<hr color="green" size="5" width="10%" align="right"/>
<hr color="blue" size="8" width="10%" align="center"/>
9.4.1:全局修改
设置页面内容修改
<body text="red">...</body>
9.4.2:部分修改
通过<font>...</font> (默认值是3,size范围 1-7)
例如: <font size="5" color="red">...</font>
9.5:标记的意思,例如<ruby>...<rubby>
例如<ruby><rt>...</rt><rubby>
10:<br/> :换行
11:<nobr>...</nobr> :取消换行
12:<pre>....</pre> : 保留原始排版元素
13:<hn>...</hn>: n表示有6组,显示都为黑体
14:<span>...</span>: 段落标记
例如:<style>span{ color:green; font-size:50px; }</style> <span> 你好!</span>
14:<></>特殊符号(转义符号): (用的最多的是 )
大于号 >
小于号 <
单引号 '
双引号 "
&(and)符号 &
乘号 ×
小节符号 §
空格符号
版本符号 ®
注册商标符号 ©
人名币符号 ¥
这一张先讲到这里,下一章节我们将html中图像和图像路径的问题