本文档并非个人所写，只是方便自己参考：

案例1-网站信息展示
需求:
在页面展示一些文字信息,需要排版
技术分析:
html:超文本标签语言
////////////////////
html:
作用:展示
超文本:超越了一般文本,描述文本的字体 颜色 图片
标签:标记
html书写规则:
文件的后缀名 .html(建议) 或者 .htm
标签必须用 <> 引起来 已经定义好的标签
属性
格式: key="value"
建议属性的值用引号引起来.
不区分大小写
注意:
最好将所有的内容放在一个标签中 <html></html>
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签的称之为空标签 <br/>
开始标签和结束标签之间的内容称之为标签体.
<!--注释内容--> html页面中的注释
标签必须正常嵌套,
标签最好关闭
文件标签:
html标签:
声明当前网页为html页面
子标签:
<head></head>
<body></body>
head:用来存放当前页面的重要信息,一般不展示在html页面上
常见的子标签:
<title></title> 网页的标题
body:
要展示的数据放在body中
标题标签:
<hn></hn>
n取值 :1~6
h1最大 h6最小
自动换行 且留白 默认加粗
常用属性:
align:对齐方式
left:左 right:右 center:居中
格式:
<h2 align="center"></h2>
//////
字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
<font></font>
常用属性:
face:字体
size:尺寸
color:颜色
颜色的取值:(RGB)
方式1: #xxxxxx x为16进制
方式2: 英文单词
段落标签:
<p></p>
其他标签:
<b></b> <strong></strong>加粗
<i></i> 斜体
水平线
<hr/>
换行
<br/>
//////////////////////////
案例1-步骤分析:
1.新建一个html页面
2.标题标签
3.添加一个水平线
4.4个段落
5.添加字体颜色 加粗 斜体
/////////////////////
案例2-图片网页展示
需求:
在一个页面中展示多张图片
技术分析:
<img/>
图片标签:★
<img/>
常用属性:
★src:图片的路径
alt:替代文字
title:移上去显示的文字
width:宽
height:高
大小的写法:
像素:123px
百分比:20%
路径的写法:
相对路径:
./ 或者 什么都不写 当前目录
../ 上一级目录
绝对路径:
带协议的绝对路径:
http://www.itheima.com
实现:
////////////////
案例3-列表页面展示
需求:
将友情连接的页面通过列表展示出来
技术分析:
列表标签
列表标签:
<ol></ol> 有序
<ul></ul> 无序

常用的标签
<li></li> 列表项
超链接标记
<a></a>
常用属性:
href:跳转路径
target:在那里打开
默认值:_self _blank(在空白页面打开)
////////////////////////
案例4-首页信息的展示
需求:
通过表格布局将首页信息展示
技术分析:
表格表格
表格标签★
<table></table>
常用的子标签
<tr>:行
<tr></tr>
常用子标签:
<td>:列
<th>:表头单元格 默认居中加粗
注意:
一行必须只有有一个单元格或者一列
//////////////////

table 的常用属性:
border:边框 像素值
width:
align:表格对齐方式
tr 的常用属性:
align:内容对齐
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并
步骤分析:
1.常见一个8行1列的表格
2.在第一行 放logo
嵌套一个1行3列的表格
3.第2行 放菜单
4.第3行 放图片
5.第4行 热门商品
嵌套一个2行7列的表格

6.第5行 放广告图片
7.第6行 最新商品
嵌套一个2行7列的表格
8.第7行 放一个图片
9.第8行
两个段落
///////////////////////
案例5-表单页面
需求:
设计一个表单页面,用来收集用户的数据
技术分析:
表单标签
表单标签★★★
<form></form>
作用:
用来从浏览器端收集用户的信息.
步骤分析:
1.在页面中间添加一个表格
2.10行3列表格
3.在表格中添加表单表单子标签
/////////////////////////////////
案例6-后台管理页面(了解)
需求:
开发一个后台管理页面,通过frameset实现
技术分析:
frameset:框架集
frame:具体实现
frameset:框架集(了解)
常用属性:
cols:垂直切割
例如: cols="40%,60%"
例如: cols="40%,*,10%"
rows:水平切割
常见的子标签:
frame
注意:
最好和body不要共存
frame:具体实现
常用属性:
src:展示的页面的url

//////////////
补充:
转义字符:
三部分构成 &实体;
掌握的转义字符:
> &gt; //great then
< &lt;
& &amp;
空格 &nbsp;
//////////////////////
meta
元信息
<meta charset="UTF-8">指定浏览器用什么编码打开此页面
//////////////////////////////////

/////////////////////////////////////////////
上午回顾:
html
文件标签:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
排版标签:
p
br
hr
字体
font
h1~h6
b
strong
i
图片★
<img src="图片路径" alt="替代文字" width="" height=""/>
超链接★
<a href="跳转路径" target="_blank">xxxx</a>
列表
<ol></ol>
<ul></ul>

列表项
<li></li>
表格标签★★
<table border="" width="" align="">
<tr>
<td></td>
</tr>
</table>

td中的重要属性:
colspan:列合并
rowspan:行合并
表单标签★★★
form
常用属性:
action:提交路径
method:提交方式 get和post
常见的子标签:
input
select
textarea
input标签:
10中type
text
password
radio
checkbox
file
submit
reset
button
hidden
image
若想将内容发送到服务器,必须有name属性 username=tom
select标签:
<select name="">
<option value="提交到服务器的值">展示内容</option>
</select>
textarea:文本域
格式:
<textarea cols="" rows="" name=""></textarea>
框架(了解)
frameset:定义框架集
常用属性:
cols:
rows:
常见的子标签:
frame
frame:具体展示
常用属性:
src:展示网页的url
name:给当前的frame起个名称

day-01(html)的更多相关文章

  1. 01.SQLServer性能优化之----强大的文件组----分盘存储

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...

  2. 用Kotlin创建第一个Android项目（KAD 01）

    原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...

  3. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  4. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  5. 0042 MySQL学习笔记-入门--01

    基本概念: 数据库DB(database): 数据的仓库,数据的集合,是数据的一种结构化的存储 数据库管理系统DBMS(database management system): 管理数据库的一套软件 ...

  6. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  7. ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1

    最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...

  8. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  9. 异步编程系列第01章 Async异步编程简介

    p { display: block; margin: 3px 0 0 0; } --> 2016.10.11补充 三个月过去了,回头来看,我不得不承认这是一系列失败的翻译.过段时间,我将重新翻 ...

  10. 【干货分享】前端面试知识点锦集01（HTML篇）——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

随机推荐

  1. 搭建Hexo博客（四）－设置

    1.主题 比较流行的是yilia,下载主题到theme目录即可.再根据说明文档进行设置. 2.图片发布 source下创建的目录,并且目录下有文件,则文件会被生成到post目录中.图片可以放在这里.既 ...

  2. 百年老图难倒谷歌AI，兔还是鸭？这是个问题

    上面这张图,画的是鸭子还是兔子? 自从1892年首次出现在一本德国杂志上之后,这张图就一直持续引发争议.有些人只能看到一只兔子,有些人只能看到一只鸭子,有些人两个都能看出来. 心理学家用这张图证明了一 ...

  3. C语言itoa()函数和atoi()函数

    以下是用itoa()函数将整数转换为字符串的一个例子: # include <stdio.h> # include <stdlib.h> void main (void) { ...

  4. CH2101 可达性统计(算竞进阶习题)

    拓扑排序+状态压缩 考虑每一个点能够到达的所有点都是与该店相邻的点的后继节点,可知: 令f[u]表示u点可到达的节点个数,f[u]={u}与f[v](u, v)的并集 于是可以利用状态压缩,能够到达的 ...

  5. HTTPserver v3.0 版本项目

    项目介绍 模拟使用 socket  多线程 / io多路复用 实现一个简单的 httpserver 和 webframe 交互的项目程序 期望可以实现简单的 以 http 协议为标准的 和浏览器 / ...

  6. C#版本和.NET版本以及VS版本的对应关系

    C#版本和.NET版本以及VS版本的对应关系 版本 .NET Framework版本 Visual Studio版本 发布日期 特性 C# 1.0 .NET Framework 1.0 Visual ...

  7. MT【250】距离0-7

    是否存在一个正方体,它的8个顶点到某一个平面的距离恰好为$0,1,2,3,4,5,6,7$ ?若存在指出正方体与相应的平面的位置关系.不存在说明理由. 分析:设平面$\alpha$的单位法向量为$\o ...

  8. Android多种方法显示当前日期和时间

    文章选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术.本文探讨Android显示当前日期和时间的方法. ...

  9. html图像、绝对路径和相对路径，链接

    html图像 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过"src"属性定义图片的地址,通过"alt"属性定义图片加载失败时显示 ...

  10. django后台密码错误

    如果你忘记了设置Django的Admin密码,那么你可以使用createsuperuser来甚至密码,但是如果你忘记了Admin的密码的话,那么就要用Django shell: 1 python ma ...