HTML5基础知识

目录

一、初识HTML

二、网页基本标签⭐

2.1标题标签

2.3换行标签

2.4水平线标签

 2.5字体样式标签

 2.6注释和特殊符号

三、图像，超链接，网页布局

3.1图像标签      

3.2链接标签 

3.3块元素和行内元素

四、列表，表格，媒体元素

4.1列表

4.2表格标签

4.3媒体元素

4.4页面结构分析

4.5iframe内联框架

五、表单及表单应用⭐

5.1初始表单post和get提交

5.2文本框和单选框

5.3按钮和多选框

5.4列表文本域和文件域

5.5搜索框滑块和验证

5.6表单应用

六、表单初级验证⭐

---

一、初识HTML

        HTML：Hyper Text Markup Language（超文本标记语言）

                超文本包括：文字、图片、音频、视频、动画等

        HTML5的优势：

                跨平台、

        W3C标准

                World Wide Web Consortium（万维网联盟）

                成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机构

        W3C标准包括

                结构化标准语言（HTML、XML）

                表现标准语言（CSS）

                行为标准（DOM、ECMAScript）

        常见IDE：

                记事本、Dreamweaver、IDEA、WebStorm^

       HTML基本结构

                

                 、等成对的标签，分别叫开放标签和闭合标签

                单独呈现的标签（空元素）如

---

以为用/ 来关闭空元素

        网页基本信息

               1、 注释：

                      快捷键：Ctrl+/

                2、head、meta、title、body标签

    
    
    
    
    

    
    




Hello,world！

二、网页基本标签⭐

2.1标题标签

        

写入一级标题

       

写入二级标题

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

        效果截图：

        

2.2段落标签

        

写入段落内容

        快捷方式，先写一个p，然后按Tab键

2.3换行标签

        文本后写上
  

        与段落标签相比，这个只是换行，仍是一个段落

2.4水平线标签

        

---

一只青蛙
二只青蛙
三只青蛙





一个西瓜

两个西瓜

三个西瓜

四个西瓜

        效果截图

        

 2.5字体样式标签

        粗体标签   

        斜体标签    

i love you

i love you

        效果截图：

        

 2.6注释和特殊符号

        注释：

        特殊符号： 以 & 开头，以 ; 结尾

        空格： （写多个可以实现多个空格）

        大于号：>

        小于号：<

        版权符号：©

三、图像，超链接，网页布局

3.1图像标签      

        常见图像格式：JPG、GIF、PNG、BMP……

        

        ../   上一级目录

3.2链接标签 

        文本超链接、图片超链接

  超链接类型：

        页面间连接：

                从一个页面链接到另一个页面，可以是自己写的另一个页面，也可以是网址

        锚链接：

                跳转到指定页面的指定位置，可以用于 回到顶部，回到首页 等

           两步：1、用 a标签 name属性写一个标记 (例如命名为top)

                      2、跳转到标记（例如跳转的href  写为 #top）

        功能性链接：

                满足发送邮件、QQ扩展等功能性

                其中QQ扩展功能的代码由 QQ扩展直接实现

    点击跳转到MyHtml页面
    点击跳转到百度
    


    
    
        
    





    top

    回到顶部

    回到MyHtml页面顶部





    点我发送邮件
    

    
    
        
    

3.3块元素和行内元素

        块元素：

                无论内容多少，该元素独占一行

                例如：p、h1-h6   ……

        块内元素：

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

                例如：a、strong、em ……

四、列表，表格，媒体元素

4.1列表

     什么是列表： 列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

     列表的分类：

        1.有序列表

                应用范围：试卷、问答

               

   
1. 内容 
     

        2.无序列表

                应用范围：导航、侧边栏

                

   
• 内容 
     

        3.自定义列表

                应用范围：公司网站底部

               dl：标签； dt：列表名称；  dd：列表内容

    
java
    
Python
    
C/C++
    
PHP






    
java
    
Python
    
C/C++
    
PHP





    
省份
    
河南
    
河北
    
湖南
    
湖北

    
民族
    
汉族
    
回族
    
满族
    
蒙古族

        效果截图：

        

4.2表格标签

       

标签定义表格 

        tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

1-1
2-1	2-2	2-3	2-4
	3-2	3-3	3-4

        效果截图：

        

4.3媒体元素

        视频元素 video        音频元素 audio

        src：资源路径      controls：控制条     autoplay：自动播放

4.4页面结构分析

                

    
网页头部



    
网页主体



    
网页底部

4.5iframe内联框架

 

         如图中代码，原本框架中显示的是MyHtml.html页面，当点击 点击跳转后，框架内显示的变为3.图像标签.html页面

五、表单及表单应用⭐

5.1初始表单post和get提交

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

method : post get 提交方式

         get方式提交: 我们可以在url中看到我们提交的信息,不安全,高校

         post方式提交:比较安全,传输大文件

tips：用post方式 提交时，可以右键检查—网络—点击这个请求名称—载荷—表单数据，进行查看

注册




    
    
名字:
    
    
密码:

    

        
        
    

5.2文本框和单选框

表单元素格式：

文本输入框:

         input  type="text"          name="username" 文本框名字         value="默认" 默认初始值         maxlength="8" 最长能写几个字符          size="30" 文本框的长度

单选框：

        input  type="radio"         value : 单选框的值           name : 表示组,名字相同的为一组

5.3按钮和多选框

多选框：input type="checkbox"    checked 默认选中

按钮：       input type="button" 普通按钮        input type="image" 图片按钮                                            input type="submit" 提交按钮        input type="reset" 重置

5.4列表文本域和文件域

文本域：textares        cols 列 rows行

文件域：input  type = "file"  name="files"

5.5搜索框滑块和验证

验证：input type="email" 邮箱验证    url  URL验证   number  数字验证 

滑块：input type="range"

搜索框：input type="search"

注册




    
    
名字:

    
    
密码:

    
    
性别:
        男
        女
    

    
    
爱好:
        睡觉
        敲代码
        游戏
        音乐
    

    
    
按钮:
        
        
    


    
    
下拉框:
        
            中国
            美国
            英国

        
    


    
    
个人简介
        文本内容
    

    
    

        
        
    


    
    
邮箱:
        
    
    
    
URL:
        
    
    
    
商品数量:
        
    


    
    
滑块:
        
    

    
    
搜索:
        
    



    

        
        
    

        效果截图：

                

5.6表单应用

      1、只读： readonly

        readonly>

      2、禁用： disabled

        单选框禁用：disabled />11

        按钮禁用： disabled>

      3、隐藏： hidden

         hidden>

      4、增强鼠标可用性

        <label for="mark">你点我试试

        id="mark">

    注： lable 里的for   指向  input 中的id

六、表单初级验证⭐

      1、输入框提示信息   placeholder

         placeholder="请输入用户名"> 

      2、非空判断  required

         required>

      3、自定义正则表达式 pattern

        正则表达式速查表网站：https://www.jb51.net/tools/regexsc.htm

         例如 自定义邮箱验证：

         pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"      required>