1.HTML页面的基本结构如下所示:
<!DOCTYPE html><!--DOCTYPE文档类型声明,必须放在第一行-->
<html>
<head>
<title></title><!--标题-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><!--指定页面编码,这里使用utf-8编码-->
<style type="text/css">
/*css样式写在style标签内*/
</style>
<script type="text/javascript">
/*javascript样式写在style标签内,也可以写在body标签里面*/
</script>
<link rel="stylesheet" type="text/css" href=""><!--引入外部样式文件-->
<script src=""></script><!--引入js文件-->
</head>
<body>
<!--页面内容写在body标签内-->
</body>
</html>
2.文字和段落
<h1>标题标签,有h1到h6,h1字体最大</h1>
<p align="">HTML:Hypertext Markup Language,超文本标记语言</p>
<!--p标签,
align属性有四个值left;right;center;justify
justif是伸展对齐,这样每行都可以有相等的长度-->
<hr />
<!--水平线,其属性有:
width设置水平线宽度,可以是像素或百分比;
color设置水平线颜色;align设置水平线居中对齐;
noshade设置水平线无阴影-->
<br/><!--换行 -->
<!--空格-->
<pre>
pre 元素可定义预格式化的文本。被包围在 pre 元素
中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。简而言之,内容在编辑器里面是什么样子,
在浏览器里面就是什么样子。
</pre>
<i>文字斜体</i>
<em>文字斜体</em>
<b>文字加粗</b>
<strong>文字加粗</strong>
<sub>下标</sub>
<sup>上标</sup>
<ins>下划线</ins>
<del>删除线</del>
algin对齐属性值
值 | 描述 |
---|---|
left | 左对齐内容 |
right | 右对齐内容 |
center | 居中对齐内容 |
justify | 对行进行伸展,这样每行都可以有相同的长度 |
HTML页面中显示特殊符号,如;》@
在html中,使用转义字符表示 空格、< 等特殊符号,常用的特殊符号主要有以下几个
3.列表标签
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>无序列表没有顺序,每个内容前面有个符号作为标识,默认是一个黑色小圆点,
ul标签有一个type属性,可以改变符号类型,属性值有 disc圆点,square正方形,
circle空心圆</p>
<ul type="square">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<p>有序列表,类似ul标签,有一个type属性。属性值有:1(数字1、2...),
a(小写字母a、b...),A(大写字母A、B...),i(小写罗马数字i),
I(大写罗马数字I)</p>
<ol type="a">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<p>定义列表</p>
<dl>
<dt>111111</dt>
<dd>222222</dd>
<dt>111111</dt>
<dd>444444</dd>
<dd>444444</dd>
</dl>
<dl>
<dt>111111</dt>
<dd>222222</dd>
<dt>111111</dt>
<dd>444444</dd>
<dd>444444</dd>
</dl>
</body>
</html>
4.图像和连接
<!DOCTYPE html>
<html>
<head>
<title>图像、链接</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<p>图像标签</p>
<p>注意绝对路径和相对路径</p>
<!--绝对路径:从盘符开始直到找到对应文件,如C:\Users\yi\Desktop\html\img\Koala.jpg
相对路径:图片相对于网页所在的路径,如3.html和koala.jpg在同一目录下,则写为 src="kolal.jpg";
../代表一个上一级(3.html页面文件所在路径的上一级),上一级的上一级表示为../../ -->
<img src="img/Koala.jpg" alt="" height="100px" width="100px">
<p>链接</p>
<a href="#" target="_blank" title="123" name="">内容</a>
<!--_blank表示打开新标签页,target的属性值还有_self,_top,_parent-->
<p>图片与链接的结合,另外a标签也可以与其他标签结合</p>
<a href="2.html"><img src="img/Koala.jpg" height="100px" width="100px"></a>
<p>邮件链接</p>
<!-- <a href="mailto:邮件地址"></a> -->
<p>文件下载链接</p>
<a href="file/file.rar">文件下载</a>
<!-- <a href="下载文件的地址"></a> -->
</body>
</html>