java中的HTML如何学整理分享

　　1 概念

　　1.1什么是HTML

　　全称：HyperText Markup Language

　　超文本标记语言，标准通用标记语言下的一个应用。

　　“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

　　超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

　　通俗的说就是用来写网页的。

　　为什么可以上网？

　　浏览器将服务器上的内容下载到本地，然后渲染成网页，这样就看到了网页。

　　2 HTML的基本架构

　　2.1快速入门，编写第一个HTML网页

　　[1]创建一个TXT文件

　　[2]将txt文件的后缀修改为htm或者html

　　关于HTM和HTML有区别吗？

　　没有任何区别，早先（不知道有多早）的操作系统只认识3位后缀名。所以为了兼容早先的操作系统，才有了htm这样的后缀。实际的应用这两种没有任何区别。

　　[3]打开文件

　　①双击打开，就是用默认的浏览器打开”浏览”。浏览就是查看网页的效果。

　　②以编辑的形式打开。

　　右键 –》

　　选择任何一个开发工具都可以，我们选择记事本（为了装X）。

　　[4]编辑和测试

　　测试的浏览器选择：

　　当然还有更多的浏览器。

　　我们选择使用谷歌浏览器。

　　开始编辑HTML文件

　　在其中写一句话“我的HTML”

　　刷新网页：

　　其实HTML有专门的结构。

　　Tips：html是不区分大小写的。但是尽量小写。

　　标签：参照XML的标签理解

　　结构：

　　结构展示：

　　3 HTML标签的深度理解

　　Tips：HTML是纯文本文件。所有的程序文件都是纯文本文件。

　　以文本来修饰文本。

　　关键词“语意”。

　　标签实际上是表达一种语意。

　　比如：

　　添加CSS修改样式：

　　HTML标签只是表示一种语意。并不是规定标签中的内容应该展示成什么样子？展示的样子基本上都是由CSS控制。

　　4 常用标签

　　4.1结构标签

　　[1]文档申明：

　　HTML5

<!DOCTYPE html>

　　HTML 4.01 Transitional

　　该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

　　"">

　　[2]HTML标签

　　HTML标签是HTML文档的根节点。

　　[3]HEAD标签

　　表示HTML文档的头部，一般都是用来做一些文档的配置或者说明。

　　比如title标签：title标签是用来表示文档的标题的。

　　Meta

　　置页面的内容类型

　　配置网页简介

　　网页的关键字

　　对CSS和JS的引用：

　　[4]body

　　所有要展示的内容全部编写在body标签中。

　　4.2[插播]开发工具的选择

　　（几乎已经绝迹，不好用有bug）

　　HBuilder （好用，一个不错的选择）

　　subline （好用，神器）我们的选择

　　webstorm（好用）

　　将我们的HTML文件拖拽到开发工具中。

　　4.3 常用的标签

　　[1]标题标签

　　表示在文档中添加一个标题。标题分为6级，分别是h1…h6。

　　案例：

　　特性：默认黑体字。默认自动换段落。独占一行。

　　[2]P标签表示段落。

　　默认表现形式，就是换段。

　　默认特征：自动换行换段，独占一行。

　　[3]特殊的控制标签

　　换行标签 br 自闭和标签

　　HTML默认不认识换行符。

　　必须使用换行符号表示换行。

　　换行和换段的区别

　　空格标签

　　在HTML中依然不认识空格。

　　无论写多少空格，浏览器只认识一个空格。

　　解决办法就是使用

　　双引号的表示形式 "

　　因为双引号在网页中有特殊的意义，所以理论上不能直接编写，要使用特殊的符号代替。

　　Tips：在不产生歧义的情况下，直接编写也是没有问题的。

尖角号的表示形式 > <

　　尖角号在网页有特殊的意义，表示标签的开始和结束，所以不能直接编写。

浏览器将<igeek>解释成一个标签了。但是不认识此标签，所以不展示。

　　所以使用特殊符号代替尖角号：

　　在没有歧义的情况下，一般也能解释运行。例如：

　　版权符号 ?

　　[4]分割线 hr

　　其实就是一根线

　　4.4[插播]属性

　　HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

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

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

　　例如前面说过的meta标签：

　　案例：

　　其中的3个属性：

　　Size ：表示线的厚度，使用数字表示像素。

　　Color：表示线的颜色，可以使用多种表现形式。

　　Width：表示线的长度，默认单位是像素。

　　4.5 [插播]color的值的编写形式

　　所有地方使用到color时都是一样的编写形式。

　　用英文字母。上面的例子中用的就是英文字母。

　　使用16进制的数字表示。（推荐使用）

　　例如：#FF0000

　　其中有6个数字，每两个数字为一组，表示一种颜色，总共表示3中颜色，（RGB）。

　　每一种颜色的范围是 00——FF

　　所有颜色最大为白色，所有颜色最小为黑色。

　　使用函数，这种形式往往在CSS中使用

　　rgb(255,0,0) 3个参数表示rgb颜色的占比。范围是0——255。

　　rgba(255,0,0,.2) 4个参数，前三个和上面的一样。第四个参数表示透明度，.2就是0.2

　　4.6 Font标签

　　注意：此标签已经属于被废弃的标签。主要是用来控制字体的。但是字体其实应该使用CSS控制，所以此标签被废弃了。我们学习纯粹为了今天的作业。

极客营

　　三个属性：

　　Size ：表示字体的大小。范围是 1——7。默认是3 ，可以写具体的数组，也可以写 +2。

　　Face: 字体，编写字体名称。

　　Color：表示字体的颜色。

　　案例：

　　4.7常用标签中的超链接和图片

　　[1]图片标签

<img src=> 可以显示一张图片。

　　S1:Src：指向图片的位置（具体的物理位置，url地址。）物理地址可以使用绝对路径，也可以使用相对路径。

　　案例：

　　通过url显示网络上的图片：

　　S2 : 调整图片大小的属性

　　Width: 设置图片的宽度。

　　Height：设置图片的高度。

　　案例：

　　让图片不变形：让尺寸按照比例变化。

　　S3 : 图片提示的属性

　　Alt：当图片显示失败的时候的提示内容。

　　Title：当鼠标悬浮在图片上的时候的提示内容。

　　案例：alt属性

　　案例：title属性

　　S4: 图片的对其方式的属性 align 默认是 bottom。

　　这里的对其方式其实是说图片相对于同一行的其他内容的对其方式。

　　案例： left

　　案例：right

　　案例：center

　　案例：top

　　案例：bottom

　　[2]超链接标签

<a href=> 超链接内容 </a>

　　其中的href指向连接资源。一个完整的超链接必须有HREF属性。不然只是一个a标签而已。

　　案例：

　　超链接同样可以指向本地资源

　　Target属性：主要是设置连接的内容显示在什么位置？

　　默认是_self 显示在当前页面的位置。

　　_blank :显示在一个空白的选项卡中。

　　锚标记

　　常见的案例：章节的跳转，回到顶部

　　5 结构控制标签

　　5.1列表

　　5.1.1有序列表

<ol>

　　…….

</ol>

　　Type属性：设置列表顺序的表示形式（1，A，a，i，I）

　　Start属性：设置列表的开始位置。

　　案例：

　　5.1.2无序列表

<ul>

　　…….

</ul>

　　无序列表和有序列表的唯一区别就是没有序号。

　　案例：

　　Type属性：设置条目前面的图标形式（circle，disc，square）

　　5.1.3 列表的嵌套使用

　　案例：

　　5.2表格

　　Table：表示一个表格

　　Tr：表示一行

　　Th：表示一个表头的单元格

　　Td：表示一个普通的单元格

　　编写一个三行三列的表格：

　　编写方法就是逐行编写。每行编写固定的单元格即可。

　　Th标签表示表头，默认会自动居中加粗。

　　Table标签的属性：

　　Border：设置表格的边框，默认是0。一旦设置了之后，表格外围的边框就是指定的数字，单元格的遍就是1.

　　Width和height：指定表格的宽度和高度的，默认情况下，各行各列都是按需分配。

　　Align：表格的对其方式（left，right，center）。

　　Cellspacing属性：设置单元格之间的距离。一般情况下都是0.

　　称之为：间距

　　Cellpadding属性：设置单元内容和边框之间的距离

　　称之为：填充距。

　　不规则表格

　　需求：（三行三列）

　　第一行两个单元格，其余的都是三个单元格，第一行的第二个单元格跨两列。

　　跨行表格：

　　每一个td的属性：

　　Width：可以通过设置一个单元格的宽度而设置整列的宽度

　　Tips:单元格的宽度同样可以使用百分比设置。

　　Align：设置单元格的水平对其方式

　　Valign：设置单元格元素的垂直对其方式

　　6 其他标签

标签规定粗体文本。

标签规定重点文本。同样会让文本粗体。

斜体文本。

下划线。

　　。。。

　　以上标签基本上都可以使用CSS实现。

　　7 案例（百度首页）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</td>

更多产品

</td>

</tr>

</td></tr>

</div>

</td></tr>

百度

</td></tr>

<a href="">把百度作为首页</a>

<a href="">About Baidu</a>

</td></tr>

?2018 百度

<a href="">使用百度前必读</a>

京ICP证030173号<img src="">

<a href="">京公网安备11000002000001号<img src=""/></a>

</td></tr>

</table>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60272.shtml