HTML

目录

• HTML
  • 网页基本信息
  • 网页基本标签
  • 图像标签
  • 链接标签
  • 块元素和行内元素
  • 列表
  • 表格
  • 媒体元素
  • 页面结构分析
  • iframe内联框架
  • 表单
    • 表单元素格式
      • input
      • 下拉框
      • 文本域
      • input中的其他type
    • 表单的应用
      • 增强鼠标可用性

HTML

• 超文本标记语言
• <>开放标签、</>闭合标签、自闭合标签
• IDEA中Ctrl+/快速添加注释
• IDEA中Tab键自动生成标签

网页基本信息

• DOCTYPE声明：告诉浏览器使用什么规范
• head标签：网页头部
• body标签：网页主体
• title标签：网页标题
• meta标签：描述性标签，描述网站的一些信息
  • 一般用作SEO(Search Engine Optimization)

网页基本标签

• 标题标签<hx>
• 段落标签<p>
• 换行标签<br/>：换行后仍为一段，较为紧凑
• 水平线标签<hr/>
• 字体样式标签：粗体<strong>，斜体<em>
• 注释和特殊符号：
  • 注释：<!-- -->
  • 空格：&nbsp;
  • 大于：&gt;
  • 小于：&lt;
  • 版权：&copy;

图像标签

• <img />
• 属性：src、alt(图像替代文字)、title(鼠标悬停提示文字)、width、height

链接标签

• <a href="path" target="目标窗口位置">链接文本图像</a>

• target：链接在哪个标签打开

  • _blank：在新标签页打开
  • _self：默认，在当前页面打开

• 文本超链接、图像超链接

• 锚链接：

  • 使用<a name=""></a>作为标记
  • href="#name"
  • 也可在网页链接后加标记，跳转到对应位置

• 功能性链接：

  • 邮件链接：<a href="mailto:"></a>
  • qq链接：qq推广工具

块元素和行内元素

• 块元素：无论内容多少，独占一行
• 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表

• 有序列表（ordered list)

  • <ol>
        <li></li>
    </ol>
    

• 无序列表（unordered list）

  • <ul>
        <li></li>
    </ul>
    

• 自定义列表

  • <dl>
        <dt></dt><!--标题-->
        <dd></dd><!--表项-->
        ...
        <dt></dt>
        <dd></dd>
    </dl>
    

表格

<table border="1px">
    <tr><!--行-->
        <td colspan="2">1-1</td><!--跨列-->
        <td rowspan="2">1-2</td><!--跨行-->
    </tr>
    <tr><!--行-->
        <td>2-1</td><!--列-->
        <td>2-2</td>
    </tr>
</table>

媒体元素

• 视频

  • <vedio src="" controls autoplay></vedio>
    

• 音频

  • <audio src="" controls autoplay></audio>
    

页面结构分析

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

iframe内联框架

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

表单

<form method="post" action="result.html">
    <p>名字：<input name="name" type="text"/></p>
    <p>密码：<input name="pass" type="password>"/></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

• action：表单提交的位置，可以是网站，也可以是一个请求处理地址
• method：表单提交方式
  • get方式：可以在URL中看到我们提交的信息，不安全，高效
  • post方式：比较安全，可以传输大文件

表单元素格式

input

• type：text(默认)、password、checkbox、radio、submit、reset、file(文件域)、hidden、image、button
• name：name相同为一个组，作为表单的key
• value：元素初始值，radio必须指定，作为表单的value
• size：表单元素的初始宽度，text和password以字符为单位，其他以像素为单位
• maxlength：text和password的最大字符数
• checked：radio和checkbox是否被选中
• 简单验证：
  • placeholder：提示信息
  • required：不能为空
  • pattern：正则表达式

下拉框

<p>
    <select name="">
        <option value="A">A</option>
        <option value="B" selected>B</option>
    </select>
</p>

文本域

<p>
   反馈：
    <textarea name="textarea" cols="10" rows="10">文本内容</textarea>
</p> 

input中的其他type

• email、url、number(min、max、step)、range、search(一键清空)

表单的应用

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

增强鼠标可用性

<label for="id">点击移动到id初</label>