HTML基础讲解（四）

最新推荐文章于 2023-09-06 08:30:00 发布
最新推荐文章于 2023-09-06 08:30:00 发布
阅读量239 收藏
点赞数
分类专栏： HTML Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjjkjj/article/details/93708888
版权

新增的非主体结构元素

  • header元素
  • footer元素
  • hgroup元素
  • address元素

header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面个页面内的一个内容区块的标题，但也可包含其他内容，例如数据表格、搜索表单、或相关logo图片。

<body>
<!--header不仅值表示整个页面，还可以表示区域块的头部-->
    <header>
        <h1>IT最新技术</h1>
        <a href="http://www.jikxueyuan.com">极客学院</a>
        <nav>
            <ul>
                <li> <a href="#">学习</a></li>
                <li> <a href="#">技术</a></li>
                <li> <a href="#">极客</a></li>
            </ul>
        </nav>
    </header>

</body>

footer元素

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。

<body>
    <footer>
        <ul>
            <li><a href="#">版本信息</a></li>
            <li><a href="#">站点地图</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </footer>
    <article>
        <footer>
            这是一个文章的底部
        </footer>
    </article>
    <section>
        <footer>
            底部
        </footer>
    </section>
</body>

hgroup元素

是将标题及其子标题进行分组的元素，hgroup元素通常讲h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组

<body>
    <header>
        <hgroup>
            <h1>
                这是文章标题
            </h1>
            <h2>
                这是一个子标题
            </h2>
            <p>
                <time datetime="2015-10-10">2015-10-10</time>
            </p>
        </hgroup>
        <div>
            这是内容
        </div>
        <footer>
            这是底部
        </footer>
    </header>
</body>

address元素

在这里插入图片描述

<body>
    <address>
        <a href="#">iver</a>
        <a href="#">qw</a>
    </address>
    <footer>
        <div>
            <address>
                <a href="#">er</a>
                极客学院嘉华大厦
            </address>
            <time datetime="2015-10-10">2015-10-10</time>
        </div>
    </footer>
</body>

HTML编排的规则

<body>
    <header>
        <h1>这是文章标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">帮助</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p>文章正文</p>
        <section>
           <div>
               <article>
                   <h1>评论标题</h1>
                   <h2>评论正文</h2>
               </article>
           </div>
        </section>
    </article>
    <footer>
        <small>版权所有...</small>
    </footer>
</body>

表单新增元素与属性

  • form属性
  • formaction属性
  • formmethod属性
  • formenctype属性
  • formtarget属性
  • autofocus属性
  • required属性
  • labels属性

form属性

HTML5中，表单内从属元素可以写在页面任何位置，然后为该元素指定一个form属性，属性值为该表单的ID，这样就可以声明钙元素从属指定表单了。

required属性

此属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时浏览器中显示信息提示文字

<body>
    <form >
        <input type="text" required="required">
        <button type="submit">提交</button>
    </form>
</body>

labels元素

为所有可使用标签的表单元素、button、select元素灯定义一个lables属性，属性值为NodeList对象，代表该元素所绑定的标签元素所构成集合
在这里插入图片描述

表单新增元素与属性（续）

  • 标签的control属性
  • 文本框的placeholder属性
  • 文本框的list属性
  • 文本框的AutoComplete属性
  • 文本框的pattern属性
  • 文本框的SelectionDirection属性
  • 复选框的indeterminate属性

标签的control属性

在HTML5，可以爱变迁内部防止一个表单元素，并且通过该标签的control属性来访问该表单元素

<body>
    <script>
        function setValue(){
            var label=document.getElementById("label")
            var textbox=label.control;
            textbox.value="010010";
        }
    </script>
    <form>
        <label id="label">
            邮编：
            <input id="txt_zip" maxlength="6">
            <small>请输入6位数字</small>
        </label>
        <input type="button" value="设置默认值" onclick="setValue()">
    </form>
</body>

在这里插入图片描述

文本框的placeholder属性

placeholder属性是指文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字

<body>
    <input type="text" placeholder="请输入用户名">
</body>

在这里插入图片描述

文本框的list属性

在这里插入图片描述

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

        </datalist>
    </form>
</body>

在这里插入图片描述

文本框的autocomplete属性

<body>
    <input type="text" name="greeting" autocomplete="" >
</body>

文本框的pattern属性

在这里插入图片描述

<body>
    <form>
        请输入内容：
        <input  pattern="[A-Z]{3}" name="part">
        <input type="submit">
    </form>
</body>

文本框的selectiondirection属性

在这里插入图片描述

<body>
    <script>
        function AD() {
            var control =document.forms[0]['text']
            var Direction=control.selectionDirection;
            alert(Direction)
        }
    </script>
    <form>
        <input type="text" name="text">
        <input type="button" value="点击我" onclick="AD()">
    </form>
</body>

在这里插入图片描述

复选框的iindeterminate属性

在这里插入图片描述

<body>
    <input type="checkbox"  indeterminate id="cb">属性测试
    <script>
        var cb=document.getElementById("cb")
        cb.indeterminate=true;
    </script>
</body>
大雷哥～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识讲解！
03-26
HTML基础知识讲解！
HTML入门学习笔记 （案例+详解）
m0_61275667的博客
06-18 854
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.11 <img src="海葡萄.jpeg" width="200px" height="100px" alt="海葡萄">
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
最新发布
ZL_1618的博客
09-06 8685
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
前端html基础知识看这一篇就够了（小白必看,超详细）
qq_65369090的博客
03-14 528
基于对黑马pink老师前端html课程总结，提取其中精华部分，做出的总结笔记
HTML零基础入门教程（详细）
热门推荐
m0_61886762的博客
05-28 3万+
首先我们先介绍一下网页： 网页时构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此我们把它俗称为HTML文件。 HTML指的是超文本标记语言，它是一种用来描述网页的一种语言。标记语言是一套标记标签。 超文本的含义： （1）可以加入图片、声音、动画、多媒体内容，超出了文本的限制. (2) 可以从一个文件中跳转到另一个文件，与世界各地的主机的文件连接（超级链接文本）. 常用的浏览器： 浏览器是网页显示、运行的平
HTML基础入门（详细）
weixin_51143430的博客
08-28 2170
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML+CSS基础讲解
10-14
HTML+CSS基础讲解,HTML+CSS基础讲解,HTML+CSS基础讲解
HTML-CSS结合-基础讲解2022优秀文档.ppt
11-14
HTML-CSS结合-基础讲解2022优秀文档.ppt
html基础讲解笔记
11-01
基础Html知识，有利于复习回顾！其中介绍的有html的发展史，有一些小邮箱的基本小案例！
html讲解 css基础自学
10-24
这是关于HTML css 的一些自学内容... 一般都是很难找到的哦... 一般适合新手自学...高手拓展
HTML入门（详细）
qq_63525426的博客
05-03 1万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML基础入门
Lirene_的博客
09-14 288
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面。
文本框的SelectionDirection属性
weixin_30363981的博客
09-02 192
代码实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <script> ...
selectionDirection——input和textarea的属性，获取用户选择文字的方向
飞一样的编程
06-03 882
正向选择，返回forward，反向选择，返回backford，没有选择返回none function onc(){ var c=document.forms[0]['text']; var d=c.selectionDirection; alert(d); }
html入门基础(详解）
qq_44709805的博客
09-30 3902
html入门基础 1.HTML：是一种用于创建网页的超文本标记语言(Hyper Text Markup Language) “超文本”就是指页面可以包含图片，链接，甚至音乐，视频，程序等非文字元素。 ◼ HTML语言是Web的基础，可以说Internet是建立在HTML基础之上的。 ◼ HTML5是新一代HTML标准，大部分浏览器已经支持。 ...
前端开发基础HTML基础知识详解（一）
吾之历程
04-27 1136
HTML1-前言&WEB标准1.浏览器1.1查看浏览器占有的市场份额1.2常见浏览器内核（了解）3. Web标准（重点）3.1 为什么要遵循WEB标准呢？3.2 Web 标准的好处3.3 Web 标准构成（面试题常问）web标准小结4. 拓展2. HTML 初识学习目标1. HTML 初识1.1 HTML骨架标签html骨架标签总结团队约定大小写1.2 HTML元素标签分类1.3 HTML...
重回百度前端技术学院第一天 HTML复习3
qq_39644109的博客
07-03 111
HTML <q> 用于短的引用 HTML <q> 元素定义短的引用。 浏览器通常会为 <q> 元素包围引号。 用于长引用的 HTML <blockquote> HTML <blockquote> 元素定义被引用的节。 浏览器通常会对 <blockquote> 元素进行缩进处理。 用于缩略词的 HTML <ab...
兼容&图片整合&优化
syue779的博客
09-23 494
图片整合（精灵图、css sprites、css精灵、雪碧图） 把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用。 优点: （1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； （2）CSS Sprites能减少图片的字节； （3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一
html5零基础入门教程pdf
04-29
HTML5是一种新一代的标记语言，被广泛应用于Web开发中，主要负责定义网页的结构和内容。对于零基础入门者来说，HTML5的学习可能会有些吃力，但是只要有一定的学习耐心和认真的态度，就可以逐渐掌握这一技能。 如果你想学习HTML5，入门教材是必不可少的。其中最重要的就是《HTML5零基础入门教程PDF》。这本教材主要包括一些基础的HTML5知识，如标签、属性、元素等等。同时，也会涉及到一些高级的HTML5知识，如多媒体、网页布局、网页动画等方面的内容，这些知识会对HTML5的实际应用产生很大的作用。 对于零基础的学习者，入门教程中的图文并茂的讲解非常有用，可以让学习者更快地理解HTML5的概念和应用。此外，随着HTML5技术的不断更新和完善，入门教程也会时时更新，这能够让学生跟上最新的学习步伐。 总的来说，学习HTML5需要有一定的耐心和信心，通过学习入门教程可以逐渐掌握HTML5的基础知识，并且在实际应用中不断提升。最终，你可以开发出精美的网页，实现你的网页设计梦想。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值