HTML初学者入门学习教程笔记手册第二部分

lt;div>层元素
简介: 在页面层元素<div>用来将页面内容分割成各个独立的部分是块级元素。
用途：在每个<div>元素中，不仅可以包含文本内容，也可以包含图片、表单等其它内容，属性：在默认的情况下，<div>元素所包含的内容，将在新的一行显示
总结：块级元素，独占一行

id 标记属性
简介：给元素定义唯一标识
好处：方便在元素中使用行为
扩展：类似class属性的作用，用来调用级联样式表

class 调用样式属性
简介：class属性用来调用层叠样式表，也可以调用使用<link>元素链接外部样式表。
好处：方便使用和更改

实例：


  <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			.idepy{
				color: sandybrown;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
<p class="idepy">伊迪派</p>
	</body>
</html>

style 样式属性
简介：页面主体元素的样式属性，用来给页面内容定义级联样式表.
用途：包含style属性、class属性
理解：style是样式，想创建那个元素的样式，就写上那个元素的类型进行设置

实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				color: red;
				font-size: 55px;
			}
		</style>
	</head>
	<body>
伊迪派
	</body>
</html>

align 对齐属性
简介：对齐属性用来定义内容的水平对齐方式
用途:使用对齐属性，不仅可以控制文本内容的对齐，也可以控制文本中图片等内容的对齐

实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
我会居中显示
	</body>
</html>

<p> 段落元素
简介：用来定义一个段落
用途：可以包含文本、图片，以及用来修饰文本的元素，被<p>元素包含的内容，默认的显示方式是换行显示
理解：块级元素，独占一行

实例:

<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>

<br> 换行元素
简介：换行元素<br>用来使被分割的文本换行显示

实例：

 换行元素<br>我在下一行

<pre> 保留格式元素
简介：保留格式元素<pre>用来使包含的内容，按照文档源代码的格式显示
用法：因为浏览器的默认显示方式中，将压缩多个空格为一个，同时忽略换行等空白符号

实例：

<pre>
	我是测试文本                                     前面空格被保留
	我不需要换行符
</pre>

<hr> 水平分割线元素
简介：水平分割线元素<hr>用一条一定高度的分割线，分割页面内容
高度属性：水平分割线的厚度属性size，用来定义水平分割线的粗细
宽度属性：水平分割线的宽度属性width，用来定义水平分割线的宽度
注意：style内定义高度宽度属性徐加px

实例：

<hr size="5" width="500">

<b> 加粗元素
简介：用来使包含的文本加粗显示
理解：是一个物理标签，它所包围的字符将被设为bold（粗体）

实例：

<b>加粗元素</b>

<i> 斜体显示元素
简介：用来使包含的文本内容以斜体的方式显示
理解：是一个物理标签，它所包围的字符将被设为Italic(斜体)

实例

<i>斜体显示元素</i>

<em> 斜体强调元素

<em>斜体强调元素</em>

<strong> 加粗强调元素
简介：是一个逻辑标签，它的作用是加强字符的语气一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。

实例：

<strong>加粗强调元素</strong>

<big> 放大元素
简介：放大元素<big> 用来使包含的文本增大一号显示
注意：当文本内容已经是最大字号时，将不能继续增大。

实例:

我是没有放大<big>我是被放大一号的<big>

<small> 缩小元素
简介：缩小元素<small> 用来使包含的文本缩小一号显示
注意：当文本内容已经是最小字号时，将不能继续变小。

实例：

我是没有缩小<small>我是被缩小一号的</small>

<sup> 上标元素
简介：用来使包含的文本内容以上标的方式显示
用途：元素中的文本的底部，将在普通文本的一半高度上显示

实例：

上标元素<sup>我是上标部分</sup>

<sub> 下标元素
简介：用来使包含的文本内容以下标的方式显示
用途：元素中的文本的顶部，将在普通文本的一半高度上显示

实例：

下标元素<sub>我是下标部分</sub>

今主流的技术中，可以分为前端和后端两个门类。

前端：简单的理解就是和用户打交道

后端：主要用于组织数据

而前端就Web开发方向来说，分为三门语言， HTML、CSS、JavaScript

语言	作用
HTML	描述页面的结构，类似于动物的骨架
CSS	渲染技术，使得页面更好看，也可以一定程度的让页面动起来
JavaScript	实现和后端的交互，数据验证、收发等功能

HTML的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面面的一段代码既表示一段HTML的结构，它表示生成了一个空白的HTML网页

组成HTML的元素称为标签，标签的结构分为两种

有开始标签和结束标签的如 <html> </html>
有单标签的，例如 <img/> ，单标签中的 / 即表示标签的闭合， / 符号不写也是可以的

下面这段HTML代码包含的标签解释如下

<!DOCTYPE html> 声明类型，意思为超文本语言类型。

<!DOCTYPE html> 是一种HTML5的规范写法，在HTML发展过程中还有以下的几种声明方式

<!DOCTYPE html> html5规范， html的第一行必须为此值

<!--html4 严格版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "<http://www.w3.org/TR/html4/strict.dtd>">

<!--html4 过渡版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "<http://www.w3.org/TR/html4/loose.dtd>">
<!--html4 框架版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "<http://www.w3.org/TR/html4/frameset.dtd>">

关于html4的声明类型，可以参考:
<https://www.w3.org/TR/html4/sgml/dtd.html>

html 最外层的一个跟节点，里面的所有元素都是它的子元素

<!--lang属性表示使用英文，如果是中文，可以改成zh, 非严格属性也可以不写-->
<html lang="en">

</html>

head 头标记，整个网页的全局属性都会写在这个里面
body 网页的主体部分，用户可以直观感受到的显示内容的部分
meta 标签，标记原数据，可以规定网页的字符、缩放比例等信息


<!--规定字符集使用UTF-8, UTF-8 涵盖全球所有的国际和民族的文字和大量图像, UTF-8 规定一个字符占3个字节-->
<meta charset="UTF-8">

title 标题标签,标题的内容会在浏览器的tab页中显示

lt;hr>：画一条直线

1.<h1></h1>~<h6></h6>

2.<meta>标签

（1）描述文档类型和字符编码

（2）提供搜索关键字和内容描述信息，方便搜索引擎的搜索

例：<head>

平台，提供各类服饰、美容、家居、数码、……" />

</head>

3.HTML标签分类（方便后续的布局设计）：

块级标签：显示为“块”状，前后隔一行

行级标签：按行逐一显示

分类好处：方便后续的布局设计

4.有序列表标签：ol li

5.无序列表标签：ul li

6.定义描述标签：dt是块状标签，所以常用于图文混编的布局场合

<dl>

……

</dl>

7.表单form,一般和table一起使用：

<form>

<table>

<tr>

</tr>

.....

</table>

</form>

8.请说出实际开发常用的4种块状结构是什么？

（1）.div-ui(ol)-li:常用于分类导航栏或者菜单等

（2）.div-dl-dt-dd:常用于图文混编场合

（3）.table-tr-td:常用于图文布局或显示数据

（4）.form-table-tr-td：常用于布局表单，登录，注册……

9.图像标签：

alt:当图片刷新不出来显示这个文字

title:鼠标放在图片上显示的文字

10.链接标签

11.特殊符号：

空格：

大于：>1、因为<、>等符号在HTML中已使用，所以必须用其他符号来代替,都以分号结束（；）

小于：<

引号：&quot

版本号：©

12.各种功能表单元素

会持续更新哦！免费学习资源。

在线咨询

上一篇：为什么选择HTML5Plus这《土土》的技术
下一篇：阻止关闭或刷新浏览器？分享 1 段优质 JS 代码片段！

您的项目需求

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

整合营销服务商

HTML初学者入门学习教程笔记手册第二部分

HTML的结构

您的项目需求