HTML

HTML

超文本标记语言Hyper Text Markup Language

1. 初见html

   W3C(World Wide Web Consortium)

   成立于1994年，web技术领域最权威和最具影响力的国际中立性组织

   W3C

   • W3C标准包括：
     • 结构化标准语言（HTML）
     • 表现标准语言（CSS）
     • 行为标准（DOM、ECMAScript）

常见IDE

• 记事本
• Dreamweaver
• IDEA
• Webstrom
• …

2. 网页基本信息

   • DOCTYPE声明

   • 标签

3. 网页基本标签

   • 标题标签 例如：

   • 段落标签 例如 ：

   • 换行标签 例如：
     
   • 水平线标签

     ---

   • 字体样式标签
     • 粗体标签 例如：
     • 斜体标签 例如：
   • 特殊符号和注释
     • 空格 &nbsp
     • 版权所有 &copy

4. 图像标签

   • 常见的图像格式
     • JPG
     • GIF
     • PNG
     • BMP
     • …
   
   • src:图像地址
   • alt:图像的代替文字
   • tltle:鼠标悬停显示文字
   • width:图像宽度
   • height:图像高度

5. 超链接标签的应用

   • 文本超链接

   • 图像超链接

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

     • href: 必填，表示页面要跳转到页面的地址
     • traget:表示窗口打开位置 _bank表示在新的页面打开 _self默认在本页面打开
     • _parent:在父框架集中打开被链接文档
     • _top:在整个窗口打开被链接文档
     • framename:在指定的框架中打开被连接文档

     超链接

     • 页面间连接

     • 锚链接

       1. 标记位置顶部
       2. 跳转链接（可跨页面跳转）点击跳转顶部

     • 功能性连接

       1. 邮件连接：点击联系我

       2. QQ链接

          https://146287845.qq.com/v3/widget.html

6. 行内元素和块元素

   • 块元素

     无论多少内容，始终独占一行显示

   • 行内元素

     内容撑开元素，左右左右都是行内元素的可以排在一行

7. 列表

   定义：列表是信息资源的一种展现形式。它可以是信息结构化和条理化，并以列表的样式展现出来，以便浏览者快速的获取信息

   分类

   • 有序列表

   • 无序列表

   • 自定义列表

     标题

     列表项

8. 表格

   • 优点

      - 简单通用
      - 结构简单
     

   • 基本结构

     • 单元格

     • 行

     • 列

     • 跨行 colspan

     • 跨列 rowspan

       <table border="1px">
           <tr>
             <td colspan="3">学生成绩</td>
           </tr>
           <tr>
             <td rowspan="2">狂神</td>
             <td>语文</td>
             <td>100</td>
           </tr>
           <tr>
             <td>数学</td>
             <td>100</td>
           </tr>
           <tr>
             <td rowspan="2">秦将</td>
             <td>语文</td>
             <td>100</td>
           </tr>
           <tr>
             <td>数学</td>
             <td>100</td>
           </tr>
       </table>
       

9. 视频和音频

   • 视频元素 video
   • 音频元素 audio

   src:资源路径

   controls:控制条

   autoplay:自动播放

   <video src="path" controls autoplay>
   
   </video>
   

10. 页面结构分析

    元素名	描述
    header	标题头部区域
    footer	标记脚部区域的内容
    section	web页面中的一块独立区域
    article	独立的文章内容
    aside	相关内容或应用（常用于侧边栏）
    nav	导航类辅助内容

11. iframe内联框架

    • src:地址
    • width:宽度
    • height:高度
    • name:框架标识名

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

12. 表单

    <from 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>
    </from>
    

action:表单提交的位置，可以是网站，也可以是请求处理地址

method:有get和post两种方式，提交方式

• get提交方式

  可以在url看到提交的信息，不安全，但是高效

• post提交方式

  比较安全，传输大文件

表单元素格式

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

增强鼠标可用性

<lable for="mark">点我输入</lable>
<input type="text" id="mark">

表单的简单验证

<!--邮箱验证-->
<input type="email" name="email">
<!--url验证-->
<input type="url" name="url">
<!--数字验证 min max step-->
<input type="number" min="20" max="1000" step="10">
<!--滑块-->
<input type="range" name="voice" min="0" max="100" step="2">
<!--搜索框-->
<input type="search" name="search">

表单的应用

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

表单的初级验证

• placeholder:提示信息

• required:非空判断

• pattern:正则表达式