HTML超文本标记语言2
二、基本标签
1.文件标签(结构)
<html>
根标签
<head>
<title>页面标题(标签)</title>
</head>
<body>
页面所有内容
包括:
text=“文本颜色”
bgcolor=“背景颜色”
background=“背景图”
颜色属性的拓展:
1.单词:red,green,blue 2.rgb三原色:rgb(red,green,blue),rgb(0,0,0),值范围0-255 3.#000000(黑色),#FFFFFF(白色),#FF0000,值范围#000000-#FFFFFF
</body>
</html>
2.排版标签
1)<!-- 注释标签 -->
2)换行标签<br/>
3)<p>段落标签:文本内容-文字</p>
段与段之间会有空行
对齐方式属性align=(三个属性值取其一)“left/center/right”
4)水平线<hr/>
长width=""
高size=""
色color=""
对齐属性align同上
尺寸(长、高)的表示方法:1.百分百(随着页面大小变化而变化,占据百分比的比例) 2.像素(例如:100px)
3.文字标签
<font>
基本文字标签
属性:1.color颜色(属性值上面有说明) 2.face字体 3.size大小(max:7 min:1 default:3)
</font>
说到文字标签,可必须得拉上标题标签扯上一扯。
<h1>标题标签</h1>
随着阿拉伯数字的增加字体随之减小,粗字体,大小是内置,默认占一行
......
<h6>标题标签</h6>
4.块标签
<div>
行级块标签:占据一行
用处:div+css
</div>
其他行级标签:p、ol、li、dl、dt、dd、h1~h6、form、ul
<span>
行内块标签:占据一行内的一小块
用处:设置提示、文字样式
</span>
其他行内标签:a、strong、b、i、u、label、br、em
5.清单标签/列表标签
1)
<ul>无序列表</ul>
<li>
列表项
属性(type)=“disc/square/circle”
disc:实心圆(默认)
square:实心方块
circle:空心圆
</li>
小例子:
<ul>
<li>列表项</li>
</ul>
2)
<ol>有序列表</ol>
<li>
列表项
属性(type)=“数字/字母/罗马字”,start(首选项开始)=“数字”
</li>
小例子:
<ol>
<li>列表项</li>
</ol>
作用:实现菜单(横/纵)
去除小圆点:这是无序列表标签自带属性,在HTML中无法直接去除。方法:在CSS中的li标签添加list-style:none;
6.链接标签
<a>
链接标签
href=“跳转页面地址”
name=“名字,锚点”
锚点说明:锚点链接是网页制作中超链接的一种
target=“_self(自己,默认) _blank(新页面打开,保留之前页面)”
用途:1.页面跳转。如需跳转外网需要加协议(超文本传输协议)http://。 2.访问锚点,跳转到:顶部/底部/中间。格式:#name=“值”
</a>
7.图片标签
<img "图片标签/不需手动关闭"
src:照片的位置
alt:图片说明
width=“1.百分比 2.像素”:宽
height=“1.百分比 2.像素”:高 border=“1.百分比 2.像素”:框
align=“top/middle/bottom/left/right”:对齐:图片和相邻文本的相对位置
/>
8.表格标签
重点:table、tr、td、th
<table>
<caption>表格标题,默认居中,一个表格一个标题</caption>
<thead>表格页眉,用于组合HTML表格的表头内容,页眉内部必须有tr标签</thead>
<tbody>定义表格主体,用于组合HTML表格主体内容</tbody>
<tfoot>页脚,用于组合HTML表格的表注内容</tfoot>
thead、tbody、tfoot分块加载显示,由头到身体再到脚
表格标签
border=“1.百分比 2.像素”:框
width=“1.百分比 2.像素”
align对齐方式
<tr>
行,可有一个或多个th
align表格行对齐,bgcolor背景色
td和th皆为单元格:td表格单元格,包含数据。th表头单元格,包含表头。
作用:表格样式、页面布局
<td>
align表格内容对齐、height、width、bgcolor
colspan设定列合并,rowspan设定行合并
</td>
<th>
定义表格的表头。默认居中加粗
</th>
</tr>
</table>
示例:
body的代码
`
<hr align="center" size="10" width="50%" color="red"></hr>
<p align="center">真<br/>漂亮!</p>
<!-- 文字标签 -->
<h1 align="center" >忆江南</h1>
<font color="bule" size="2" face="宋体">白居易<br/></font>
江南好,风景旧曾谙。日出江花红胜火,春来江水绿如蓝。能不忆江南?<br/>
江南忆,最忆是杭州。山寺月中寻桂子,郡亭枕上看潮头。何日更重游?<br/>
江南忆,其次忆吴宫。吴酒一杯春竹叶,吴娃双舞醉芙蓉。早晚复相逢?<br/>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 块标签 -->
<div style="background-color:red">贼厉害1</div>
<span style="background-color:yellow">111</span>
<span style="background-color:red">贼厉害2</span>
<div style="background-color:red">贼厉害3</div>
<!-- 列表标签 -->
<!-- 无序,这里的缩进只是为了更好叙述,并无实际意义 -->
<ul >
<li type="square">列表1</li>
<li type="circle">列表2</li>
<li>列表4</li>
</ul>
<ul>
<li type="circle">列表3</li>
<li>列表4</li>
</ul>
<!-- 有序 -->
<ol type="1" start="2">
<li>清单1</li>
<li>清单1</li>
<li>清单1</li>
<li>清单1</li>
</ol>
<ol type="I" start="2">
<li>清单2</li>
<li>清单2</li>
<li>清单2</li>
<li>清单2</li>
</ol>
<ol type="A" start="3">
<li>清单3</li>
<li>清单3</li>
<li>清单3</li>
<li>清单3</li>
</ol>
<ol type="a" start="4">
<li>清单4</li>
<li>清单4</li>
<li>清单4</li>
<li>清单4</li>
</ol>
<!-- 链接,第一个“基本”链接到我HTML1的小实验的网址了 -->
<a href="basic.html" target="_blank"><br/>基本</a>
<br/>
<a href="pieceLabel.html">我还是我</a>
<br/>
<a href="#top">顶部</a><br/>
<!-- 图片标签,图片取自网络,若有侵权,联系即删 -->
<img src="../images/1.jpg" alt="mm" width="800" height="900" border="20%" align="top" />
<br/>
<!-- 表格 -->
<table border="5" align="center" height="20%" width="10%" bgcolor="yellow">
<caption>各专业收费</caption>
<tr>
<td>专业</td>
<td>学费</td>
<td>住宿费</td>
</tr>
<tr>
<td>网络</td>
<td>5xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>自动化</td>
<td>7xxx</td>
<td>yyy</td>
</tr>
<tr>
<td>会计</td>
<td>8xxx</td>
<td>jjj</td>
</tr>
</table>
`
图例:
注:未经同意请勿转载,仅作学习使用。以上有描述不正确之处,望大家能不吝指出,共同学习共同进步。谢谢