霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

HTML+CSS命名规范,原来要求这么多?HTML部分

1.1添加必须的utf-8的字符集,并且使用HTML5的简洁

方式:

<meta charset=”utf-8”>

1.2遵循xhtml1.0规则

1)所有标签必须结束

2)所有标签必须小写

3)标签属性必须使用成对引号(单引号或双引号)

4)标签属性必须有值:

5)所有特殊符号必须转义

1.3标签属性命名规范

...

HTML5的4种表单自动验证属性

1、required属性:

<form>
        <input id="huozheweb_required" name="www.huozheweb.com" required type="text"/>
        <input type="submit" value="提交"/>
</form>

required属性可以用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。

...

HTML5的progress标签的应用

progress标签:

从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条。在HTML5中我们终于可以不用模拟了。

<progress id="huozheweb_progress" max="100"></progress>

progress属性:

value:表示当前进度

...

CSS3选择器-结构性伪类选择器(二):first-child :last-child :nth-child :nth-last-child

:first-child选择器和:last-child选择器

之所以将这两个选择器放到一起来讲,是因为它们非常相似,前者表示单独选择某类元素的第一个元素,后者表示单独选择某类元素的最后一个元素。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3选择器-结构性伪类选择器(二)-霍者网页设计博客(www.huozheweb.com)!</title>
        <style type="text/css">
                *{margin:0; padding:0;}
                #list{font-family:"Microsoft yahei"; font-size:14px;}
                #list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
                #list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素li*/
                #list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子元素li*/
        </style>
    </head>
    
    <body>
        <ul id="list">
                <li>选项一 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项二 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项三 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项四 | 霍者网页设计博客(www.huozheweb.com)!</li>
                <li>选项五 | 霍者网页设计博客(www.huozheweb.com)!</li>
        </ul>
    </body>
</html>

:nth-child选择器和:nth-last-child选择器

...