HTML的概念:
网页分为结构(HTML)表现(CSS)行为 (JS)
HTML(Hypertext Markup Language):超文本标记语言
- 作用:
- 将后台根据用户请求处理的请求结果在浏览器中显示给用户
- 在浏览器中数据需要使用合适的格式展现给用户.
- HTML是告诉浏览器接收到的数据使用什么样的数据组织形式进行显示.
- 使用:
- HTML的标准文档规范
- HTML的标签
HTML的文档声明:
文件名.html 或者 文件名.htm
HTML的三大基石:
- URL:统一资源定位符(唯一的定位一个网络资源)
- HTTP:超文本传输协议(规范浏览器和服务器之间数据交互的格式)
- HTML :超文本标记语言(有效的组织数据在浏览器端的显示)
一.HTML的顶层标签:
<html></html>
此元素可告知浏览器其自身是一个 HTML 文档.
二.HTML的头标签:
<head></head>
主要是配置浏览器显示数据的配置信息,例如:字符编码等.
三.网页标题标签:
<title></title> 网页标题标签:告诉浏览器使用什么标题显示网页
四.编码格式标签:
<meta charset="utf-8"> 网页解析编码格式配置:告诉浏览器使用指定的编码格式解析
<meta http-equiv="content-type" content="text/html;charset=utf-8"> HTML4:文档编码格式设置
五.网页搜索优化标签:
<meta name="keywords" content="HTML,SXT,等等" /> <!-- 关键字 -->
<meta name="description" content="本网页是关于..."/> <!-- 网页描述 -->
<meta name="author" content="某某"/> <!-- 作者 -->
六.网页指定跳转标签:
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!-- 网页自动跳转 -->
七.其他标签:
例如:css引入标签和js引入标签
HTML引入JS/CSS的方式:
<!--引入外部的css文件-->
<link rel="stylesheet" href="css/index.css" />
<!--引入外部的js文件-->
<script type="text/javascript" src="js/index.js" ></script>
八.HTML的主体标签:
<body></body> 给用户进行数据展示
九.标题标签:
<h1><h1/> ...h1到h6:会将其中的数据加粗加黑显示,由大到小,并且标题标签自带换行功能(块级标签)
属性:
align: center left right (居中、左、右)
十.水平线标签:
<hr> 会在页面中显示一条水平线
属性:
width="宽度" 设置水平线宽度
size="高度" 设置水平线的高度
color="颜色" 设置水平线的颜色
十一.段落标签:
<p><p/> 会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便,会自动换行(块级标签)
十二.换行标签:
<br/> 告诉浏览器需要在此位置换行
十三.空格字符:
 
十四.权重标签:
<b><b/> 会将内容加黑显示
<i><i/> 会将内容斜体显示
<u><u/> 会将内容增加下划线
<del><del/> 增加中划线
- 注意:
- 标签的属性是对标签的功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的效果.
- 像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小.
十五.无序列表:
<ul>
<li></li>
</ul>
十六.有序列表:
<ol>
<li></li>
</ol>
十七.自定义列表:
<dl>
<dt></dt>
<dd></dd>
</dl>
例子:
十八.HTML的图片标签:
<img src=""> 行内元素
src: 图片的路径;网络资源的URL
width: 设置图片宽度,默认锁定纵横比(可设置px,也可设置百分比)
height: 设置高度
title: 鼠标指针悬停显示的信息
alt: 当图片加载不成功显示的信息
十九.HTML的超链接标签:
<a href="" target:""><a/>
href: 要跳转的资源路径
target: 指定跳转的方式
方式为:
- _self: 在当前页中显示
- _blank: 在新的标签页显示
- _top: 在顶层页面中显示
- _parent: 在父级页面中显示
锚点:
作用: 在网页内进行资源跳转
使用:
先使用超链接标签在指定的网页位置增加锚点,格式为:
<a name="锚点名"></a>
使用a标签可以跳转指定的锚点
<a href="#锚点名"></a>
*<a href="#"></a> 刷新当前页
二十.HTML的表格标签:
<table border="" cellspacing="" cellpadding="">
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
table: 声明一个表格
tr: 声明一行
th: 声明一个单元格,表头格,默认居中加黑显示
td: 声明一个单元格,默认居左显示原始数据
border: 给表格添加边框
cellspacing: 设置边框大小
cellpadding: 设置内容距离边框的距离
colspan: 列合并
rowspan: 行合并
特点: 默认根据数据的多少进行表格的大小显示
二十一.HTML的内嵌和框架标签:
1.内嵌网页:
<iframe src="" ></iframe>
src: 要显示的网页资源路径
注意:默认当前页面打开和加载src指向的资源
width: 设置显示区域的宽度
height: 设置显示区域的高度
name: 设置内嵌区域的名字,结合超链接标签的target属性
2.框架标签:
<frameset >
<frame src="" >
</frameset>
rows: 按照行进行切分页面
cols: 按照列进行切分页面
<frame src="" name=""> 进行切分区域的占位,一个frame可以单独加载网页资源.
name:区域名,结合超链接使用
二十二:HTML的表单
<form action="" method="">
</form>
action:提交地址
method:提交方式