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. Delphi及C++Builder经典图书一览表（持续更新中2018.01.02）

    序号 书名 原版书名 作者 译者 出版社 页数 年代 定价 备注 1 C++Builder 5程序设计大全 C++Builder 5 Developer's Guide Jarrod Hollingw ...

  2. EditPlus 自用正则替换

    分享下自己用EditPlus 的一些些正则技巧,editplus版本v3.5.1 1.替换a标签链接地址为空 例如: 把所有的 1 <a href="..囧.."> 替 ...

  3. IoC之AutoFac（三）——生命周期

    阅读目录 一.Autofac中的生命周期相关概念 二.创建一个新的生命周期范围 三.实例周期范围 3.1   每个依赖一个实例(InstancePerDependency) 3.2  单个实例(Sin ...

  4. 关于java中死锁的总结

    关于死锁,估计很多程序员都碰到过,并且有时候这种情况出现之后的问题也不是非常好排查,下面整理的就是自己对死锁的认识,以及通过一个简单的例子来来接死锁的发生,自己是做python开发的,但是对于死锁的理 ...

  5. 使用DotfuscatorPro_4.9对软件dll库进行加密

    点击settings选项,Disable String Encryption改成NO,具体里面的设置如下图. 再点击Rename选项下的options,左边的选项勾上,再把Renaming Schem ...

  6. C# 托管内存与非托管内存之间的转换

    c#有自己的内存回收机制,所以在c#中我们可以只new,不用关心怎样delete,c#使用gc来清理内存,这部分内存就是managed memory,大部分时候我们工作于c#环境中,都是在使用托管内存 ...

  7. guid与Base64编码互相转换

    guid的长度比较长,本文提供一种方法,将guid转为base64字符串,只有22位长度,比较好! 参考:https://blog.csdn.net/tgghfbflishuai/article/de ...

  8. 微信小程序——购物车结算

    项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减 ...

  9. 以太坊客户端Geth命令用法-参数详解【转载】

    原文链接:http://www.cnblogs.com/tinyxiong/p/7918706.html Geth在以太坊智能合约开发中最常用的工具(必备开发工具),一个多用途的命令行工具.熟悉Get ...

  10. myeclipse及Eclipse中.classpath、.project、.settings、.mymetadata（myeclipse特有）介绍

    引言 今天在创建java项目的时候遇到了很多的错误,在解决的过程中遇到了一些根本不知道什么作用的文件,然后按照网上的一些做法可以将问题解决,但是这也说明我们在学习的时候很多基础和细节的地方是我们薄弱的 ...