一、什么是HTML

HTML是用来描述网页的一种语言。

HTML是指超文本标记语言(不仅包含纯文本,还包含图片、超链接、音频、视频等)。

HTML使用一套标记标签来描述网页。

二、HTML标签的作用

充当网页骨架。

语义化,使网络爬虫更好的抓取网站信息。

三、HTML骨架

 <!DOCTYPE html>
<html>
<head>
<!-- 作用:配置html文件 -->
</head>
<body>
<!-- 书写标签组成的网页结构 -->
</body>
</html>

1、DOCTYPE是document type(文档类型)的简写,在网页中用来说明当前使用的XHTML或者HTML是什么版本

2、head是对HTML进行一些附加信息,内容不显示在网页中

3、body是HTML的主体部分,显示在网页中的内容

四、head标签中可以放的元素

1、meta标签

  <meta charset = "UTF-8" /> 用于声明字符编码级

  <meta name="keywords" content = "内容"> 用于提供给搜索引擎关键字

  <meta name = "discription" content = "内容"> 用于提供给搜索引擎网页简单描述

2、title标签

标识文档标题,该标题会显示在浏览器的标题栏的标签页上

3、style标签

<style type= "text/css"></style> 编写页面内部样式

4、link标签

<link>:用于引入css样式
  <link rel = "stylesheet" href = "index.css">

5、script标签

<script src=index.js"></script>引入外部js文件

五、HTML语法

1、标签之间对空格,缩进,换行不敏感,浏览器只会当做一个空格处理

2、标签名必须使用一对尖括号包裹,标签一般都是成对出现,单标签除外

常见单标签:<img/>  <br/> <hr/>

3、标签属性写法:  键值对形势(key="value")

eg: <img src="1.png" alt="图片" title="我是一张图片"/>

六、HTML中标签分类

1、块级元素:h1-h6、p、div、ol、ul、dl、form、table等

2、行内元素 a、img、span、strong、em等

块级元素特点:

1、独占一行;
   2、高度,行高以及外边距和内边距都可控制;
   3、宽度缺省是父容器的宽度,除非设定一个宽度;
   4、它可以容纳内联元素和其他块元素。(注意:p标签不可包含div)

行内元素特点:

1、设置宽高无效

2、对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

3、不会自动进行换行

七、HTML中常用标签

1、h系列(h1-h6)(headline的缩写)
作用:给文本添加标题语义
注意:h系列的标签不能相互嵌套,网页一般只有一个h1标签
2、p(paragragh)段落标签

  作用:给文本添加段落语义

  注意:p是文本级标签,内部只能书写文本类的内容,比如:文本,图片,表单元素,废弃标签
3、img标签(单标签)
<img src="" alt=""/>
src:路径,插入图片所在的位置
alt:图片加载失败时显示的文本
width:设置图片的宽度
height:设置图片的高度 注意:宽度和高度一般只设置一个让图片按比例缩放
<img src="data:images/01.png" alt="图片加载失败,请刷新" width="200px"/>
 4、a标签(超链接)  

   href: 属性值书写的是要跳转页面的路径(路径可以为相对路径和绝对路径)  

   target: 属性值设置新页面打开方式

     默认值(_self):在当前窗口打开

   _blank: 在新窗口打开

   title: 悬停提示文本

    <a href="#id"></a> 可以进行页面内锚链接跳转
  5、列表
5.1无序列表 ul
作用:给文本添加无序列表语义
ul:unordered list 无序列表
li:list item 列表项
注意:
   ul和li是第一个成对出现的标签,出现ul一定有li,有li一定被ul包裹
   ul内部只能嵌套li不能出现任何其他标签。 5.2有序列表 ol
   作用:给文本添加有序列表语义
   ol:ordered list 有序列表
   li:list item 列表项
   每一个列表项之间有顺序之分
   ol,li也是一组成对出现的标签,ol一定嵌套li。
   ol内部嵌套一个或者多个li 5.3自定义列表
   作用:给文本添加自定义列表语义
   dl: definition list 自定义列表
   dt: definition title 标题
   dd: definition description 描述
   dl嵌套dt和dd,dt和dd是同级关系,dt是标题,dd是对标题解释说明(dl>dt+dd)
    6、表单元素
6.1form
   说明:将所有的表单元素都书写在form标签内部
       form标签是功能标签不是结构标签
        提交位置:action
       提交方式:method
       <form action="1.php" method="get"></form>
       表单元素:提供给用户进行输入或者选择控件
       属性:type,根据type属性值,有不同的表单类型
6.2单行文本框 <input type="text" name="yonghuming" value="用户名" />
   6.3密码框 <input type="password" name="mima" />
6.4单选框
      <p>
       请选择性别:
       <input type="radio" name="sex" />男性
       <input type="radio" name="sex" checked="checked" />女性
      </p>
说明:
      type属性值:radio
      同一组单选框,必须设置相同的name属性值
      checked: 设置表单被选中checked   6.5复选框
    请选择爱好:
    <p>
      <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label>
      <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>
    </p>
    说明:type属性值:checkbox
       同一组复选框,必须设置相同的name属性值
       也具有checked属性
       可以使用label标签

八、HTML中废弃的标签

  b,u,i,em,strong(文本级标签)
  b: 默认加粗
  u: 默认下划线
  i: 默认倾斜
  em:语义加强,倾斜
  strong: 语义加强,加粗

废弃原因:没有语义

九、HTML5中新增API

1、HTML5 Geolocation:获取地理位置

2、HTML 拖放

3、web存储:localStorage、sessionStorage(常用)

4、应用缓存

5、 Web Worker

   6、SSE  服务端推送技术(比websocket更轻,有些情况可以替代ws)

HTML知识点汇总的更多相关文章

  1. nginx几个知识点汇总

    WHY? 为什么用Nginx而不用LVS? 7点理由足以说明一切:1 .高并发连接: 官方测试能够支撑 5 万并发连接,在实际生产环境中跑到 2 - 3 万并发连接数.?2 .内存消耗少: 在 3 万 ...

  2. python全栈开发 * 10知识点汇总 * 180612

    10 函数进阶 知识点汇总 一.动态参数 形参的第三种1.动态接收位置传参 表达:*args (在参数位置编写 * 表⽰接收任意内容) (1)动态位置参数def eat(*args): print(a ...

  3. 清华大学OS操作系统实验lab1练习知识点汇总

    lab1知识点汇总 还是有很多问题,但是我觉得我需要在查看更多资料后回来再理解,学这个也学了一周了,看了大量的资料...还是它们自己的80386手册和lab的指导手册觉得最准确,现在我就把这部分知识做 ...

  4. c++ 函数知识点汇总

    c++ 函数知识点汇总 swap函数 交换两个数组元素 比如 swap(a[i],a[j]); 就是交换a[i] 和 a[j] 的值 strcpy() 复制一个数组元素的值到另一个数组元素里 strc ...

  5. 前端开发 JavaScript 干货知识点汇总

    很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...

  6. BBS项目知识点汇总

    目录 bbs项目知识点汇总 一. JavaScript 1 替换头像 2 form表单拿数据 3 form组件error信息渲染 4 添加html代码 5 聚焦操作 二 . html在线编辑器 三 . ...

  7. Java面试知识点汇总

    Java面试知识点汇总 置顶 2019年05月07日 15:36:18 温柔的谢世杰 阅读数 21623 文章标签: 面经java 更多 分类专栏: java 面试 Java面试知识汇总   版权声明 ...

  8. 离散数学 II(最全面的知识点汇总)

    离散数学 II(知识点汇总) 目录 离散数学 II(知识点汇总) 代数系统 代数系统定义 例子 二元运算定义 运算及其性质 二元运算的性质 封闭性 可交换性 可结合性 可分配性 吸收律 等幂性 消去律 ...

  9. ECMAScript版本知识点汇总

    ECMAScript版本知识点汇总 ES5 btoa.atob 对参数进行base64格式编码.解码 /** * btoa() * base64编码 * @param {string} str * @ ...

  10. c++常考算法知识点汇总

    前言:写这篇博客完全是给自己当做笔记用的,考虑到自己的c++基础不是很踏实,只在大一学了一学期,c++的面向对象等更深的知识也一直没去学.就是想当遇到一些比较小的知识,切不值得用一整篇 博客去记述的时 ...

随机推荐

  1. 使用Xhell连接Docker虚拟机

    平时我们可以使用Xhell来连接Docker虚拟机. 1.首先,我们来用VirtualBox管理器来看一下default虚拟机的网络配置: 2.新建Xshell会话: a.我们可以看到ssh的主机IP ...

  2. Vue躬行记(2)——指令

    Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...

  3. oracle之新建用户与授权

    1.登录,口令为Oracle12c 2.新建用户 3.口令自己设置 4.按下图给角色授权,点击用用 5.登录刚刚创建的用户

  4. 《深入理解Java虚拟机》-----第13章 线程安全与锁优化

    概述 在软件业发展的初期,程序编写都是以算法为核心的,程序员会把数据和过程分别作为独立的部分来考虑,数据代表问题空间中的客体,程序代码则用于处理这些数据,这种思维方式直接站在计算机的角度去抽象问题和解 ...

  5. [USACO15DEC]高低卡(白金)High Card Low Card (Platinum)

    题目描述 Bessie the cow is a hu e fan of card games, which is quite surprising, given her lack of opposa ...

  6. Mybatis源码阅读 之 玩转Executor

    承接上篇博客, 本文探究MyBatis中的Executor, 如下图: 是Executor体系图 本片博客的目的就是探究如上图中从顶级接口Executor中拓展出来的各个子执行器的功能,以及进一步了解 ...

  7. MD5收集整理

    MD5如何生成的 百度百科 生成MD5 1.通过摘要生成MD5 MessageDigest md = MessageDigest.getInstance("MD5"); md.up ...

  8. CasperJS 前端功能测试

    CasperJS 是一个开源的导航脚本和测试组件.它提供实用的高级函数.方法和语法糖,可完成以下任务: 对浏览导航步骤的定义和排序 填写和提交表单 点击和跟踪链接 获取页面快照(或者页面中的某部分) ...

  9. 解决tortoiseSvn 访问版本库的时候一直初始化,或者无响应的问题

    现象 svn访问版本库时一直提示: please wait while the repository browser is initializing 没有反应,甚至3-4分钟才会出来,即便出来也会很卡 ...

  10. ubuntu18.04 flink-1.9.0 Standalone集群搭建

    集群规划 Master JobManager Standby JobManager Task Manager Zookeeper flink01 √ √ flink02 √ √ flink03 √ √ ...