一、概述
1、什么是HTML?
HTML(HyperText Markup Language):超文本标记语言
- “超文本”就是指页面可以包含图片、链接等非文字内容。
- “标记”就是使用标签的方法将需要的内容包括起来。例如:
<a>你好</a>
2、HTML能干什么?
HTML用于编写网页
页面内容包含:HTML代码、css代码、JavaScript代码等内容
3. html:用于展现需要的内容
4. css:使显示的内容更美观
5. JavaScript:使整个页面显示的数据具有动画效果
根据页面内容是否改变分为:静态网页、动态网页
- 静态网页:编写之后再浏览器不再改变的网页。HTML就是用来编写静态网页。
- 动态网页:会根据不同的情况展示不同的内容。例如:登录成功后右上角显示用户名。
3、HTML的使用
语法规范
- HTML文件的扩展名为.html或.htm,建议使用.html。
- HTML结构都是由标签组成
- 标签都是预先定义好的,只需了解功能即可。
- 标签名不区分大小写,建议用小写。
- 通常情况下标签名都是由开始标签和结束标签组成,例如:
<a>你好</a>
- 如果没有结束标签,建议以/结尾。例如:
<img/>
- HTML结构包括两部分:头head和体body。
<html>
<head>
<title>标题</title>
</head>
<body>
<!--这里是正文-->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<html>
整个页面的根标签,理论上一个页面只需要一个,由头<head>
和<body>
体组成。
HBuilder
流行的前端IDE
二、标签
1、排版标签
标题标签<h1></h1>
水平线标签<hr/>
样式标签<font color="" size=""></font>
格式化标签<b></b>,<i></i>
段落标签<p></p>
2、图片标签<img/>
属性
- src:指定需要显示图片的URL(路径)。
- alt:图片无法显示时的替代文本。
- width:设置图像的宽度。
- height:设置图像的高点。
3、列表标签<ul></ul>,<ol></ol>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
4、超链接标签<a></a>
属性
- href:用于确定需要显示页面的路径(url).
- target:确定以何种方式打开href所设置的页面。常用取值:_blank、_self等
- _blank在新窗口打开href确定的页面。
- _self默认。使用href确定的页面替换当前页面。
5、表格标签<table><tr><td>
- 父标签`,相当于整个表格的容器
- border 表格边框的宽度
- width 表格的宽度
- cellpadding 单元边沿与其内容之间的空白
- cellspacing 单元格之间的空白
- bgcolor 表格的背景颜色
<tr>
标签用于定义行<td>
标签用于定义表格的单元格(一个列)- colspan 单元格可横跨的列数
- rowspan 单元格可以横跨的行数
- align 单元格内容的对齐方式,取值:left左,right右,center居中。
- nowrap 单元格中的内容是否折行。
<th>
标签用于定义表头,单元格内的内容默认居中、加粗。
6、框架标签<frameset><frame>
框架标签<frameset>
<frameset>
标签,是多个窗口页面整合到一起的集合(集合框架)。每个页面(框架)都是单独文档,需要使用子标签<frame>
来确定页面的位置。<frameset>
通过行和列来确定整体布局,使用cols确定列数,使用rows确定行数。多个<frameset>
可以嵌套使用。
<frameset>
和<body>
不能共存。- rows和cols属性取值:
框架子标签<frame>
<frame>
标签,用于设置<frameset>
框架集中的一个页面(框架)。
- src属性:确定页面的路径
- name属性:通常会结合超链接的target属性使用,来确定需要显示的页面在何处显示。