HTML的初识和常用标签

一.webstorm的使用
1.新建project

2.在project中新建HTML文件和css文件

3.代码编写

4.打开HTML文件

二.什么是HTML
HTML指的是超文本标记语言，是标记符号或代码的集合。
标记语言是一套标记标签。
HTML使用标记标签来描述网页。

三.THML的组成
HTML主要分为头部（head）和主体(body)。
1.头部（head）
head元素包含标题title，以开头，以结束，其中包含title元素和meta元素以及对脚本和样式的引用。
title元素用来配置浏览器窗口标题栏里显示的文本。文本包含在之间，称为网页标题。
meta元素描述网页的特性，例如字符集charset=“UTF-8”。
2.主体（body）
body元素包含网页的实体部分，以开始，以结束，body中包含的文本和元素直接显示在浏览器所展现的网页上，使用主体的目的在于配置网页内容。
示例代码：

显示效果：

四.常用标签
1.h标签：字体加粗，自动换行，改变字体大小（h1-h6依此减小）
示例代码：

效果显示：

2.b标签：字体加粗
3.i标签：字体倾斜
4.u标签：文字加下划线
5.sub/sup标签：sub设置下标；sup设置上标
6.预先格式化标签pre：按照用户想要的形式表现
示例代码：

效果显示

7.列表标签：有序（ol)和无序(ul)标签:每一个列表项包含在< li >< /li >标签内，两个列表标签可以嵌套
示例代码：

8.段落标签p：按段落分段，换行
9.文字标签span:输出文字
10.图像标签：自闭和标签
图像路径：
1.相对路径：部分路径，相对本文件的路径（/表示该文件夹下的某文件，./表示当前文件夹）
2绝对路径：完整路径
3.远程路径：网址
11.超级链接标签a:跳转网页
12.块标签div:做网站布局，搭建网站框架，自动换行
示例代码：

本示例中图像路径为相对路径
效果显示：

13.表格标签table：其中包含控制行元素< tr >< /tr >标签和控制列元素< td >< /td >;在标签中加入对应的属性调整表格
示例代码：

border:标签边框线；bgcolor:背景色；cellspacing:表格各单元格的间距；sellspadding:单元格内容与单元格边界之间的间隔；rowspan:跨行；slign:控制对齐
效果显示：

14.默认单行文本框input:自闭和标签
15.选择菜单标签select
16.多行文本框textarea
示例代码：

type:文本框类型：

• text：单行文本框；
• button：按钮；
• checkbox:复选框；
• radio：单选框；
• password：密码框；
• value：表单对象的值属性
  效果显示：
  
  17.br标签：强制换行
  18.a链接的拓展：瞄标引出伪类；
• 本页面的瞄标
  示例代码：
  
• 跨页面的瞄标
  示例代码：
  
  19.内嵌框架iframe:在框架中打开某个网址
  示例代码：
  
  效果显示：
  
  框架中打开多个网页：
  示例代码：
  
  效果显示：