Kof_it
Kof_it

一文搞定HTML5

HTML

前后端分离：

HTML(Hyper Text Markup Language)超文本语言

超文本语言：文本 ，视频，图片，，，，

HTML5：提供新的元素，支持网页播放视频的功能

HTML5：跨平台，市场的需求，知名的浏览器都支持

w3C:万维网：

标准：

  • 结构化标准（HTML5，XML）

  • 表现标准（CSS）

  • 行为标准（DOM，ECMAScript）

基本标签


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

<h1>
    一级标签
h1>
<h2>二级标签h2>
<h3>三级标签h3>

<hr/>
<p>两只老虎,两只老虎, 跑得快,跑得快,p>
<p>一只没有眼睛, 一只没有尾巴, 真奇怪!真奇怪!。p>
<p>两只老虎,两只老虎, 跑得快,跑得快, 一只没有耳朵,p>
<p>, 真奇怪!真奇怪!p>



<strong>一只没有尾巴strong><br/>
<em>两只老虎em>

空格：         gebr <br>
>:大于 <br>
<:小于 <br>
© :版权<br>

body>
html>

图像标签





<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签title>
head>
<body>

头像
body>
html>

超链接：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连接标签title>
head>
<body>

<a name="top">a>
<a href="img.html" target="_blank">点击我a>
<a href="https://www.baidu.com" target="_self">点击我跳转百度a>
<br>
<a href="first.html">头像a>
href="first.html">头像a><br>


    
<a href="mailto:[email protected]">dianjia>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/>
a>
body>

html>



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

列表


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>liebiaotitle>
head>
<body>

<ol>
    <li>javali>
    <li>pythonli>
    <li>cli>
    <li>前端li>
    <li运维>li运维>
ol>

<ul>
    <li>javali>
    <li>pythonli>
    <li>cli>
    <li>前端li>
    <li运维>li运维>
ul>

<dl>
    <dt>学科dt>
    <dd>javadd>
    <dd>cdd>
    <dd>c++dd>

dl>

body>
html>

表格


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格title>
head>
<body>

<table border="1px">
    <tr>

        <td colspan="4">td>
        <td>1-1td>
        <td>1-2td>
        <td>1-3td>
        <td>1-4td>
    tr>
    <tr><td rowspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
        <td>2-4td>tr>
    <tr><td>3-1td>
        <td>3-2td>
        <td>3-3td>
        <td>3-4td>tr>
table>
body>
html>

视频video，音频audio


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体title>
head>
<body>

<video src="路径" autoplay>video>
<audio src="路径 "  controls>audio>
body>
html>

页面结构


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<header><h2>网友头部h2>header>
<section><h2>网页主体h2>section>

<article><h2>独立的文章内容h2>article>
<aside><h2>相关的内容h2>aside>
<nav><h2>导航类辅助内容h2>nav>
<footer><h2>网页脚部h2>footer>
body>
html>

iframe内联框架


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架title>
head>
<body>