Html入门

最新推荐文章于 2021-06-18 10:20:54 发布

原创最新推荐文章于 2021-06-18 10:20:54 发布 · 509 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Html入门

A：基础：

1）特点：

Html标签通常是成对出现

a. 简易性

b. 可扩展性

c. 平台无关性

2） html的文档机构

a.<html></html>

两个标记必须同时使用

3）样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

B：基本标记

1）分隔标记

a. 换行

b. 分段标记

c. 空格：（特殊符号）  直接写出来

2)排版标记

a. 文字的置左，置中，置右

属性：align

<body>

<palign="left"hello

<palign="center" world

<palign="right"java

</body>

b. 置中的另一种表示

<body>

</body>

c. 保持原样

3)字体标记

a.标题标记

…….

b.设置字体标记

<body>

<pre><fontsize="+3" color="#FF0000" face="楷体"我爱你，中国

</body>

c.字体变化标记

加粗

:斜体

底线

4）其他字体变化标记

<s></s>文字有删除线

:上标

下标

强调字体

加强字体

<code></code>代码

<big></big>默认比字号大一号

默认比字体小一号

5）背景标记

a.设置背景颜色

b.设置背景图片

<bodybackgrond=”xx.jpg”></body>

6)分隔线

<hr/>：水平分隔线

设置分割线属性

去除阴影<hrnoshade>

7)img标记

设置图片属性

<body>

<imgsrc="../images/2.jpg" alt="这是一个美女图片" width="400px"height="400px" border="0" usemap="#Map"title="美女" />

<mapname="Map" id="Map">

</map>

</img>

</body>

8)序列列表

a.有序列表<ol></ol>

b.无序列表<ul>/<ul>

<body>

<!--有序列表:ol li

ol有默认属性:type:指定的值是数字

-->

你最喜欢的明星是谁?

<oltype="I">

<li>汤姆汉克斯</li>

</ol>

<!--无序列表:ul li

ul的type属性:默认disc:实心原点

-->

学生管理系统

</ul>

软件组织架构的划分

<dl>

</dl>

行内标签

</body>

9)转义字符

<:&lt

>:&gt

&:&amp

“:&quot

注册商标:®

例如：

10)超链接<ahref=”链接路径” target=”打开目标地”></a>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>超链接标签</title>

<!--

超链接标签:a标签

a标签有标签体的标签,有开始有结束标签

两个常用的属性:

href:连接到的地址或者资源文件

target:打开地址或者资源文件的方式:_self:在当前窗口直接打开(如果没有写target属性默认就是_selft这种方式打开);_blank:新建窗口打开

用浏览器执行当前的这个网页:地址栏中有一个file:// :文件协议(本地文件或者本地地址)

http协议的执行流程:首先在当前本机中c盘中找对应到hosts文件中ip对应的域名,如果能找到那么就直接打开,如果找不到,就调用网卡联网操作访问(经过中间网络运营商)进行访问

file://文件协议

http://协议

thunder://迅雷协议

mailto:邮件协议

协议很多:普通协议上面这几种

超链接标签引用:

1)能链接到资源文件或者html地址

2)作用:用来锚链接使用

1)打锚点

2)链接到哪里呢?

同一个网页打锚点:

1)打锚点:

<aname="锚点名称"></a>

2)链接到哪里呢?

针对不同的一个网页:

1)打锚点:

2)链接到的地址:

<a href="资源文件#锚点名称">连接到的资源</a>

-->

</head>

<body>

<aname="top"></a>

<ahref="05.文本标签.html#list"target="_blank">超链接标签</a>

<a href="../1.jpg"target="_blank">链接到的图片</a>

<!--<ahref="www.baidu.com">链接到的百度</a>

这种写法是错误的:

加上一个协议:正确的写法:http://www.baidu.com

-->

<ahref="http://www.baidu.com">链接到的百度</a>

<ahref="http://www.moive.com/fuchouzhelianmeng2.avi"><<复仇者联盟2>>(普通下载)</a>

<ahref="thunder://www.moive.com/fuchouzhelianmeng2.avi"><<复仇者联盟2>>(高速下载)</a>

<ahref="mailto:zhangyang@westos.com">发送邮件给朋友</a>

<ahref="#ch01">第一章内容</a>

<aname="ch01"></a>

厉害了我的歌

<ahref="#top">返回顶部</a>

</body>

</html>

在开发时，可通过查看w3School文档学习并使用

11）．html5的特性

a.<html5>中video元素

b. mark元素

这是我标记的重点

c. audio元素

<audiosrc="music.mp3" constrols="controls">audio元素 </audio>

d. progress元素

<progress></progress>

12）表格标签:table

行的标签:tr

单元格:可以理解为列,td

表格的标题:caption

表头:th标签:表头自动加粗,并且自动居中

合并单元格:

rowspan:行的合并

colspan:列的合并

一个表格要想能显示出来,就必须指定边框属性

table常用的属性:

border:边框

width:表格的宽度

heigth:表格的高度

align:对齐的方式 left center right

背景颜色:bgcolor格标签

举例：

<body>

<tableborder="1px" width="400px" height="300px"align="center" bgcolor="pink">

<captionstyle="color:#F00">2017年学生成绩表</caption>

<tr>

</tr>

<tdrowspan="2">狗娃</td>

</tr>

</tr>

</tr>

</tr>

<tdcolspan="2">平均分</td>

</tr>

</table>

</body>