HTML基础单页面实例分析

发布时间:2022-03-05 16:35:53 作者:iii
来源:亿速云 阅读:163

这篇文章主要介绍“HTML基础单页面实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML基础单页面实例分析”文章能帮助大家解决问题。

  <html><!--html的语法由标签(形式为<keyword>),标签的属性(keword右边的键="值"对),标签之间的内容组成,每个标签定义了一个元素,

  属性则影响了该元素的视觉表现和逻辑上的动作响应等,-->

  <!--位于<!&hellip;中的为html的注释语句-->

  <head ><!--head标签用于定义文档的头部,它是所有头部元素的容器,其中元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。-->

  <title>Html</title><!--title标签定义了在浏览器上显示的页面标题,是head中唯一必须的元素-->

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--meta可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。

  注:字符集属性charset应在一开始给出(应与你编辑器保存该html时使用的字符集一致,否则在它之前的中文显示可能不正确-->

  <meta name="author" content="yhavi" >

  <meta name="keywords"

  content="HTML, DHTML, CSS, XML, XHTML, JavaScript">

  <meta http-equiv="Refresh" content="5;url=" /><!--这里实现5秒后重定向到url指出的位置。要使其失效请注释掉它。

  注:当使用绝对寻址时需要添加http://于签名-->

  <script type="text/javascript">

  document.write("5秒钟后跳转!")

  </script><!--script用于加入脚本语言片段如javascript 可使用src属性引用代码或直接在标签内容里用纯文本写代码-->

  <base href=""  target="_blank"> </base><!--base的href属性重新定义了整个html中URL寻址的相对起点(不定义base时使用该页面的URL为起点)

  位于bass标签中的target属性定义了整个页面中点击超链接时打开链接的位置,_blank示意在新窗口中打开-->

  <link><!--link一般用于使用外联的css样式表,详见>

  </head>

  <body><!--body 元素定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)-->

  <h2 name="fortarget"><!--h2到h7标签定义了标题并分别对应不同的标题大小。另,html中每个元素都可定义name或id属性用于标识该标签-->

  正文主题

  </h2>

  <p><!--p定义了段落,段落与段落间会自动换行,浏览器同时会在相邻的段落之间插入一些垂直的间距。但注意,

  浏览器忽略了源代码中的排版(省略了多余的空格和换行)故应使用<br/>标签实现换行。

  另,<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。-->

  感谢阅读

  欢迎指正

  换<br/>

  行

  </p>

  <hr/><!--hr水平分隔线-->

  <pre>

  <strong> 你</strong>

  们 好

  </pre><!--pre标签内的内容允许保留空格和换行等,可用于呈现代码(当然更好的是用<code>方便浏览器做出处理)。

  其中不可嵌套会使段落断开的标签,仅允许物理样式和基于内容的样式变化(如上面的<strong>标签),还有链接、图像和水平分隔线-->

  <!--pre内的符号也会被转换,<:< ; > : > ; " : " ;    : 不间断空格; & : &

  更多请参考>

  <!--<strong>等特殊样式定义标签见>

  <ul><!--无序列表-->

  <li>第一项</li>

  <li>第二项</li>

  </ul>

  <ol><!--有序列表-->

  <li>第一项</li>

  <li>第二项</li>

  </ol>

  <dl><!--自定义列表-->

  <dt>First term</dt><!--定义项名-->

  <dd>Definition</dd><!--定义项的内容-->

  <dt>Next term</dt>

  <dd>Definition</dd>

  </dl>

  <table border="1"><!--table定义了表格,其可见程度和大小等视觉效果属性可控 详见>

  <tr><!--tr定义表的行-->

  <th>Month</th><!--th定义表中该行的标题项-->

  <th>Savings</th>

  </tr>

  <tr>

  <td>January</td><!--td定义与前面tr定义的标题对应的项-->

  <td>$100</td>

  </tr>

  </table>

  <form action="" method="post/get"><!--form定义了表单,用于向服务器发送用户输入

  action属性表明目标URL(这里随便写了个所有下面的提交可能不会有效果),

  method表明http请求方法的类型 对应不同的数据发送方式(这会影响web后端服务器的处理)但仅限GET和POST

  (可参考>

  <input type="text" name="lastname"

  value="Nixon" size="30" maxlength="50"><!--表单中的输入元素均使用input标签,通过type属性选择不同的元素。text为文本域-->

  <input type="password"><!--password为密码输入框(输入的字符以非明文方式显示)-->

  <input type="checkbox" checked="checked"><!--checkbox为复选框-->

  <input type="radio" checked="checked"><!--radio为单选框-->

  <input type="submit"><!--submit为按钮,点击此处同时将本页中各个表单的内容发送到各表单URL所处服务器。

  注:type为button的也是一种按钮,但它不触发数据的发送和跳转,一般用于和avascript脚本关联触发脚本程序的运行-->

  <input type="reset"><!--reset为重置按钮。重置按钮会清除表单中的所有数据。-->

  <input type="hidden" value="hiddenmessage"><!--hidden定义隐藏的输入字段。用户不可见但发送数据时其value属性的值仍会发送。

  注:表单中输入的文本或做出的选择实际上最后改变了对应元素的value属性,

  在提交表单时这些value属性的值会根据form标签中methon属性标明的方式以一定格式发送到URL所指示的服务器-->

  <input type="file" /><!--file用于文件上传-->

  <select><!--select下拉单选框,带有selected的option选项会被预选 select更多修饰性属性(如规定必选)见>

  <option>Apples

  <option selected>Bananas

  <option>Cherries

  </select>

  <textarea name="Comment" rows="10"

  cols="20"></textarea><!--textarea是比文本域更大的文本输入框-->

  </form>

  <!--frameset用于定义框架集(即在一个窗口中打开一个或多个html页面,可用于实现导航(一个页面存放书签列表另一个用于显示书签指向的页面))

  在此由于不方便展示 感兴趣可参考>

  <a href="">超链接</a><!--a标签表示超链接,在href属性中给出链接的目标URL.注,a也有target属性用于定义在哪里打开链接-->

  <br/>

  <a href=""><img src="" alt="图片超链接"></a>

  <!--图片也可以用于承载超链接,alt属性存放当图片无法正常显示时显示的替代字符串。

  更复杂的用于控制图片中响应点击位置的<map>标签见>

  <a href="#fortarget">跳转到前面</a><!--使用href=的形式可调转到URL#itemname所在的位置(相当于滚轮自动转到该元素显示处),

  注意,仍然遵循相对寻址,故应注意前面的base给出的起点会影响此处的效果

  该方法可用于创建页内导航书签或跨页导航书签(跳转到另一页面的特定某处)-->

  </body>

  </html>

关于“HTML基础单页面实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. html 单标签
  2. HTML5怎么实现单页面手势滑屏切换

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:html和js的基础知识有哪些

下一篇:HTML基本的概念有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》