html笔记1
来源:互联网 发布:变老相机软件 编辑:程序博客网 时间:2024/06/07 22:36
案例1-网站信息展示
需求:
在页面展示一些文字信息,需要排版
技术分析:
html:超文本标签语言
////////////////////
html:
作用:展示
超文本:超越了一般文本,描述文本的字体 颜色 图片
标签:标记
html书写规则:
文件的后缀名 .html(建议) 或者 .htm
标签必须用 <> 引起来 已经定义好的标签
属性
格式: key=”value”
建议属性的值用引号引起来.
不区分大小写
注意:
最好将所有的内容放在一个标签中
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签的称之为空标签
开始标签和结束标签之间的内容称之为标签体.
html页面中的注释
标签必须正常嵌套,
标签最好关闭
文件标签:
html标签:
声明当前网页为html页面
子标签:
head:用来存放当前页面的重要信息,一般不展示在html页面上
常见的子标签:
网页的标题
body:
要展示的数据放在body中
标题标签:
n取值 :1~6
h1最大 h6最小
自动换行 且留白 默认加粗
常用属性:
align:对齐方式
left:左 right:右 center:居中
格式:
//////
字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
常用属性:
face:字体
size:尺寸
color:颜色
颜色的取值:(RGB)
方式1: #xxxxxx x为16进制
方式2: 英文单词
段落标签:
其他标签:
加粗
斜体
水平线
换行
//////////////////////////
案例1-步骤分析:
1.新建一个html页面
2.标题标签
3.添加一个水平线
4.4个段落
5.添加字体颜色 加粗 斜体
/////////////////////
案例2-图片网页展示
需求:
在一个页面中展示多张图片
技术分析:
图片标签:★
常用属性:
★src:图片的路径
alt:替代文字
title:移上去显示的文字
width:宽
height:高
大小的写法:
像素:123px
百分比:20%
路径的写法:
相对路径:
./ 或者 什么都不写 当前目录
../ 上一级目录
绝对路径:
带协议的绝对路径:
http://www.baidu.com
实现:
////////////////
案例3-列表页面展示
需求:
将友情连接的页面通过列表展示出来
技术分析:
列表标签
列表标签:
常用的标签 <li></li> 列表项
超链接标记
常用属性:
href:跳转路径
target:在那里打开
默认值:_self _blank(在空白页面打开)
////////////////////////
案例4-首页信息的展示
需求:
通过表格布局将首页信息展示
技术分析:
表格表格
表格标签★
常用的子标签
:行
常用子标签:
:列
:表头单元格 默认居中加粗
注意:
一行必须只有有一个单元格或者一列
//////////////////
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-表单页面
需求:
设计一个表单页面,用来收集用户的数据
技术分析:
表单标签
表单标签★★★
作用:
用来从浏览器端收集用户的信息.
步骤分析:
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
元信息
指定浏览器用什么编码打开此页面
//////////////////////////////////
回顾:
html
文件标签:
排版标签:
p
br
hr
字体
font
h1~h6
b
strong
i
图片★
超链接★
xxxx
列表
列表项 <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起个名称 <!--表单: 常用属性: action:信息提交的路径 默认是当前页面 method:表单提交的方式 只需要掌握两种 get(默认)和post get和post的区别: 1.get请求会把所有的参数追加在地址栏上,post请求不会 2.get请求参数大小有限制,post请求参数大小没有限制 3.post相当于get安全些 常见的子标签 input select:下拉选 textarea:文本域 input标签 常用的属性: type: text:文本框 默认 password:密码框 radio:单选框 checkbox:多选框 file:文件框 submit:提交 reset:重置 button:普通按钮 hidden:隐藏域 在页面上显示 提交的时候可以提交过去 image:图片提交 替代submit name: 可以将几个单选框(复选框)设置为一组 要想将信息保存到服务器上必须有name属性 readonly: readonly="readonly" 只读 disabled: disabled="disabled" 禁用 select :下拉选 格式: <select name="pro"> <option>黑龙江</option> </select> textarea:文本域 常用的属性: cols:列 rows:行 提交到服务器的内容的格式: key=value& 对于文本框 密码框 文本域 手写的内容传递过去了 对于单选框和多选框来说,却没有把值传递过去 要想把值传递过去 必须设置value属性 若下拉选要想把选中内容的值传递过去,请加上value属性 默认值: 文本框 密码框:只需要添加value属性 单选框 多选框:添加 checked="checked" 下拉选:添加selected="selected" 文本域:标签体当我们提交的时候 发现地址栏变化 ?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl
–>
- html学习笔记1
- HTML学习笔记(1)
- HTML DOM笔记1
- HTML学习笔记1
- HTML学习笔记1
- HTML 复习笔记(1)
- HTML&JS笔记(1)
- html学习笔记1
- html 学习笔记1
- html学习笔记1
- HTML学习笔记1
- html学习笔记(1)
- Html学习笔记1
- HTML基础笔记1
- Html学习笔记1
- HTML笔记(1)
- HTML基础笔记1
- HTML学习笔记<1>
- ClASSPATH环境变量的配置
- C++ primer 基本语言
- java学习笔记-I/O篇(2):BufferedInputStream
- 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 241. Different Ways to Add Parentheses
- html笔记1
- 工具软件 笔记
- ConstraintLayout 完全解析 快来优化你的布局吧
- 在线学习与离线学习
- 关于JS动态修改CSS样式问题(class和style)
- 8.#{}与${}
- jQuery下拉框
- 成员变量,静态变量,与局部变量
- 66. Plus One