HTML基础

HTML全称:超文本标记语言。但其并不是编程语言,而是一种标记语言
HTML采用不同的标签表示不同的网页部分

<!doctype html>
<html lang='zh-cn'>
  <head>
    <meta charset='utf-8'>
  </head>
  <body>
    <div class='head'>
    </div>
    <div id='body'>
      <form action='/'>
        <!--HTML注释格式-->
        <input type='text' name='name' value='tony'/>
        <button type='submit'>submit</button><br>
        <!--属性值无需全部填写-->
        <input type='password'/><br>
        <input type='checkbox'/><br>
        <video width='320' height='240' controls='controls' autoplay='autoplay'>
          <source src='video.mp4' type='video/mp4'/>
        </video>
      </form>
    </div>
  </body>
</html>

1.<meta charset='utf-8'>,规定HTML文档编码规则
TXT编写代码,保存后在网页上运行出现了乱码。问题就出记事本身上。 <meta charste="utf-8"> 只是告诉浏览器要用utf-8来解释,而文档的编码,是在你保存时的选择决定的。如果保存ANSI 然后用utf-8解释,肯定是乱码。记事本的话,默认保存的文件格式是ANSI。所以在保存的时候要修改为uif-8。

2.自闭合&非自合标签
自闭合标签指只出现一个标签,以/>自结尾。通常使用在诸如⽂文本框<input />之类的不可能包含子标签的元素上。
非自闭合标签指需要成对标签,以</xxx>结尾。通常用来描述文档结构。

3.属性的概念
属性用来描述标签的特性
通用属性是所有标签皆可使用,比如:id描述标签唯一标识;class描述标签CSS类;style描述标签样式
特有属性各标签各不相同,不详述...

4.相对路径&绝对路径
 相对路径:以需要引用文件所在的位置为参考,而建立出的目录路径。当保存于不同目录的文件引用同一个文件时,所使用的路径不相同,故称之为相对。
  绝对路径:以根目录为参考基础的目录路径。当保存不同目录的文件引用同一个文件时,所使用的路径是一样的,故称之为绝对。
以下为建立路径所使用的几个特殊符号,及其所代表的意义。
  “.”–代表目前所在的目录。
  “..”–代表上一层目录。
  “/”–代表根目录。

图片.png

假若要在Ref.htm文件中引用BeRef.gif文件时,其相对路径如下:
  ./SubDir2/BeRef.gif
上面的引用路径中,”.”代表目前的目录(Dir1),所以”./SubDir2”代表目前目录下的SubDir2。其实,也可以省略”./”直接用下这个方式引用。
  SubDir2/BeRef.gif
若使用绝对路径以根目录为参考点引用该文件时,引用路径如下:
  /Dir1/SubDir2/BeRef.gif
该部分转载于:https://blog.csdn.net/u010924834/article/details/48657427

练习:

  1. 编写一个HTML文件,展示出所有 type 的input标签。
  2. 编写一个HTML⽂文档,可以播放视频。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本系列文章主要是基于W3school这个学习网站来总结的,之所以会自己总结一番,一来是因为网站中的实例效果,...
    码字与律动阅读 4,101评论 4 70
  • 浏览器请求数据过程 1.URL http://127.0.0.1/index.html(浏览器会自动添加80) h...
    菜鸟白泽阅读 762评论 0 0
  • 第一节 浏览器知识 什么是浏览器 浏览器是网页运行的平台,常用的浏览器有IE、360、火狐(Firefox)、谷歌...
    疯小儿阅读 823评论 0 5
  • 学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    淡淡疯阅读 1,276评论 0 3
  • 学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    Mr大喵喵阅读 1,440评论 0 4