HTML5

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、标签：

<link>:资源引用

3种样式表插入方式：

外部样式表：

详细见例子。使用外部的样式表操作。

内部样式表：

body{ font-size: 15px;"> p{margin-left:20px}

</style>

内联样式表：

例子：<a href="http://www.baidu.com" style="color:red">再次测试页面哈</a>

2、属性：

rel="stylesheet":外部样式表

type="text/css":引入文档的类型

margin-left：边距

1、链接：

文字链接

图片链接

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.下拉列表: 如：

请选择你常用的网站：

<option>www.baidu.com</option>

<option>www.google.com</option>

</select>

4.文本域：

如： <textarea cols="30" rows="30">请在此填写个人息</textarea>

5.按钮：

如： <input type="button" 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>滚动标签

posted @ 2017-12-06 22:10 无涯的风阅读(189) 评论(0) 编辑收藏举报

刷新页面返回顶部

Tomorrow

HTML5

HTML 标签

HTML 文档 = 网页

公告