Blogger Information
Blog 9
fans 0
comment 0
visits 6199
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础(4.2作业)- php培训地十一期线上班
Original
534 people have browsed it

基础

1、网页的组成

任何一个页面都有三部分

  • 文本内容: 用户能看到的网页文本,例如新闻,电话等
  • 其他资源的引用: 图片,视频,音频…
  • 标记: 对文本,其他资源的描述
  1. <p>我是php中文网的学生,薛少鹏</p>
  2. <img src="logo.png" alt='log'>

2、html设计思想

  • 超文本: 是指包括了超链接的文本
  • 预定义标: 是用来描述内容的固定标签
  • 语言: html 并不是编程语言, 只是用来书写html 文档的工具

3、 html 页面结构

  1. <!-- 通知浏览器这是一个html文档 -->
  2. <!DOCTYPE html>
  3. <!-- 根标签,整个html文档内容必须写到这对标签中,lang="en" 表示通知搜索引擎html文档所使用的的编写语言。 -->
  4. <html lang="en">
  5. <!-- head表示供浏览器和搜索引擎使用,描述字符集编码,视口语页面标题 -->
  6. <head>
  7. <!-- 字符编码集 -->
  8. <meta charset="UTF-8" />
  9. <!--
  10. meta 设置页面元素数据。
  11. name="viewport" 设置视口(可视区屏幕)如何显示这个页面。
  12. width="device-width" 页面宽度应该与显示设备的宽度想匹配,类似还有device-height 表示设备的宽度
  13. -->
  14. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  15. <!-- title 显示在浏览器标签上的文本,指定当前页面的标题 -->
  16. <title>HTML5页面结构</title>
  17. </head>
  18. <!-- body 页面主体内容,允许或希望用户的内容都应该写到这里 -->
  19. <body>
  20. <!-- 页面主体内容 -->
  21. <h2>PHP中文网欢迎您...</h2>
  22. </body>
  23. </html>

4、元素、属性、值

4.1、 元素与标签

元素 标签 描述
非空元素 双标签 <p>学习使我快乐</p>
空元素 单标签 <img src=''>
  • 空元素也有使用双标签描述的,如:<script>|<video>

4.2、 属性与值

  • 属性写在起始标签中
  • 值: 预定义值,字符串,指定格式,数值,bool
  • 元素通用属性:id,class,style,这几个属性几乎可以添加到任何元素上。

5、层级关系

  • 元素中包含另一个元素,被包含的叫子元素,子元素又可以集成包含其他元素,依次类推。
  • 元素层级结构中,必须保持正确的嵌套关系。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>元素的标签,属性和值,正确的嵌套关系</title>
  7. </head>
  8. <body>
  9. <!-- 元素之间应该保持正确的嵌套 -->
  10. <form action="">
  11. <div>
  12. <label for="email">邮箱:</label>
  13. <!-- 元素值: 预定义值, 指定值, 布尔值,数值 -->
  14. <input type="email" name="email" id="email" maxlength="100" required />
  15. </div>
  16. <div>
  17. <label for="password">密码:</label>
  18. <input
  19. type="password"
  20. name="password"
  21. id="papassword"
  22. placeholder="至少8位"
  23. required
  24. />
  25. </div>
  26. <div>
  27. <button>提交</button>
  28. </div>
  29. </form>
  30. </body>
  31. </html>

总结

跟了第十期学习了差不多一个月左右,学过之后,实践的很少,忘的也就差不多了。老师的这种理论实践相结合的教学方式。理论解决的面试问题,实践解决了工作问题。 希望能跟着老师一直走下去。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:原来你还有这样的收获不错, 加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post