HTML 是用来描述网页的一种语言。 用来显示信息。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
----------------------------------------------------------------------------------------------------------------------------------
<br/> 用于换行
<hr/> 定义水平线
<head>标签里面可以加属性,<head lang="en"> </head>英文格式;里面可以改成zh,是中文格式。
大多数的标签都可以嵌套,
例如:<p><a>this is test</a></p>
常用标签属性:
<h1>: align对齐方式,如果不设置align="right",则默认是居左的。
<body>: bgcolor背景颜色,background背景图片
<a>: target规定在何处打开链接元素的额外信息,如target="_blank"是在新的页面打开。还有其他几个类似的属性。
例如:<a href="loginPage.html" target="_blank">登录页面</a>
通用属性:
class: 规定元素的类名
id: 规定元素唯一ID
style: 规定元素的样式
title: 规定,设置当前页面的标题信息
文本的格式化(有10种):
<b>欢迎来到我的测试页面!</b> 会加粗字体
<big>定义大号字体。要带有结束标签。
<em>定义着重文字
<i>定义斜体字,字体斜体
<samll>定义小号字,字体变小
<strong>定义加强语气
<sub>定义下标字,
<sup>定义上标字,
<ins>定义插入字,相当于是在那行文字下加了一条线
<del>定义删除字,就是在那行文字中画一条横线,相当于删除掉
HTML样式:
1、标签:
<style>:样式定义
<link>:资源引用
3种样式表插入方式:
外部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
详细见例子。使用外部的样式表操作。
内部样式表:
<style type="text/css">
body{ font-size: 15px;"> p{margin-left:20px}
</style>
内联样式表:
<p style="color:red>
例子:<a href="http://www.baidu.com" style="color:red">再次测试页面哈</a>
2、属性:
rel="stylesheet":外部样式表
type="text/css":引入文档的类型
margin-left:边距
1、链接:
文字链接
图片链接
<a href="http://www.baidu.com">点击我,百度首页</a>
<a href="http://www.baidu.com"><img src="Images/login-page2.jpg" width="200px" height="200px" alt="我的图片"></a> 2、属性:
href属性:指向另一个文档的链接
name属性:创建文档内的链接,本文档内部跳转
<a name="tips">hello</a>
<a href="#tips">跳转到hello</a>
3、img标签属性:设置页面中出现的图片的大小。
alt:替换文本属性。如果图片没有显示出来,通过它设置的内容会显示出来。
width:宽,px是单位,是像素。
height:高
表格:<table>
表格没有边框,则是border不写,或则等于0
<table boder="1" cellpadding="10"> 设置表格的大小,cellpadding 合并单元格
<th>:表头。就是一列的最上方。
Html列表:
1、无序列表
使用标签:<ul>,<li>, 如type=“disc”
属性:disc(实体圆)、circle、square
2、有序列表
使用标签:<ol>、<li> 也是用type属性。也有 start属性,就是说从哪个开始
属性:A、a 、l、i、start----->就是说用下面的这些排序。
3、嵌套列表
使用标签:<ul> 、<ol>、<li>
4、自定义列表
使用标签:<dl>、<dt>、<dd>
HTML块:
1.HTML块元素
块元素在显示时,通常会以新行开始,如:<h1>、<p>、<ul>
2.HTML内联元素
内联元素通常不会以新行开始
如:<b>、<a>、<img>
3.HTML<div>元素
<div>元素也被称为块元素,其主要是组合HTML元素的容器
注意:#divid p{
color:red;}
这个的使用,它的效果是只改变div中的p的颜色。
4.HTML<span>元素
<span>元素是内联元素,可作为文本的容器
HTML布局:
1.使用<div>元素布局
body{margin:0px;} 去掉页面四周的白边
div#content_menu{
width:30%;
height:80%;
background-color:green;
float:left;
} float:left ----->这个是用来让布局从左到右的,
div#footing{
width:100%;
height:10%;
background-color:blue;
clear:both;
} clear:both -->是清除上面的浮动的效果。
2.使用<table>元素布局
Html表单:
1.表单用于获取不同类型的用户输入
2.常用表单标签:
<form> 表单 <input> 输入域 <textarea> 文本框 <label>控制标签
<filedset> 定义域 <legend>域的标签 <select>选择标签
<optgroup> 选项组 <option> 下拉列表中的选项 <button>按钮
常用的:
1.复选框 如:苹果<input type="checkbox">
2.单选按钮 如:请选择你的性别:
男<input type="radio" name="sex">
女<input type="radio" name="sex">
其中sex如果不是一样,则不会实现单选按钮的作用
3.下拉列表: 如:
请选择你常用的网站:
<select>
<option>www.baidu.com</option>
<option>www.sina.com</option>
<option>www.google.com</option>
</select> 4.文本域:
如: <textarea cols="30" rows="30">请在此填写个人息</textarea>
5.按钮:
如: <input type="button" value="按钮">
<input type="submit" value="提交">HTML框架、背景和实体:
HTML框架:
1.框架标签(frame)
框架对于页面的设计有着很大的作用。
2.框架集标签(<frameset>)
框架集标签定义如何将窗口分割为框架
每一个frameset定义一些列行或列
rows/cols的值规定了每行或每列占据屏幕的面积
3.常用标签
noresize:固定框架的大小
cols:列
rows:行
4.内联框架:(重要)
iframe
<a href="www.baidu.com" target="_self">baidu</a>
属性target注意,target的值,_self 是在本页面内打开链接的内容 ,还有别的值
HTML背景:
1.背景标签:
background
2.背景颜色
bgcolor
3.颜色:
颜色是由一个十六进制符号来定义,这个符号由红色,绿色,和蓝色的值组成(RGB)
颜色值最小值:0(#00)
颜色值最大值:255(#FF)
红色:#FF0000
绿色:#00FF00
蓝色:#0000FF
HTML实体:
HTML中预留字符串必须被替换成字符实体
如:<、>、&
abcd<htmlgt; 输出的结果是:abcd<html>
text-decoration:在HTML语言中表示属性规定添加到文本的修饰,如添加下划线
可能的值:none 默认。定义标准的文本。
<marquee>滚动标签
<meta> 是关于数据的信息,位于head中。