HTML5语法

最新推荐文章于 2024-04-20 20:30:09 发布

HelloWorldLzz

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量976

点赞数

分类专栏： H5 基础文章标签： html5 数据对象字符串 substring

本文链接：https://blog.csdn.net/qq_38246635/article/details/77745747

版权

H5 基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

内容类型（contentTytp）HTML文件的后缀名“.HTML”或“.htm”,HTML文件内容类型是“text/html”

2、DOCTYPE（HTML开头的地方的关键字）：

HTML5之前的样式：

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

H5的样式

<!DOCTYPE html>

Doctype（声明方式）在HTML中是必不可少的，位于HTML文档的第一行代码，随着HTML版本的更新，其声明方式也在更改，但是H5的声明方式向下兼容（兼容所有的低版本）。

3、字符集

H5之前

<metahttp-equiv="Content-Type"content="text/html"charset="utf-8">

H5：

<metacharset="UTF-8">

HTML5默认的字符集编码是UTF-8，之前的大部分版本默认字符集编码是ISO-8859-1

4、标签标记省略

1）、省略全部：body、tbody、head、colgroup、html

2)、不允许写结束标签的标签：img、input、br、base、link、mata等等

3）、允许写结束标签：p、li、dt、dd、tr、td、th、

5、布尔类型的属性

对于布尔类型的属性，比如：readonly、dissabled、checked、selected不写值默认为TRUE，同时对于值是任何东西都是无效的，说白了只要写这个属性，属性立马生效。

6、属性省略引号

在之前的学习中，属性只都是放在引号里面，在H5中如果属性值中不包括特殊字符（”<”,”>”,”=”）双引号和单引号都可以去掉

1.3新增和废弃的元素新增和废弃的属性

新增的结构（布局）标签：section、article、nav、foot、header、hgroup、aside、figure

新增的其他标签：video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source等等

Input type的新增：email、url、number、datepickers、range

废弃标签：font、center、s、basefon、u、tt

1.4全局属性

在HTML5中，定义了少量对所有元素都有效的属性。

1、 Contenteditable

<p contenteditable="true">我是一个段落，但是我可以编辑</p>//可以被编辑
<p contenteditable="false">我是一个段落，但是我不能编辑</p>//不能被编辑
<p contenteditable>我是一个段落，但是我能编辑</p>//可以被编辑

设置contenteditable=TRUE属性之后可以直接在页面上进行编辑，编辑之后元素的宽高自动适应。

contenteditable=FALSE说明这个标签不能被编辑。

注意：1）、如果只是设置了这个属性，默认的值是TRUE。

2）、属性可以被继承。需要考虑“就近原则”

2、designMode

用来指定整个页面是否可以编辑，当designMode设置为on的时候相当于页面上所有的元素都设置contenteditable=TRUE。当designMode设置为off的时候相当于页面上所有的元素都设置contenteditable=FALSE。

注意：1）、如果同时设置了designMode和contenteditable，最终采用“就近原则”。

2）、该属性在IE8以下的浏览器无效，以兼容IE 678为耻。

3、hidden

<!DOCTYPEhtml>
<html>
<head lang="en">
    <metacharset="UTF-8">
    <title>全局属性designMode的继承性</title>
    <style>
        .div1{
            width: 100px;
            height: 200px;
            background-color: red;
            display: none;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: red;
            visibility: hidden;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div></div>
<div class="div2"></div>
<div></div>
<div hidden></div>
<div></div>
</body>
<script>
    document.designMode="off";
</script>
</html>

Hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，同时不会占原来的位置。类似于display：none

注意：hidden的属性默认值是“”hidden，所以说设置只需要设置属性名，不需要属性值。

Hidden:看不见，不占位置。

Visibility:hidden看不见，占位置

Display：none看不见，不占位置。

4、spellcheck

<inputtype="text"spellcheck="true">

Spellcheck属性是HTML5专门为了input和textarea标签提供新属性，他的功能是对用户输入的内容进行拼写和语法检查，如果拼写错文字下面有一条波浪线。属性值为TRUE和FALSE，TRUE为检查拼写和语法。FALSE反之。

5、tabindex

<!DOCTYPE html>
<html>
<head lang="en">
    <metacharset="UTF-8">
    <title></title>
    <style>
        div{
            height: 44px;
            width: 181px;
            background: #71b9fe;
        }
    </style>
</head>
<body>
<div>
    <label>名字</label>
    <inputtype="text"tabindex="1">
</div>
<div>
    <label>性别</label>
    <inputtype="text">
</div>
<div>
    <label>年龄</label><input type="text" tabindex="3">
</div>
<div>
    <label>智商</label><input type="text" tabindex="2">
</div>
<div>
    <inputtype="submit"tabindex="4">
</div>
<div>
    <a href="http://www.huadianedu.com">华电</a>
    <a href="http://www.baidu.com"tabindex="4">百度</a>
</div>

</body>
</html>

Tabindex=“正整数”：按tab键可以选中（获得焦点），这里选择的标签可以是input输入框、按钮、a标签等等。同时按tab键选中的顺序和设置的tabindex属性一致，tabindex值越大，越后面选中。建议不使用tabindex=0；

Tabindex=-1：按tab键不选中。

HelloWorldLzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5语法

内容类型（contentTytp）HTML文件的后缀名“.HTML”或“.htm”,HTML文件内容类型是“text/html”2、DOCTYPE（HTML开头的地方的关键字）：HTML5之前的样式： HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/
复制链接

扫一扫