HTML基础

最新推荐文章于 2020-11-28 21:55:51 发布

「已注销」

最新推荐文章于 2020-11-28 21:55:51 发布

阅读量388

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/M_ount/article/details/79593279

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML(HyperText Markup Language):

超级文本标记语言

格式：

<!-- 版本控制 告诉浏览器用最新的HTML版本解析文档 -->
<!DOCTYPE html>
<!-- html文档区域 start -->
<html>
    <!-- 文档头部 start -->
    <head>
        <!-- 文档的编码格式 -->
        <meta charset="UTF-8">
        <!-- 文档(网页)标题-->
        <title>xxxx</title>
    </head>
    <!-- 文档头部 end -->

    <!-- 文档身体 start -->
    <body>
        <!-- 实现网页的标签 -->
    </body>
    <!-- 文档身体 end -->
</html>
<!--html文档区域 end-->

举例：

行标签：<span></span>
块标签：<div></div>

常用的几种标签：

div标签：

<div></div>： 块级、双标签，可以当盒子使用。

span标签：

<span></span>：行级、双标签，也可作为盒子使用。

标题标签：

<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>：块级、双标签。

注意: h1 最好只出现一次，用于网页的logo部分。
      h2 常用于二级标题，也就是子模块的标题部分。
      h4~h6 不常用到。

段落标签：

<p></p>：块级、双标签。

注意：p标签不可以嵌套div，最好不嵌套其他的块级标签。

图片标签：

<img src="" alt="" />：单标签，可以设置尺寸，有行级标签的特点。
src="" 指定引入的图片的地址。
alt="" 图片内容的描述，必须的。

超链接标签：

<a href=""></a>：href="指定标签跳转地址"；
链接跳转方式：target="_blank | _self" 。
四种状态：默认状态；
          访问的状态；
          悬浮的状态:hover；
          点击按住没有松开的状态。

列表标签：

有序列表：

组合标签，双标签、块级。
<ol><li></li></ol>

无序列表：

组合标签，双标签、块级。
<ul><li></li></ul>

注意：list-style-type属性，可修改有序或无序前的符号，也可隐藏符号

自定义列表：

字典列表，双标签、块级。
<dl>
    <dt></dt>
    <dd></dd>
</dl>

文档流：

标签在浏览器里面按照特性，从上到下，从左向右排列的一个顺序。

脱离文档流：

让元素在文档流里面飞起来，不再占用原来的空间。

网页样式：

设置网页样式的三种方式：

行内式：在标签的属性中直接书写样式。
如：<div width="100" height="100"></div>

嵌入式：以<style>标签在<head>中创建一块书写样式的区域。
如：<style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
    </style>

链接式：从外部引入css文件。
如：<link href="div.css" rel="stylesheet" type="text/css" />

选择器（实现文档样式的基础）：

标签选择器：
书写：标签名{}
例如：div{
        color: red;
      }
优点：不需要给标签器名称(打标签)，保证标签的纯净性。
缺点：样式影响面广大，容易干扰其他标签。

类选择器：给标签定义一个类名。如：<div class="classDiv"></div>
书写：.类名{}
例如：.classDiv{
           color: red;
      }
注意：一个标记可以起多个class名，建议不超过7个。
优点：可以减少代码冗余，把相同样式标记总结在一起。
缺点：会略微的破坏html结构。

id选择器：给标签定义一个id名。如：<div id="idDiv"></div>
书写：#id名{}
例如：#idDiv{
         color: red;
      }
特点：唯一性
优点：可以逐个控制标记，互相的样式的不影响
缺点：唯一性，冗余代码多

派生(后代)选择器：
书写：选择器 选择器...{}
例如：<div>
         <span></span>
      </div>
      div span{
          color: red;
      }

优先级：

相同选择器，样式冲突的情况下，后面覆盖前门

标签(名)选择器优先级是1
类选择器的优先级是10
id选择器的优先级是100
style行间样式的优先级是1000

注意：低级的选择器无论有多个，都无法超越其优先级之上的选择器。

样式–边界设置：

border：给当前标记设置边界(默认上下左右)
border-left: 给当前标记设置左边界
border-right: 给当前标记设置右边界
border-top: 给当前标记设置上边界
border-bottom: 给当前标记设置下边界

border-width: 给当前标记设置边界粗细 :1px
border-left-width: 
border-right-width: 
border-top: 
border-bottom:

样式–背景设置：

background: 背景样式 
背景颜色 background-color: 颜色值; 
背景图片 background-image: url("图片路径");
背景图片平铺 background-repeat: repeat-x(沿着X轴平铺) | repeat-y(沿着Y轴平铺) | no-repeat(不平铺)
背景图片定位 background-position: x y; 
            X轴：支持 left center right 支持百分比 
            Y轴：支持 top center bottom 支持百分比 
背景图片尺寸 background-size: x y | cover | contain 

复合写法 
background: background-color background-image background-position background-repeat

样式–外边距：

margin: 外边距 
左边距 margin-left: 数值 | auto;
右边距 margin-right: 数值 | auto;
上边距 margin-top
下边距 margin-bottom

外边距复合写法
1.margin: 0px(上) 0px(右) 0px(下) 0px(左); 
2.margin: 0px(上) 0px(左右) 0px(下); 
3.margin: 0px(上下边距) 0px(左右边距);
4.margin: 0px(上下左右边距都是0px);

注意：
1.同级结构下，外边距冲突的情况下，谁的数值大，就采用谁的。
2.父子结构下，父级与子级存在设置上边距的情况下，父级没有设置border...时，子级的外边距会引出“塌陷”的问题。

样式–内边距：

padding: 内边距 
左内边距 padding-left: 数值;
右内边距 padding-right: 数值;
上内边距 padding-top
下内边距 padding-bottom

内边距复合写法
1.padding: 0px(上) 0px(右) 0px(下) 0px(左);
2.padding: 0px(上) 0px(左右) 0px(下);
3.padding: 0px(上下边距) 0px(左右边距);
4.padding: 0px(上下左右边距都是0px);

样式–浮动：

浮动布局 float:left | right | none 
清除浮动 clear:left | right | both 

clear的使用要点:
1.只能清除同级标签的浮动影响
2.只能清除既是同级又在它上面的标签的浮动影响

浮动造成的问题:
父级元素没有设置高度的情况下，会造成高度“塌陷”

定位：

position: static(默认值：不定位);

相对定位：

position: relative;
相对定位：相对于自身的位置去移动，不脱离文档流，还占用原来的位置。

绝对定位：

position: absolute;
绝对定位：相对于定位父级去定位，如果父级只是作为定位父级使用，只需视为relative。绝对定位会脱离文档流。
定位父级：带有postion属性(不包括static)的父级，如果父级没有postion属性，就去找父父级，直到html。如果html也没有postion就相对于document窗口定位。

注意：z-index属性，只有定位的元素才可以使用。
z-index值越大，位置越靠前。
z-index可以是负值，负值的情况下比正常元素靠后。
z-index > float(浮动) > 正常的块级元素

过渡：

background-color: red;
过渡时间：transition-duration: 2s;
过渡属性：希望那些样式变化的时候有过渡效果。多个属性用逗号隔开，默认是all。
如：transition-property: height, background-color;
过渡的运动方式：
transition-timing-function: linear; 匀速
                            ease; 
                            ease-in; 变快
                            ease-out; 变慢
                            ease-in-out; 先快再慢
过渡延时：transition-delay: 1s;

复合写法：transition: all 1s 2s linear;
兼容性：
谷歌：
-webkit-transition: all 1s 2s linear;
火狐：
-moz-transition: all 1s 2s linear;
IE：
-ms-transition: all 1s 2s linear;
欧朋：
-o-transition: all 1s 2s linear;
transition: all 1s 2s linear;

2D变形：

旋转：transform: rotate(0deg);

平移：transform: translate(0px, 0px);

缩放：transform: scale(0.5, 0.5);

倾斜：transform: skewX(5deg) skewY(5deg);

表格：

格式：<table border="1" width="100" height="100" cellspacing="0" cellpadding="1">
        <caption></caption>
            <thead></thead>
            <tbody>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        <tfoot></tfoot>
    </table>

border：边框，和css的border不一样。
cellspacing：单元格之间的间距。
cellpadding：单元格内边距。

合并边框：border-collapse: collapse | separate; (合并 | 不合并)
表格垂直居中方式：vertical-align: top | middle | bottom;

form表单：

<form action="">
action：表示要提交的服务器接口。
method：表示提交的方式。默认是GET，一般用POST。

    输入框：
    基础输入框：
    <input type="text" placeholder="" name="" value="" />
    密码输入框：
    <input type="password" placeholder="" />
    placeholder：占位符，给用户提示。
    value：最终要发给服务器的值
    name：给服务器值的时候标识这个值是什么值(身高、体重、姓名等)。

    单选：
    <input type="radio" name="" value="" />

    <input type="checkbox" name="" value="" />

    上传文件：
    <input type="file" multiple />
    multiple：可以上传多个

    按钮：
    <input type="button" value="" />

    <input type="hidden" name="type" value="" />
    隐藏属性：如果想要收集一些不需要用户填写的信息。可以使用hidden类型input。如：注册时的设备类型

    提交信息的按钮：
    <input type="submit" value="" />

    清空表单信息：
    <input type="reset" value="" />
</form>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML(HyperText Markup Language):超级文本标记语言格式：&lt;!-- 版本控制告诉浏览器用最新的HTML版本解析文档 --&gt;&lt;!DOCTYPE html&gt;&lt;!-- html文档区域 start --&gt;&lt;html&gt; &lt;!-- 文档头部 start --&gt; &lt;he...
复制链接

扫一扫