响应式网页设计freeCodecamp(基础 HTML 和 HTML5)

响应式网页设计freeCodecamp(基础 HTML 和 HTML5),第1张

h1元素通常被用作主标题,h2 元素通常被用作副标题, 还有 h3、h4、h5、h6 元素,它们分别用作不同级别的标题。

用 a(Anchor,简写为 a)来实现网页间的跳转。

a 需要一个 href 属性 指向跳转的目的地。 同时,它还应有内容。 例如:

浏览器将显示文本 this links to freecodecamp.org,这是一个可点击的链接。

通过这个链接可以访问 https://www.freecodecamp.org 。

<a href="#contacts-header">Contacts</a>

...

<h2 id="contacts-header">Contacts</h2>

当用户点击 Contacts 链接,可以访问网页中带有 Contacts 标题元素的部分。

文本是被包裹在 p 元素内

(有时你想为网站添加一个 a 元素,但还不确定要将它链接到哪里。)

href 属性的当前值是指向 “ https://www.freecatphotoapp.com ”。

请将 href 属性的值替换为#,以此来创建链接占位符。

通过把元素嵌套进 a 里使其变成一个链接。将 img 嵌套进 a 元素中。

如果我们要把图片嵌套进 a 元素, 可以这样写:

HTML 中有用于创建有序列表的特定元素。

有序列表以 <ol>开始,中间包含一个或多个 <li>元素。 最后以 </ol>结束。

例如:

注意: 别忘了 input 元素是 "自闭和标签",即不需要结束标签。(input / //表单元素标签

br/ //换行 hr/ //水平线 img / //图片 option/ //下拉菜单项 meta / link /)

把现有的 input 元素嵌套到一个表单 form 元素里,然后设置 form 元素的 action 属性值

radio buttons (单选按钮)就好比单项选择题,正确答案只有一个。

( 单选按钮是 input 选择框的一种类型 )

每一个单选按钮都应该 嵌套 在它自己的 label(标签)元素 中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的单选按钮应该拥有 相同的 name 属性 。 创建一组单选按钮,选中其中一个按钮,其他按钮即显示为未选中,以 确保 用户只提供 一个答案

下面是一个单选按钮的例子:

现在以HBuilder工具编写为例:

1. 打开此工具,在项目管理器中右键单击创建一个web 项目

2.右键单击项目名称,新建一个HTML文件----form01.html

<!DOCTYPE html>

<!--

    作者:offline

    时间:2017-01-06

    描述:form表单

    

    在form标签中,有两个经常使用的属性

    action:表单提交服务器地址

    method: 表单提交的方法/方式----get/post

                    其他提交方式---put delete

            提交方式----get(默认的提交方式)

            1.请求的参数放到地址栏中

            2.不安全

            3.存在缓存

            4.传输数据的大小收到限制

            提交方式----post

            1.请求的参数放到http协议中

            2.相对安全---账号密码等信息不会放到地址栏中

            3.没有缓存

            4.传输数据的大小限制较小

                 修改成post之后,可能会出现错误信息。

    input标签:定义输入字段,用户可在其中输入数据。

           属性:

           type 指示 input标签的类型,默认的是text

                            按钮类型: 普通按钮 button 重置按钮 Reset  提交按钮 submit

           value 定义要显示的文本。

-->

<html>

    <head>

        <meta charset="utf-8">

        <title>form表单1</title>

    </head>

    <body>

         <form action="" method="post">

             <input type="text" name="username" value="zhangsan" />

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

         </form>

    </body>

</html>

3.查看此网页是不是HTML5,主要看表头

4.HTML5新增了很多新内容,具体可以查看API,例如:在网页中嵌套音频/视频文件的格式


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7306344.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存