HTML

最新推荐文章于 2021-06-02 23:13:14 发布

yungege_

最新推荐文章于 2021-06-02 23:13:14 发布

阅读量304

点赞数

本文链接：https://blog.csdn.net/yungege_/article/details/78965227

版权

Xml:数据的传输和使用

Html:超文本标记语言（hyper Text markup language），网页设计，数据的展示

Html：静态网页，不会变化(不会关联数据库，除非改变代码，否则数据不会发生改变)

Css:样式修改（给标签加样式，使网页看起来比较好看）

Jsp:动态网页，在不同事件由不同的使用者去查看内容时数据会发生变化（会关联数据库）

W3C:(world wide web consortium)万维网联盟

URL的语法格式如下：协议名称://主机名称[:端口号/存放目录/文件名称]

http://127.0.0.1:8888/sg/index.jsp（浏览器默认协议为http协议）

html概念：超文本标记语言(Hyper Text Markup Language)，是一种解释执行的文本类标记语言，用来描述网页,是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

网页文件本身是一种文本文件，浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

分析简单的HTML结构

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

//元数据等...浏览器/搜索引擎

</head>

<body>

//内容

</body>

</html>

html:预定义 xml:自定义<xmlName></xmlName>

Html特性：可以使用.html或.htm作为html文件的后缀名;

可以使用任意文本编辑器创建HTML.

文档类型声明:

1. <!DOCTYPE>声明位于文档中的最前面的位置，此标签可告知浏览器文档使用哪种HTML规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档.

1）严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2）过渡版本(宽松)的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3）frameset:用来做布局，比如左侧导航栏，右侧内容栏，已被div+css取代

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html> 与 </html> 标签:限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<head> 标签用于定义文档的头部，它是所有头部元素的容器。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

可用在 head 部分的标签：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> ：定义文档的标题，它是 head 部分中唯一必需的元素。

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

body元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等)。body中的内容可以显示到浏览器中。

标签：标签用来标记内容，也是用标签表名文本的意义。标签使用"<",">"包围。

某些 HTML 元素没有结束标签，比如 <br />,标签分为成对标签和单标签

元素：一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的开始标签（start tag）到结束标签（end tag）的所有代码。

属性：与元素相关的特性称为属性，属性由键值对组成，写在开始标签中，属性和属性值对大小写不敏感，推荐小写，属性值被包括在双引号或者单引号内，在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。

<元素名属性1=“值1” 属性2=‘值2’></元素名>

核心属性 (Core Attributes):大多数元素都可以使用的属性。

id 唯一标识

class 标识一类元素

style 样式

title 描述信息

规范：元素名和属性都不区分大小写。

注：HTML标签对大小写不敏感，在未来 (X)HTML 版本中强制使用小写。

不要忘记结束标签，虽然即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，忘记使用结束标签会产生不可预料的结果或错误，未来的 HTML 版本不允许省略结束标签。

空的 HTML 元素，没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。

注释：代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码，注释代码是不会在结果窗口中显示出来的。

1.定义元数据关键字

2.报头规范

将会创建如下的消息头:Content-Type:text/html;charset=utf-8

将会创建如下的消息头:Content-Language:zh-CN

定时让网页在指定的时间n后跳转到页面http://yourlink

颜色：提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

2）大小

px 像素

HTML 页面结构

CSS 页面表现

1)块级(block)标签

特点：1)独占一行

2)相当于一个容器，包含其他标签或内容，比如包含页面上的栏目版块

h1~h6 标题 <h1> 定义最大的标题，最高等级。<h6> 定义最小的标题。特点:

1)有字体大小的设置

2)文本有加粗强调设置

3)上下文之间有较大间距

4)请确保将 HTML heading标签只用于标题,不要仅仅是为了产生粗体或大号的文本而使用标题

p 段落

特点： 1)独占一行

2)上下文之间（段前段后）具有距离，可用css样式来删除或者改变

hr 水平线

特点：hr元素可用于分隔内容，显示一条灰色的横线。

单（空）标签：没有html内容的标签，只需写开始标签后加/即可。

如<hr/>，<br/>,<img/>

br 换行

需要注意的是，HTML 代码中的所有连续的空行（换行）被显示为一个空格，可采用br输出换行

特点：在不产生一个新段落的情况下进行换行（新行），使用单标签<br />

空格需使用实体：

ul li 无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。

特点：1) ul li都独占一行空间

2) ul 上下文之间有很大空间

3) li与列表的样式显示(默认点状)，并且有文本缩进

4）列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

<ul>

</ul>

改变样式使用ul或li的属性type

ul:可选值为disc，square，circle

li:可选值为disc，square，circle，1，A,a，i，I

ol li 有序列表：有序列表也是一列项目，列表项目使用数字进行标记

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

改变样式使用ol或li的属性type

ol:可选值为1，A,a，i，I

li:可选值为1，A,a，i，I,disc，square，circle

dl dt dd 自定义列表：自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以<dd> 开始。

特点：1)dl dt dd独占一行空间

2)dd有文本缩进

<dl>

</dl>

行内（内联inline）标签

span

特点：没有语义，作用就是为了设置其他单独的样式。

1)最干净的内联标签,本身没有固定的格式表现（没有任何修饰）

2)不独占一行

decoration文本修饰标签

<em>强调</em> 浏览器中是斜体表示

<strong>加重/更强烈的强调</strong> 浏览器中用粗体表示

<u>下划线修饰</u>

<q>引用</q>引用的文本不用加双引号，浏览器会自动添加双引号

<a>标签可定义锚(超链接)

锚 (anchor) 有两种用法：

1.定义超链接，通过使用 href 属性，创建指向另外一个文档的链接（或超链接）

连接状态：

未访问：蓝色

活动链接(鼠标按下)：红色

已访问：紫色

特点:1)不独占一行

2)点击可以发生跳转（或进行对应操作)

3)文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示

格式：<a href="目标网址" title="鼠标滑过显示的文本">文本显示</a>

url可以使用相对或绝对路径

如：<a href="">超链接图片</a>

属性：href 定义连接的目标URI

空连接：javascript:void(0);

target 定义连接的目标窗口

_blank（新建一个窗口）

_self（在自身窗口打开）

_parent

_top（在顶层窗口打开）

自定义窗口名

mailto:链接Email地址

mailto:aaaaa@briup.com?cc=a1.briup.com;a2.qq.com&bcc=a3.briup.com&subject=邮件主题&body=邮件内容（bcc:加密抄送）

第一个参数以?连接，之后的参数以&连接

2. 通过使用 name 或 id 属性，创建一个文档内部的书签(锚点),

锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特点位置。

如：使用a标签命名锚：<a name="top" >第一章</a>

即可通过超链接跳转至该锚点。<a href="#top">跳转至第一章</a>

锚点也可通过其他标签的id属性创建

img图片（内联块状元素）

1.图片类型常见有：

GIF（graphics interchange format,图形交换格式）

JPEG（joint photographic experts group,联合图像专家组）

PNG（portable network graphics,可移植网络图形）

2.链入图片文件

属性：

src : 图片的源地址，可以使用相对或绝对路径

title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，title属性的值就会以浮动的形式显示出来。

alt : 当图片文件找不到的时候显示的文本信息

width : 图片的宽度 height : 图片的高度

border ：图片的边框 align ：图片和文字的对齐

当align值为left时，图片靠在最左方，周围的文字显示在右侧上方

当align值为right时，图片靠在最右方，周围的文字显示在左侧上方

当align值为middle时图片靠在最上方，周围的文字显示图片两侧垂直居中对齐

当align值为top时，图片靠在最下方，周围的文字显示在上方

当align值为bottom时，图片靠在最上方，周围的文字显示在下方，默认

src="图片地址"

为图片添加链接：<a href=""><img src="" alt=""></a>

属性：

coords 属性规定区域的 x 和 y 坐标，坐标值

coords 属性与shape属性配合使用，来规定区域的尺寸、形状和位置。图像左上角的坐标是0,0。

shape：default默认为整个区域,rect矩形,circle圆形,poly多边形

href:定义此区域的目标 URL

target:规定在何处打开 href 属性指定的目标 URL。

表格

1）table (块状标签)

定义表格，默认没有表格线。

属性：

border:设置表格边框线条宽度（设置了table以及td的边框，可配合cellspaceing使用）

width:设置表格宽度

align:表格在页面中对齐

left 左对齐表格。

right 右对齐表格。

center 居中对齐表格。

bgcolor:表格背景色

background:背景图片

cellspacing: 单元格之间的间距，规定单元格之间的空间

cellpadding: 单元格之间的衬距，规定单元边沿与其内容之间的空白

frame:表格中边框线的显示，规定外侧边框的哪个部分是可见的

void：不显示边框(默认)

box 四个边框

border：四个边框

rules:表格中分割线的显示，规定内侧边框的哪个部分是可见的

rows 仅在行间显示分割线

cols 仅在列间显示分割线

summary：摘要语法：<table summary="XXXX">

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容。

tr：定义表格行

th/td

th: 定义单元格:表头，居中加粗

td: 定义内容单元格

属性：

colspan 跨列

rowspan 跨行

align 单元格水平对齐

left,center,right,justify两端对其@

valign 单元格垂直对齐

top,middle,bottom

对齐的继承：同一级别根据大的来

1）内容自身的设置具有最高优先级

2）th,td元素的对齐设置

3）tr,thead,tfoot,tbody元素的对齐设置

4）table元素的对齐设置具有全局性

5）默认的设置

caption:表格的标题

5）表格的分组显示

thead 表格头

tbody 表格主体

tfoot 表格尾：声明的内容始终在最末端

框架文档作用：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架结构标签：freamset以及框架标签fream

一个框架文档由四部分组成，文档声明，html元素，head元素，frameset元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

1）frameset框架集

rows="20%,20%,30%,*" :定义将框架水平分隔为子框架的数量和高度

cols:用来定义将框架垂直分隔为子框架的数量和这些子框架的宽度。

2）frame框架窗口 div+css

属性

src: 设置框架的初始内容

frameborder: 框架窗口边框线（0,1）

marginwidth: 在框架的边缘和边框的内容之间可以出现的空白（左右边）

marginheight: 在框架的边缘和边框的内容之间可以出现的空白（上下边）

scrolling: 框架视图的滚动条设置

auto必要时提供，默认值

yes提供滚动条

no 不提供滚动条

noresize: 改变框架窗口大小

name: 框架名称，作为该框架的标识

target:框架目标

_blank

_parent

_self

_top

框架名

3）iframe内联框架

iframe允许用户在一个文本中插入一个框架，iframe元素可以使用frame元素的所有属性，实现功能也相同。

4，表单

主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单是客户端和服务器端传递数据的桥梁，是实现用于与服务器互动的最主要方式。（比如：文本域、下拉列表、单选框、复选框等等）

1）form: 表单控件的容器

属性

action 设定处理表单数据URI的地址,当提交表单时，向何处发送表单数据

method 设定数据传送到服务器的方式

get :将输入的数据追加到action地址后面

post:将输入的数据保存到HTTP协议的报文中

name 设定表单的名称

enctype 设定表单数据的内容类型

2）input 基本表单控件（内联块状元素）

属性：

type 控件类型

text 单行文本框

password 密码框

radio 单选按钮同一组的选项，name取值一定要一致

checkbox复选框

submit 提交按钮

reset 重置按钮

file 文件

hidden 隐藏域

image 图像提交按钮

button 普通按钮

name：控件名称，这个名称将与控件的当前值形参"名称/值"对一同随表单提交，后台会使用到.

value:为文本输入框设置默认值（一般起到提示作用）

checked:单选框，复选框默认选中，设置checked="checked"

size:当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示可以看到的字符的数目

maxlength:指定可以输入的字符的最大值。适用于控件类型为text,password。

3）button按钮控件

属性

name 控件名称

value 控件初始值

type 控件类型

button 普通按钮

submit 提交按钮

reset 重置按钮

图片按钮:<button><img src="" alt=""></button>

4）select下拉列表

</select>

属性

name: 控件名称

size: 列表框中行的显示数量

multiple: 是否允许多选multiple="multiple"

如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框）.如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框.

// selected: 默认选中

option下拉列表选项

属性：

value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。

4）textarea多行文本框

属性 name: 控件名称

rows: 定义文本框行数

cols: 定义文本框列数

<textarea>这里输入默认值</textarea>

5）label为表单控件定义标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。<label for="控件id名称">

6）fieldset为表单添加结构

一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些表单控件。

<form>

</form>

</fieldset>

7）其他控件特性

disabled禁用

支持该属性的控件：button,input,optgroup,option,select,textarea

1）禁止的元素不接受节点

2）禁止的控件的值不与表单一起被提交

readonly只读

支持该属性的控件：input,textarea