下载文档原格式
HTML基础知识一、什么HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
二、HTML能干什么您可以使用HTML 来建立自己的WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
三、HTML长什么样子•<!DOCTYPE html>声明为HTML5 文档•<html>元素是HTML 页面的根元素•<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
•<title>元素描述了文档的标题•<body>元素包含了可见的页面内容•<h1>元素定义一个大标题•<p>元素定义一个段落四、HTML都包含那些标签五、HTML实例1)我的第一个网页2)注释标签：对代码进行说明<!--单行注释,也可以对多行文字进行注释-->3)常用格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换行<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调文本</strong> 4)标题标签5)列表标签6)超链接:7)分隔窗口8)块级元素和行内元素块级元素：凡是默认自动占满网页整行的元素（自动换行），称为块级元素<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...行内元素：不能占满网页整行的元素<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...9)表格标签tr:行；td：单元格10)表单元素：11)多行文本域。
HTML5元素分类HTML5新增了27个元素，废弃了16个元素，根据现有的标准规范，把HTML5的元素按优先级定义为结构性属性、级块性元素、⾏内语义性元素和交互性元素4⼤类。
1.结构性元素结构性元素主要负责web上下⽂结构的定义section：在web页⾯应⽤中，该元素也可以⽤于区域的章节描述。
header：页⾯主体上的头部，header元素往往在⼀对body元素中。
footer：页⾯的底部（页脚），通常会标出⽹站的相关信息。
nav：专门⽤于菜单导航、链接导航的元素，是navigator的缩写。
article：⽤于表现⼀篇⽂章的主体内容，⼀般为⽂字集中显⽰的区域。
2.级块性元素级块性元素主要完成web页⾯区域的划分，确保内容的有效分割。
aside：⽤于表达注记、贴⼠、侧栏、摘要、插⼊的引⽤等作为补充主体的内容。
figure：是对多个元素进⾏组合并展⽰的元素，通常与ficaption联合使⽤。
code：表⽰⼀段代码块。
dialog：⽤于表达⼈与⼈之间的对话，该元素包含dt和dd这两个组合元素，dt⽤于表⽰说话者，⽽dd⽤来表⽰说话内容。
3.⾏内语义性元素⾏内语义性元素主要完成web页⾯具体内容的引⽤和描述，是丰富内容展⽰的基础。
meter：表⽰特定范围内的数值，可⽤于⼯资、数量、百分⽐等。
time：表⽰时间值。
progress：⽤来表⽰进度条，可通过对其max、min、step等属性进⾏控制，完成对进度的表⽰和监事。
video：视频元素，⽤于⽀持和实现视频⽂件的直接播放，⽀持缓冲预载和多种视频媒体格式。
audio：⾳频元素，⽤于⽀持和实现⾳频⽂件的直接播放，⽀持缓冲预载和多种⾳频媒体格式。
4.交互性元素交互性元素主要⽤于功能性的内容表达，会有⼀定的内容和数据的关联，是各种事件的基础。
details：⽤来表⽰⼀段具体的内容，但是内容默认可能不显⽰，通过某种⼿段（如单击）与legend交互才会显⽰出来。
本文由我司收集整编，推荐下载，如有疑问，请与我司联系在HTML 中常用的行内元素和块级元素2017/08/31 0 1. 块级元素：div:文档节section:文档节nav:导航header:页眉article:文章aside:文章侧栏footer:页脚details:元素的细节summary:details 元素可见的标题dialog:对话框窗口h1,h2,h3,h4,h5,h6:标题p:段落ul:无序列表ol:有序列表dir:目录列表li:项目dl:列表dt:列表项目dd:项目描述menu:命令的菜单,列表menuitem:菜单项目command:命令按钮form:表单fieldset:围绕元素的边框(可用于表单内元素分组)legend:在边框上的标题select:选择列表(内联元素)optgroup:组合选择列表选项option:选择列表选项(也可做datalist 选项)datalist:下拉列表(id 要与input 中list 属性值绑定)table:表格caption:表格标题thead:组合表头内容(th)tbody:组合主体内容(td)tfoot:组合表注内容(td)tr:表格行th:表头单元格td:表格单元col:表格列属性;(空标签)colgroup:表格格式化列组;iframe:内联框架figure:媒介内容分组figcaption:figure 标题map:图像映射area:图像区域canvas:图形容器(脚本来绘制图形)video:视频source: 媒介源track:文本轨道audio:声音内容br:换行(空标签)hr:水平分割线(空标签)pre:格式文本blockquote:块引用address:文档联系信息center:居中文本(不赞成使用)spacer: 在水平和垂直方向插入空间(空元素)2. 行内（内联）元素：span:内联容器abbr:缩写em:强调strong:粗体强调mark:突出显示的文本b:粗体i:斜体bdi:文本方向bdo:文字方向big:大字体small:小字体sup:上标sub:下标del:被删除的文本strike:删除线s:删除线ins:被插入的文本u:下划线nobr:禁止换行wbr:单词换行时机(空标签)tt:打字机文本kbd:键盘文本time:日期/时间cite:引用q:短引用(““)font:字体设定(不常用)acronym:缩写(html5 不支持)dfn:字段(不常用)a:锚点img:图片embed:内嵌(空标签)label:input 标记(点击文本触发控件)input:输入框button:按钮keygen:生成秘钥(空标签)textarea:多行文本输入框output:输出结果ruby:中文注音rt:注音rp:浏览器不支持ruby 元素显示的内容progress:进度条meter:度量var:定义变量code:计算机代码文本samp:计算机代码样本select:下拉列表tips:感谢大家的阅读，本文由我司收集整编。
H5基础知识（⼀）⼀、概述HTML5 是html4.0 升级版结构 Html5 、样式 css3 、⾏为: API 都有所增强HTML5并不仅仅只是做为HTML标记语⾔的⼀个最新版本，更重要的是它制定了Web应⽤开发的⼀系列标准，成为第⼀个将Web做为应⽤开发平台的HTML语⾔。
HTML5定义了⼀系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联⽹应⽤，还提供了⼀些Javascript API，如地理定位、重⼒感应、硬件访问等，可以在浏览器内实现类原⽣应⽤，甚⾄结合Canvas我们可开发⽹页版游戏。
⼴义概念：HTML5代表浏览器端技术的⼀个发展阶段。
在这个阶段，浏览器呈现技术得到了⼀个飞跃发展和⼴泛⽀持，它包括：HTML5，CSS3，Javascript，API在内的⼀套技术组合。
传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页⾯具有语义性，但是不具有通⽤性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通⽤性。
H5 经典⽹页布局:<!-- 头部 --><header><ul class="nav"></ul></header><!-- 主体部分 --><div class="main"><!-- ⽂章 --><article></article><!-- 侧边栏 --><aside></aside></div><!-- 底部 --><footer></footer>常⽤新语义标签<nav> 表⽰导航<header> 表⽰页眉<footer> 表⽰页脚<section> 表⽰区块<article> 表⽰⽂章如⽂章、评论、帖⼦、博客<aside> 表⽰侧边栏如⽂章的侧栏<figure> 表⽰媒介内容分组与 ul > li 做个⽐较<mark> 表⽰标记 (带⽤“UI”，不怎么⽤)<progress> 表⽰进度 (带⽤“UI”，不怎么⽤)<time> 表⽰⽇期本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使⽤时除了在HTML结构上需要注意外，其它和普通标签的使⽤⽆任何差别，可以理解成<divclass="nav"> 相当于 <nav>。
HTML5常用英文单词Aabsolute绝对active激活的align 对齐alpha半透明度animation 卡通片绘制auto自动aside 偏栏Bbackground背景bgcolor背景颜色block 块；街区border 边框button 按钮border-radius圆角br 换行bottom 底部bold粗体bolder 更粗的Ccaption 表名center居中cellpadding 单元格边距cellspacing 单元格间距checkbox 复选框checked 复选框默认选择的circle 点点class类选择器col 列color颜色colspan 合并行(rowspan合并列)content 内容checkbox复选框Ddecoration 装饰document 文件，文档dashed虚线dotted点线double双线default 默认的display显示(block,inline-block)Eelement元素Ffirst-letter 第一个字float浮动font 字体font-size 字体大小font-weight 字体粗细(normal默认值 bold粗体 bolder更粗的 lighter更细的) font-family 字体样式focus 焦点Hhtml（Hypertext Markup Language）超文本标记语言hidden 被隐藏height高度hover鼠标悬停时的效果hr 水平线h1-h6 标题Iinput 输入框(text/password/checkbox/radio/button) image图像iteration 反复initial 最初的inline 行内italic( 斜体inline-block行内块状Llinear 线性的link链接lineheight行高list-style 简写属性在一个声明中设置所有的列表属性Mmailto 邮件发送至。
HTML基础知识总结⽬录标签分类常⽤标签表单框架常⽤的布局组合标签HTML4和HTML5的区别：HTML5 中新增的语义标签 - 了解HTML5 新的表单属性form 新属性input 新属性HTML5 新的表单元素 -- 了解HTML5 中新的 input 类型HTML5 中新增的⾳频HTML5 中新增的视频HTML5 中已经移除的元素转义符号标签的属性：多个属性中间⽤空格< 标签名称属性名 1 = " 属性值 " 属性名 2 = " 属性值 " ></ 标签名称 ><p id = "p1" name = "p1" ></p>标签分类标签分类：块状元素、⾏级元素块状元素：⼀般都是新起⼀⾏，可以容纳⾏内元素和其他块级元素；⾏级元素：⼀般都是语义级别的基本元素，⼀般只能容纳⽂本或者其他⾏内元素。
块状元素和⾏内元素的区别：1 、块级元素会独占⼀⾏，其宽度⾃动填满其⽗元素宽度；⾏内元素会排列到同⼀⾏⾥，其宽度随元素的内容变化⽽变化。
2 、块级元素可以设置宽⾼；⾏内元素设置宽⾼⽆效。
3 、块级元素可以设置 margin ， padding 属性；⾏内元素的⽔平⽅向的 padding会有边距效果，但是竖直⽅向的 padding没有效果。
（此处的属性稍后介绍）属于块状元素的：标题标签 h1-h6,段落标签 p ,⽔平线标签 hr,有序列表标签 ol--li，⽆序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：属于⾏级元素的：范围标签： span图像标签： img基本结构：常⽤标签⽂本标签<h1></h1>段落标签 <p></p>换⾏标签<br/>⽔平线标签 <hr/>范围标签<span></span>图⽚标签<img 属性 />图⽚标签的热点区域<map name="?" /> <atea 形状范围链接标题 / >列表标签：⽆序<ul> <li> <li/> <ul/> 有序<ol> <li> <li/> <ol/>描述标签：图⽂混编 <dl> <dt>(⽂字或图⽚)<dt/><dd>(⽂字说明多个)<dd/> <dl/>布局标签：<div>中间放其他标签的容器<div/>超链接和锚链接：<a><a/>属性 name：锚点 herf：⽬标（⽹页#锚点）规则表格：<table> <tr > <td><td/> <td><td/> <tr/> <table/> <th>标题⾏<th/> align 左右对齐 valign 上下对齐不规则表格：属性 colspan="列数" rowspan="⾏数" 然后把被占的格删掉⾼级标签：标题和逻辑分区标签表格标题：<caption>标题⽂字<caption/>表格逻辑分区：thead tbody tfoot表单id:· 元素的唯⼀表⽰，不重复name: 表单项元素的名称，服务器获取数据通过该名称value: 表单项元素的值，服务器获取数据通过name 获取到的就是 value type: 表⽰表单项元素的呈现形式class: 表⽰样式名称readonly: 表⽰只读，⽤户只能看不能改disabled：表⽰禁⽤，该元素不能改⽽且背景是灰⾊⽂本框：密码框：单选按钮：复选框：⽂件域：⽇期-h5中的新特性：隐藏域：下拉列表框：⽂本域：按钮：提交按钮、图⽚按钮、重置按钮、普通按钮最终效果：地址栏内容：dest.html?userId=1001&userName=lina&password=12312&gender= ⼥ &statu=1&hobby=swim&hobby=movie& headImg=a.png&birthday=2020-10-24T20%3A19& month=3&x=25&y=46框架在⼀个页⾯引⼊其他页⾯ iframe框架集：HTML5已经取消常⽤的布局组合标签div-ul-li/div-ol-li ：常⽤于导航布局div-dl-dt-dd: 常⽤于图⽂混编布局div-form: 常⽤于表单布局div-table: 常⽤于局部规则数据展⽰布局HTML4和HTML5的区别：HTML5 中新增的语义标签 - 了解标签描述article 定义页⾯独⽴的内容区域。
HTML!DOCTYPE标签布局引用的几种方法行级元素与块级元素1. HTML5 DOCTYPE：<!DOCTYPE html>HTML5是当前主流的HTML版本，使用HTML5DOCTYPE可以确保浏览器以HTML5的规范解析页面。
这种方法不需要引用DTD（文档类型定义），因为HTML5不再依赖DTD。
这种方法定义了HTML4.01的DTD，通过引用DTD来指定HTML的规范。
HTML4.01 DOCTYPE包括三种类型：Strict（严格模式）、Transitional （过渡模式）和Frameset（框架模式）。
XHTML是一种基于XML的HTML版本，使用XHTML1.0 DOCTYPE可以确保浏览器以XHTML1.0的规范解析页面。
XHTML1.0 DOCTYPE也包括三种类型：Strict、Transitional和Frameset。
行级元素是指在文本流中水平排列的元素，它们不会独占一行，并且不能设置宽度和高度。
一些常见的行级元素包括：span、a、strong、em、img等。
行级元素可以在一行中显示，并且可以和其他行级元素共享一行。
块级元素是指独占一行的元素，它们会自动换行，并且可以设置宽度和高度。
一些常见的块级元素包括：p、div、h1-h6、ul、ol、li等。
块级元素会从新的一行开始显示，并且通常会有一定的外边距和内边距。
HTML中行级元素和块级元素的区别体现在以下几个方面：1.显示方式：行级元素在一行中显示，从左到右排列，而块级元素独占一行，从上到下排列。
2.宽度和高度：行级元素不能设置宽度和高度，它们的宽度和高度由内容决定；而块级元素可以设置宽度和高度。
3.盒模型：行级元素的外边距和内边距不会影响其他元素的布局，而块级元素的外边距和内边距会影响其他元素的布局。
4. 默认属性：行级元素的默认display属性通常为inline，而块级元素的默认display属性通常为block。
HTML5笔试题库1、关于块级元素描述错误的是（） [单选题] *A.块级元素独占一行，在默认情况下，宽度自动填满父元素宽度B.块级元素宽度和高度可以控制C.块级元素的margin和padding横向设置有效，纵向设置不产生边距效果(正确答案)D.块级元素可以通过display: inline; 转换为行内元素2、样式表定义.outer{background-color:yellow;}表示（） [单选题] *A.网页中某一个id为outer的元素的背景色是黄色的B.网页中含有class="outer"的元素的背景色是黄色的(正确答案)C.网页中元素名为outer元素的背景色是黄色的D.以上任意一个都可以3、在HTML网页中，若需要实现导航菜单，可使用以下（）块状结构来布局。
[单选题] *A.div-ul-li(正确答案)B.div-dl-dt-ddC.div-table-tr-tdD.div-form-table-tr-td4、在HTML网页中，若需要实现图文混编的效果，可使用以下（）块状结构来布局。
[单选题] *A.div-ul-liB.div-dl-dt-dd(正确答案)C.div-table-tr-tdD.div-form-table-tr-td5. CSS3中关于渐变的说法错误的是（） [单选题] *A.CSS3径向渐变是圆形或椭圆形渐变B.径向渐变颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合C.渐变中angle角度是指水平线和渐变线之间的角度，按顺时针方向计算(正确答案)D.CSS3定义了两种类型的渐变:线性渐变和径向渐变6.在HTML5中，有关关键帧属性的描述，错误的是（） [单选题] *A.animation-delay:指定动画开始之前的延迟时间B.animation-direction:指定动画循环播放的时间是否反向播放过渡的持续时间C.animation-name:指定动画名称D.animation-duration:指定动画循环播放的时间是否反向播放过渡的持续时间(正确答案)7.对于样式规则background:linear-gradient（to right,red 50%,green 50%）;错误的是（） [单选题] *A.背景是线性渐变B.线性渐变的颜色从红色过渡到绿色C.红色和绿色之间没有过渡(正确答案)D.红色和绿色各占50%8. 在HTML5中，关于dl-dt-dd的描述，错误的是（） [单选题] *A.dt和dd放于dl标签内B.dd标签不可以出现多次(正确答案)C.dt不能放入dd内，dd不能放入dt内D.标签dt与dd处于dl下相同级10. 设置文本阴影的是哪个属性（） [单选题] *A.border-shadowB.box-shadowC.text-shadow(正确答案)D.以上都不对11.对于样式规则transition:all 3s ease-in 0.5s;描述错误的是（） [单选题] *A.3s表示过渡持续时间B.,0.5s指的是延迟时间C.,0.5s指的是过渡持续时间(正确答案)D.all表示全部属性12.CSS3中flex-wrap属性的默认值是（） [单选题] *A.NOWRAP(正确答案)B.noneC.warpD.wrap-reverse13. 设置边框阴影的是哪个属性（） [单选题] *A.border-shadowB.box-shadow(正确答案)C.text-shadowD.以上都不对14.对于border-image的理解，说法错误的是（） [单选题] *A.border-image是css3的新特性B.border-image需要指定素材的路径C.border-image用来用素材图片填充边框D.背景图填充方式的默认值是repeat(正确答案)15. 对于样式规则border-radius:10px 20px ;理解正确的是（） [单选题] *A.左上和左下角度都是10px,右上和右下角度都是20pxB.左上和右下角度都是10px,右上和左下角度都是20px(正确答案)C.左上和右上角度都是10px,右下和左下角度都是20pxD.左上和右下角度都是20px,右上和左下角度都是10px16. 下列关于视口的属性描述错误的是（） [单选题] *A.width:设置layout viewport的宽度只能是一个正整数(正确答案)B.height:设置layout viewport的高度为一个正整数或字符串“height-device”er-scalable:是否允许用户进行缩放，值为“no”或“yes”。
