day-01(html)
本文档并非个人所写，只是方便自己参考：
案例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
//
补充:
转义字符:
三部分构成 &实体;
掌握的转义字符:
> > //great then
< <
& &
空格
//
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起个名称
转载于:https://www.cnblogs.com/chenyanlong/p/9944157.html
day-01(html)相关推荐
- 零起点学算法01——第一个程序Hello World！
零起点学算法01--第一个程序Hello World! Description 题目很简单 输出"Hello World!"(不含引号),并换行. Input 没有输入 Outpu ...
- hdu5296 01字典树
根据二进制建一棵01字典树,每个节点的答案等于左节点0的个数 * 右节点1的个数 * 2,遍历整棵树就能得到答案. AC代码: #include<cstdio> using namespa ...
- 20150411--Dede二次开发-01
20150411--Dede二次开发-01 目录 一.目前市场流行的电子商城系统 1 二.ecshop的介绍 1 三.安装 2 四.echsop 的目录结构 5 五.分析ecshop里面程序的架构 5 ...
- （九）单片机串行口 内部结构的讲解 01
1. 基本概念 常用于数据通信的传输方式有单工.半双工.全双工和多工方式. 单工方式:数据仅按一个固定方向传送.因而这种传输方式的用途有限,常用于串行口的打印数据传输与简单系统间的数据采集. 半双工方 ...
- Python 学习笔记01
print:直接输出 type,求类型 数据类型:字符串,整型,浮点型,Bool型 note01.py # python learning note 01 print('Hello world!') ...
- ACM1881 01背包问题应用
01背包问题动态规划应用 acm1881毕业bg 将必须离开的时间限制看作背包容量,先将他们由小到大排序,然后在排完序的数组中对每个实例都从它的时间限制开始(背包容量)到它的延长时间进行遍历: 1 # ...
- 什么是壳 - 脱壳篇01
什么是壳 - 脱壳篇01 让编程改变世界 Change the world by program 壳 在自然界中,植物用壳来保护种子,动物用壳来保护身体,我们人类没有壳,但我们有衣服,房子也起到了壳的 ...
- 端口01 - 零基础入门学习汇编语言67
第十四章:端口01 让编程改变世界 Change the world by program 引言 CPU可以直接读写3 个地方的数据 (1)CPU 内部的寄存器: (2)内存单元: (3)端口. 这一 ...
- 浅说——九讲背包之01背包
所谓九讲,也就是: 0/1背包 0/1背包降维 完全背包 多重背包(二进制优化) 混合背包 二维费用背包 分组背包 有依赖的背包 背包的方案总数\背包的具体方案路径 0/1背包: [问题描述](经典) ...
- 01、WPF 中 URI 解析
WebBrowser 控件导航到包中的 html 文件,首先把该文件 (bland.html) 的属性设置为 "Resource"."始终复制", 然后在 C ...
最新文章
- linux python版本_linux下更新Python版本并修改默认版本
- C#各种小知识点总结
- 你在做大数据？你有目标么？
- Typescript中class的extends码源分析
- Android Splash闪屏页秒开 Activity白屏、Activity黑屏问题
- 《C程序员从校园到职场》一1.2 C语言的主要特点
- Android应用系统签名方法
- 动手刷LeetCode-转换罗马字符
- 人工智能——自然演绎推理
- shader 什么是UV
- 解决树莓派 Error -110 whilst initializing SD card的一种方法
- 关于vue组件引用外部Js数值和方法出现的问题
- EOS区块链技术开发（一）环境搭建
- Qt - QLabel设置字体颜色
- 如何做好线上活动策划及执行的思路与框架
- 纸浆模塑包装（MPP）行业调研报告 - 市场现状分析与发展前景预测
- 分布式存储与集中式存储
- 【halcon】灰度直方图直观理解与应用
- 经典传染病SIS模型及仿真
- php 五子棋算法,AI智能五子棋算法——假如我是计算机