HTML

最新推荐文章于 2025-03-18 16:50:56 发布

努力学习的菜头

最新推荐文章于 2025-03-18 16:50:56 发布

阅读量112

点赞数

本文链接：https://blog.youkuaiyun.com/yanjun52015/article/details/109105606

版权

HTML+CSS
1、HTML结构

为文档头 lang为语言英文的缩写

在这里插入图片描述
5、表格布局
&nbsp；表示为空格
&gt；表示大于号
&lt；表示小于号
表格布局实现小说页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>汇源书城</title>
	<style tyoe="text/css">
    .blue{
    	color:blue;

    }
	</style>

</head>
<body>
      <h1 align="center">免费小说大全</h1>
      <hr>
      <div class="blue">
     男生频道：<tr>
     <td><a href="1.html">玄幻</a></td>&nbsp;&nbsp;
     <td><a href="1.html">科幻</a></td>&nbsp;&nbsp;
     <td><a href="1.html">悬疑</a></td>&nbsp;&nbsp;
     <td><a href="1.html">都市</a></td>&nbsp;&nbsp;
     <td><a href="1.html">魔法</a></td>&nbsp;&nbsp;
     <td><a href="1.html">机甲</a></td>&nbsp;&nbsp;
     <td><a href="1.html">军事</a></td>&nbsp;&nbsp;
     <td><a href="1.html">历史</a></td>&nbsp;&nbsp;
     <td><a href="1.html">武侠</a></td>&nbsp;&nbsp;
     <td><a href="1.html">奇幻</a></td>&nbsp;&nbsp;
     <td><a href="1.html">后宫</a></td>&nbsp;&nbsp;
     <td><a href="1.html">二次元</a></td>&nbsp;&nbsp;
     <td><a href="1.html">乡村</a></td>&nbsp;&nbsp;
     <td><a href="1.html">轻小说</a></td>&nbsp;&nbsp;
     <a href="1.html">更多类型</a>&gt;&gt;
     </tr>
     </div>
     
     <hr>
     女生频道：<tr>
     <td><a href="1.html">古代言情</a></td>&nbsp;&nbsp;
     <td><a href="1.html">霸道总裁</a></td>&nbsp;&nbsp;
     <td><a href="1.html">玄幻言情</a></td>&nbsp;&nbsp;
     <td><a href="1.html">浪漫青春</a></td>&nbsp;&nbsp;
     <td><a href="1.html">女强人</a></td>&nbsp;&nbsp;
     <td><a href="1.html">穿越</a></td>&nbsp;&nbsp;
     <td><a href="1.html">推理言情</a></td>&nbsp;&nbsp;
     <td><a href="1.html">现代暖文</a></td>&nbsp;&nbsp;
     <td><a href="1.html">重生文</a></td>&nbsp;&nbsp;
     <a href="1.html">更多类型</a>&gt;&gt;
      </tr>
      <hr>
      </table>
      <table width="1400px">
      <tr>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <td><a href="1.html"><image src="image/2.png" width="200px" ></a></td>
      <tr align="center">
          <td><a href="1.html">斗罗大陆</a></td>
           <td><a href="1.html">斗破苍穹</a></td>
            <td><a href="1.html">大主宰</a></td>
             <td><a href="1.html">武动乾坤</a></td>
              <td><a href="1.html">龙族</a></td>
              <td><a href="1.html">星辰变</a></td>
              <td><a href="1.html">剑道独尊</a></td>
 
 
      </tr>
  
      </tr>

      </table>
      </table>

6.多框架窗口
Framest和Frame是在html4.0版本中出现的标签
标签不能和body标签同时出现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
    <frameset rows="25%,*,25%">

    <frame src="head.html"></frame>
    <frameset cols="25%,*">
    <frame src="meua.html"></frame>
     <frame src="body.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>
   </frameset>   
</html>

Css层叠样式表
1.如何引入css

在这里插入图片描述
2.Css选择器
一.标签选择器
p{
color:red;
}
该文档下所有p标签全部有效
二.id选择器
给某标签加入id属性例如id=“open” 属性值不能为数字
#gold{
color:red;
}

三.class(类)选择器标签中含有class属性的例如 class="yellow" 适用场景:在页面中多个标签中具有相同的样式 .yellow{ color:yellow; }

四.全选择器表示修饰页面中所有标签 *{ } 网页中默认的字体是16px **常用属性请参考w3c** **1.盒子模型** div+css一种方式 content 内容 padding 内边距 border 边框 margin 外边距 padding和margin的使用方法一样边框 border:1px solid blue; 边框宽度实线颜色二.display 元素的分类 1.块状元素标签具有宽度，高度属性，且独自成行例如 div p 2.内联元素没有宽度和高度的属性，且其他元素可以与其同行显示例如 a span 块状元素可以转化为内联元素块状元素 display:block; 内联元素 display:inline 隐藏元素 3种方式 1.display:none 2.宽度和高度设置0 3.overflow:hidden

布局
1.浮动布局
在html中引入标签
none 不浮动
left 左浮
right 右浮
当我们使用float左浮动时会对后面的元素显示有影响，这种情况下可以清除浮动来解决这个问题
1.清除浮动
clear 属性
none 默认值
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 不允许两边有浮动对象