HTML

HTML

1. 什么是HTML

• Hyper Text Markup Language(超文本标记语言)

2. W3C

• World Wide Web Consortium(万维网联盟)
• W3C标准
  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM,ECMScript(JavaScript))

3.基本标签

• 段落标签：p
• 换行:br
• 水平线:hr
• 加粗:strong
• 斜体:em
• 空格：&nbsp
• 大于：>
• 小于：<
• 版权：©
• 图片：img(src) : alt:图片加载失败显示的文字，title:鼠标悬停的文字
• 链接：a(href):target:_self(当前页面),_blank(新页面)
• 锚链接：可以在一个页面跳(返回顶部),可在不同页面跳

<!--返回顶部-->
<h1 id="top">键盘敲烂，工资过万。</h1>
.....
<a href="#top">跳转顶部</a>

<!--不同页面-->
<a href="test.html#top">章节</a>

<!--发邮件-->
<a href="mailto:2484420621@qq.com">联系我</a>

• 列表

<!-- 有序 -->
<ol>
    <li>Java</li>
    <li>Python</li>
</ol>
<!-- 无序 -->
<ul>
    <li>Java</li>
    <li>Python</li>
</ul>
<!-- 自定义 -->
<dl>
    <dt>语言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dt>城市</dt>
    <dd>成都</dd>
    <dd>重庆</dd>
</dl>

• 媒体元素

  <!--controls控制条-->
  <!--视频-->
  <video src="../../resource/video/1.mp4" controls autoplay width="500" height="300"></video>
  <!--audio音乐-->
  

4.块元素和行内元素

• 块元素：p,h1-h6
• 行内元素：a,em…(不会换行的)

5.页面结构分析

• header:头部
• aside:侧边栏
• footer:底部
• nav:导航栏
• section：Web页面中的一块独立区域
• article：独立的文字内容

6.内联框架

<!--将要跳转的页面通过target=name设置进内联框架中-->
<iframe src="" name="bilibili" frameborder="0" height="500" width="500" ></iframe>
<a href="https://www.bilibili.com/" target="bilibili">点击跳到B站</a>

7.表单

• 提交方式
  • get:高效、不安全，可以在url中看到提交的信息
  • post:安全、可传输大文件，看不到信息
• 按钮
  • submit:提交
  • reset:重置
• 多选框和单选框：一个组的name必须一致
• 给标签设置只读：readonly
• 禁用标签：disable
• 隐藏域：hidden
• 提示信息：placeholder
• 非空判断：required
• 正则表达式：pattern