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. yarn 切换 设置 镜像 源

    1.查看一下当前源 yarn config get registry 2.切换为淘宝源 yarn config set registry https://registry.npm.taobao.org ...

  2. Tomcat 部署多个项目出现错误

    有时,我们会遇到部署同样项目可是不同版本号来回切换的问题.可是有时就是莫名奇异的会起不来. 也没太多时间去解决这些问题,所以就又一次把纯净版的Tomcat部署进去就能够了. 我想非常有可能就是Tomc ...

  3. PHP,PSR开发规范

    https://github.com/hfcorriez/fig-standards/tree/zh_CN/%E6%8E%A5%E5%8F%97 PSR-1-basic-coding-standard ...

  4. [转]Redis cluster failover

    今天测试了redis cluster  failover 功能,在切换过程中很快,但在failover时有force 与takeover 之分 [RHZYTEST_10:REDIS:6237:M ~] ...

  5. 关于java多线程中异常捕获的理解

    在java多线程程序中,所有线程都不允许抛出未捕获的checked exception(比如sleep时的InterruptedException),也就是说各个线程需要自己把自己的checked e ...

  6. maven手动安装本地jar到仓库

    1.有时候IDE maven下载不到jar,这时候可以在官网下载对应jar后安装到maven仓库. 下面以jdbc jar为例子,安装命令: mvn install:install-file -Dgr ...

  7. crawler_exa4

    优化中... #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqma ''' 获取漏洞目标站点:绿盟安全漏洞通告 v1.0: 由于 ...

  8. MobaXterm v10.9破解

    去官网下载个人版 Exeinfo查壳发现无壳 载入OD,右键,字符串智能搜索. Ctrl+F搜索关键词About,找到到FormAbout处,即关于窗体的创建和显示的位置.双击查看汇编代码 程序在窗体 ...

  9. 怎么让self.view的Y从navigationBar下面开始计算

    原文地址 http://blog.sina.com.cn/s/blog_1410870560102wu9a.html 在iOS 7中,苹果引入了一个新的属性,叫做[UIViewController s ...

  10. SAP从入门到精通 知识体系

    初步认识 SAP标准课程培训 详细信息点击: SAP从入门到精通课程 标准培训主要是基于SAP标准的课程架构,定期在SAP的培训中心面向广大SAP客户开设公开课.培训过程中会应用SAP标准的教材内容, ...