Web前端——XHTML（视频学习第四期）

最新推荐文章于 2024-03-17 01:42:31 发布

盼盼

最新推荐文章于 2024-03-17 01:42:31 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/KYX_2023/article/details/102608036

版权

视频学习，请多包含！
在这里插入图片描述

一、XHTML介绍

XHTML是可扩展超文本标记语言
XHTML与HTML4.01几乎是相同的（语法、书写形式）
XHTML是一XML应用的方式定义的HTML
XHTML得到所有主流浏览器的支持
三种文档类型
STRICT(严格类型) TRANSITIONAL(过渡类型) FRAMESET(框架类型)
XHTML元素语法：
XHTML元素必须正确嵌套
XHTML元素必须始终关闭
XHTML元素必须小写
XHTML文档必须有一个根元素
XHTML属性语法规则：
XHTML属性必须使用小写
XHTML属性值必须用引号包围
XHTML属性最小化也是禁止的
新增的结构元素
section (页眉，页脚，章节)是内容块，可以与h1~h6结合使用
article：表示与上下文不相关，独立的内容。例如，博客中的一篇文章
aside：article辅助信息
header：标题
hgroup：对整个页面或页面块进行结合
footer：区域块脚部，通常写作者姓名，日期
nav：表示导航链接部分
新增的其他元素
video（视频） audio（音频）▲canvas（画布图形）
新增的input元素的类型
email ，url（文本框地址），number，range，Date Pickers（日历）

二、article元素

article可以嵌套使用也可以作插件

三、section元素

用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
如果section，aside，nav元素都实用，不要使用section元素

四、nav元素

nav元素是一个可以用作页面导航的连接组，只要将主要的基本的连接组放进nav元素即可。
nav元素应用场景：
8. 传统导航条
9. 侧边栏导航
10. 页内导航
11. 翻页操作

五、aside元素

用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条

六、header属性

header属性放在body中表标题
footer元素可作为其上层父级内容区域块或是一个根区域块的脚注。通过包括其相关区域的脚注信息，如作者，相关阅读，链接及版权信息等。
hgroup元素是将标题及子标题进行分组的元素。通常会将h1~h6元素进行分组。譬如一个内容区块的标题及其子元素算一组。

七、address元素

用来在文档中呈现联系信息，包括文档作者或文档维护者名字等。不只是用来呈现电子邮箱或真实地址，还用来展示和文档相关的联系人的联系信息。

八、网页编排规则

显示内容编排区域块
隐式内容编排区域块
标题分级
不同区域块可使用相同级别标题

九、表单内新增的元素及属性

form属性和formaction属性
在HTML5中，可以把表单内的从属元素鞋在页面任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。
formaction属性在HTML5中可以为所有的提交按钮，增加不同的formaction属性，是单击不同的按钮时可以将表单提交到不同的页面。
formmethod属性和formenctype属性
formmethod属性对每一个表单元素分别指定不同的提交方法（get，post）
formenctype属性对表单元素分别指定不同的编码方式
三种形式：
formenctype=" text/plain "
formenctype=" multipart/form-data "
formenctype=" application/x-www-form-urlencoded "
formtarget属性和autofocus属性
formtarget属性可以对多个移交按钮分别使用formtarget属性来指定提交后在哪打开所需加载的页面。（_blank,_self,_parent,_top,framename）
autofocus属性是为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
required属性和labels属性
required属性可以应用在多数输入元素上，在提交时如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
labels属性为所有可使用标签的表单元素button，select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
control属性和placeholder属性
control属性在标签内部放置一个表单元素并通过该标签的control属性来访问该表单元素。
placeholder属性是指当文本框处于未输入状态时显示输入提示。当文本框处于输入状态且为获取光标焦点时，模糊显示输入提示符。
list属性和AutoComplete属性
list属性类似于下拉列表且允许输入，而下拉列表不允许输入

<body>
    <form>
        <input type="text" name="greeting" list="greetings">
        <datalist id="greetings" style="display: none">
            <option value="HTML5学习">HTML5学习</option>
            <option value="Css3学习">Css3学习</option>
            <option value="JavaScript学习">JavaScript学习</option>
        </datalist>
    </form>
</body>

在这里插入图片描述
AutoComplete属性帮助输入所用的自动完成功能（on off）
7. pattern属性和SelectionDirection属性
pattern="[A-Z]{3}" name=“part” 正则的验证
{3}表示输入必须是3个字符
[A-Z]表示输入大写字母A到Z
SelectionDirection属性：
选取文字——属性值：forward
反向选取文字——属性值：backward
没有选取任何文字——属性值：forward
8. indeterminate 属性和image提交按钮的height属性，width属性
1)对于复选框CheckBox来说，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

<body>
    <input type="checkbox" indeterminate id="sb">属性测试
    <script>
        var sb = document.getElementById("sb");
        sb.indeterminate = true;
    </script>
</body>

在这里插入图片描述
2)height：指定image的高度
width：指定image的宽度

body>
    <form action="text.jsp" method="post"></form>
    姓名:<input type="text" name="name">
    <input type="image" src="timg.gif" alt="编辑" width="50" height="50">
</body>

在这里插入图片描述

十、

盼盼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端——XHTML（视频学习第四期）

视频学习，请多包含！一、XHTML介绍XHTML是可扩展超文本标记语言XHTML与HTML4.01几乎是相同的（语法、书写形式）XHTML是一XML应用的方式定义的HTMLXHTML得到所有主流浏览器的支持三种文档类型STRICT(严格类型) TRANSITIONAL(过渡类型) FRAMESET(框架类型)XHTML元素语法：XHTML元素必须正确嵌套XHT...
复制链接

扫一扫