初识html

最新推荐文章于 2024-07-24 16:53:23 发布

普通玩家

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量1k

点赞数

分类专栏： Web 文章标签： html layout frame CSS javascrpit

本文链接：https://blog.csdn.net/BonJean/article/details/38853567

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

/**

*博客内容仅作学习交流之用，详细内容参见更多网络资源，欢迎大家交流探讨！

1 HTML简介

HTML（Hyper TextMarkup Language）超文本标记语言，通过标记元素（标记符）定义文档内容格式，超文本功能即链接功能，网页之间通过指针起来。Html由国际组织W3C（万维网联盟）维护。

Html基本语法：

① 所有标记符都用尖括号”<>”括起来；

② 绝大多数标记符成对出现：开始标记符、结束标记符。限定标记的作用域，部分标记符单独出现，如：水平线标记符<hr>，换行标记符<br>；

③ Html标记符不区分大小写；

④ Html中没有语句行概念，但为了文档的易读性，建议采用合理的分段和缩进等格式。

Html对页面内容的详细控制实际上是通过设置标记符的相关属性来完成的，标记符的所有属性都包含在开始标记符的尖括号中，用“属性=属性值”表示。属性值可用双引号括起来，也可不用，多个属性间用空格隔开。

网页的基本结构：

<html>

<head>

</head>

<body>

…<!—主体部分-->

</body>

</html>

1. html标记符没有属性，因为web文件后缀为.html，或.htm，已表明文件为Html文件，标记符可省略。

2. head标记符中不包含web的任何内容，包含web页面信息，其中可包含其他标记符。

3. title标记符是头部标记符中常用的，用于设置页面的标题，用于显示在浏览器顶部标题栏中。

4. body标记符包含了web页的主体、整体效果属性：

background 背景图案

bgcolor 背景颜色，默认白色

text 字体颜色，默认黑色

link 超链接颜色，默认蓝色

alink 当前选中超链接，默认红色

vlink 访问过的超链接，默认紫色

颜色可以用颜色的代码（十六进制数值）或英文单词。

Html的注释由开始标记符<!—和结束标记符-->组成。

特殊符号代码：在Html中默认是没有空格的，像空格这样的符号都会被浏览器会略（多个空格视作一个，回车不起作用）。

2 文本格式

字符格式

1.font

①face：可指定多种字体效果（逗号分隔），按顺序显示（若都无相应字体（系统内）），则使用默认字体，或相似字体代替；

②color：指定颜色，每次一种；

③size：字体大小（1~7），默认值为3，超出范围时以两端极值代替，属性值还可以用“+/-数字”来表示与默认值得关系。

2.字体样式

样式标记符	功能	样式标记符	功能
<b></b>	粗体	<strike></strike>	删除线
<big></big>	大字体	<sub></sub>	下标
<i></i>	斜体	<sup></sup>	上标
<s></s>	删除线	<u></u>	下划线
<small></small>	小字体

可以单独使用，也可以联合使用（嵌套使用）。

3.hn

标题标记符，n为1~6的数字，显示为黑体，在动在后换行。

段落格式

1.p(paragraph)

自动换行，保持间距。align(对齐)属性：left、center、right、justify（两端对齐）。

2.pre

预格式化标记，显示时，按Html文档中的格式。

3.hr(Horizontal Rule)

水平线，独立标记符。作用是换行，绘制水平直线。属性：①width：数值（像素）或百分比；②size：粗细（像素）；③noshade：阴影，布尔属性，没有具体取值（默认有阴影）；④align：left、center、right，默认为居中；⑤color：颜色（IE支持）。

4.br(break)

独立标记符，强制换行。新行与原来的属性相同，在原来的段中。

列表格式

1.有序列表（ol, ordered list）（li, list item）

<ol>

</ol>

按规律排序，列表项标记<li>隐含换行作用，</li>常省略。

ol.属性：type，编号样式；start，起始编号。

li.属性：type；value新序列起始值。

2.无序列表（ul, unordered list）

<ul>

</ul>

不对列表排序，使用特定项目符号排序。

ul、li.属性：type（项目符号样式），“disc”（实心圆），“circle”（空心圆），“square”（方框）。

3.嵌套列表

4.定义列表（dl, definition list）(dt, definition term)(dd,definition data)

dt，dd结束标记符可省略，隐含换行。dt,术语标记符、dd.术语定义标记符，内容自动缩进。

<dl>

</dl>

3 超链接与图像

URL（universalresource locator，统一资源定位符）Html用URL定位web上的文件信息。

URL内容：

① 协议方式（常用：http、ftp、mailto），浏览器默认协议时超文本传输协议；

② 所需计算机地址（电子邮件地址，新闻组名称）；

③ 文件名，文件地址的信息。

绝对URL：Internet上资源的完整地址（指定外部资源）；

相对URL：相对当前页面的路径，句点”.”和”..”双重点，分别表示当前目录和上一级目录（父目录）。

Html中的超链接：①页面间；②页面内；③指向电子邮箱，启动默认收发邮件程序：Outlook express。

anchor

a. anchor（锚标），创建超链接标记符，超链接的源link超链接的目标。

属性：href：定义描向的URL，若为浏览器支持格式，则将在窗口中显示，否则采用其他方式显示（下载…）；

target：目标窗口，有框架结构，可指定在框架中显示位置，否则，可将值设为”_blank”在新窗口中显示；

name：锚名称，页内链接使用。

可为文字和图片添加超链接：

1.页面间超链接

2.页面内超链接

①定义锚点；②创建指向锚点的超链接（顺序、位置任意）；

页面内具体位置的超链接也可以用在不同页面中，在文档创建锚点链接时增加另一页面的地址（文件名，同一目录），单独的”#”表示空链接，不进行跳转，扩展补充之用。

3.指向电子信箱的链接

语法：<a href:”mailto:E-mail地址”>…</a>

image

img. image独立标记符，插入图像标记符。

属性：src：图像位置，绝对URL或相对URL；

alt：图片替换文字（关闭图像显示功能，鼠标停留图片）；

width、height：（像素、百分比）为图像留出空间；

align：对齐方式，水平（left、right）垂直（top、bottom、middle）；

border：边框（数值表示像素，可为0）；

hspace、vspace：垂直、水平方向间距（数字表示像素点）。

使用图像创建超链接：border设为0则不显示蓝色边框，链接目标文件为图片（浏览器支持的格式）也可以达到目标位web文件的效果。

图像映射：将图像分成不同的区域，然后每一个区域与一个Html文件建立链接。

<area>

…

</map>

同页面内超链接一样，先定义映射名称，再建立联系，无先后顺序。

area属性：shape：形状（图像划分形状）；

coords：坐标（不同形状需要的数字个数不同，像素）；

target：目标窗口；

alt：替换文字（区域图像）。

4 网页布局

网页布局：table表格&frame框架

table

table：表格标记符；

tr：表格行；

th：表格单元格（表头）；

td：普通单元；

table属性：width、height：宽度，高度（像素、百分比）；

border：边框；

bgcolor：背景色；

align：对齐方式（表格在网页中的位置）（top、bottom、left、right）；

cellpadding：填充距（单元格内容，边界），数字/像素；

cellspacing：单元格间距；

rules：分隔线：none（默认）、groups、rows、cols、all；

caption：表格标题；

tr table rules(表行)、Html表格按行组织，可省略结束标记符。

align：水平对齐方式，left（默认）、center、right、justify；

valign：垂直对齐方式，top、middle（默认）、bottom、baseline；

bgcolor：背景色。

td table data（表格数据）

width（宽度）、height（高度）；

align（水平对齐）、valign（垂直对齐方式）；

bgcolor(背景色)；

rowspan（单元格的行数，默认值为1）、colspan（单元格的列数，默认值为1），实现合并拆分。

th table head（表头）内容默认粗体、居中。

构造表格，从上到下，从左到右。

嵌套表格，表格布局；嵌套框架，框架布局。

frame

框架：能将浏览器窗口分割为若干区域，可以看到不同的网页，网页之间互不影响（独立，可链接），“框架集网页”。

frameset，标记符，使用frame标记符，分割子窗口数目。<frameset>…</frameset>之间不能出现<body>，否则忽略所有框架定义。

属性：raws（高度）、cols（宽度），值为像素值，百分比，n*；

fram 标记子窗口，与划分数对应，独立标记符。

属性：name：名称（以字母开头）；

src：源；

frameboder：框架边框，默认为1，表示可见；

marginwidth：框架左右边距，像素；

marginheight：上下边距；

scrolling：是否显示滚动条，默认为“auto”；

noresize：不允许调整框架尺寸。

指定超链接的目标框架，目标文件显示的框架。

<a href=”目标文件” target=”目标框架名”>链接内容</a>，框架必须是框架值文件中指定的框架名，或特殊框架：

_top：整体浏览器窗口；

_self：当前框架（默认值）；

_blank：新浏览器窗口；

_parent：父框架，一般浏览器现实等同于_top。

创建页面内框架

语法：<iframe>…</iframe>，属性如fram，

如果浏览器支出页面框架，页面内框架显示”src”中定义的Html文档，否则显示<iframe>…</iframe>内容。

5 表单&字母滚动

表单：用于手机信息，包含普通内容，控件（文本框…）、控件标签…一部分是描述表单的Html源代码，另一部分是用于处理用户表单信息的服务器段应用程序。

控件：表单中用于接收数据的元素，具有一个初始值和一个当前值（字符串）。

form表单标记符

method：方法（表单数据提交方式），get在URL末尾附加发送信息（默认），post表单数据作为一个数据体。

action：动作，对应处理程序，程序（ASP、PHP、JSP、Perl）的URL。

input：用户输入表单元素标记符，独立标记符。

属性：name

type：text（文本框）默认，还可以指定相关属性（value, size, maxlength）

password（密码文本框），信息被屏蔽；

checkbox（复选框），value，信息，checked，初始化选择情况；

radio（单选框），一组单选框的name属性值一样；

submit（提交按钮），value显示按钮上的文字；

reset（重置按钮），…

image（图像提交按钮），…，须包括”src（源）”标记；

file（文件选择框），…

button（创建自定义按钮），…

hidden（隐藏控件），…

textarea（多行输入），name, rows（文本域高度）, cols（高度）；

selectoption选择列表表单元素，</option>可省略。

select（选择列表），option（选项列表）；

select：name，size（默认为1，列表项目数），multiple（多行显示），多重选择（bool）,

option：value（值），selected（选中初始默认项），

label：选择选项或定位输入点，为控件指定标签。属性for：控件的id。

marquee滚动字幕

属性：direction，left（默认）、right、up、down；

behavior：scrall（默认）、slide、alternate，

loop：循环、不设置则为无限次，

scrollamount：速度，

scrolldelay：延时（千分之一秒），

align：height、wight，

bgcolor：hspace、vspace，

6 CSS

CSS（cascadingstyle sheets）是一种定义网页格式的标准方法，级联式样式表或层叠式样式表，是格式化网页元素的标准方法，为具有一定逻辑含义的内容设置统一的格式。使用方式：①直接嵌入样式表；②链接外部样式表；③导入外部样式表；④内联样式表。

在<style>…</style>中定义CSS。样式表项组成：seloctor{property1:value11,value12;property2:value21,…;…}

selector(选择器，选择符)为需要应用样式的对象，

property，由CSS标准定义的样式属性，

value表示标示属性的值。

样式表中的注释语句/*…*/，不可嵌套。

selector种类：①Html标记符，如不同的seloctor包含相同的内容，采用编组方式定义样式，seloctor之间以逗号分隔。

②具有上下文关系的Html标记符样式，为某个元素内的元素设置特定的样式规则，上下关系可以嵌套任意多层。

③用户定义的类：标记符类，使用类（class）来为单一Html标记符创建多个样式，定义：句点.类名。

selector.classname{property1:value;…}

在需要的地方使用class属性应用这些类，标记符类样式可以和标记符样式共同使用。

通用类：定义能应用于所有标记符的类：（style中的类）

.classname{property1:value;…}

④用户定义的ID：ID定义样式，

#IDname{property:value;…}同样在需要出使用id属性。

⑤虚类：对于a标记符，可以用虚类的方式设置不同类型链接的显示方式。

a:link/:link

a:visited/:visited

a:active/:active

a:hover/:hover

将CSS添加到HTML中：

① 直接嵌入样式：在Html源文件的.head标记符中直接使用style标记符定义CSS，在body标记符内调用CSS。

② 链接外部样式表：单独创建一个样式表文件（.css），在HTML文件中调用（在标记符head之间）。

link属性：rel，链接文件和Html文件的关系；

href：链接文件位置（绝对、相对）；

type：链接文件类型.text/css，

一个Html文件可链接多个样式表，如多个外部样式表之间有冲突，则以后面的样式为准。

③ 内联样式表：可将style属性与Html标记符body中的任何标记符联合使用，每个声明用分号隔开，每个属性值用逗号隔开，该方式不易应用，不易修改。

若使用了同类样式，优先级高的样式将覆盖优先级低的样式，内联样式高于link标记的链接样式，高于嵌入样式。

CSS单元：长度单位（有效的相对单位，绝对长度单位）

百分比单位（相对长度）

颜色单位（#rrggbb,#rgb（十六进制）,rgb(x,y,z),rgb（x%,y%,z%））

CSS常用属性：字体属性，颜色及背景属性，文本属性，布局属性，列表属性。

Web三种定位方式：静态定位，绝对定位，相对定位。

6 JavaScript

使用javascript三种方式：①使用script标记符；②直接添加脚本；③链接脚本。

可以运行在客户端的浏览器（客户端脚本，解释执行/执行前，无编译预处理），也可以运行在服务器端（服务器端脚本，如其他的ASP，JSP，PHP），代替传统的CGI程序。

①Javascript标记符：建议脚本放在head部分，使用<!--…//>，包括脚本，使不支持脚本的浏览器忽略脚本，可使用”//”或”/*…*/”注释。

②直接添加脚本：（代码较少时使用）。

③链接外部脚本：调用.js文件。

《Html&DHtml实用教程》

/**

*站在巨人的肩上才能看得更远，一步一个脚印才能走得更远。分享成长，交流进步，转载请注明出处！

普通玩家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识html

HTML（Hyper TextMarkup Language）超文本标记语言，通过标记元素（标记符）定义文档内容格式，超文本功能即链接功能，网页之间通过指针起来。Html由国际组织W3C（万维网联盟）维护
复制链接

扫一扫

专栏目录