HTML详解

zhengzongwei

发布于 2019-07-31 15:38:26

6550

发布于 2019-07-31 15:38:26

文章被收录于专栏：Python | Blog

HTML详解

注释

<!-- html注释 -->

/* css 注释 */

// 单行注释
/* 多行注释*/

h1 标签啊每个页面只能使用一次用来放网页的logo

<!-- html标签都是自身携带 语义：普通语义 和 强调语义：搜索引擎会优先抓取 -->
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>

    <strong>加粗</strong>
    <em>em</em>
    <ins>ins</ins>
    <del>del</del>

列表

有序列表(ol)

无序列表(ul)

自定义列表(dl dt)

<ol>
    <li></li>
    <li></li>
</ol>

<ul>
    <li></li>
    <li></li>
</ul>

<dl>
    <dt></dt>
    <dt></dt>
</dl>

表格

表单

type

表单属性

-type = 'text'  文本框
- type = 'password' 密码框
- type = 'radio' 单选框
- type = 'checkBox' 复选框
- type = 'file' 上传文件
- type = 'submit' 提交按钮
- type = 'reset' 重置按钮
- type = 'button' 按钮 等同于

button/button

value 表单元素的值
name 表单元素的名称,提交数据的键名 textarea /两个属性/ /* 禁止拖拽 */ resize: none; /* 去掉焦点框 */ outline: none;

盒子模型

/* 加padding能撑大盒子 -- 盒子尺寸计算公式： border + padding  + width/height */

/* css3.0新增的功能 -- 启动盒子内减模式 */
box-sizing: border-box;

盒子模型属性
    margin 同样适用
    /* padding: 10px 20px 40px 80px; 含义：上 右 下  左 */
    /* padding: 10px 40px 80px; 含义： 上  左右   下 */
    /* padding: 10px 80px; 含义： 上下  左右 */

文字居中

行高：文字垂直居中：设置行高属性的值等于高度属性值

div 垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 500px;
        height: 300px;
        background: #ccc;
        /* margin:auto; */
        position: absolute;
        left: 50%;
        margin-left: -250px;
        top: 50%;
        margin-top: -150px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


/*加粗*/
font-weight:bold;
/* 倾斜*/
font-style:italic
/*文字修饰线*/
text-decoration: underline;
/* 首行缩进*/
text-indent:2em;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018年07月21日，如有侵权请联系 cloudcommunity@tencent.com 删除

html