HTML超文本标记语言(hyper text markup language)
1.web标准
结构(html)+表现(css)+行为(JavaScript)
<!-- 定义文档类型 -->
<!DOCTYPE html>
<!-- language en:English zh-cn:Chinese -->
<html lang="en">
<head>
<!--
解决乱码问题
charset 字符编码
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义网页标题 -->
<title>HELLO</title>
</head>
<body>
</body>
</html>
2.常见的标签
- 块标签 div
- 标题类
h1、h2、h3、h4、h5、h6
h1-h3 对搜索引擎比较友好
h1 一般用于logo
之间的区别:
文字大小不一样,从h1-h6依次变小;独占一行,文字加粗,上下有间距
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
- 段落文字
p 独占一行,上下有间距 - 强制换行
<br> 或者<br/> <br />
/* 前者适用于html5,后者适用于html1.0-1.4 */
- 加粗
b、strong(强调加粗——常用) - 倾斜
i、em(强调倾斜) - 线条
u 下划线
del 删除线
hr 水平线 - 上下角标
sup 上角标
sub 下角标 - 超链接
<a href="#" target="_blank" title="超链接"></a>
/*
href 页面要跳转的地址
target 目标,页面的打开方式:_blank新窗口/_self原窗口
title 鼠标悬停显示
*/
- 图片
<img src="#" alt="">
/*
绝对路径:本地地址+图片名 C:\Users\asus\Desktop\1.jpg
相对路径:
返回上一级(与页面不在同一文件夹下),../文件名/图片名
../images/1.jpg
../ 可叠加使用,使用一次即是返回一个上级,不可跨盘访问
alt与title属性的区别
alt 图片加载失败时显示的文字(对搜索引擎比较友好)
title 鼠标悬停显示的文字
*/
- 常用小标签
span、空格: (转义字符)
小结
- 对搜索引擎友好
title、h1-h3、alt - 块级标签:独占一行
div、h1-h6、p
不常用:[ br / hr ] - 行内标签:占小块(左右排列)——内联元素
span、a、img
[em、strong、del、u、sup、sub] - 单标签(空标签)
mate、br、hr、img - 单标签与双标签
/* 单标签:标签中没有内容 */
<meta charset="UTF-8">
<input type="text">
<img src="" alt="">
/* 双标签:标签中间有内容 */
<a href="">这里是超链接</a>
<p>段落标签</p>
<div>块标签</div>
- 内联元素(行内元素)、块元素、置换元素
内联元素(inline): a、span、em、i、b、strong
块元素(block): ul、ol、li、dl、dt、dd、div、p、h1-h6
置换元素(inline-block): img、input、textare