zoukankan      html  css  js  c++  java
  • WEB开发-HTML入门学习总结

    目前应用的开发都离不开前端(Web)开发,Web的应用也越来越多。我们在学习Web开发的过程,首先要学习HTML,其次在学习CSS,JavaScript,最后学习流行框架React,Vue,Angular等。

    HTML全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

    Web开发工具

    VS Code,Sublime,EditPlus,记事本,WebStorm等。

    HTML语法

    -元素以开始标签起始

    -元素以结束标签终止

    -开始标签与结束标签之间是元素内容

    -元素具有空内容

    -空元素在开始标签中进行关闭

    -元素可拥有属性

    HTML结构

     1 <!DOCTYPE html>
     2 <!-- 文档标记 -->
     3 <html lang="en">
     4 <!-- 文档头标记 -->
     5 <head>
     6     <!-- 页面元信息 -->
     7     <meta charset="UTF-8">
     8     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     9     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    10     <!-- 文档标题 -->
    11     <title>Document</title>
    12     <!-- 连接外部样式文件 -->
    13     <link rel="stylesheet" href="">
    14     <!-- 脚本内容或外部文件 -->
    15     <script></script>
    16     <!-- 样式内容 -->
    17     <style></style>
    18 </head>
    19 <!-- 文档内容主体 -->
    20 <body>
    21     
    22 </body>
    23 </html>

    基础标签

    标题:由大到小 <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

    段落:<p>段落内容</p>

    链接:<a href="link">文本</a>

    图像:<img src="link" />

    表格:<table><tr><td>row 1,cell 1</td><td>row 1,cell 2</td></tr>row 2<tr></tr></table>

    列表:无序 <ul><li></li><li></li></ul>;有序 <ol><li></li><li></li></ol>

    块级元素和行内元素

    块元素:div,h1-h6,form,p,pre,ol>li,ul>li,dl>dd,table>tr>td,hr

    行元素:span,a,br,strong,img,i,em,input,select,textarea,del,u,sup,sub

    单标签

    <br />、<hr />、<img />、<input />、<param />、<meta />、<link />

    注释方式

    <!-- 在此处写注释 -->
    <!--条件注释-->
    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

    HTML图形

    Canvas元素

    <canvas id="myCanvas" width="100" height="50"></canvas>

    HTML媒体

    音频 

    <audio controls="controls">
      <source src="song.mp3" type="audio/mp3" />
      Your browser does not support this audio format.
    </audio>

    视频

    <video width="300" height="200" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
    </video>

    HTML5新增元素

    header,footer,main,nav,section,aside,article,color,date,datetime,email,month,number,range,search,tel,url,time,week

    本人华为云博客:https://bbs.huaweicloud.com/blogs/281012

    作者:zeke     
              出处:http://zhf.cnblogs.com/
              本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 

  • 相关阅读:
    英语常用口语
    单词记忆(3)
    电视制式及声音制式的划分
    单词记忆(2)
    单词记忆(1)
    低调做人 高调做事
    分析数据库死锁原因的方法
    详细查看数据库SQL执行计划
    如果查看数据库链接数
    刷新所有视图
  • 原文地址:https://www.cnblogs.com/ZHF/p/15035525.html
Copyright © 2011-2022 走看看