04001_HTML简单介绍
1、超文本标记语言
（1）超文本：比普通文本功能更加强大；
（2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！
2、HTML语法和规范
（1）所有的html文件后缀名都是以.html或者.htm结尾的，建议使用.html结尾；
（2）整个html文件分别由头部分<head></head>和体部分<body></body>组成；
（3）Html标签都是由开始标签和结束标签组成，单标签除外（<br />）；
（4）html不区分大小写，建议使用小写。
3、标题标签
（1）标题标签使用<hn></hn>，n从1到6逐渐变小，超过6的按照6进行显示；
（2）代码演示：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>标题标签</title>
</head> <body>
<!--标题标签 -->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</body> </html>
运行结果：
4、注释标签
<!--注释-->
快捷键是Ctrl+/
<!--标题标签 -->
5、水平线标签
（1）水平线标签<hr /> ；
（2）size属性：水平线的高度，单位像素；
（3）noshade属性：没有阴影，取值noshade，表示显示纯色。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>标题标签</title>
</head> <body>
<!--标题标签 -->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<hr />
<h4>我是标题4</h4>
<!--描述：size属性：水平线的高度，单位像素-->
<hr size="5" />
<h5>我是标题5</h5>
<!--noshade属性：没有阴影，取值noshade，表示显示纯色-->
<hr noshade="noshade" />
<h6>我是标题6</h6>
</body> </html>
运行结果：
6、段落标签<p></p>
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>段落标签</title>
</head> <body>
<p>1、超文本标记语言</p>
<p> （1）超文本：比普通文本功能更加强大；</p>
<p> （2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！</p>
</body> </html>
运行结果：
7、字体标签
（1）字体标签<font></font>，必须结合其属性才能具备一定的样式效果 ；
（2）color：指定内容的颜色，可以死英文单词，也可以是十六进制；
（3）size：指定内容的大小；
（4）face：指定内容的字体；
（5）<b<</b>：加粗；
（6）<i></i>：斜体；
（7）<u></u>：下划线。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<font color="red" size="1">我是字体标签</font><br />
<font color="red" size="2">我是字体标签</font><br />
<font color="red" size="3">我是字体标签</font><br />
<font color="red" size="4">我是字体标签</font><br />
<font color="red" size="5">我是字体标签</font><br />
<font color="red" size="6">我是字体标签</font><br />
<font color="red" size="7">我是字体标签</font><br /> <body>
</body> </html>
运行结果：
8、图片标签
（1）图片标签：<img /> ；
（2）图片的位置属性：src；
（3）绝对路径：带有盘符的；
（4）相对路径：
①同一级的，直接写文件名或者./文件名称；
②上一级：../文件名称（如果是多层，那么多写几个../）；
③下一级，写目录名称/文件名称。
（5）width：设置图片的高度，取值可以是像素值，也可以是百分比；
（6）height：设置图片的高度，取值可以是像素值，也可以是百分比；
（7）alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<!--alt是当图片无法正常显示出现的提示-->
<!--关于src路径的问题：
不写或者./是当前目录;
../当前文件的上一级;
上上一级是../../
-->
<img src="../googlelogo.png" width="272px" height="92" alt="logo图标" /> <body>
</body> </html>
运行结果：
9、列表标签
（1）无序标签
<ul type="">
<li></li>
</ul>
属性：有三个取值。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>无序列表</title>
</head> <body>
<!--默认是disc,实心圆；circle是空心圆；square是实心方框-->
<ul type="square">
<li>google</li>
<li>百度</li>
<li>搜狗</li>
</ul>
</body> </html>
运行结果：
（2）有序列表
<ol type="I" start="" reversed="reversed">
<li></li>
</ol>
属性：有5个取值；start是开始的序数；reverse是倒序。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>有序列表</title>
</head> <body>
<!--默认是数字1、2、3；start是开始的序数；reversed是倒序；type是数字或者英文等类型-->
<ol start="6" reversed="reversed" type="a">
<li>google</li>
<li>百度</li>
<li>搜狗</li>
</ol>
</body> </html>
运行结果：
10、超链接标签
<a href=“” target="">超链接</a>
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head> <body>
<!--_self是在来的窗口打开超链接，_blank在一个新的窗口打开超链接-->
<a href="http://www.cnblogs.com/gzdlh/" target="_blank">gzdlh博客园</a>
</body> </html>
运行结果：
11、表格标签
<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
属性：
①边框：border；
②宽度：width；
③高度：height；
④背景颜色：bgcolor；
⑤边框与边框：cellspacing；
⑥边框与内容：cellpadding；
⑦居中显示align 。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表格标签</title>
</head> <body>
<table border="1px">
<tr >
<td>11</td>
<td>12</td>
<td>13</td>
</tr> <tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr> <tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body> </html>
运行结果：
12、跨行跨列操作
跨行：rowspan；
跨列：colspan。
13、框架集结构标签
（1） <frameset rows="" cols="">
<frame src=""/>
<frame name=""/>
</frameset>
属性：
①cols：进行垂直切割划分，可以切割为任一快（参数的值相加=100%，其中一块可以使用*表示）；
②rows：进行水平和切割划分，可以切割为任一快（参数的值相加=100%，其中一块可以使用*表示）；
（2）一旦划分区域后，我们需要对具体的区域进行内容的填充，此时需要使用<frame></frame>:；
属性：
①src：指定区域显示的文件（路径）；
②name：它通常会结合超链接的target属性使用，来定义最终的显示位置。
（3）代码演示：
①左侧内容
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
左侧内容
</body> </html>
②右侧内容
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
右侧内容
</body> </html>
③框架集标签
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>框架集标签</title>
</head>
<!--不需要body-->
<frameset cols="25%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset> </html>
运行结果：
15、参考文档：W3CSchool全套Web开发手册链接：W3CSchool全套Web开发手册密码：z99r
04001_HTML简单介绍的更多相关文章
- [原创]关于mybatis中一级缓存和二级缓存的简单介绍
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
- 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍
一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...
- 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...
- yii2的权限管理系统RBAC简单介绍
这里有几个概念 权限: 指用户是否可以执行哪些操作,如:编辑.发布.查看回帖 角色 比如:VIP用户组, 高级会员组,中级会员组,初级会员组 VIP用户组:发帖.回帖.删帖.浏览权限 高级会员组:发帖 ...
- angular1.x的简单介绍(二)
首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...
- Linux的简单介绍和常用命令的介绍
Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html ...
- iOS-iOS开发简单介绍
概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...
- iOS开发多线程篇—多线程简单介绍
iOS开发多线程篇—多线程简单介绍 一.进程和线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 比如同时打开QQ.Xcod ...
- iOS开发UI篇—UITabBarController简单介绍
iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...
随机推荐
- Allure对单测结果以及robotframework结果的处理
Allure对单测结果以及robotframework结果的处理 Allure只能针对pytest的单测结果生成相应的报告: 如果需要对unittest的测试框架结果进行展示,可以使用pytest执行 ...
- [GZOI2016] 亚索的量子实验【分块】
第二题 亚索的粒子实验 [问题描述] 亚索是一名伟大的科学家,他最近在做一个粒子的实验,粒子初始有一定的能量,实验过程中倘若第i个粒子被注入k能量,那该粒子就会增加k能量,同时由于辐射作用,第2i,3 ...
- QQ文件没有读取权限，60017导致QQ无法登陆的终极解决办法
每隔一段时间,我的QQ就无法登陆,提示:QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法 点击了解详情发现里面的解决办法根本不起作用,网上 说的各种解决办法都不起作用,解决办法如下 1. ...
- jmeter（一）工具介绍（一）
一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...
- 为什么JAVA虚拟机分为线程共享和非线程共享?
大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) , VM Stack(虚拟 ...
- [转]ASP.net MVC 2 自定义模板来显示数据
本文转自:http://blog.163.com/liaojunbo@126/blog/static/1394892972012113104653651/ 在ASP.net MVC 2中,一个很有意思 ...
- Webform 内置对象 Response对象、Request对象，QueryString
Request对象:获取请求Request["key"]来获取传递过来的值 QueryString:地址栏数据传递 ?key=value&key=value注意事项:不需要 ...
- mysql之修改字符编码
目录 统一修改字段编码 修改单个字段编码 修改表字符编码 统一修改字段编码: alter table `tablename` convert to character set utf8; 修改表字符编 ...
- git + git flow 的简单介绍
1.git简单实用 git:是一种分布式版本控制系统,因为其优秀的特性个人十分推崇. 1.1设置本机用户身份 git config -global user.name "userName&q ...
- STM32编程环境配置（kile5）
2018-08-2513:53:33 折腾了很久,花了两天的空闲时间终于烧进去程序了.完成了kile5对stm32编程的环境配置. 1.下载kile5 激活破解 2.安装stm32配置环境 3.加载工 ...