文本
大家都知道一个静态页面(不包括后端的网页)由以下元素构成
文字 图片 超链接 音频和视频
只是带有特效动图等不会被叫做动态界面
即使使用了JavaScript,除非使用了后端技术否则都不会被称作后端技术
首先介绍文本
标题标签
其中标题分为h1 h2 h3 h4 h5 h6 共六级
<h1>文本内容</h1>
段落标签
<p> 文本内容</p>
换行标签
<br/>
例如:<p>生活如此美好<br>换行了</p>
运行显示
文本标签
不过一般不常用,一般使用css进行修饰
粗体标签:strong b
斜体标签:I em cite
上标标签:sup
下表标签:sub
中划线标签:s
下划线标签:u
大字号标签:big
小子号标签:small
例如粗体标签<strong></strong>
水平线标签
<hr/>
<p>生活如此美好<br>换行了</p>
<hr />
<p>生活如此美好<br>换行了</p>
此效果会加一条水平线位于文本中间
运行显示:
div标签
在HTML之中我们使用div来划分区域,就像某个规划的小区,每一块楼都是一个div,在每个楼可以是各种样式,div内部可以放下文本标签水平线标签等等,划分区域可以使条理思路更加清晰。
<div>
</div>
自闭合标签
此例标签不需要两个标签进行闭合
例如
定义网页标签<meta name="" content=""/>
引入外部的css<link rel="stylesheet" type="text/css" href=""/>
换行标签<br/>
水平线标签<hr/>
图片标签<img src=""/>
表单标签<input type="" name="" id="" value="" />
下面介绍块元素和行内元素
关于块元素与行内元素关系:一般块元素可以容纳行内元素与其他块元素
而行内元素只能容纳行内元素不能容纳块元素
Html常见块元素
标题元素h1-h6
段落元素p
Div div元素
水平线hr
有序列表ol
无序列表 ul
有些特殊符号键盘上难以输入的需要&代码 来输入
就不给一一介绍了,网上大部分都有
列表
有序列表
<ol type="属性值">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
Type代表属性
列表属性取值
1:阿拉伯数字
a:小写英文字母
A:大写英文字母
i:小写罗马数字
I:大写罗马数字
无序列表
<ul type="">
<li>文本内容</li>
<li>文本内容</li>
<li>文本内容</li>
</ul>
属性值
disc实心圆
circle空心圆
square正方形
运行显示
注意ul元素的子元素只能是li,不能是其他元素
ul元素内部的文本,只能在li元素内部添加,不能再li元素外部添加
定义标签
由两部分组成:名词和描述
<dl>
<dt>名词</dt>
<dd>描述</dd>
</dl>
运行显示
接下来介绍表格
由以下三个部分组成
表格:table
行:tr标签
单元格:td标签
<caption>单元格标题</caption>
<table border="" cellspacing="" cellpadding="">
<tr><th>标头</th></tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
<tr>
<td>Data3</td>
<td>Data4</td>
</tr>
</table>
运行显示
至于单元格表格形式就要看css来修饰了
合并行 rowspan
<table border="" cellspacing="" cellpadding="">
<tr><th>标头</th></tr>
<tr>
<td rowspan="2"></td>
<td>Data1</td>
<td>Data2</td>
</tr>
<tr>
<td>Data3</td>
<td>Data4</td>
</tr>
合并列 colspan
<table border="" cellspacing="" cellpadding="">
<tr><th>标头</th></tr>
<tr><td colspan="2">合并列</td></tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
<tr>
<td>Data3</td>
<td>Data4</td>
</tr>
</table>
添加图片
<img src="图片路径" alt="描述图片" title="主题" />
Title属性是当鼠标移向图片时,
图片显示图片名字
Alt 属性 是用来给搜索引擎看的
图片格式
超链接
<a href="链接地址" target="属性">文本或者图片</a>
属性
默认值,在原来的窗口打开链接
_self
在新窗口打开链接
_blank
在父窗口打开链接
_parent
在顶层窗口打开链接
_top
内部链接
跳转到自身的网站
瞄点链接
直接跳转到文章或者图片的哪个位置
使其地址指向标签的id