HTML+CSS进阶教程：布局、表单与HTML5媒体元素-优快云博客

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128523820

四十一、窗口自适应

将父盒子设置好，子盒子才能显示出来
盒子根据窗口的大小进行改变
html,body{
    height:100%;
}

四十二、两栏布局

calc()函数:用于动态计算长度值。
需要注意的是，运算符前后都需要保留一一个空格，例如: width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持"+","-","*", "/"运算;
calc()函数使用标准的数学运算优先级规则;

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html , body{
            height: 100%;
        }
        .box1{

            height: 100%;
            background-color: red;
            float: left;
            width: calc(100% - 200px);
        }
        .box2{
            width: 200px;
            height: 100%;
            background-color: yellow;
            /* margin-left: 200px; */
            float: left;

        }
    </style>
</head>
<body>

        <div class="box1"></div>
        <div class="box2"></div>

</body>

四十三、三栏布局

    <style>
        *{
        margin: 0;
        padding: 0;
        }
        html , body{
            height: 100%;
        }
        .left  , .right{
            width: 200px;
            height: 100%;
        }
        .left{
            background-color: red;
            float: left;
        }
        .right{
            background-color: blue;
            float: left;
        }
        .center{
            width: calc(100% - 400px);
            height: 100%;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

</body>

四十四、表单进阶

<1>. 单选框

    <h1>表单进阶-单选框</h1>
    <div>你对于京东首页满意度如何</div>
    <div>
        <input type="radio" name="aaa" checked="checked">非常满意
    </div>
    <div>
        <input type="radio" name="aaa">满意
    </div>
    <div>
        <input type="radio" name="aaa">一般
    </div>
    <div>
        <input type="radio" name="aaa">不满意
    </div>
    <div>
        <div>你的性别</div>
        <div><input type="radio" name="bbb" id="man">
            <label for="man">男</label>
        </div>
        <div><input type="radio" name="bbb" id="woman">
            <label for="woman">女</label>
        </div>
    </div>
</body>

<2>. 复选框

<body>
    <h1>表单进阶-复选框</h1>
    <div>
        <div>你的兴趣爱好:</div>
        <div>
            <input type="checkbox" name="aaa" checked>抽烟
            <input type="checkbox" name="aaa" checked>喝酒
            <input type="checkbox" name="aaa" checked>烫头
        </div>
        <div>你擅长的技术:</div>
        <div>
            <input type="checkbox" name="Html" id="Html">
           <label for="Html"> Html</label>
            <input type="checkbox" name="Css">
            Css
            <input type="checkbox" name="Js">
            Js
        </div>
    </div>
</body>

<3>. 上传文件和隐藏字段

<body>
    <div>
        <div>请截图说明</div>
        <div>
            <!-- 上传文件 -->
            <input type="file" name="" id="">
        </div>
    </div>
    <div>
        <div>图片按钮-代替提交按钮</div>
        <form>
            <input type="image" src="" >
        </form>
    </div>
    <div>
        <div>隐藏按钮</div>
        <div>
            <input type="hidden">
        </div>
    </div>
    <div>
        <div>禁用，只读 </div>
        <div>
            <button disabled="">注册</button>
            <br>
            <input type="radio" name="" id="">不满意
            <br>
            <input type="text" disabled value="11111">
            <!-- 只读 -->
            <input type="text" readonly value="22222">
        </div>
    </div>
</body>

<4>. 下拉菜单

<body>
    <h1>表单进阶-下拉菜单</h1>
    <div>
        <div>你的收货地址</div>
        <!-- 
            select 支持的属性
            1.size 显示几个
            2.multiple 多选

            option 支持的属性
            1.value 提供给后端需要的value值
            2.selected
         -->
        <select size="1" multiple>
            <option value="sd">山东</option>
            <option value="ln">辽宁</option>
            <option value="">江苏</option>
            <option value="">河南</option>
            <option value="" selected>河北</option>
        </select>
    </div> 
</body>

<5>. 文本域

    <style>
        textarea{
            width: 300px;
            height: 300px;
            resize: both;
            /* 
            resize 重新设置大小
            horizontal 水平
            vertical 垂直
            both 水平垂直
            none 都不设置
            */
        }
    </style>
</head>
<body>
    <h1>多行文本输入框-文本域</h1>
    <div>
        <!-- cols 列 ，rows 行 -->
        <textarea name="" id="" cols="30" rows="10" placeholder="请输入您的意见"></textarea>
    </div>
</body>

<6>. 字段集

    <style>
        fieldset {
            border: 1px solid blue;
        }

        legend {
            text-align: center;
        }
        input{
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>表单进阶-字段集</h1>
    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="aa">男
        <br>
        <input type="radio" name="aa">女
    </fieldset>
    <fieldset>
        <legend>爱好</legend>
        <input type="radio" name="bb">吃饭
        <br>
        <input type="radio" name="bb">睡觉
    </fieldset>
</body>

四十五、HTML5新增语义化标签

section元素表示页面中的一一个内容区块
article元素表示- -块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息

header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中-个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分 
figure元素表示- -段独立的流内容， 使用figcaption元素为其添加标题
(第一个或最后- -个子元素的位置)
main元素表示页面中的主要的内容(ie不兼容)

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html , body{
            height: 100%;
        }
        header , footer{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: orange;
        }
        section{
            height: calc(100% - 100px   );
        }
        nav , aside{
            width: 100px;
            height: 100%;
            background-color: #ccc;
            float: left;
        }
        main{
            float: left;
            background-color: white;
            width: calc(100% - 200px );
            height: 100%;
            }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <nav>
            <figure>nav</figure>
        </nav>
        <main>
            <article class="article1">

            </article> 
            <article class="article2">

            </article>
        </main>
        <aside>
            <figure>aside</figure>
        </aside>
    </section>
    <footer>footer</footer>
</body>

四十六、H5新增音频标签

<body>
    <audio src="" controls loop autoplay></audio>
    <!-- 
        contorls 控制栏
        loop 循环
        autoplay 自动播放
        muted 静音 
     -->
</body>

四十七、H5新增视频标签

<body>
    <video src="" controls loop poster=""></video>
    <!-- 
        contorls 控制栏
        loop 循环
        autoplay 自动播放
        muted 静音 
        poster 海报
        width,height 宽高
     -->
</body>

四十八、增强表单

<1>.input

<1>.input
Type= "color” 生成一个颜色选择的表单
Type= "tel” 唤起拨号盘表单
Type= "search” 产生一个搜索意义的表单
Type= "range” 产生一 个滑动条表单
Type= "number” 产生一个数值表单
Type= "email” 限制用户必须输入email类型
Type= "url" 限制用户必须输入url类型
Type=“date" 限制用户必须输入日期
Type= "month" 限制用户必须输入月类型
Type= "week” 限制用户必须输入周类型
Type= "time” 限制用户必须输入时间类型
Type= "datetime-local" 选取本地时间

<body>
    <form action="">
        <div>
            颜色选择:
            <input type="color" name="color">
        </div>
        <div>
            邮箱:
            <input type="email" name="myemail">
        </div>
        <div>
            url地址(完整地址):
            <input type="url">
        </div>
        <div>
            电话号码:
            <input type="tel">
        </div>
        <div>
            滑块效果:
            <input type="range" name="range" min="100" max="200" value="100" step="10">
            <!-- step步长 -->
        </div>
        <div>
            数字类型:
            <input type="number" min="0" max="100" value="5" step="2" name="age">
        </div>
        <div>
            搜索:
            <input type="search">
        </div>
        <div>
            日期选择: 
            <input type="date">
            <br>
            月份选择:
            <input type="month">
            <br>
            周数选择:
            <input type="week">
            <br>
            当地时间:
            <input type="datetime-local" name="datetime">
        </div>
        <input type="submit" name="" id="">
    </form>
</body>

<2>.数据列表

Datalist :选项列表
例: 
<input type= "urI" list= "url_ list" name= "link" />
<datalist id="url list">
<option label= "W3School" value= " http://www.W3School.com.cn" />
<option label="Google" value= "http://www.google.com" />
<option label=" Microsoft" value= " http://www.microsoft.com" />
</datalist>

提示: option 元素永远都要设置value属性。

<body>
    <input type="text" list="mylist">
    
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手镯"></option>
    </datalist>
</body>

<3>.属性

autofocus属性:
给文本框、选择框、或者按钮控件加上该属性,当打开页面时，该控件自动获得国标焦点, -个页面只能有一个。

required属性:
验证输入不能为空

Multiple:
可以输入-个或多个值,每个值之间用逗号分开
例: <input type= "email" multiple/>
还可以应用于file

pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例: <input pattern = "[0-9][A-Z]{3}" title="输入内容: -个数与三个大写字母" placeholder=输入内容: -个数与三个大写字母’>

<body>
    <form action="">
        <div>
            用户名：<input type="text" autofocus pattern="[0-9][A-Z]{3}">
        </div>
        <div>
            邮箱：<input type="email" name="email" required multiple>
        </div>
        <!--
            autofocus 获取焦点 
            required 必填项，不能为空
            multiple 支持多个邮箱地址，用逗号隔开 

         -->
        <input type="submit">
    </form>
</body>

四十九、层次选择器

> 子代选择器
+ 当前元素后的第一个兄弟
~ 当前元素后的所有兄弟

五十、属性选择器

1、E[attr]: 只使用属性名,但没有确定任何属性值; 0
2、E[attr="value"]: 指定属性名,并指定了该属性的属性值; 0
3、E[attr~="value"]: 指定属性名,并且具有属性值,此属性值是一个词列表, 并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的”一” 不能不写0
扩展知识
4、E[attr^="value"]: 指定了属性名，并且有属性值,属性值是以value开头的; 0
5、E[attr$="value"]: 指定了属性名,并且有属性值，而且属性值是以value结束的0
6、E[attr*="value"]: 指定了属性名,并且有属性值，且属值中包含了value; 0

五十一、伪类选择器

<1>.结构伪类选择器

X:first-child匹配子集的第一个元素。 IE7就可以支持
X:last- child匹配父元素中最后一个X元素
X:nth- child(n)用于匹配索引值为n的子元素。索引值从1开始

X:only-child这个伪类一般用的比较少, 比如上述代码匹配的是div下的有且仅有一个的p， 也就是说，如果div内有多个p,将不匹配。

X:root匹配文档的根元素。在HTML (标准通用标记语言下的一个应用)中，根元素永远是HTML

X:empty匹配没有任何子元素(包括包含文本)的元素X

<2>.目标伪类选择器

E:target选择匹配E的所有元素，且匹配元素被相关URL指向.

<3>.UI状态伪类选择器

E:enabled匹配所有用户界面(form表单) 中处于可用状态的E元素
E:disabled匹配所有用户界面(form表单)中处于不可用状态的E元素.
E:checked匹配所有用户界面(form表单) 中处于选中状态的元素E
E:selection匹配E元素中被用户选中或处于高亮状态的部分
E:focus 焦点

<4>.否定和动态伪类选择器

否定伪类选择器
Einot(s) (E6-8浏览器不支持:not0选择器。 )
匹配所有不匹配简单选择符s的元索E

动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素，而日匹配元素被定义了越链接并未被访问过。常用于链搜描点上

Eivisited
链接伪类选择器
选择匹配的元素，而且匹配元素被定义了超链接井已被访问过。常用于链按描点上

E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链按描点和按钮上

E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持ahover