一、什么是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. Vulkan Tutorial 22 Index buffer

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在实际产品的运行环境中3D模型的数据往往共享多个三角形之间 ...

  2. EntityFramework连接SQLite

    EF很强大,可惜对于SQLite不支持CodeFirst模式(需要提前先设计好数据库表结构),不过对SQLite的数据操作还是很好用的. 先用SQLiteManager随便创建一个数据库和一张表:

  3. Java注解--实现动态数据源切换

    当一个项目中有多个数据源(也可以是主从库)的时候,我们可以利用注解在mapper接口上标注数据源,从而来实现多个数据源在运行时的动态切换. 实现原理 在Spring 2.0.1中引入了Abstract ...

  4. 【Android Developers Training】 88. 使用备份API

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  5. 页面刷新vuex数据消失问题解决方案

    VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...

  6. kbengine_js_plugins 在Cocos Creator中适配

    kbengine_js_plugins 改动(2017/7/6) 由于Cocos Creator使用严格模式的js,而原本的kbengine_js_plugins是非严格模式的,因此为了兼容和方 便C ...

  7. 使用hexdump工具追踪EXT4文件系统中的一个文件

    昨天追踪EXT4文件系统的过程中出了点问题,就是找不到文件,于是试了一下追踪FAT32文件系统的,成功之后有了点信心,今天继续嗑EXT4文件系统,终于找到啦,记录一下. 操作系统:linux(cent ...

  8. 在线制作css动画——cssanimate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...

  9. c++ 命名空间 以及 作用域 函数参数 面向对象实验报告

    面向对象的分析与设计  实验报告一 一．变量的储存类别 auto static register extern auto变量   函数中的局部变量,如不专门声明为static存储类别,都是动态地分配存 ...

  10. jsp实现上一页下一页翻页功能

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...