HTML5详解

什么是HTML

  1. HTML

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

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

HTML发展史

HTML5的优势

  1. 世界知名浏览器厂商对HTML5的支持

    • 微软

    • Google

    • 苹果

    • Opera

    • Mozilla

  2. 市场需求

  3. 跨平台

W3C标准 -- 面试可能问到

  1. W3C

    • World Wide Web Consortium（万维网联盟）

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

    • http://www.w3.org/

    • http://www.chinaw3c.org/

      • org结尾表示开源

  2. W3C标准包括

    • 结构化标准语言（HTML、XML)

    • 表现标准语言（CSS）

    • 行为标准（DOM、ECMAScript）

常见IDE

  1. 记事本

  2. Dreamweaver -- 早期

  3. IDEA --集成了WebStorm

  4. WebStorm -- 最主流

  5. ......

         

HTML基本结构

网页基本信息

  1. DOCTYPE声明 -- 告诉浏览器，我们要使用什么规范

  2. <title>标签  --  代表网站标题
  3. <meta>标签 -- 描述性标签，它用来描述网站的一些信息。一般用来做SEO

网页基本标签

  1. 标题标签

  2. 段落标签

  3. 换行标签

  4. 水平线标签

  5. 字体样式标签

  6. 注释和特殊符号


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习title>
head>
<body>
    

<h1>一级标签h1>    
<h1>二级标签h1> 
<h1>三级标签h1> 
<h1>四级标签h1> 
<h1>五级标签h1> 
<h1>六级标签h1> 
    

<p>两只老虎，两只老虎，跑得快，跑得快，p>
<p>一只没有眼睛，一只没有尾巴，p>
<p>真奇怪！真奇怪！p>
<p>两只老虎，两只老虎，跑得快，跑得快，p>
<p>一只没有耳朵，一只没有尾巴，p>
<p>真奇怪！真奇怪！p>
    

<hr/>
    

两只老虎，两只老虎，跑得快，跑得快，<br/>
一只没有眼睛，一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
两只老虎，两只老虎，跑得快，跑得快，<br/>
一只没有耳朵，一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
    
 
<h1>字体样式标签h1>
粗体：<strong>i love youstrong>
斜体：<em>i love youem>
    
 
空      格
空          格
?
<br/>
>
<br/>
<
©版权所有狂神  
    

body>
html>

  • 效果：

     

图像标签

  1. 常见的图像格式

    • JPG

    • GIF

    • PNG

    • BMP

    • ......

   


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习title>
head>
<body>
  
<img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">    
body>
html>

  • 图片显示成功：

  • 图片显示失败：

    

链接标签（重要）

   

  1. 文本超链接

  2. 图像超链接


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习title>
head>
<body>
  
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面a>
<a href="https:/www.baidu.com" target="_self">点击我跳转到百度a>    
?
<br/>    
    
<a href="1.我的第一个网页.html"> 
    <img src="../resources/image/1.jpg" alt="狂神头像" title="悬停文字" width="300" height="300">    
a>
body>
html>

  • 效果：

   

附：

   

超链接

  1. 页面间链接

    • 从一个页面链接到另一个页面

  2. 锚链接


?

<a name="top">顶部a>
<a href="#top">回到顶部a>

  • 效果：

点击就回到

还可以从一个页面跳到另一个页面：

   

 

   

  • 效果：

   

   

  • 锚链接的真实作用：可直接定位置想去的地方

   

  1. 功能性链接


<a href="mailto:24736743@qq.com">点击联系我a>

  • 效果：

   

   

  • 效果：

   

行内元素和块元素

  1. 块元素

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

    • (p、h1-h6...)

  2. 行内元素

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

    • (a、strong、em...)

列表

  1. 什么是列表

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

  2. 列表的分类

    • 无序列表

    • 有序列表

    • 定义列表


<ol>
    <li>Javali>
    <li>li>
    <li>Pythonli>
    <li>运维li>
    <li>前端li>
    <li>C/c++li>
ol>
?
<hr/>
?

<ul>
    <li>Javali>
    <li>li>
    <li>Pythonli>
    <li>运维li>
    <li>前端li>
    <li>C/c++li>
ul>
?
?

<dl>
    <dt>学科dt>
    
    <dd>Javadd>
    <dd>Pythondd>
    <dd>Linuxdd>
    <dd>Cdd>
    
    <dt>位置dt>
    
    <dd>西安dd>
    <dd>重庆dd>
    <dd>新疆dd>
dl>

  • 运行效果：

   

表格

  1. 为什么使用表格

    • 简单通用

    • 结构稳定

  2. 基本结构

    • 单元格

    • 行

    • 列

    • 跨行

    • 跨列





    

        
        1-1
    

    

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

    

        3-2
        3-3
        3-4

  • 效果：

   

视频和音频

  1. 视频元素

    • video

  2. 音频元素

    • audio

  • 效果：

   

   

不用chorm浏览器就可以自动播放了！！！！！

很多浏览器都会限制含有声音的媒体自动播放的

页面结构分析

   

iframe内联框架

网页里再嵌网页

   






点击跳转

  • 效果：   

   

   

   

表单语法（重点）

   

get实在uml里面显示表单信息 post则是隐藏





    
    
名字：
 
    
     
    
密码：

  • 效果：

   

   

改为post方式提交：

   

如何抓取post的数据：

MD5加密很容易破解，建议重写MD5加密，将密文位置调换一下

表单元素格式

   




    
    
名字：
 
    
     
    
密码：
 
    
    
    
性别：
        男
        女
    
 
    
    
    
爱好：
        睡觉
        敲代码
        聊天
        游戏
    

    
    
    
按钮：
        
        
    

    
    
    
国家：
        
    

    
    
    
反馈：
        
    

    
    
    

        
        
    

    
    
    
邮箱：
        
    

    
    
    
URL：
        
    

    
    
    
商品数量：
        
    

    
    
    
音量：
        
    

    
    
    
搜索：

  • 效果：

   

   

表单的应用

  1. 隐藏域

  2. 只读

  3. 禁用

名字：

  • 效果：

只读，无法修改名字

男

  • 效果：

          

禁用，只能是男

密码：

  • 效果：

          

隐藏，看不到输入框，但可设置默认值

隐藏这个功能很重要，要记住！

  • 效果：

          

点左旁文字可以锁定到右边的框

表单初级验证

  1. 思考？为什么要进行表单验证

    • 减轻服务器的压力

    • 保证数据的安全性

  2. 常用方式

    • placeholder --- 提示信息

    • required --- 非空判断

    • pattern --- 正则表达式

名字：

  • 效果：

         

名字：

  • 效果：

          

自定义邮箱：

 参考链接：https://www.bilibili.com/video/BV1x4411V75C

前端基础

相关

第十一章 前端基础

前端基础进阶5

WEB前端基础之SCC(字体颜色背景-盒子模型)

前端基础之jquery

前端基础之JavaScript

前端基础

前端基础——HTML、CSS、JS

前端基础之JavaScript

前端基础知识-牛客网汇总

前端基础问题：CSS vertical-align 与基线的那些事~

全栈开发技能2：前端基础

【开发】谷粒学院-项目前端基础知识-07-Babel

标签