HTML5基础知识及相关笔记

时间：2023-11-13 15:05:14

HTML5基础

1.1HTML文件的基本结构和W3C标准

1.1.1HTML简介

HTML是一种描述网页的语言，一种超文本标记的语言！

1.1.2HTML文件的基本结构

  • 头部（head）

    头部是网页的标题等基本信息

  • 主体（body）

    主题包括网页的内容信息

注意标签必须成对出现

1.2网页的基本标签

每个标签都有一对尖括号，此处省略

    1. 标题标签

h1 h2 h3 h4 h5 h6 (字体样式依次变小)

    1. 段落和换行标签

p  br

    1. 水平线标签

hr: 表示能产生一条水平线

    1. 字体样式标签

strong：能对字体进行加粗

em：能对字体进行倾斜处理

    1. 注释和特殊符号

注释：!--内容--

特殊符号：

    • 空格：
    • 大于号：>
    • 小于号：&Lt
    • 引号："
    • 版权符号：©

    1.3图像标签

    语法：<img src="图片地址" alt="图像代替文字" title="鼠标悬浮的文字" width=“图像宽度” height="图像高度">

    1.4链接标签

    • 超链接的基本用法

      <a href="链接地址" target ="目标窗口的位置" >链接的文本或图像</a>

    • 超链接的应用场合
      1. 页面间链接
      2. 锚链接
      3. 功能性链接

    1.5行内元素与块元素

    • 块元素：无论内容多少。独占一行
    • 行内元素：左右的行内元素都可以在一行排列，不会独占一行

    列表 表格 框架

    2.1列表

    1. 无序列表

      无序列表是一个项目列表使用项目符号标记无序列表。没有等级之分

      无序列表由： ul 和 li 组成

    2. 有序列表

      有序列表时由一个个列表组成，列表项由数字或字母组成

      有序列表由：ol 和 li 组成

    3. 定义列表

      定义列表是项目和注释的组合

      定义列表由：dl dt dd组成

    2.2表格

    • 为什么使用表格

      简单通用

      结构稳定

    • 表格的基本结构

      单元格：表格的最小单元

      行：一个或多个单元格横向堆叠而成

      列：单元格的纵向排列

    • 表格的基本语法
      1. 表格标签：table
      2. 行标签（可以有多行）：tr
      3. 列标签（可以有多个单元格）：td
    • 表格的对齐方式
      • 水平方向
        • 左对齐：align=“left”
        • 右对齐：align=“right”
        • 居中对齐：align=“center”
      • 垂直方向
        • 顶端对齐：valign="top"
        • 下端对齐：valign="bottom"
        • 居中端对齐：valign="middle"
        • 基线端对齐：valign="baseline"

    2.3框架

    媒体元素概述

    视频语法： < video controls loop="loop">
    < source src="video/video.webm">
    < source src="video/video.mp4">
    < /video>

    音频 语法： < audio controls loop="loop">
    < source src="audio/audio.ogg">
    < source src="audio/audio.mp3">
    < /audio>

    表单

    3.1表单

      • 表单的标签和属性

    form标签来实现表单 input标签是辅助form的一个标签设定各种输入

    form的属性值：

        • action:表示提交的地址，如果为空，表示本页
        • method
          • 服务器发送数据的方法：post/get
          • post:表单上的数据作为数据块发送，不适用请求字符型 get:浏览器会创建一个请求，会返回指定的脚本
      表单元素和格式
      • 文本框(text)

        例：<input type="text" name="fname">

      • 密码框(password)

        例：<input type="password" name="fname">

      • 单选按钮(redio)

        例：<input type="redio" >

      • 复选框(checkbox)

        例：<input type="checkbox" >

      • 列表框(selected option)

        例： <seleceted> <option value="内容"></option> </selected>

      • 按钮
      • submit提交按钮

        点击.内容会提交

      • reset重置

        点击此按钮，实现重置

      • bottom普通
      • 图片提交按钮

        语法：<input type=”image“ src=”images/login.jpg“>

      • 文件域

        实现文件的选择

        语法：<input type="file" name="files">

      • 多行文本域

        多行输入

        语法：< < textarea name="textarea" cols="40" rows="10"> //内容 < /textarea>

      • 邮箱

        输入邮箱

        语法：<input type="email" name="email">

      • 数字输入框

        选择数字

        语法：<input type="number" name="number" min="0" max="100" step="2"(增长率)>

      • 滑块

        滑动选择

        语法：<input type="range" name="range" min="0" max="100" step="2"(增长率)>

      • 搜索框

        搜索

        语法：<input type="search" name="search" >

      • 提示框（灰色字体提示用户输入的值）

        语法：<input type="search" name="search" placeholder="提示的文字" >

      • 非空验证

        验证输入的值

        语法：<input type="text" name="text" required(总要属性) >

      • 正表达式

        验证输入的值（相当于检查约束）

        语法：<input type="text" name="text" required(总要属性) pattern=" ^1[358]\d{9} " >

    3.2表单的高级应用

      • 设置表单的隐藏域

    将type的值设置成hidden时，这时就可以隐藏文件的隐藏

    • 表单的只读和禁用设置
      • 只读场景：网站服务器不希望用户修改数据，这些数据在表单元素中显示。（属性设置readonly=“readonly“）
      • 只有满足这个条件时，才能使用此功能。（disabled=“disabled”）

    3.3语义化的表单

      • 关于语义化

    语义化：达到结构简单，代码简单。

      • 语义化表单
        • 域

    fieldest:这标签实现域的定义。把元素放到这个标签内时，浏览器就会以特殊的方式显示出来，这些表单就可能有一个边界。

        • 域标题

    legend：标签就是给域设置的一个标题，

        • 通常是这两个标签结合着使用。实现语意话表单
      • 表单元素的注释
        • 定义：使用一个标签对内容注释了，当用户点击此内容时，浏览器会自动聚焦到相应的表单元素上。
        • 语法：<label for=”表单元素的id“>标注的文本</label>
        • 注意：需要在输入的input标签中定义属性：id 并赋值

    相关文章