一、什么是HTML
HTML是用来描述网页的一种语言,中文名称叫做超文本标记语言(HyperTEXT Markup Language)HTML不是一门编程语言,是一种标记语言,本身有一套完整的标记标签通过这些标签标记来描述网页,完整标签组成的文档称为HTML文档,包含了文本和标签,是一个完整的HTML文档也叫Web页面。
二、HTML标签
HTML标签是由尖括号包围的关键字,比如:
大部分的标签通常是成对存在,比如:
<标签>
内容
</标签>
三、Web浏览器
web浏览器用于解析HTML文件,并将其作为网页显示,浏览器不是直接显示HTML标签,但是可以使用标签来决定如何战时HTML给用户。
四、HTML网页结构
可视化HTML页面结构
如果在页面中显示一些内容,<body>标签必须存在。
五、HTML编辑器(推荐四种)
1.VS code
2.sublime text
3.dreamweare(企业常用)
4.WebStorm
5.PHPStorm
6.文本文档编辑(将后缀名改为.html)
六、HTML头文件
在HTML中,定义头文件用<head>标签
七、HTML后缀名
有html和hml两种后缀名
八、HTML标题
标题通过到标签<h>来定义,<h1>其中是最大的标题,<h6>是最小的标题。
效果如下:
浏览器会自动在标题的前后添加空行。
标题很重要,一定要确保HTML的标题只用于标题。不仅仅是为了生成粗体或者大号而使用。在web浏览器中可以通过标题进行快速浏览网页,并且根据标题呈现文档。
九、HTML水平线
水平线是为了分隔内容,在HTML中使用
效果如下:
十、HTML注释
HTML注释会让浏览器忽略,不会显示出来,通常使用的标签是,开始括号之后又英文的!,合理的使用注释
十一、HTML段落
1.段落
HTML可以将文档分割成若干个段落,段落是通过标签<hr>来定义。
效果如下:
2.换行符
HTML换行符是<br>使用可以进行换行。
3.空格
表示的空格
效果如下:
十二、HTML文本格式化
1.排版
浏览器会忽略源代码中的排版,因此需要用<br>标签去排版。
效果如下:
2.字体
<b></b>和<strong></strong>:定义粗体文本
<em>:定义着重文字
<i>:定义斜体文字
<small>:定义小号文字
<sub>:定义下标字
<sup>:定义上标字
<code>:定义计算机代码
<s></s>和<del></del>:添加下划线
<u></u>和<ins></ins>:添加下划线
字体可以组合使用
(1)加粗粗代码及效果:(只需要在前面加上相应的标签即可)
(2)上标的用法(下标一样)
(3)code字体
十三、动态页面和静态页面
基于是否与数据库进行交互和数据库交互web页面通常称为动态页面。安全性最高的静态页面。
十四、HTML连接
html超链接可以与网络中另一个文档连接。点击一下可以从一个页面跳转到另一个页面。
URL(统一资源定位符):在网络中寻找资源。
格式:协议://映射地址[:端口号]/路径。
在HTML中使用<a>来设置。超链接可以字、词、一组词或者一组图片。
<a herf="url" target="_blank">链接文本</a>
target属性可以打开新的标签,原来的标签不关闭
十五、HTML图像
在html中使用<img>标签来定义
<img src="url" width=""height="" />
src表示图片源
width表示图片显示宽度
height表示图片显示高度
十六、src路径写法
1.html文件和jpg在同一个目录下
<img src="url" width=""height="" />
2.同一目录下,且.jpg在images文件下,*html与images在同一目录下
<img src="images/*.jpg" width=""height="" />
3.图片来源于网络
<img src="图片链接" width=""height="" />
十七、HTML标签分类
1.单标签
指用一个标签符号就可以完整描述某个功能的标签。
格式:<标签名/>
例如:<img/>、<br>
2.双标签
是指由开始到结束两个标签符号。
格式
<标签名> 内容 </标签名>
例如:<h1> <h1/>、<p></p>
十八、标签的属性
控制显示内容格式
语法格式:
<标签名 属性1 = "属性值1" 属性2 = "属性值2 属性3 = "属性值3...>内容</标签名>
十九、标题和段落标签的属性
为了使HTML页面有条理的显示出来,HTML提供了相应的标记与属性。
1.标题和段落的对齐属性
letf:设置文字左对齐(默认值)
center :设置为文字居中对齐
right:设置文字为右对齐
2.水平线
为了使文档层次分明,我们可以创建水平线,基本的语法格式:
<hr 属性=“属性值” />
3.文本样式标记(font)
文本样式标记主要是来控制网页中文本的字体、字号、颜色
(1)基本语法格式
<font 属性=“属性值”> 内容 <font>
(2)属性名
face:用于设置文字的字体,例如微软雅黑、宋体、黑体
size:设置文字大小,可以取得1-7的整数值。
color:设置文本颜色,可以使用英文单词,也可以使用颜色代码
二十、特殊字符标记
空格 :空格符
<:小于号 <
>:大于号 >
¥:人民币 ¥
©:版权 ©
®:注册商标 ®
二十一、<div>标签
<div>标签是一个块容器标签。可以将网页分割成的独立部分,以实现网页的规划和布局。大多数的HTML标签都可以嵌套在<div>标签中,且<div>可以嵌套使用
格式:
<div style=“属性;”>
其他标签
</div>
<div>标签中,style的属性值设置是以键值对的形式存在,属性:属性值;
margin:外边距
padding:内边距
border:边框
test-align:文字显示的居中方式