码迷,mamicode.com
首页 > Web开发 > 详细

html学习

时间:2020-06-20 17:03:14      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:默认   颜色   链接   uri   css   mes   百度   hello   图片   

<!DOCTYPE html>约束,声明

<html lang="zh_CN">html标签表示html的开始   lang="zh_CN"表示中文    html标签中一般分为两部分,分别是:head和body

<head>表示头部信息,一般包含三部分内容,title标签,css样式,js代码

<meta charset="UTF-8">表示当前页面使用UTF-8字符集

<title>ding</title>表示标题

</head>

<body bgcolor="yellow">body标签是整个html页面显示的主体内容

bgcolor背景颜色

<font color="red" face="宋体" size="7">我是字体标签</font><br/>br 换行

hellofont 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)

color 属性修改颜色

face 属性修改字体

size 属性修改文本大小

<button onclick="alert(‘你好!‘)"></button>

onclick表示单击(点击)事件

alert() 是javaScript语言提供的一个警告框函数.它可以接收任意参数.参数就是警告框的函数信息

<hr/>水平线

<h1 align="left">标题 1</h1> 

<h2 align="center">标题 2</h2> 

<h3 align="right">标题 3</h3> 

<h4>标题 4</h4> 

<h5>标题 5</h5> 

<h6>标题 6</h6> 

<h7>标题 7</h7>

h1 - h6 都是标题标签     h1 最大     h6 最小   h7是错误的,就是常用字体大小

align 属性是对齐属性    left  左对齐(默认)    center 剧中   right 右对齐

<hr/>

我是<br>标签<br/> 

我是   空格

常用的特殊字符:

<    <

>    >

空格  

<hr/>

<a href="https://www.baidu.com/?tn=90823477_hao_pg">百度</a><br/>

<a href="http://localhost:8080">Tomcat</a><br/>

<a href="http://localhost:8080" target="_self">百度_self</a><br/>

<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>

a 标签是 超链接

href 属性设置连接的地址

target 属性设置哪个目标进行跳转

_self 表示当前页面(默认值)

_blank 表示打开新页面来进行跳转

<hr/>

<ul type="none"

<li>赵四</li>

<li>刘能</li> 

<li>小沈阳</li> 

<li>宋小宝</li> </ul>

ul 是无序列表

type 属性可以修改列表项前面的符号

li 是列表项

<hr/>

<img src="/1.jpg" width="200" height="260" border="1" alt="美女找不到"/>

<img src="../2.jpg" width="200" height="260" /> 

<img src="../imgs/3.jpg" width="200" height="260" /> 

<img src="../imgs/4.jpg" width="200" height="260" /> 

<img src="../imgs/5.jpg" width="200" height="260" /> 

<img src="../imgs/6.jpg" width="200" height="260" />

img 标签是图片标签,用来显示图片 src 属性可以设置图片的路径

width 属性设置图片的宽度 height 属性设置图片的高度 border 属性设置图片边框大小

alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

 

web 中路径分为相对路径和绝对路径两种

相对路径:

.               表示当前文件所在的目录

..               表示当前文件所在的上一级目录

文件名    表示当前文件所在目录的文件,相当于 ./文件名

./               可以省略

绝对路径:

正确格式是: http://ip:port/工程名/资源路径

错误格式是: 盘符:/目录/文件名

<hr/>

<table align="center" border="1" width="300" height="300" cellspacing="0"

<tr><th>1.1</th> <th>1.2</th> <th>1.3</th> </tr> 

<tr><td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> 

<tr><td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> 

<tr><td  align="center" ><b>4.1<b></b></td> <td>4.2</td> <td>4.3</td> </tr> </table>

table 标签是表格标签 align 设置表格相对于页面的对齐方式border 设置表格标签 width 设置表格宽度 height 设置表格高度 cellspacing 设置单元格间距

tr 是行标签  th 是表头标签 (字体加粗居中)td 是单元格标签

align 设置单元格文本对齐方式 b 是加粗标签

 

<hr/><br/><br/>

<table width="500" height="500" cellspacing="0" border="1"

<tr><td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> 

<tr><td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> 

<tr><td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> 

<tr><td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> 

<tr><td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table> 

colspan 属性设置跨列 rowspan 属性设置跨行

 

<hr/><br/><br/>

我是一个单独的完整的页面<br/><br/> 

 <iframe src="red.html" width="500" height="400" name="abc"></iframe>

ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面

 ifarme 和 a 标签组合使用的步骤:

1 在 iframe 标签中使用 name 属性定义一个名称

2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值

 <br/> 

 <ul>

  <li><a href="red.html" >red.html</a></li>

跳转到red.html页面

  <li><a href="red.html" target="abc">red.html</a></li>

  <li><a href="blue.html" target="abc">1blue.html</a></li> 

  <li><a href="yellow.html" target="abc">yellow.html</a></li>

在小区域中跳转页面

</ul>

<hr/><br/><br/>

 <div>div 标签 1</div>

 <div>div 标签 2</div> 

 <span>span 标签 1</span> 

 <span>span 标签 2</span> 

 <p>p 段落标签 1</p> 

 <p>p 段落标签 2</p>

div 标签   默认独占一行

span 标签  它的长度是封装数据的长度

p 段落标签   默认会在段落的上方或下方各空出一行来(如果已有就不再空)

 

 

</body>

</html>

 

html学习

标签:默认   颜色   链接   uri   css   mes   百度   hello   图片   

原文地址:https://www.cnblogs.com/ding-123456/p/13168775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!