HTML

  • Hyper Text Markup Language（超文本标记语言）
  • 超文本包括：文字、图片、音频、视频、动画等

W3C

  • World Wide Web Consortium（万维网联盟）
  • W3C标准包括
    • 结构化标准语言（HTML、XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM、ECMAScript）

HTML基本结构

网页基本信息

  • DOCTYPE声明
  • <title>标签
  • 标签

网页基本标签

  • 标题标签：<h1>一级标签</h1>
  • 段落标签：<p>两只老虎，两只老虎</p>
  • 换行标签：两只老虎，两只老虎<br/>
  • 水平线标签：<hr/>
  • 字体样式标签：
    • 粗体：<strong>i love you</strong>
    • 斜体：<em>i love you</em>
  • 注释和特殊符号：<!----> & ;

图像标签 <img>

  • 常见的图像格式
    • JPG
    • GIF
    • PNG
    • BMP

链接标签

  • 超链接
    • 页面间链接<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
      href：必填，表示要跳转到那个页面
      target:表示窗口在哪里打开
      _blank 在新标签中打开
      _self 在自己的网页中打开

      • 从一个页面链接到另一个页面
    • 锚链接<a href="#top">回到顶部</a>
      1.需要一个锚标记
      2.跳转到标记
    • 功能性链接<a href="mailto:2720454962@qq.com">点击联系我</a>
      邮件链接：mailto：
      QQ链接：

行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • (p、h1-h6…)
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排在一行
    • (a、strong、em…)

列表

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以
      列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
  • 列表的分类
    • 无序列表
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>
  • 有序列表
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>
  • 自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>C/c++</dd>
    <dt>位置</dt>

    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

表格table

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 行：<tr></tr>
    • 列：“
    • 跨行：rowspan
    • 跨列：colspan

视频和音频

  • 视频元素
    • video
  • 音频元素
    • audio
  • src:资源路径
    controls：控制条
    autoplay：自动播放

页面结构分析

  • header：标题头部区域的内容（用于页面或页面中的一块区域）
  • footer：标记脚步区域的内容（用于整个页面或页面的一块区域）
  • section：Web页面中的一块独立区域
  • article：独立的文章内容
  • aside：相关内容或应用（常用于侧边栏）
  • nav：导航类辅助内容

iframe内联框架

<iframe src="path" name="mainFrame"></iframe>

表单语法

<form method="post" action="result.html"></form>

表单元素格式

  • type：指定元素的类型。text、password、checkbox、radio、submit、
    reset、file、hidden、image和button，默认为text
  • name：指定表单元素的名称
  • value：元素的初始值。type为radio时必须指定一个值
  • size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。
    对于其他类型，宽度以像素为单位
  • maxlength：type为text或password时，输入的最大字符数
  • checked：type为radio或checkbox时，指定按钮是否是被选中

表单的应用

  • 隐藏域：hidden
  • 只读：readonly
  • 禁用：disabled

表单初级验证

  • 思考？为什么要进行表单验证
  • 常用方法
    • placeholder：提示信息
    • required：非空判断
    • pattern：正则表达式
版权声明：本文为song-hua原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/song-hua/p/16818927.html