一、什么是HTML

HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。

二、HTML的基本格式

<!DOCTYPE html>：

①文档类型声明：让浏览器按照HTML5的标准对代码进行解释与执行。
②文档类型声明必不可少，而且，必须放在文档的最上方，前面不可有任何一行代码。
③如果不写文档类型声明，浏览器会按照兼容模式运行，可能会出现不明bug。

<head></head>：主要放一些关于网页设计的相关语句。

<body></body>:body中的内容，会显示在浏览器的展示区域。

三、HTML的基本标签之head部分

　　1、设置网页关键字

　　　　　　<meta name="keywords" content="HTML知识点"/>：

　　　　　　　　①name=“keywords” 表示当前语句用于设置网页关键字。
　　　　　　　　②content=“” 表示网页的关键字内容，多个关键字之间用英文逗号隔开。

　　2、设置网页描述

　　　　　　　　<meta name="description" content="这是我的第一个网页！！！"/>  :设置网页描述：网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页的描述内容。

　　3、title标题

　　　　　　<title>我的第一个网页</title>：网页的标题，也就是网页选项卡上的文字。

　　4、设置网页小图标（选项卡上的小图片）

　　　　　　例如：<link rel="icon"  href="img/1.jpg"/>：

　　　　　　①rel属性：选择 icon（图标），表示链接的文件，将作为网页的icon图标。

　　　　　　②href属性：选择图片所在的路径地址。

四、HTML的基本标签之body部分

1、HTML标签分为“块级标签”和“行级标签”　　　　

　　【块级标签和行级标签的区别】
　　①块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示；
　　②块级标签宽度默认是100%，行级标签的宽度有文字内容撑开；
　　③块级标签可以设置宽度，高度，边距等属性，行级标签不能设置上述属性；
　　从写法上看，HTML标签分为“成对标签”和“自闭合标签（空标签）”
　　成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。
　　　　例如：<h></h1>,<p></p1>,<title></title>
　　自闭和标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）。
　　　　例如：<hr/>,<link/>,<meta/>

2、常见的块级标签

　　　　a.标题标签：<h1></h1>......<h6></h6>   特点:h1最大，h6最小，自动加粗。

　　　　b.水平线标签：<hr/>

　　　　c.段落标签：<p></p>

　　　　d.换行标签：<br/>

　　　　e.引用标签：<blockquote></blockquote>
            　　　　 重要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示
 　　　　　　　浏览器一般显示为首行缩进

　　　　f.预格式标签：<pre></pre>
             　　浏览器默认显示样式：①显示为等宽字体
                                       　　　　   ②代码中的换行，空格等元素可在浏览器中直接显示。

3、常见的行级标签

　　　　a.span标签：用于包裹行内的文字。 常配合CSS使用修改文字样式。

　　　　b.引用标签

　　　　　　常见的引用标签有：blockquote、q、cite
　　　　　　区别：
　　　　　　① 显示效果上： blockquote整段缩进、q加引号、cite 倾斜
　　　　　　② 从功能上： blockquote用于引用一整段内容，是块级标签。 q用于引用一句话，是行级标签。 cite常用于引用作品名、书画名。

　　　　c.img图片标签
　　　　　　1. src属性：表示图片所在的路径。
　　　　　　　　[路径的表示方式]
　　　　　　　　　　① 网络图片地址。 并不建议使用。
　　　　　　　　　　　　http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
　　　　　　　　　　② 可以使用图片的绝对路径。但是，严禁使用绝对路径。 因为，绝对路径使用file://协议，网页使用http://协议打开无法访问file://协议的文件。
　　　　　　　　　　　　file:///C:/sunyang.jpg -- 绝对路径写法：file:///盘符:/文件路径
　　　　　　　　　　③ 使用相对路径。 推荐使用的唯一方式。
　　　　　　　　　　　　　　a. 图片在当前文件的下一层， “文件夹名/图片名”
　　　　　　　　　　　　　　b. 图片与当前文件在同一层，直接写"图片名"
　　　　　　　　　　　　　　c. 图片在当前文件的上已成，"../图片名" 。
　　　　　　　　　　(注意： 图片必须包含在项目里面，不能退出项目根目录)
　　　　　　2. width、height 宽度、高度属性
　　　　　　3. title：鼠标指上时显示的文字　　
　　　　　　4. alt： 图片无法加载时，显示的文字。 省略alt，将默认显示title内容
　　　　　　5. align: 图片周围的文字，相对于图片的排列方式；
　　　　　　　　　　top 文字居上

　　　　　　　　　　center 文字居中

　　　　　　　　　　bottom 文字局底

　　　　d.a标签 超链接
　　　　　　1. href属性： 超链接跳转的地址。可以是网络连接，也可以是本地HTML文件的相对路径。
　　　　　　2. target属性： 超链接新页面打开的位置。 
　　　　　　　　　　_self在当前页面打开(默认) _blank在新页面打开
　　　　　　3. title属性：鼠标指在超链接上显示的文字。

　　　　　　　【功能性超链接】
　　　　　　　　1. mailto： 给指定邮箱发送邮件。
　　　　　　　　<a href="mailto://jianghao@jerei.com">点击给帅哥发邮件！</a>
　　　　　　　　2. tencent: 与指定QQ聊天。
　　　　　　　　<a href="tencent://message/?uin=2831705549">与帅哥聊天</a>
　　　　　　　　3. 锚链接：点击超链接，可以跳转到页面的指定位置(锚点)
　　　　　　　　　　① 在页面的指定位置，定义一个锚点：
　　　　　　　　　　　　<a name="center"></a>
　　　　　　　　　　② 将超链接的href属性，改为 “#锚点名称”
　　　　　　　　　　　　<a href="#center">跳到div上方</a>
　　　　　　　　　　③ 跳转到其他页面指定锚点的方式：
　　　　　　　　　　　　<a href="其他页面地址.html#center">哈哈哈</a>

4、表格Table

　a、表格table属性

　　　　　　表格中一行用tr表示;
　　　　　　一行中的每个单元格,用td表示;
　　　　　　首行的表头中，每个单元格用th表示，th默认文字会加粗，居中。

　b、表格中常用的各种属性

　　　　1.border：给表格的每个td和整个table加边框。如果border的值大于1，则只有最外层边框加粗，td上的边框不变。
　　　　2.cellspacing：设置单元格与单元格之间的间距。
　　　　  cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示为两条线的宽度。
　　　　　　　　[设置表格边框合并]
　　　　　　可以使用css设置：style="border-collapse:collapse;"设置边框合并以后，cellspacing属性将会失效。
　　　　3.cellpadding：单元格内边距，单元格中文字与边框之间的距离。
　　　　4.width/height：表格的宽度和高度
　　　　5.align：设置表格在浏览器中，居左，居中，居右。
　　　　6.bgcolor：表格背景色
　　　　　　bordercolor：表格的边框颜色
　　　　　　background：表格背景图。背景色和背景图同时存在时，背景图生效。

c、表格的行列属性

　　　　作用于tr和td上的属性：
　　　　　　1.width、height：宽度，高度。
　　　　　　2.bgcolor：背景色。
　　　　　　　　当表格的属性与行列的属性发生冲突时，优先级采用“近者优先”的原则：table<tr<td。
　　　　　　3.align：设置单元格中的文字，水平对齐方式：left center right
　　　　　　   valign：设置单元格中的文字，垂直对齐方式：top center bottom

d、表格的跨行与跨列

　　　　1.跨列：colspan=“n”，如果某个单元格跨n列，则该单元格右侧n-1个td就不需要了。
　　　　2.跨行：rowspan=“n”，如果某个单元格跨n行，则该单元格下方n-1个td就不需要了。

e、表格的结构化与直列化

　1、【表格的结构化】

　　　　完整的表格结构,包括:
　　　　　　caption:表格的标题，无论<caption>标签放在表格第几行，表格标题永远在表格正上方居中。
　　　　　　thead：表格的表头部分。永远在表格最上部。
　　　　　　tbody：表格的身体部分。在thead之下，tfoot之上。
　　　　　　tfoot：表格的尾部。永远在表格最下部。
　2、【表格的直列化】
　　　　表格有几列，就可以在表格的最上方写几个<col />标签，每个<col />标签就对应着第几列，可以对<col />标签修改样式、添加name等属性，表示这一列的所有td同步修改。
　　　　如果，需要对多列修改共同样式，可以使用<colgroup></colgroup>标签包裹多个<col />。

　　结果如下：

　　

　　　　

　　结果如下：

　　　　

5、form表单

　　1、form表单有两个重要的属性：
　　　　action：表示将表单提交给哪个服务器地址；
　　　　method：表单提交数据的方式，可选值有get和post两种。

　　[get和post的区别]
　　　　①get使用URL传递数据。所有内容在地址栏可见，不安全。
　　　　    post的数据无法在地址栏看到，比较安全。
　　　　②get传递的数据量有限，而且只能传递纯文字内容；
　　　　　post可以传递大量数据，并且可以传递图片、视频等文件。
　　　　③get的传输速度要比post快。

　　[get传递数据的URL格式]
　　　　http：//原来的地址.html？name1=value1&name2=value2
　　　　比如：http://127.0.0.1:8020/0595.html？username=123
　　　　所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据不向后台传递。
　　2、input的常用属性：
　　　　①type：表示当前输入框是何种类型的输入框；
　　　　②name：给输入框起别名。向后台传递时，使用name=value的形式传递；
　　　　③value：当前input的默认值；
　　　　④placeholder：输入框的提示内容。当输入框有value时，提示内容消失。
　　　　⑤hidden：隐藏当前输入框。可以写为hidden="hidden"，也可以省略属性值，只写<input type="text" hidden>   隐藏的输入框内容，依然可以向后台传输数据
　　　　⑥disabled：禁用当前输入框。可以显示，不能使用。被禁用的输入框内容，将不能向后台传递数据。
　　　　⑦checked="checked"设置单选按钮/多选按钮，默认选中。
　　3、input的type类型：
　　　　①text：普通的文本框；
　　　　②password:密码框。输入的内容，显示为小黑点；
　　　　③radio：单选按钮。单选按钮的value不能省略，这个value需要传到后台；
　　　　　　单选按钮，凭借name是否相同，区分按钮是否为同一组。同一组按钮只能选中一个，name必须相同。
　　　　　　checked="checked"设置单选按钮，默认被选中。
　　　　④checkbox：多选按钮。其他与单选按钮相同。
　　　　⑤file：文件上传框。
　　　　　　accept属性，可以限制只能上传何种类型的文件。"*"表示可以接受所有文件，"image/*"表示只能接受图片。
　　　　　　multiple="multiple"设置可以上传多个文件。
　　　　⑥submit：表单提交按钮。
　　　　⑦reset：表单重置按钮。点击将表单恢复为初始状态。
　　　　⑧image：图形提交按钮。src属性导入图片，与submit都具有提交表单的作用。
　　　　⑨button：显示为按钮形状，但是并没有什么作用。
　　　　⑩hidden：隐藏的输入框。与普通输入框*hidden="hidden"的作用相同。
　　4、select：下拉选择区块
　　　　①select里面的每一项，用<option></option>标签表示；
　　　　②name属性，需要写到select标签上。
　　　　③option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是<option></option>标签之间的文字。
　　　　④option添加属性selected="selected"，设置默认选中项。
　　　　⑤select添加属性multiple="multiple"，设置当前下拉控件可以多选。
　　　　⑥option添加属性title，表示鼠标指上后显示的文字。
　　　　⑦select可以使用<optgroup></optgroup>标签对选项进行分组，用label属性显示分组名。
　　　　　　<select name="city" >
　　　　　　　　<optgroup label="沿海城市">
　　　　　　　　　　<option value="123">青岛</option>
　　　　　　　　　　<option selected="selected">济南</option>
　　　　　　　　</optgroup>
　　　　　　　　<optgroup label="内陆城市">
　　　　　　　　　　<option title="潍坊">潍坊</option>
　　　　　　　　　　<option >烟台</option>
　　　　　　　　</optgroup>
　　　　　　</select>

　　　　　　　　

　　5、textarea 文本域
　　　　　　①文本域大小控制：
　　　　　　　　可以用文本域属性cols="20"（宽度多少字符）rows="10"（高度多少行），可以使用css样式style="width: 200px;height: 100px;"
　　　　　　②设置文本域大小不能拖动：style="resize：none;"
　　　　　　③设置文本域为只读模式，不能修改：<textarea readonly="readonly"></textarea>
　　　　　　④文字超出区域处理：
　　　　　　　　使用style="overflow：xx；"可以设置文字超出区域的显示方式;
　　　　　　　　>>>overflow；hidden;超出区域的文字隐藏不显示;
　　　　　　　　>>>overflow:scroll;无论文字多少，都会显示水平垂直滚动条;
　　　　　　　　>>>overflow:auto;自动，默认效果。文字多显示滚动条，文字少不显示滚动条;
　　　　　　　　>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条；
　　　　　　　　　　overflow-y：scroll;overflow-x：hidden;

6、HTML5智能表单

　　1、HTML5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定；
　　　　　　　　<form id="ff"></form>
　　　　　　　　<input form="ff">
　　2、H5给我们新增了许多input的新的type类型。   range color date email url
　　3、H5新增的input属性:
　　　　　　①form属性：关联指定表单的id。
　　　　　　②placeholder：输入框的提示内容。
　　　　　　③required="required"：必填
　　　　　　④autofocus="autofocus"指定输入框，自动获得焦点。
　　　　　　⑤autocomplete：是否开启自动提示完成功能。默认为开启状态，设置为off表示关闭，设置为on表示打开。可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。

HTML5基本知识点的更多相关文章

  1. HTML5实用知识点

    本文讲解HTML5实用知识点 新增的表单type Canvas使用 SVG使用 Audio使用 Video使用 网页缓存 文件缓存 后台worker Server-Sent Events 定位 拖放功 ...

  2. HTML5易漏知识点锦集

    本文通过对w3schoolHTML5基础教程,整理出比较常见的却又容易遗忘或者忽略的HTML5相关知识点.本文的标题顺序与w3school中的HTML5基础教程标题顺序保持一致.适合翻阅和复习. 1. ...

  3. 【温故知新】——HTML5重要知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...

  4. html5相关知识点的总结（有一些错误或者不足的地方）

    1.页面结构上的一些宽松改变 <!DOCTYPE html>默认为标准模式 <meta charset="UTF-8"> 2.html5中新增的一些语义化标 ...

  5. html5基础知识点

    1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...

  6. HTML5学习知识点

    一.文档问题 1.html5新标签:section.header.footer.nav.aside.blockquote.q.fieldest.figure.address.article.detai ...

  7. 本周HTML5的知识点

    html5一般用<meta>标签描述网页的摘要信息.标题标签一共有6个,标题字体加粗<h1>最大,<h6>最小. <p>标签标示内容都在一行显示,结束后 ...

  8. HTML5常用知识点

    github代码:https://github.com/showkawa/H5C3/tree/master/html5 1.自定义属性 data- 1.1 可以给html里的所有DOM对象都可以添加一 ...

  9. HTML5零散知识点总结

    1.产生ioc图标的网站: http://www.bitbug.net/ 链接ioc图标: <link rel="shortcut icon" type="imag ...

随机推荐

  1. 石头剪刀布 R语言统计分析

    关于石头剪刀布,做出了详细的分析,具体ppt见地址 http://files.cnblogs.com/files/GMGHZ971322/R%E8%AF%AD%E8%A8%80.pptx 16级电商三 ...

  2. v9.5.2上传缩略图/附件提示“undefined”

    把phpcms\modules\attachment\attachments.php中将                        if(empty($this->userid)){改成  ...

  3. CYQ.Data V5 分布式自动化缓存设计介绍（二）

    前言: 最近一段时间,开始了<IT连>创业,所以精力和写的文章多数是在分享创业的过程. 而关于本人三大框架CYQ.Data.Aries.Taurus.MVC的相关文章,基本都很少写了. 但 ...

  4. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  5. PS-前端切图教程（切jpg图和切png图）

    微微一运功,把家底都抖出来了. 不过,作为一个设计出身的前端来说,摸ps就和摸键盘一样了 所以可能教程中还是有没用过ps的人看不懂的地方, 欢迎加群讨论:613512106... ---------- ...

  6. php追加数组

    <?php //追加数组 array_merge_recursive()函数与array_merge()相同,可以将两个或多个数组合并在一起,形成一个联合的数组．两者之间的区别在于,当某个输入数 ...

  7. spark streaming(2) DAG静态定义及DStream,DStreamGraph

    DAG 中文名有向无环图.它不是spark独有技术.它是一种编程思想 ,甚至于hadoop阵营里也有运用DAG的技术,比如Tez,Oozie.有意思的是,Tez是从MapReduce的基础上深化而来的 ...

  8. [编织消息框架][netty源码分析]11 UnpooledHeapByteBuf 与 ByteBufAllocator

    每种ByteBuf都有相应的分配器ByteBufAllocator,类似工厂模式.我们先学习UnpooledHeapByteBuf与其对应的分配器UnpooledByteBufAllocator 如何 ...

  9. Linux - iostat命令详解

    简介 iostat可以提供更丰富的IO性能状态数据,iostat命令有两个用途: 输出CPU的统计信息 输出设备和分区的I/O统计信息 命令语法及参数说明 语法: iostat [ -c | -d ] ...

  10. Bootstrap提示框

    前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是 ...