HTML的使用（下）

最新推荐文章于 2024-09-10 13:54:44 发布

喵果森森

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量1.1k

点赞数 12

分类专栏： JavaWeb学习日志文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_74141222/article/details/138870383

版权

JavaWeb学习日志专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

前言
一、HTML5是什么？
二、使用内容
总结

前言

该篇文章是对HTML基础内容的补充部分。内容包含表单标记的下拉列表框标记、多行文本标记、超链接标记、图片标记以及HTML的部分新增内容。

一、HTML5是什么？

HTML5是HTML的衍生版本，在内部功能上，HTML5以往的版本都可兼容。在HTML5旧版本中建立的网站并需要重新创建。

二、使用内容

1.表单标记

（1）下拉列表框标记

<select>标记可以在页面中创建下拉列表框，但此时的列表框为空，需要使用<option>标记向列表中添加内容。

语法格式：

<select name="select1" size="digit" mupltipe="multiple" disabled="disabled">

    <option>选项名称</option>

</select>

<select>标记的属性
属性	功能描述
name	用于指定列表框的名称，自定义
size	用于指定列表框中显示的选项数量，超出该数量的选项用滚动条来查看
disabled	用于指定当前列表框不可使用（变成灰色），可填值为disabled
multiple	用于让多行列表框支持多选（用户需要按住ctrl键再用鼠标左击多选）

实操展示：

<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        你好，世界
        <br>
        性别:
        <select name="sex">
            <option>男</option>
            <option>女</option>
            <option>其他</option>
        </select>
        <br>
        目前专业：
        <select name="select2">
            <option>哲学</option>
            <option>经济学</option>
            <option>法学</option>
            <option>教育学</option>
            <option>文学</option>
            <option>历史学</option>
            <option>理学</option>
            <option>工学</option>
            <option>农学</option>
            <option>医学</option>
            <option>军事学</option>
            <option>管理学</option>
            <option>艺术学</option>
        </select>
        <br>
        选报志愿（多选）：
        <select name="select3" size="5" multiple="multiple">
            <option>哲学</option>
            <option>经济学</option>
            <option>法学</option>
            <option>教育学</option>
            <option>文学</option>
            <option>历史学</option>
            <option>理学</option>
            <option>工学</option>
            <option>农学</option>
            <option>医学</option>
            <option>军事学</option>
            <option>管理学</option>
            <option>艺术学</option>
        </select>
    </body>
</html>

运行结果：

（2）多行文本标记

<textarea>标记相比单行文本标记，可以输入更多的内容。<textarea>标记出现在<form>标记的标记内容中。

语法格式：

<textarea cols="digit" rows="digit" name="name" disabled="disable" readonly="readonly" wrap="vaule">
</textarea>

1.1 <textarea>标记的属性
属性	功能描述
name	用于指定多行文本框的名称，当表单提交后，在服务端获取表单数据时应用。
cols	用于指定多行文本框显示的列数（宽度）
rows	用于指定多行文本显示的行数（高度）
disabled	用于指定当前多行文本框不可使用（变成灰色）
readonly	用于指定当前多行文本框为只读
wrap	用于设置多行文本中的文字是否自动换行，可填值如表1.2所示

1.2 wrap属性的可选值
属性	功能描述
hard	默认值，表示自动换行，如果文字超过了cols属性所指的列数就自动换行，并且提交到服务器时换行符同时被提交
soft	表示自动换行，如果文字超过cols属性所指的列数就自动换行，但提交到服务器时换行符不被提交
off	表示不自动换行，如果想让文字换行，只能按下Enter键强制换行

实操展示：

<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        你好，世界
        <br>
        <form name="form" method="post" action="">
            <textarea name="text" cols="30" rows="5" wrap="hard" readonly="readonly">鄙人才疏学尚浅，顶峰相会未可言。狂笑过往定睛看，犹可一览东五岳。
                        
                        -MGSS
            </textarea>
        </form>        
    </body>
</html>

运行结果：

2.超链接与图片标记

HTML语言的标记有很多很多，具体的深入学习需要购买相应的书籍。这里只是介绍常用的标记，还有两个需要介绍的就是超链接标记和图片标记。

（1）超链接标记

超链接标记时页面中的重要元素，在网站中实现从一个HTML页面跳转到另一个HTML页面。

语法格式：

<a href = ""></a>

href属性指定链接跳转到哪个HTML页面。

实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
      <center>
        <a href="Demo.HTML">点击某个人的网站</a>
      </center>
    </body>
</html>

运行结果：

点击链接后跳转到对应HTML页面

（2）图片标记

图片标记可以使用户在浏览网站时看到各种各样的图片，通过<img>标记来实现的。

语法格式：

<img src="url" width="value" height="value" border="value" alt="提示文字">

实操展示：

<html>
    <head>
        <title>网站</title>
    </head>
    <body>
        你好，世界
        <br>      
        <form name="form" method="post" action="">
            <textarea name="text" cols="30" rows="5" wrap="hard" readonly="readonly">鄙人才疏学尚浅，顶峰相会未可言。狂笑过往定睛看，犹可一览东五岳。
                        
                        -MGSS
            </textarea>
        </form>
        <br>
        <center>
            <img src="two.jpg" alt="日出">
        </center>       
    </body>
</html>

运行结果：

3.HTML5的新增内容

在HTML5中，新增了以下元素

（1）section元素

<section>元素表示页面中的一个区域，例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用，标识文档结构。

实操展示：

<html>
    <title>页面1</title>
    <body>
        <section>
            <h2>标记的使用</h2>
            <p>完成百分比：100%</p>
            <input type="button" value="请单击"/>
        </section>
    </body>
</html>

相当于在页面中定义了一个区域

运行结果：

（2）acticle元素

acticle元素表示页面中的一块与上下文无关的内容。该内容可以是一篇文章、一段评论、一篇日志等。该元素通常和<header>标题元素、<footer>脚注元素一同使用。

<header>元素表示一个内容区域或者整个页面的标题。

<footer>元素表示一个内容区域或者整个页面的脚注。

实操展示：

<html>
    <title>页面1</title>
    <body>
        <article>
            <header>
            <center>    <h1>永乐大典<h1>    </center>
            <header>
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《永乐大典》是明永乐年间由明成祖朱棣先后命解缙、姚广孝等主持编纂的一部集中国古代典籍于大成的类书。
                初名《文献大成》，后明成祖亲自撰写序言并赐名《永乐大典》。全书22877卷（目录60卷，共计22937卷），11
                095册， [1]约3.7亿字，汇集了古今图书七八千种。
            </p>
            <footer>
                <p>2024/5/16</p>
            </footer>
        </acticle>    
    </body>
</html>

运行结果：

（3）<aside>元素

<aside>元素表示当前页面或文章的附属信息部分。可以包括当页内容的引用、侧边栏、导航条，以及令开发者喜闻乐见的广告（做网站打广告）。

实操展示：

<html>
    <title>页面1</title>
    <body>
        <aside>
            <nav>
                <ul>
                    <li>
                        <a href="#">Java编程</a>2015-5-4
                    </li>
                    
                    <li>
                        <a href="#">Web开发</a>2016-10-24
                    </li>
                    <li>
                        <a href="#">MySQL数据库</a>2017-4-04
                    </li>
                </ul>
            </nav>
        </aside> 
    </body>
</html>

运行结果：

（4）新增的input元素类型

HTML5中新增的input元素类型如下：

type属性的属性值
可填值	功能描述
email	将input元素的类型设置为e-mail，表示文本框必须输入E-mail地址
url	文本框必须输入URL地址
number	文本框必须输入数值
range	文本框必须输入一定范围内数字值的文本框