1.什么是HTML？(Hyper Text Markup Language:超文本标记语言)
超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言)

2.为什么要学习HTML？

3.语法和规范？
HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写，建议使用小写。

4.HTML相关标签学习
标题标签<hn />
水平线标签 <hr />
段落标签<p></p>
字体标签<font></font>
属性：size:指定内容的大小
color：指定内容的颜色
face：指定内容的字体
加粗：<b></b>
斜体：<i></i>
下划线：<u></u>

5.步骤分析：
①创建一个html文件
②创建一个标题标签显示公司简介
③创建一条水平线标签
④创建四个段落标签

案例二：网站图片显示页面
1.图片标签
<img />
属性：
src:指的是图片显示的路径(位置)
绝对路径：E:\Users\ThinkPad\Desktop\0703JavaEE就业班\WEB01_HTML\资料\WEB01\image
相对路径：
①同一级：直接写文件名称或者./文件名称
②上一级：../文件名称
③下一级：写上目录名称/文件名称
width:指定图片的宽度，取值可以是像素值，也可以是百分比
height：指定图片的高度，取值可以是像素值，也可以是百分比
alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

案例三：网站友情链接显示页面
1.列表标签
有序列表：
<ol type="I" start="" reversed="reversed">
<li></li>
</ol>
无序列表：
<ul type="">
<li></li>
</ul>

2.超链接标签
<a href="" target=""></a>
href:指定跳转的位置
target：指定跳转页面显示的位置(取值：_self 、_blank)

案例四：网站首页显示页面
1.表格标签
<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>
2.跨行跨列操作
跨行：rowspan
跨列：colspan

案例五：网站后台系统页面
框架集标签：
<frameset rows="" cols="">
<frame src=""/>
<frame name=""/>
</frameset>

HTML01的更多相关文章

  1. html01. <!DOCTYPE html>

    解释 在HTML文档初,往往会有这么一句话<!DOCTYPE html>,它是html5标准网页声明,全称为Document Type HyperText Mark-up Language ...

  2. HTML的doctype和编码

    DOCTYPE Doctype是为了告诉浏览器用哪种版本的html去解析指令,必须位于第一行,在某些版本中需要引入DTD,html5无需引入DTD 中文乱码 原因 浏览器解析代码的编码格式与源代码编码 ...

  3. HTML之DocType的几种类型 -转载

    HTML之DocType的几种类型转载 doctype类型详细doctype的几种类型html之doctype 分类: 前端文摘  在默认情况下,FF和IE的解释标准是不一样的,也就是说,如果一个网页 ...

  4. Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

    怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...

  5. 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode

    近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...

  6. Doctype的作用

    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,也就是定义文档类型. 所有的浏览器都需要两种模式:怪异模式和严格模式 ...

  7. <!DOCTYPE html>很重要

    噩梦开始的源头:之前写html或者jsp页面,从来不注意doctype的声明,也不太明白doctype的作用.直到最近碰到了一个非常奇葩的 bug:某一个页面在IE7和8,Chrome,ff等下正常, ...

  8. <!DOCTYPE html>作用

    1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明 ...

  9. <!DOCTYPE>标签的定义与用法

    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!DOCTYPE> 声明 ...

  10. <!DOCTYPE html PUBLIC 导致js代码不可用

    在有了这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. 修改Electron的libcc(libchromiumcontent)源码，重新编译electron， 设置event.isTrusted为true

    VPN非常注意: 编译的过程需要使用VPN, 否者chromium的源代码无法下载, 后面会出现总总问题 Electron的编译环境, 推荐使用物理机: win10 64位 英文版, 为了避免后期出现 ...

  2. Sandcastle Help File Builder（.NET帮助文档工具）的版本选择心得——支持VS2010至VS2015，高版本项目文件问题

    作者: zyl910 一.缘由 "Sandcastle Help File Builder"(简称SHFB)是一个很好用.NET 帮助文档生成工具. 但它的每个版本支持的VS版本范 ...

  3. iOS 可高度自定义的底部弹框

    技术: iOS Objective-C   概述 一个可以让开发者通过编写 tableView 的内容随心所欲的定制自己想要的底部弹框 详细 代码下载:http://www.demodashi.com ...

  4. SELECT INTO和INSERT INTO SELECT的区别 类似aaa?a=1&b=2&c=3&d=4，如何将问号以后的数据变为键值对 C# 获取一定区间的随即数 0、1两个值除随机数以外的取值方法(0、1两个值被取值的概率相等) C# MD5 加密，解密 C#中DataTable删除多条数据

    SELECT INTO和INSERT INTO SELECT的区别   数据库中的数据复制备份 SELECT INTO: 形式: SELECT value1,value2,value3 INTO Ta ...

  5. 移动开发常用meta设置

    <!-- 视图窗口,移动端特属的标签. --> <meta name="viewport" content="width=device-width,in ...

  6. 【Java基础】Java注解简单入门

    注解简单来说就是配置,是特别的配置,之前常用的配置文件,可以用注解替换.然后通过反射去获取注解的信息. 如何定义一个注解 你在IDE中新建一个注解定义,是这样的结构的: package com.nic ...

  7. kernel事件通知userspace

    https://stackoverflow.com/questions/31646466/how-to-send-signal-from-kernel-to-user-space

  8. windows保存的文件传输到linux中格式转换

    直接从window传输到linux的脚本执行时,会出现以下错误. -bash: xxx: /bin/sh^M: bad interpreter: No such file or directory 解 ...

  9. .net reactor使用教程（一）——界面各功能说明(转)

    概述:安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.chm,目前没有中文版本,里面详细介绍了.net reactor的各功能及使用场景.   安装了.net ...

  10. 揭秘Java热部署原理及JRebel(Hotcode)的实现原理

    基础知识:class卸载.热替换和Tomcat的热部署的分析HotSwap:HotSwap和JRebel原理成熟的热部署技术实现原理:深入探索 Java 热部署 java的热部署和热加载