html（网页）总结

最新推荐文章于 2023-07-05 11:18:20 发布

Bugxiu_fu

最新推荐文章于 2023-07-05 11:18:20 发布

阅读量154

点赞数

文章标签： html 前端 webview

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/123209841

版权

第一课:HTML（网页基本）

常用标签：

br、hr、font 、h1-h6、p、ul、ol、img、marquee（走动文字）...

超链接<a>：

1.属性href：超链接地址

2.属性:target：跳转模式-- _blank:新窗口 _self: 本窗口（默认）

<html>
     <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接的使用</title>
    </head>
<body>
    <a href="xx.html" target="blank">xxxxx</a>
</body>
</html>

表单：

<input type="text">
type="Text"可以是 text,Radio,Checkbox(复选框),Password,Submit/Reset(传送键/清除键),image,File,Hidden(是否隐藏),Button;

第二课：框架的使用

<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> cols="90," ====》垂直切割画面(如分左右两个画面) rows="120," ======》就是横向切割，将画面上下分开，数值设定同上 frameborder="0" =====》设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。 border="0" ====》设定框架的边框厚度，以 pixels 为单位。 bordercolor="#008000" ====》设定框架的边框颜色。 framespacing="2" ====》表示框架与框架间的保留空白的距离。

补充：

卷轴：scorlling Auto(yes/no)

marginhight=5 表示框架高度部份边缘所保留的空间。 marginwidth=5 表示框架宽度部份边缘所保留的空间。*

基本标签：

1.跑马灯标签
<marquee direction="right"></marquee>

2.设置字体的颜色和大小
<span stykle="color:orange;font-size:30px">心情挺好</span>

3.加图片
<img src="1.gif" width="100px" height="100px" title="出来呀" alt="加载失败">
                                                                   
4.块级标签
<dl>
    <dt>
    <dd>咖啡</dd>
    <dd>心情不好的时候可以来两杯</dd>
    </dt>
</dl>

5.无序列表：
<ul>
    <li>无序列表</li>
    <li>XXXXXX</li>
</ul>

6.有序列表：
<ol>
    <li>有序列表</li>
</ol>

7.单标签
换行：<br/>
水平线标签：<hr>或者<hr/>
<hr size="2" color="red" width="30%(50px)">大小 颜色 宽度(px)

第三课：CSS选择器

标签选择器：标签{}(选择器名称就是标签本身，然后进行设置)

<style type="text/css">
div{
width:100px;
height:100px;
/*(solid 设置边框线颜色)*/
border: 1px solid red;
}
</style>

<div></div>

类选择器：.class{} 在标签上设置一个class属性，class属性的值自定义；

必须在指定选择器前面加.才能进行设置。

<style type="text/css">
.zz{
background_color:yellow;
}
</style>

<div class="zz"></div>

id选择器：#id{} 同一个网页只有一个； id属性的值自定义

必须在指定选择器前面加#才能进行设置。

<style type="text/css">
#dyk{
    background_color:yellow;
}
</style>

<div id="dyk"></div>

第四课：div+css布局

1.position属性：

<html>
<meat charset="UTF-8">
    <title>Documet</title>
    <style>
        .oBox1{
            /*绝对定位*/
            position:absolute;
            top:100px;
            left:200px;
        }
        .oBox2{
            width: 100px;
            height: 100px;
            background-color: green;
            /*相对定位*/
            position: relative;
            top: 20px;
            left: 10px;
        }
        a{
            /*将div块状标签转换成行内标签*/
            display:inline;
            border:1px solid red;
            块状元素（block）
            行内块状元素（inline-block)
            行内元素（inline）
        }
        
     
    </style>

    <head>
         <body>
        <div>
        div属于块状元素
        </div>
            <a href="">行内标签元素</a>
        </body>
    </head>

</html>

2.设置浮动（float）和清除浮动（clear）

<html>

    <head>
	<meta charset="UTF-8">
     <title>设置浮动</title>
        <sytle type="text/css">
    #container{
        /*左漂浮*/
        float：left;
   		/*右漂浮*/
		float：right;
        }
    #container{
        /*清除浮动*/
        clear：left;
        clear:both:
        }


    </sytle>
   </head>
<body>
    </body>

	<div id="container">
	</div>

</body>
    </html>

Bugxiu_fu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html（网页）总结

第一课:HTML（网页基本）常用标签：br、hr、font 、h1-h6、p、ul、ol、img、marquee（走动文字）...超链接<a>：1.属性href：超链接地址2.属性:target：跳转模式-- _blank:新窗口 _self: 本窗口（默认）<html> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"
复制链接

扫一扫