前端开发工程师-HTML5+CSS3-6

这篇文章上次修改于 2083 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

.box1 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            word-break: break-all;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            white-space: nowrap;
        }
        
        .box3 {
            width: 120px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }
        
        .box4 {
            width: 120px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
        }
    </style>

<header>网页的头部区域</header>

<article>网页中的独立内容</article>

<section>网页中的内容区块</section>

<h2>主标题</h2>
<h4>子标题</h4>

</hgroup>

<address>地址或联系信息</address>

被主体内容引用的，相对独立的内容块。如：图表、代码块、图片
<figcaption>定义figure的标题</figcaption>

</figure>

<p>今天天气不错，<mark>万里无云</mark></p>

pubdate属性，表示当前内容的发布时间
datetime属性：定义元素的日期和时间；如果未定义该属性，则必须在元素内容中规定日期和时间

<!--

audio元素在IE8及更早版本的浏览器中不支持
audio元素能够播放声音文件或音频流
HTML5支持的音频格式：
    ogg     免费      支持的浏览器有Chrome、Firefox、opera
    mp3     收费      支持的浏览器：Chrome、Safari、IE9+
    wav     收费      支持的浏览器：Firefox、Opera、Safari
相关属性：
    src属性，音频文件的URL地址
    controls属性：浏览器为音频文件提供的播放控件
    loop属性：循环播放
    muted属性：音频输出为静音

-->

video元素在IE8及更早版本的浏览器中不支持

HTML5中支持的视频格式：
    ogg     支持浏览器：Chrome、Firefox、Opera
    mepg4   支持浏览器：Chrome、Safari
    webm    支持浏览器：Chrome、Firefox、opera
相关属性：
    src属性：视频文件的URL地址
    controls属性：视频文件的播放控件
    loop属性：循环播放
    muted属性：静音

    width属性：视频播放器的宽度
    height属性：视频播放器的高度
    poster属性：预览图片，视频在下载时显示的图像，直到用户点击播放按钮

<!-- 用于访问协议的完整的URL地址，提交表单时，会自动验证input输入域的值：-->
<input type="url" value="" name="url"/>

<!-- 用于email地址的输入，提交表单时会验证input输入域的值：
    multiple属性：允许同属输入多个email地址，各个地址之间用逗号隔开
-->
<!--<input type="email" value="" name="email" />-->
<input type="email" value="" name="email" multiple/>

<!-- 用于搜索关键字的文本域 -->
<input type="search" name="search"/>

<!-- 用于输入电话号码的文本域，为触摸屏网页开发的服务，在电脑版网页中不会生效，在触屏端点击type类型为tel的文本域时，会弹出虚拟键盘（0~9，*，#）-->
<input type="tel" /><br/>

<!-- 用于输入数字的文本域：
    max属性：最大值
    min属性：最小值
    step属性：步长，默认步长为1
-->
<input type="number" max="100" min="0" value="10" step="10"/>
<input type="number"/>
<!-- 用于生成一个数字滑动条-->
<input type="range" max="100" min="0" value="10" step="10"/>
<input type="range"/>
<!-- range类型和number类型的功能基本一致，区别在于外观样式不同，默认值不同，range类型的min属性默认值为0，max属性默认值为100-->

<!-- 用于生成一个颜色选择器，值为十六进制色值-->
<input type="color" value="#ff0000"/>

<br/>
input的日期时间类型：<br/>
<!-- date类型从一个日期选择器中选择一个日期:-->
<div><input type="date"/></div>
<!--datetime类型手动输入一个日期时间（UTC时间）UTC+8-->
<div><input type="datetime"/></div>
<!-- datetime-local类型，选择一个日期和时间（没有时区）-->
<div><input type="datetime-local"/></div>
<!-- month类型，选择一个年和月-->
<div><input type="month"/></div>
<!-- week类型，选择一个年和周-->
<div><input type="week"/></div>
<!-- time类型，选择一个时间（时：分）-->
<div><input type="time"/></div>

<select name="" id="">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<!-- 可选下拉列表，datalist标签需要与input标签配合使用-，使用input元素的list属性与datalist标签的id属性关联-->
<input list="a"/>
<datalist id="a">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="2232323">2232323</option>
</datalist>

<br/>
<input type="submit" value="提交"/>

</form>

新增表单属性：

1、min、max、step属性
    用于包含数字的input输入域，number类型、range类型
2、placeholder属性
    用于输入域的提示信息
3、autocomplete属性
    用于设置表单是否启用自动完成功能
        autocomplete="on"启用自动完成功能
        autocomplete="off"不采用用自动完成功能
    注意：在input标签中name属性是必须要有的
4、autofocus属性
    用于页面加载时自动获取焦点
5、required属性
    用于提交表单时元素不能为空
6、pattern属性
    用于指定输入内容是否符合正则表达式
7、multiple属性
    用于email输入域和file文件上传域中上传多个文件
8、list属性
    用于input输入域和datalist元素关联，实现数据列表的下拉效果
9、form属性
    用于input表单元素与form表单之间的关联，定义表单元素所属的表单区域

<form action="#" id="usfo">
<input type="url" placeholder="请输入URL地址" name="url"/>
<input type="text" placeholder="请输入内容" name="con" autofocus/>
<!--<input type="text" name="username" placeholder="请输入用户名" required/>-->
<input type="text" name="username" placeholder="请输入用户名" pattern="[a-zA-Z]{3,}"/>
<input type="email" name="email" placeholder="请输入邮箱地址" multiple/>
<input type="file" multiple/>
</form>
<input type="submit" value="提交" form="usfo"/>

 <form action="#">
<input type="text" name="txt"/>
</form>

MHlife-自由·爱！

前端开发工程师-HTML5+CSS3-6

没有评论