HTML是什么，HTML5是什么？

——HTML：超文本标记语言，一种用于创建网页的标准标记语言； ——HTML5：目前最新的HTML标准，包含新的元素、属性、行为，基于它们的功能特征将他们分成不同的组别：

* 语义：能够让你更恰当地描述你的内容是什么；

* 连通性：能够让你和服务器之间通过创新的技术方法进行通信；

* 离线&存储：能够让网页在客户端本地存储数据更高效地离线运行；

* 多媒体：使用video和audio成为了所有web中的一等公民；

* 2D/3D绘图&效果：提供了一个更加分化范围的呈现选择；

* 性能&集成：提供了非常显著的性能优化和更加有效的计算机硬件使用

* 设备访问device Access:能够处理各种输入输出设备

* 样式设计：可以创造更加复杂的主题

HTML元素标签、属性都是什么概念？

——HTML元素标签是HTML语言中最基本的单位，是HTML最重要的组成部分，由开始标签、内容、结束标签组成，如<p>内容</p>（空标签没有结束标签）；

** 特点：**

1. 由尖括号包围的关键词，比如 <html>；

2. 通常是成对出现的，比如 <div> 和 </div>；

3. 标签对中的第一个标签是开始标签，第二个标签是结束标签；

4. 开始和结束标签也被称为开放标签和闭合标签；

5. 也有单独呈现的标签，如：<img src="百度百科.jpg" />等；

6. 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />；

7. 网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中；

——属性是用来定义元素额外信息的，不出现在实际内容上；

1. 属性总是以名称/值对的形式出现，比如：name="value";

2. 属性总是在HTML元素的开始标签中规定；

文档类型是什么概念，起什么作用？

——我们写网站的时候会发现，页面头部总会有<!DOCTYPE>。这个<!DOCTYPE>就是用来声明该文档的类型的，只有这样浏览器才能知道你的文件类型，然后正确的显示网页。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的；文档类型有很多种，即使对于HMTL而言，也有不同的版本，只有浏览器了解到哪个HTML的版本，才能正确的显示该页面。对于HMTL5，我们常用的文件声明如下:

<!DOCTYPE html>

meta标签都用来做什么的？

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词；

<meta> 标签位于文档的头部，不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta>标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等

简单总结下就是：<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

如：

  • 用meta设置关键字：<meta name = "keywords" content = "关键字">多个关键字用“,”分隔。
  • 设置描述：<meta name = "description" content = "对关键字的扩展说明">
  • 设置作者：<meta name = "author" content = "作者名">
  • 设置字符集：<meta http-equiv = "content-type" content = "text/html;charset = gb2312">
  • 编码格式：GB2312编码占用2个字节，UTF-8占用3个字节，如果网页文字较多，选择GB2312编码。
  • 设置页面定时跳转：<meta http-equiv = "refresh" content = "2;URL = http://www.baidu.com"/>里面的2，代表2秒

需要注意：

1.http-equiv之间不能加空格，否则没用，也就是不能写成“http - equiv”！

2.content-type也是一个整体，不能以空格分隔。

详细的meta的使用可以参考https://blog.csdn.net/yc123h/article/details/51356143 这篇文章介绍的挺全面；

Web语义化是什么，是为了解决什么问题？

——具体来说，就是在书写html时，尽量使用具有语义信息的标签，例如header,nav,aside,section等代替那些没有语义信息的标签，例如big,center,strike,font等（完全可以用css来取代的标签）。这样不仅有利于页面DOM的组织，也有利于机器（主要是搜索引擎）的理解。而语义网的目标就是为了使得网络上的信息更加容易被机器理解和查找，从而提升人类使用网络获取信息的体验。

链接是什么概念，对应什么标签？

——链接就是可以把你带到另一个地方。放在web页面中，当你在一个页面中点击一个链接后，页面就会跳转到这个链接所指向的地址。HTML中的<a>可以实现这一个页面跳转功能。

常用标签都有哪些，都适合用在什么场景？

1、链接:又称超链接，设置页面中允许被点击的内容。

【标签】<a></a>

【属性】

href：链接地址（要跳转到的页面的地址）

target：目标，打开新网页的形式

【取值】

_blank：在新标签页中打开

_self：在自身页面中打开（默认值）

title：鼠标放到链接上的提示

2、文本标记

【文本样式】

斜体：<i></i>

粗体：<b></b>

删除线：<s></s>

下划线：<u></u>

上标：<sup></sup>

下标：<sub></sub>

*标题元素：以标题的形式来显示文本内容

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

【特点】

- 改变字号（一级最大，六级最小）

- 加粗显示

- 上下有垂直的空白距离

- 独立成行

* 段落元素

【标签】<p></p>

【特点】

- 默认文字大小

- 独立成行

- 上下垂直空白

* 换行元素

【标签】<br>

* 分隔线元素

【标签】<hr>

【属性】

size：尺寸，取值单位为 px（像素），可以省略

width：宽度，取值单位为px（像素）可以省略或百分比

color：颜色，取值自然颜色值

align：水平对齐方式，取值：left/center/right

* 分区元素

（1)块分区元素：<div></div>

【特点】独立成行

【作用】页面布局

（2）行内分区元素：<span></span>

【特点】多个元素在一行内显示

【作用】设置同一行文字内的不同格式

* 行内元素与块级元素

（1）块级元素（div 、p、h1~h6）

【特点】元素会独占一行，即元素前后都会自动换行，主要用于网页布局

（2）、行内元素（ span、i、b、s、u、sub、sup、img、a）

【特点】不会换行，多个元素会在一行内显示

3、图像

路径：——URL：Uniform Resource Locator（统一资源定位器，俗称：路径）

作用：标识网络任何资源的位置

（1）绝对路径：从文件所在的最高级目录下开始查找资源文件所经过的路径

-包括网络资源&本地资源（如：E:\mmper\练习\img\flower.jpg）

（2）相对路径：从当前文件位置处开始，查找资源文件所经过的路径

- 同目录，直接用， 直接通过资源文件名称进行引用（a.jpg）

- 子目录，进入到子目录中，然后再对资源文件进行引用（img/a.jpg）

- 父目录，返回到父级目录再对资源文件进行引用（../a.jpg）

【标签】<img>

【属性】

src：图片地址（绝对/相对）

width：图像宽度

height：图像高度

4、表格 ：由<table>元素定义。

【标签】<table></table>

【属性】

width ：设置表格的宽度

height：设置表格的高度

align：设置表格的对齐方式，取值: left/center/right

border：设置表格边框宽度

cellpadding：内边距（单元格边框与内容之间的距离）

cellspacing：外边距（单元格之间的距离）

bgcolor：设置表格的背景颜色

<table></table>中包含的子元素：

【标签】<tr></tr> （创建表行）

【属性】

align：该行内容水平对齐方式，取值: left/center/right

valign：该行内容的垂直对齐方式，取值: top/middle/bottom

bgcolor：设置表格的背景颜色

【标签】<td></td> （创建单元格）

【属性】

align：内容水平对齐方式

valign：内容垂直对齐方式

width ：宽度

height ：高度

【标签】<caption></caption> （表格标题）

【标签】<th></th> （列标题）行标题或列标题，字体有加粗的效果，放在tr中

【标签】<thead></thead> （表头）

【标签】<tbody></tbody> 表主体）

【标签】<tfoot></tfoot> （表尾）

（1）不规则表格

- 跨列：从指定单元格位置处，横向向右合并几个（包含自己）单元格

属性：colspan=值（数字，合并单元格的个数）;

- 跨行：从指定单元格位置处，纵向向下合并几个（包含自己）单元格

属性：rowspan=值（数字，合并单元格的个数）;

（2）表格的嵌套：在单元格中去嵌套另一个表格，但嵌套的表格必须要放在td中

5、列表：将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起

有序列表

<ol>

<li></li>

</ol>

【属性】

type:指定列表项标志的类型，默认为数字排列

取值：1（默认值）/a/A/i/I

start:定义起始值(数字)，默认从1开始

取值：数字，如：start:1; start:i;等

无序列表

<ul>

<li></li>

</ul>

【属性】

type：指定无序列表的列表项标识

取值： disc,默认,实心圆/circle，空心圆/square，实心矩形none，不显示标识

自定义列表

<dl>

<dt>列表中的标题内容</dt>

<dd>列表中的数据</dd>

</dl>

使用场合：图文混排时使用

6、表单 ：由<form>定义，将用户输入的数据提交给后台

【常见属性】

action：提交的服务器地址

method：表单数据提交的方式，取值： get：明文提交/post：隐式提交

name：定义表单名称，JS用到的比较多

id： 独一无二的标识

如：<form action="url" method="get/post"> </form>

<input>元素

【主要属性】

type：根据不同的type属性值可以创建各种类型的输入字段

value：最终提交给服务器的值

name：控件的名称，提供给服务器使用，没有name，控件则无法提交

id：唯一标识，只能在当前页面使用，服务器不能用

disabled：禁用，不能被提交

<button>内容</button>

下拉选择框select 和 option

<section name="">

<option value="" selected></option>

</section>

7、结构标记 ：HTML5所提供的结构标记，专门用于表示常见的网页结构（即制作布局），提升布局代码的语义性和可读性

常见结构标记

<header></header>：定义文档的页眉即页面顶部信息

<nav></nav>：定义页面的导航链接部分

<section></section>：定义文档中的节，文档中主体内容

<article></article> ：定义独立于文档的其他部分内容(章、节等)

<footer></footer>：定义某区域的脚注信息，页面底部内容等

<aside></aside>：多用于侧边栏和相关引用信息等

表单标签都有哪些，对应着什么功能，都有哪些属性？

【1】表单的作用是将用户的信息传递给服务器，是客户端与服务器端进行信息交流的途径。

【2】form（表单）标记用于创建一个表单，定义表单的开始与结束。是一个容器。所有表单元素必须在<form></form>标记中才有作用。

【3】语法：

<form action = URL(传送目标，处理表单信息的服务器端应用程序)method = 处理表单数据的方法(POST/GET)如果不写method则默认提交方式为GET,name = 表单名称>表单元素</form>

【4】POST方法可以传递大量信息，GET方式将值附加到请求该页的URL中。适合传递少量信息（默认方式）。

【5】表单元素标记：

●单行文本框：

<input name = "文本框名称" type = "text" value = "初始值" size = "显示字符数" maxlength = "最多容纳字符数" readonly = "readonly"(设置为只读) disabled = "disabled"(设置为不可操作) />

●密码框：

<input name = "文本框名称" type = "password" value = "初始值" size = "显示字符数" maxlength = "最多容纳字符数" readonly = "readonly" disabled = "disabled"/>

●单选框：

<input name = "单选框名称" type = "radio" value = "提交值" checked = "checked"(是否被选中) />

注意：单选框的name属性要一样，否则无法单选。

●复选框：

<input name = "复选框名称" type = "checkbox" value = "提交值" checked = "checked" />

●提交按钮：

<input type = "submit" value = "确认" />，定义提交按钮。提交按钮会把表单数据发送到服务器。

●重置按钮：

<input type = "reset" value = "取消" />，定义重置按钮。重置按钮会清除表单中的所有数据。

●列表框：

菜单式：<select name = "列表框名称">

<option selected = "selected"(哪个为初始选择，就添加selected语句[只有一个] value = "提交值")>

列表1

</option>

<option value = "提交值">列表2</option>

……

</select>

分组：<optgroup label = "分组名称"></optgroup>

列表式：<select name = "列表框名称" size = "显示的行数" multiple(如果允许多选，则写上该命令。)>

<option value = "提交值">列表1</option>

……

</select>

●浏览框：

<input name = "名称" type = "file" size = "显示长度" />

●按钮：<input type = "按钮类型（reset重置表单、submit提交表单、button普通按钮、）" name = "按钮名称" value = "按钮显示内容">

图形按钮：<input name = "" type = "image" src = "图片路径及名称" />

●多行文本框：

<textarea name = "文本框名称" cols = "每行中的字符数" rows = "显示的行数">

初始内容

</textarea>

●隐藏域：

<input name = "名称" type = "hidden" value = "提交值" />

●表单外框：

<fieldset>...</fieldset>定义围绕表单中元素的边框，

<legend>...</legend>legend为fieldset定义标题。

【6】所有表单元素，以input为例，必须包含type属性与name属性！

【7】input标注<lable>...</lable>：

<label>标注内容</lable>标签为input元素定义标注。lable元素的for属性应与相关元素的id属性相同。例如：

<label for = "man">男</label>

<input type = "radio" name = "sex" value = "男" id = "man">

label标记，可以点击里面的“男”而达到选中单选框的效果。

ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子？

(1). <ul> 无序列表：图文混排时使用，没有轻重缓急或者先后顺序之分。

●这是第一个列表

●这是第二个列表

●这是第三个列表

●这是第四个列表

(2). <ol>有序列表：适合于有先后顺序或者优先级的列表

1、这是第一个列表

2、这是第二个列表

3、这是第三个列表

4、这是第四个列表

(3). <li> 定义列表项，<ul>和<ol>都是用它

(4). <dl>, <dt>， <dd> 放在一起使用。<dl>用来定义 定义列表，而<dt>是用来定义定义列表中的每一项， <dd> 则是定义定义的描述信息。

对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记的更多相关文章

  1. XML常用标签的介绍

    1.引言 在使用Java时经常遇到使用XML的情况,而因为对XML不太了解,经常配置时粘贴复制,现在对它进行总结,以备以后使用. 2.XML常见的定义 (1)XML(Extensible Markup ...

  2. 潭州课堂25班：Ph201805201 django框架 第四课 模板常用标签，模板继承与引用，自定义过渡器 (课堂笔记)

    if 语句 判断传入的 name 值 建好这些文件后,对 url 进行配置 在浏览器中访问 for 循环 页面跳转: 通过  name 跳转时要在 urls 文件中为该 path 设置 name 带参 ...

  3. HTML-学习笔记（常用标签）

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  4. html常用标签学习笔记

    本文内容: 前言:本文讲述的内容包括几类常用标签,以及这些标签的一些常用属性(有一些属性由于已经有CSS样式来代替,所以对于一些不重要的这里选择不讲) 排版标签 段落标签:p div span 标题标 ...

  5. 范仁义html+css课程---2、html常用标签

    范仁义html+css课程---2.html常用标签 一.总结 一句话总结: html常用的标签有 标题标签.div.span.p.hr.br标签 等 1.html中的标题标签有哪些? <h1& ...

  6. JSP常用标签

    JSP常用标签可以理解为JSTL user:普通用户 admin:站点管理员 JSTL1.1.2下载地址:http://archive.apache.org/dist/jakarta/taglibs/ ...

  7. 0003 HTML常用标签(含base、锚点)、路径

    学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径的使用 1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...

  8. 【01】HTML_day01_03-HTML常用标签

    typora-copy-images-to: media 第01阶段.前端基础.HTML常用标签 学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径 ...

  9. Day 29：HTML常用标签

    软件的结构:  cs结构的软件的缺点:更新的时候需要用户下载更新包然后再安装,需要开发客户端与服务端.  cs结构软件的优点: 减轻服务端的压力,而且可以大量保存数据在客户端.  C/S(Client ...

随机推荐

  1. JAVA实现微信支付V3

    喜欢的朋友可以关注下,粉丝也缺. 相信很多的码友在项目中都需要接入微信支付,虽说微信支付已成为一个普遍的现象,但是接入的过程中难免会遇到各种各样的坑,这一点支付宝的SDK就做的很好,已经完成的都知道了 ...

  2. POJ 2704

    #include <iostream> #include <string> #define LL long long #define MAXN 100 using namesp ...

  3. Vue2.5开发去哪儿网App 第五章笔记 下

    1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...

  4. C#：WebBrowser控件的使用教程及相关问题整理

    推荐阅读: C#WebBrowser控件使用教程与技巧收集--苏飞收集 C# WebBrowser强制在本窗口打开,禁止在新窗口打开 C# WebBrowser禁止在新窗口打开,强制在本窗口打开(多种 ...

  5. Ubuntu安装Gogs服务

    花了半天的时间把阿里云的centos 换成了ubuntu 14.04 lts ,原因是因为我想安装个gogs git服务,但是centos的glibc版本太低,折腾了半天没有成功. 迁移Ghost数据 ...

  6. Android 开发工具类 36_ getSimSerial

    1 /** * 获取手机的 sim 卡串号 * 需要在清单文件中配置权限: * <uses-permission android:name="android.permission.RE ...

  7. 如何用Python来处理数据表的长宽转换（图文详解）

    不多说,直接上干货! 很多地方都需用到这个知识点,比如Tableau里.   通常可以采取如python 和 r来作为数据处理的前期. Tableau学习系列之Tableau如何通过数据透视表方式读取 ...

  8. mysql常用优化参数

    修改全站搜索 修改my.ini(my.cnf) ,在 [mysqld] 后面加入一行“ft_min_word_len=1”,然后 重启Mysql,再登录网站后台(模块管理->全站搜索)重建全文索 ...

  9. Python中bisect的使用

    在<Think Python>中第十章的练习中,涉及到了分半查找的bisect模块.为此,在网上查阅了Python中bisect模块的相关内容.有几个链接相对权威和明白: 1> ht ...

  10. mysql索引总结(4)-MySQL索引失效的几种情况

    mysql索引总结(1)-mysql 索引类型以及创建 mysql索引总结(2)-MySQL聚簇索引和非聚簇索引 mysql索引总结(3)-MySQL聚簇索引和非聚簇索引 mysql索引总结(4)-M ...