HTML基础复习笔记

看到是java的达内教程里面的web教程

 

servlet,和jsp 来做浏览器与服务器交流。

JDBC来与服务器与数据库

然后用框架提高效率

在开发中web在很大量

主要是JS

JS来操作HTML

XML用来存储和传输数据,可扩展标记语言。

HTML则来显示数据

HTML是语法固定的XML

标签可扩展,属性可扩展,元素之间的嵌套关系可扩展。

双标签

<标签名> </ 标签名>

单标签

<标签名 />

属性必须定义在开始标签上。

属性名 “属性值”

属性名不能重复,且无序。

元素:

<标签名 属性名 =“属性值”>内容</标签名>

 

 

<-- 注释-->

<html>

<head>

设置文档标题、编码、引入的资源

</head>

<body>

页面上要呈现的内容

</body>

</ html>

head中写style等。。。

head中写title,写标题。

<title>标题</ title>

 

 

乱码问题:

head元素下,使用<meta>元素设置页面内容的编码。

<meta charser=”utf-8” />

 

 

 

 

 

 

标题元素

<h1></h1> 最大 数字越大显示越小。

 

段落元素

<p> 一个段落</p>

 

列表元素

列表类型

<ol> 有序列表

1.q

2.w

3.e

<ul> 无序列表

.q

.w

.e

 

列表项是<li>

列表类型套着列表项

有序

<ol>

<li>q</li>

<li>w</li>

<li>e</li>

</ol>

 

无序

<ul>

<li>q</li>

<li>w</li>

<li>e</li>

</ul>

 

 

分区元素

块分区元素 <div> </div>

行分区元素 <span> </span>

 

 

div是用来勾勒出页面的布局,便于开发页面。

 

 

 

代码

 

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

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

<head>

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

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

</head>

<body>

<div style="border:1px solid red ;">

<!--logo stylediv的属性 -->

<h1>这里放置logo</h1>

</div>

<br />

<div style="border:1px solid green;" >

<!-- 内容-->

<p>hello</p>

<p>RRRRRR</p>

</div >

<br />

<div style="border:1px solid red;">

<!--版权标示 -->

<p>666</p>

</div>

</body>

</html>

 

 

 

元素显示方式

 

块级元素:

1.独立成行,默认垂直布局

2.2.占据一个矩形区域

3.<hn>,<p>,<ol>,<ul>这些都是块级。

4.块级元素会影响页面的布局

行内元素:

1.不独立程航,可以横向布局

2.不会占据矩形区域,它只是用来修饰段落中的某几个字的。

3.<span>,<i>,<u>...

4.行内元素不会影响页面布局

 

 

行内元素

<p></p>中如果写style会改变整个段落,那么可以在里面<span>spanstyle来针对几个字的改。

 

如:

 

<p>asdasdsada<span style="color:#F00">qweqwe</span></p>

 

 

<i><em> 元素用来让文字倾斜

 

<p><i>asdasdsada</i><span style="color:#F00"><em>qweqweqwe</em></span></p>

 

 

<b><strong> 用来让文字加粗。

 

 

<del>元素用来定义带删除线的位置

 

qwe 上面一个横线,删除的。

 

<u> 是用来定义下划线的。

 

 

空格折叠:默认情况下,HTML中多个空格,多个制表符TAB,多个换行符会压缩成单个空格,即只显示一个空格。

可以用<br >

br 是换行符,其他的空格要用 

就是说用一些转义。

注册商标: ®

小于号 < <

大于号 > >

等等。。。。

 

 

图像元素(是个单标记)

<img>元素将图像添加到页面

必须属性:src 设置图片存储的位置。

常用属性:widthheight

<img src="1.png" height="150px width="150px">

 

 

 

相对路径  ../是向上加一级

 

 

超链接元素

<a href=” 连接地址” target=”打开方式,_blank,_self ”>文本</a>

_blank,打开新窗口,_self 是在当前窗口打开。

 

<a href="1.html" target="_self">

<img src="1.png" height="150px width="150px">

</a>

 

 

<a href="1.html" target="_blank">asd</a>

 

 

锚点

 

锚点是文档中某行的一个记号

用于连接到文档中的某个位置

 

定义锚点:

 

<a name=”anchorname1”>锚点1</a>

 

链接锚点

 

<a href = “#anchorname1”> 回到锚点</a>

 

 

定义锚点在想要回到的地方,比如在网上看到的回到顶部,然后在网页下面定义个链接锚点,点击就回去了。

 

 

顶部的锚点是默认的,写链接锚点的时候如果href=”#”就是回到顶部;

<a href =”#”>TOP</a>

 

 

表格

 

table画一个大框框

tr 画行

td 画列

 

 

但是默认情况下,表格的边线看不见;可以给table统一设置边线,设置后,可以看见tabletd的边线。

也就是默认空空的,只有表格中的内容。

 

 

border是边线

可以直接在table中写

border=”1px”

就有外面和里面的边框了。

 

设置表格的大小就用widthheight来设置。

 

 

<table>的常用属性

border 边线

alige 文本是否居中

cellpading:单元格边框与内容之间的间距

cellspacing:单元格之间的间距

 

<tr>元素

align/valign

<td>元素

align/valign/width/height

重点:colspan/rowspan

跨行属性

跨行:rowspan

 

有的时候希望某个表格中的一个列占据两行。

使用rowspan

 

同样跨列类似。

 

clospan来跨列

 

既然要占据别的行或者占据别的列,那么就要那个被占据的地方不能有行或者列,也就是要删除,或者不写,释放那个位置。

 

 

td里写 rowspan=”2” 就会跨两行了。在列td里写rowspan跨行,

在行tr中写clospan=”2”就是跨两个列。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 





看到是java的达内教程里面的web教程

 

servlet,和jsp 来做浏览器与服务器交流。

JDBC来与服务器与数据库

然后用框架提高效率

在开发中web在很大量

主要是JS

JS来操作HTML

XML用来存储和传输数据,可扩展标记语言。

HTML则来显示数据

HTML是语法固定的XML

标签可扩展,属性可扩展,元素之间的嵌套关系可扩展。

双标签

<标签名> </ 标签名>

单标签

<标签名 />

属性必须定义在开始标签上。

属性名 “属性值”

属性名不能重复,且无序。

元素:

<标签名 属性名 =“属性值”>内容</标签名>

 

 

<-- 注释-->

<html>

<head>

设置文档标题、编码、引入的资源

</head>

<body>

页面上要呈现的内容

</body>

</ html>

head中写style等。。。

head中写title,写标题。

<title>标题</ title>

 

 

乱码问题:

head元素下,使用<meta>元素设置页面内容的编码。

<meta charser=”utf-8” />

 

 

 

 

 

 

标题元素

<h1></h1> 最大 数字越大显示越小。

 

段落元素

<p> 一个段落</p>

 

列表元素

列表类型

<ol> 有序列表

1.q

2.w

3.e

<ul> 无序列表

.q

.w

.e

 

列表项是<li>

列表类型套着列表项

有序

<ol>

<li>q</li>

<li>w</li>

<li>e</li>

</ol>

 

无序

<ul>

<li>q</li>

<li>w</li>

<li>e</li>

</ul>

 

 

分区元素

块分区元素 <div> </div>

行分区元素 <span> </span>

 

 

div是用来勾勒出页面的布局,便于开发页面。

 

 

 

代码

 

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

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

<head>

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

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

</head>

<body>

<div style="border:1px solid red ;">

<!--logo stylediv的属性 -->

<h1>这里放置logo</h1>

</div>

<br />

<div style="border:1px solid green;" >

<!-- 内容-->

<p>hello</p>

<p>RRRRRR</p>

</div >

<br />

<div style="border:1px solid red;">

<!--版权标示 -->

<p>666</p>

</div>

</body>

</html>

 

 

 

元素显示方式

 

块级元素:

1.独立成行,默认垂直布局

2.2.占据一个矩形区域

3.<hn>,<p>,<ol>,<ul>这些都是块级。

4.块级元素会影响页面的布局

行内元素:

1.不独立程航,可以横向布局

2.不会占据矩形区域,它只是用来修饰段落中的某几个字的。

3.<span>,<i>,<u>...

4.行内元素不会影响页面布局

 

 

行内元素

<p></p>中如果写style会改变整个段落,那么可以在里面<span>spanstyle来针对几个字的改。

 

如:

 

<p>asdasdsada<span style="color:#F00">qweqwe</span></p>

 

 

<i><em> 元素用来让文字倾斜

 

<p><i>asdasdsada</i><span style="color:#F00"><em>qweqweqwe</em></span></p>

 

 

<b><strong> 用来让文字加粗。

 

 

<del>元素用来定义带删除线的位置

 

qwe 上面一个横线,删除的。

 

<u> 是用来定义下划线的。

 

 

空格折叠:默认情况下,HTML中多个空格,多个制表符TAB,多个换行符会压缩成单个空格,即只显示一个空格。

可以用<br >

br 是换行符,其他的空格要用 

就是说用一些转义。

注册商标: ®

小于号 < <

大于号 > >

等等。。。。

 

 

图像元素(是个单标记)

<img>元素将图像添加到页面

必须属性:src 设置图片存储的位置。

常用属性:widthheight

<img src="1.png" height="150px width="150px">

 

 

 

相对路径  ../是向上加一级

 

 

超链接元素

<a href=” 连接地址” target=”打开方式,_blank,_self ”>文本</a>

_blank,打开新窗口,_self 是在当前窗口打开。

 

<a href="1.html" target="_self">

<img src="1.png" height="150px width="150px">

</a>

 

 

<a href="1.html" target="_blank">asd</a>

 

 

锚点

 

锚点是文档中某行的一个记号

用于连接到文档中的某个位置

 

定义锚点:

 

<a name=”anchorname1”>锚点1</a>

 

链接锚点

 

<a href = “#anchorname1”> 回到锚点</a>

 

 

定义锚点在想要回到的地方,比如在网上看到的回到顶部,然后在网页下面定义个链接锚点,点击就回去了。

 

 

顶部的锚点是默认的,写链接锚点的时候如果href=”#”就是回到顶部;

<a href =”#”>TOP</a>

 

 

表格

 

table画一个大框框

tr 画行

td 画列

 

 

但是默认情况下,表格的边线看不见;可以给table统一设置边线,设置后,可以看见tabletd的边线。

也就是默认空空的,只有表格中的内容。

 

 

border是边线

可以直接在table中写

border=”1px”

就有外面和里面的边框了。

 

设置表格的大小就用widthheight来设置。

 

 

<table>的常用属性

border 边线

alige 文本是否居中

cellpading:单元格边框与内容之间的间距

cellspacing:单元格之间的间距

 

<tr>元素

align/valign

<td>元素

align/valign/width/height

重点:colspan/rowspan

跨行属性

跨行:rowspan

 

有的时候希望某个表格中的一个列占据两行。

使用rowspan

 

同样跨列类似。

 

clospan来跨列

 

既然要占据别的行或者占据别的列,那么就要那个被占据的地方不能有行或者列,也就是要删除,或者不写,释放那个位置。

 

 

td里写 rowspan=”2” 就会跨两行了。在列td里写rowspan跨行,

在行tr中写clospan=”2”就是跨两个列。

 


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值