五道自测题-你我都应知道的HTML小知识

几天学习了HTML相关的基础知识之后，老师出了五道自测题，通过这几天学习的总结，和查阅相关文档，我也作出了自己的理解，以下是我学习的相关心得分享给大家。

1.HTML元素、标签和属性之间的关联与区别？

如果想要搞清楚HTML元素、标签、属性之间的关系，首先我们应该了解3个概念：

什么是HTML标签？
HTML标签由一对尖括号（'<'，'>'）包裹起来的对象，如<div>、 <h1>，<p>等等都叫标签。绝大多数的标签都是成对出现的，如，<div></div>、 <h1></h1>，<p></p>，但是也有例外，比方说换行符<br />，分割线<hr />，这些标签，开始标签和结束标签都是自身。
什么是元素？
一个HTML页面是由多个元素组成的，一个元素是由一对标签包含某些内容组成的，比如：<h1>Hello World</h1>，这个就是元素。
什么是属性？
给HTML元素附加各种样式的叫属性，它是以“属性名=属性值”这种名、值对形式出现的，需要注意的是，属性必须写在元素的起始标签中。

了解上述三个概念，我明白了，一个HTML页面就是由多个元素构成，元素是由标签描述，每一个元素的特征，都是由属性决定的。

2.为什么说HTML是结构化的文档?

根据W3C标准，HTML是一种Web语言，它是使用一些“标签”来定义网页内容的，例如我们在一个HTML文档中写<html xmlns="http://www.w3.org/1999/xhtml"></html>，就声明了一个HTML文档的开始，里面可以放各种标签，一个HTML文档是由以下结构构成的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
</body>
</html>

由以上代码不难看出，HTML结构层次分明，是一种具有结构层次的标记语言，通过这些标签可以告诉浏览器如何做出相应的解析。否则，如果HTML标签任意位置都能放置，就没法做标准高度统一了，那么浏览器也就无法做出正确的解析了。因此，我们看到的各种网页，都是通过这种具有结构化的标签组合而成的。

3.表单控件中的name属性为什么非常重要？

表单控件中的name值，是前端与后端进行交互时传值的变量名称，后端只有通过控件的name值才可以接收到该值进行相应的处理。

4.为什么现在都不再使用表格进行页面布局了？

1.页面布局不灵活；
2.代码的可读性：表格布局的代码可读性低，没有使用<div>， <h1>等标签直观；
3.表格加载速度慢；
4.不利于SEO；

5.一个元素，最终呈现的样式，由几方面的因素决定的？

1.继承的：根据元素在文档的结构和层级关系来确定它的最终样式；
2.浏览器客户端：用户代理样式（user agent style），基本上浏览器的表现样式都是一致的；
3.用户自定义：写在HTML文档<style>标签中的样式；
4.行内样式（内联样式）：写在元素的style属性中的样式。

以上就是我个人的总结，不知道是否完全正确，如果有错误的地方烦请各位指正，多谢大家。

：HTML 基本结构
<html> 标记放在 HTML 文件的开头，是一个形式上的标记；
<body> 标记称为主体标记，网页所要显示的内容都放在这个标记内，它是 HTML 文件的重要所在；
<head> 标记称为头标记，起的作用是放置关于此 HTML 文件的信息，如提供索引、定义 CSS 样式等；
<title> 标记称为标题标记，起的作用是设定网页标题；

2:开发中常用的标签
<b>文字以粗体方式显示</b>
<i>文字以斜体方式显示</i>
<u>文字以加下划线方式显示</u>
<s>文字以加下删除方式显示</s>
<big>文字以放大方式显示</big>
<small>文字以缩小方式显示</small>
<strong>文字以加强强调方式显示</strong>
<em>文字以强调方式显示</em>
<address>地址标签：xxxxxx@一只快乐的小码农.com</address>
<code>代码块</code>
align 属性控制段落的水平位置
bgcolor 属性设置背景颜色
无序列表 ul
有序列表 ol
2.1 段落标签<p>
2.2 换行标签<br>
2.3 标题标签<h1>~<h6>
2.4 文字居中标签<center>
2.5 文字段落缩进标签<blockquote>
<img src="">网页中嵌入图片（height+weigth属性调整图片大小）
<form action="" method="">表单提交
<align="">对齐方式-left+right+center...
<div></div>-设置块级元素
type="radio"-单选框
type="checkbox"-复选框
<select><option></option><select>-下拉菜单

基本符号代码转化

3：用 HTML 建立超链接
3-1框架之间的链接
3-1-1：//frameset框架标签中用rows属性将窗口分为上中下三部分
<frameset rows="30%,10%,*">
<frame>
<frame>
<frame>
</frameset>
3-1-2：//用src属性在框架中插入网页
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>
3-1-3//框架之间建立链接
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
</html>
4：下一节我们讲css和js

例

组合表单中的相关元素：

<form>

<legend>Personalia:</legend>

Name: <input type="text" size="30"><br>

Email: <input type="text" size="30"><br>

Date of birth: <input type="text" size="10">

</fieldset>

</form>

浏览器支持

目前大多数浏览器支持 <legend> 标签。

标签定义及使用说明

The <legend> 元素为 <fieldset>元素定义标题。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01中 "align" 属性已被废弃, HTML5不支持该属性。不建议使用。请使用 CSS 来设置 <legend> 元素的对齐方式。

属性

属性	值	描述
align	topbottomleftright	HTML5 不支持。 HTML 4.01 已废弃。不建议使用。请使用样式代替。为 fieldset 中的标题定义对齐方式。

全局属性

<legend> 标签支持全局属性，查看完整属性表 HTML全局属性。

事件属性

<legend> 标签支持所有 HTML事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：湖北尚诚云IT教育：html css javascr
下一篇：HTML5实现文件批量上传组件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。