简单制作网页
程序员文章站
2024-03-14 18:32:40
...
**简单制作网页**
标记语言可以理解为标签语言，网页中有单标签，双标签之分。<br/> <font></font>。
单标签既是开始又是结束。/放在最后。双标签/放在结束标签前面。
<!DOCTYPE HTML>声明5.0版本
<meta charset="UTF-8">防止中文乱码
<html>
<head>
<title></title>
</head>
<body></body>
<html>
行内元素：标签前后标签不会自动换行。<b> <i> <font>..........
块级元素：（独占一行）标签前后会自动换行。<p> <h1> <div>..........
块级元素转行内元素：style="display:inline-block;"
列表标签
有序列表
无序列表
<ul type="disc" > disc 小黑圆点 square 方形 circle 空心小圆
<li></li>
</ul>
自定义列表
<dl> 根标签
<dt>标题标签
<dd></dd>内容
<dt>
</dl>
网页中插入图片
<img src="图片路径"/>
图片路径
1.绝对路径：在计算机中真实存在的路径：从根盘符开始：D:\A\2003\jpg
2.相对路径：网页和图片在一个文件夹中。（不在一起也行）a.jpg\上一级目录\上两级目录
style="background-size:cover;"背景图自适应
超链接：页面跳转，网页，网址，图片
<a href="路径" target="_blank"> </a>
target属性：设置打开方式_self自身页面打开，_blank新窗口打开
1.超链接href属性，设置跳转页面。
2.固定区域，在某一个框架中展示信息，给框架起名，name属性。
3.找到name属性对应的值 target="name"
锚标记：自身页面任意跳转（回顶部，回底部）
<a name="mao"></a>
<a href="#mao">点击回底部</a>
超链接中非常重要的伪类选择器 放在style属性里
a：link 鼠标点击之前的样式
a:hover 鼠标放在超链接上的样式
a:visited 鼠标点击之后的样式
a:active 鼠标滑过之后的样式
a:hover{font-size:40px;color:red;border-radius:40px;}
iframe内联框架
1.框架中不能直接填写内容。
2.填写内容需要src引入外部文件。
3.iframe标签可以和body标签一起使用。
<iframe ssrc=" "></iframe>
frameset 框架集 ，切割页面
1.框架中不能直接填写内容。
2.填写内容需要src引入外部文件。
3.切割部分后面几个百分比，英文逗号隔开。
4.在跟标签中必须跟上相同个数的子标签，frame。
5.*代表剩下部分的全部，只能用一个。
<frameset rows="20%,80%" >
<frame></frame>
<frame></frame>
</frameset>
6.在横切部分进行竖切，找到对应部分将子标签frame修改为frameset重新建立一个新的框架集。
noresize 设置框架集边框不可移动 frameborder 设置边框1为有，0为没有，默认是1。
bordercolor 边框颜色 rows 横着切 cols 竖着切
scrolling 设置卷轴 YES显示 NO不显示 AYTO视情况而定
css cascading style sheet 层叠样式表
行内样式法：放在标签中，style=："属性：属性值；属性：属性值；"
内部样式法：放在head标签中<style> </style>通过style标签引入css样式。
外部引入：放在head标签中，，现在外部建一个css格式的外部样式表，然后在标签里面用标签引入外部样式表。
div （盒子！布局页面！里面存放任何内容）导航栏
width 宽度 height高度 border 边框属性 1px粗细 solid 实线 dotted 点线 dashed 虚线 border-left-color：red ；左边框颜色
toop 上边框 bottom 下边框
padding-left：20px 文字与左边框距离
margin-left ：20px 左边距