html container标签_刚开始HTML需要了解的

最新推荐文章于 2024-04-27 21:18:42 发布

艾华丰

最新推荐文章于 2024-04-27 21:18:42 发布

阅读量5k

点赞数

文章标签： html container标签

本文链接：https://blog.csdn.net/weixin_36473811/article/details/113076954

版权

这篇文章主要给大家伙科普下，结合之前本人刚入门时的所学所想，最最基本的标签就不介绍了，主要分享一些需要记忆的点和重点。

假设修饰div的样式表为.short{}，

则修饰div其中的table 则 .short table{}

id选择器>类选择器>html选择器>通配符选择器

#>.>body>*

行内元素(inline element),又叫内联元素:

内联元素只能容纳文本或者其他内联元素,常见内联元素<span> <a>

块元素(block element):

块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素，

即使内容不能占满一行，块元素也要把整行占满。常见块元素<div></div><p></p>

块元素和行内元素-区别

①行内元素只占内容的宽度,块元素内容不管内容多少要占全行。

②行内元素只能容纳文本和其它行内元素，块元素可以容纳文本

行内元素和块元素.(与浏览器类版本和类型有关)

③一些css属性对行内元素不生效，比如margin,left,right,width,

height.建议尽可能使用块元素定位。(与浏览器类版本和类型有关)

行内元素和块元素可以相互转换

display:inline -> 转为行内元素 (比如div)

display:block -> 转为块元素 (比如a)

Padding:内边距 
 
Margin:边框
 
内容(content)、填充(padding)、边框
 
(border)、边界(margin)

为body 加上一个边框，再为div加上一个边框，再设置div中的图片大小内边距等(margin),

img和table 一样只要在原类选择器下

.si img/.si table
 
.si a/.si li

常用超链接样式：

a:link{    //设置对象在未被访问前的样式表属性。
    text-decoration: none;
}
 
a:hover{ //设置对象在其鼠标悬停时的样式表属性。
}
 
a:visted{
}        //设置对象在其链接地址已被访问过时的样式表属性。

浮动

可以这么理解浮动:如果一个元素右/左浮动则:

①它本身会尽可能向右/左移动，直到碰到边框或者

别的浮动元素,特别强调浮动对块元素和行内元素都生效!

②元素向右/左浮动，就相当于让出自己的左/右边,别的元素就会在它的左/右边排列。

如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法 clear:right ; clear: left; clear:both

定位:relastive

  <div class="s1">内容1</div>
    <div id="special" class="s1">内容2</div>
      <div class="s1">内容3</div>
        <div class="s1">内容4</div>
 
#special{
    /*position: relative;*//*这里我们使用了相对定位*/
    /*position:absolute;*//*绝对定位*/
    left: 40px;/*原来的位置，向右移动大小(如果希望向左移动 则值就是负数)*/
    top: 100px;/*在原来的位置，向下移动大小(如果希望向上移动,则值是负数)*/
}

相对定位，原来旁边的元素位置不会改变

绝对定位，会补齐

序列：

<ul type=”circle”> // 无序 空心圆 、square方块
    <li></li>
</ul>

有序排列的类型有多种，例如：I 、A、a
 
Type=”a”
<ol start="10">   从10开始
    <li>ios</li>
    <li>android</li>
    <li>html5</li>
    <li>swift</li>
</ol>

用css修饰字标签：

<head>
    <meta charset=”UTF-8”>
    <link rel=”stylesheet” type=”text/css”  href=”mycss.css”>
</head>
 
#divid p{   //中间空格 只对div内p有效，a标签无效
    Color:red;
}
 
<div id=”divid”>
    <p>hellow</p>
    <a>点击我</a>
</div>

使某个div背景占满整个布局：

Body{
    Margin : 0px;
}

Div布局实例：

<head>
    <style type="text/css">
    body{
        margin:0px;    
    }
    
    #container{
        width:100%;
        height:950px;
        background-color:red;
    }
 
    #heading{
        width:100%;
        height:10%;
        background-color:#FFB6FF;
    }
 
    #content_menu{
        width:30%;
        height:80%;
        background-color:#F0F0F0;
        float:left; /*左浮动，从左往右排序，让出位置*/
    }
 
    #content_body{
        width:70%;
        height:80%;
        background-color:#B1DBF4;
        float:left; /*左浮动，从左往右排序，让出位置*/
    }
 
    #footing{
        width:100%;
        height:10%;
        background-color:#F4E37D;
        clear:both; /*清除浮动*/
    }
 
    </style>
</head>
 
<body>
    <div id="container">
        <div id="heading">xx</div>
        <div id="content_menu">xx</div>
        <div id="content_body">xx</div>
        <div id="footing">xxx</div>
    </div>
</body>

table布局实例：

<table width="100%" height="950px" style="background-color:darkgray">
    <tr>
        <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>
    </tr>
    
    <tr>
        <td width="30%" height="80%" style="background-color:blue">左菜单</td>
        <td width="70%" height="80%" style="background-color:blueviolet">右菜单</td>
    </tr>
 
    <tr>
        <td colspan="2" width="100%" height="10%" style="background-color:darkcyan">下部分</td>
    </tr>
</table>

input type:

text / password / checkbox/
radio（单选，用name标志为一个组）

<select>
    <option></option>
</select>
<textarea cols=”30” rows=”30”></textarea>
<input type=”button” value=””>
<inout type=”submit” value=””>

<!DOCTYPE html>
<html>
    <frameset rows="20%,*">
        <frame  src="top.html"/>
            <frameset cols="20%,*">    
        <frame src="left.php"/>
        <frame name="myright" src="right3.php"/>
        </frameset>
    </frameset>
</html>

内联框架

在页面中显示实体

html 关键字显示不出来
要使用html&gt

XHTML

艾华丰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html container标签_刚开始HTML需要了解的

这篇文章主要给大家伙科普下，结合之前本人刚入门时的所学所想，最最基本的标签就不介绍了，主要分享一些需要记忆的点和重点。假设修饰div的样式表为.short{}，则修饰div其中的table 则 .short table{} id选择器>类选择器>html选择器>通配符选择器 #>.>body>*行内元素(inline element),又叫内联元素...
复制链接

扫一扫