HTML知识点汇总
一、什么是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知识点汇总的更多相关文章
- nginx几个知识点汇总
WHY? 为什么用Nginx而不用LVS? 7点理由足以说明一切:1 .高并发连接: 官方测试能够支撑 5 万并发连接,在实际生产环境中跑到 2 - 3 万并发连接数.?2 .内存消耗少: 在 3 万 ...
- python全栈开发 * 10知识点汇总 * 180612
10 函数进阶 知识点汇总 一.动态参数 形参的第三种1.动态接收位置传参 表达:*args (在参数位置编写 * 表⽰接收任意内容) (1)动态位置参数def eat(*args): print(a ...
- 清华大学OS操作系统实验lab1练习知识点汇总
lab1知识点汇总 还是有很多问题,但是我觉得我需要在查看更多资料后回来再理解,学这个也学了一周了,看了大量的资料...还是它们自己的80386手册和lab的指导手册觉得最准确,现在我就把这部分知识做 ...
- c++ 函数知识点汇总
c++ 函数知识点汇总 swap函数 交换两个数组元素 比如 swap(a[i],a[j]); 就是交换a[i] 和 a[j] 的值 strcpy() 复制一个数组元素的值到另一个数组元素里 strc ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- BBS项目知识点汇总
目录 bbs项目知识点汇总 一. JavaScript 1 替换头像 2 form表单拿数据 3 form组件error信息渲染 4 添加html代码 5 聚焦操作 二 . html在线编辑器 三 . ...
- Java面试知识点汇总
Java面试知识点汇总 置顶 2019年05月07日 15:36:18 温柔的谢世杰 阅读数 21623 文章标签: 面经java 更多 分类专栏: java 面试 Java面试知识汇总 版权声明 ...
- 离散数学 II(最全面的知识点汇总)
离散数学 II(知识点汇总) 目录 离散数学 II(知识点汇总) 代数系统 代数系统定义 例子 二元运算定义 运算及其性质 二元运算的性质 封闭性 可交换性 可结合性 可分配性 吸收律 等幂性 消去律 ...
- ECMAScript版本知识点汇总
ECMAScript版本知识点汇总 ES5 btoa.atob 对参数进行base64格式编码.解码 /** * btoa() * base64编码 * @param {string} str * @ ...
- c++常考算法知识点汇总
前言:写这篇博客完全是给自己当做笔记用的,考虑到自己的c++基础不是很踏实,只在大一学了一学期,c++的面向对象等更深的知识也一直没去学.就是想当遇到一些比较小的知识,切不值得用一整篇 博客去记述的时 ...
随机推荐
- 使用Xhell连接Docker虚拟机
平时我们可以使用Xhell来连接Docker虚拟机. 1.首先,我们来用VirtualBox管理器来看一下default虚拟机的网络配置: 2.新建Xshell会话: a.我们可以看到ssh的主机IP ...
- Vue躬行记(2)——指令
Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...
- oracle之新建用户与授权
1.登录,口令为Oracle12c 2.新建用户 3.口令自己设置 4.按下图给角色授权,点击用用 5.登录刚刚创建的用户
- 《深入理解Java虚拟机》-----第13章 线程安全与锁优化
概述 在软件业发展的初期,程序编写都是以算法为核心的,程序员会把数据和过程分别作为独立的部分来考虑,数据代表问题空间中的客体,程序代码则用于处理这些数据,这种思维方式直接站在计算机的角度去抽象问题和解 ...
- [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 ...
- Mybatis源码阅读 之 玩转Executor
承接上篇博客, 本文探究MyBatis中的Executor, 如下图: 是Executor体系图 本片博客的目的就是探究如上图中从顶级接口Executor中拓展出来的各个子执行器的功能,以及进一步了解 ...
- MD5收集整理
MD5如何生成的 百度百科 生成MD5 1.通过摘要生成MD5 MessageDigest md = MessageDigest.getInstance("MD5"); md.up ...
- CasperJS 前端功能测试
CasperJS 是一个开源的导航脚本和测试组件.它提供实用的高级函数.方法和语法糖,可完成以下任务: 对浏览导航步骤的定义和排序 填写和提交表单 点击和跟踪链接 获取页面快照(或者页面中的某部分) ...
- 解决tortoiseSvn 访问版本库的时候一直初始化,或者无响应的问题
现象 svn访问版本库时一直提示: please wait while the repository browser is initializing 没有反应,甚至3-4分钟才会出来,即便出来也会很卡 ...
- ubuntu18.04 flink-1.9.0 Standalone集群搭建
集群规划 Master JobManager Standby JobManager Task Manager Zookeeper flink01 √ √ flink02 √ √ flink03 √ √ ...