标签

01-标题标签

<h1>1级标题</h1>

02-段落标签

<p>这是一段文字</p>

03-文本格式化标签

    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>

    <h1>一级标题</h1>
    <p>段落</p>
    <br>换行
    <hr>水平线
    <strong>加粗</strong>
    <em>倾斜</em>
    <ins>下划线</ins>
    <del>删除线</del>

04-图片标签

<img src="cat.gif" alt="猫片" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">

05-音频标签

controls属性

给音乐添加控制功能按钮这个控制面板是个默认的控制面板。

muted属性

该属性只是让音频静音。

loop属性

循环播放。

preload属性

设定音频的预加载方式。

=“auto”:自动加载页面加载后载入整个音频

=“metadata”:自动加载页面加载后只载入源数据

=“none”:不自动加载

<audio src="./music.mp3" controls autoplay loop></audio>

06-视频标签

<!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
<video src="./video.mp4" controls autoplay muted loop></video>

07-链接标签

<!-- href : 跳转地址当还不知道跳转地址的时候, 可以写href="#"  -->
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

<a href="./login.html">跳转到自己的html</a>

        _blank -- 在新窗口中打开链接 
        _parent -- 在父窗体中打开链接不开新窗口 
        _self -- 在当前窗体打开链接此为默认值 自己测试不知道有什么区别待看
        _top -- 在当前窗体打开链接并替换当前的整个窗体(框架页)自己测试不知道有什么区别待看

<a href="./one.html" target="_blank">

08-列表-无序

    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

09-列表-有序

    <ol>
        <li>张三:100</li>
        <li>李四: 80</li>
    </ol>

10-列表-自定义

    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>

11-表格-基本使用

    <table border="1" width="600" height="400">

        <!-- 表格标题 -->

        <caption><strong>学生成绩单</strong></caption>

        <!-- 表头 -->
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>孩砸, 真棒啊</td>
        </tr>
        <tr>
            <td>郭德纲</td>
            <td>150分</td>
            <td>没有郭德纲相声早黄了, 有了郭德纲, 相声更黄了</td>
        </tr>
    </table>

12-表格-结构

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>

                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100分</td>
                <td>真棒, 第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>99分</td>
                <td>真棒, 第二名</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>真棒, 相亲成功</td>
            </tr>
        </tfoot>
    </table>

13-表格-合并单元格

 <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">100分</td>
                <td>真棒, 第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>真棒, 第二名</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

14-表单-input

    <!-- 写什么就显示什么 -->
    文本框: <input type="text">

    <!-- 书写的内容都会变成点点显示 -->
    密码框: <input type="password">

    单选框: <input type="radio">

    多选框: <input type="checkbox">

    上传文件: <input type="file">

15-表单-占位符

    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">

16-表单

整个表单案例

<form action="">
        昵称: <input type="text" placeholder="请输入昵称">
        性别: 
        <label><input type="radio" name="sex" checked> 男</label>
        <label><input type="radio" name="sex"> 女</label>

        所在城市:
        <select>
            <option>北京</option>
            <option selected>上海</option>
            <option>广州</option>
        </select>
        喜欢的类型:
        <label><input type="checkbox" checked> 可爱</label>
        <label><input type="checkbox" checked> 性感</label>
        <label><input type="checkbox"> 御姐</label>

        个人介绍: <br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <ul>
            <li>年满18岁、单身</li>
            <li>年满18岁、单身</li>
            <li>年满18岁、单身</li>
        </ul>
        <!-- 按钮: input button -->
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>

单选框

    性别: <input type="radio" name="sex">男
          <input type="radio" name="sex" checked>女

    <input type="checkbox" checked>

文件

<input type="file" multiple>

按钮

<form action="">
        用户名: <input type="text">
        <br>
        <br>
        密码: <input type="password">
        <br>
        <br>
        <!-- 按钮 -->
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="普通按钮">
        <!-- 属性  xx="xxx" -->
    </form>

下拉菜单

    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>

文本域

<textarea cols="60" rows="30"></textarea>

label

    性别: 
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <label><input type="radio" name="sex"> 女</label>

17-div和span

    <div>这是div标签</div>
    <div>这是div标签</div>

    <span>这是span标签</span>
    <span>这是span标签</span>

18-手机端标签

    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>文章</article>

19-字符标签

网页不认识多个空格, 只认识一个

这是HTML文档, 现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体.

 css

选择器

id

class        可以用多个类名

*

标签

多层选择器

找到div的儿子p设置文字颜色是红色

    <div>
        <p>这是div的儿子p</p>
    </div>

div p {
            color: red;
        }

    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>

 div>a {
            color: red;
        }

 

 多个选择器

    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>

    <h2>h2</h2>

        /* p div span h1 文字颜色是红色 */
        /* 选择器1, 选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
            color: red;
        }

选择器-并集

    <p class="box box1" id="dilireba">这是p标签:box</p>
    <p class="box">这是p标签:box</p>
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>

/* 必须是p标签,而且添加了box类 */

p.box {
        color: red;
}

悬停

    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
    <div>div</div>

        /* 悬停的时候文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }

        /* 用户鼠标悬停到div的时候, 文字是绿色 */
        div:hover {
            color: green;
        }

Emmet语法

快速生成HTML结构语法
     ①生成标签 直接输入标签名 按tab键即可 比如 div 然后tab键,就可以生成<div></div>
     ②如果想要生成多个相同标签 加上 * 就可以 比如 div*3 就可以快速生成3个div
     ③如果有父子级关系,可以用> 比如 ul>li就可以
     ④如果有兄弟关系的标签,用+ 就可以 比如 div+p
     ⑤如果生成带有类名或者id名字的,直接写 .demo 或者 #two tab 键就可以了
     ⑥如果生成的div类名是由顺序的,可以用自增符号$
     ⑦如果想要在生成的标签内部写内容可以用{}表示

快速生成CSS样式语法
     CSS基本采取简写形式即可

         ①比如w200 按tab 可以生成 width:200px;
         ②比如lh26 按tab 可以生成 line-height:26px;
 

背景色

/* background-color: pink; */
/* background-color: #ccc; */
/* 红绿蓝三原色, a是透明度0-1 */
/* background-color: rgba(0, 0, 0, 0.5); */
background-color: rgba(0, 0, 0, .5);

背景图

background-image: url(./images/1.jpg);

背景平铺

background-image: url(./images/1.jpg);
/* background-repeat: repeat; */
/* 不平铺: 图片只显示一个 */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */

 背景位置

            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px -100px;

            /* 正数: 向右向下移动; 负数:向左向上移动 */
            /* 注意: 背景色和背景图只显示在盒子里面 */

 复合属性

background: pink url(./images/1.jpg) no-repeat bottom center ;

块显示

            /* 行内块 */
            /* display: inline-block; */

            /* 行内 */
            display: inline;

行内

行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同

            /* 行内块 */
            /* display: inline-block; */

            /* 块 */
            display: block;

行内块

/* 行内块: 一行显示多个; 加宽高生效 */
        img {
            width: 100px;
            height: 100px;
        }

标签嵌套

p 和 h 、div不能相互嵌套

标签继承

    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>

/* 控制文字的属性都能继承; 不是控制文字的都不能继承 */
        div {
            color: red;
            font-size: 30px;
            height: 300px;
        }

<div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>

div {
            color: red;
            font-size: 12px;
        }

        a {
            color: red;
        }

 

层叠性

<div class="box">文字</div>

        div {
            color: red;
            color: green;
        }

        .box {
            font-size: 30px;
        }

 

 

css引入

<head>
    <link rel="stylesheet" href="./my.css">
</head>

样式

字体高度

line-height: 50px;

/* 自己字号的1.5倍 */

line-height: 1.5;

/* line-height: 50px; */
            /* 自己字号的1.5倍 */
            /* line-height: 1.5; */

            /* 66px 宋体 倾斜 加粗 行高是2倍 */
            font: italic 700 66px/2 宋体;

字体大小

font-size: 30px;

字体粗细

font-weight: 700;

字体倾斜

/* 倾斜 */
font-style: italic;

/* 正常的, 不倾斜 */
font-style: normal;

字体

/* font-family: 宋体; */
/* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
/* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */           

font-family: 微软雅黑, 黑体, sans-serif;

font-style: normal; */
font: 100px 微软雅黑;

/* 66px 宋体 倾斜 加粗 行高是2倍 */

font: italic 700 66px/2 宋体;

文本属性

/* em: 一个字的大小 */
text-indent: 2em;

水平对齐方式

text-align: center;

文本修饰

text-decoration: underline;

text-decoration: line-through;

text-decoration: overline;

text-decoration: none;

内容

text-align: center;
/* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */

背景颜色

background-color: pink;

标签水平居中

margin: 0 auto;

 0501