HTML

<meta>

  • 作用:给搜索引擎搜索,或者告知浏览器使用什么编码解析页面。
  • 例如:
<meta name="keywords" content="php学习,PHP自学"/>
<meta name="description" content="php学习,PHP自学"/>

插入图片

  • 语法:<img src='图片的路径' width='宽度' height='高度' alt='图片的说明' title='图片的说明' />
  • 网上图片格式为jpg,gif,png格式。
  • alt的作用:
    1.当图片不存在时,在应该出现图片的地方除了会出现X,还会显示该图片的说明;
    2.给搜索引擎来用,目前搜索引擎确定图片还是通过alt属性
  • title的作用:当鼠标移动到图片上时,现实图片的说明

热点

  • 点击同一张图的不同的区域,跳转到不同的页面。DW中选中图片,在属性栏上就会出现热点的按钮,点击热点按钮(矩形rect,圆形circle,多边形poly)画出热点形状,选中热点形状做超链接。最终形成的代码如下
<img src=' ... .jpg' usemap='#Map' border='0' />
<map name='Map' id='Map'>
<area shape='rect' coords=' ........' href='' target='_blank'/>
</map>

Object标签

  • 作用:一般是用来插入flash的。

pre标签

  • 作用:主要用来做调试。pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
  • 提醒:pre标签不要用来做拼版,主要用来做调试。

实体

字符 实体名称
空格 &nbsp;
< &lt;
> &gt;
&quot;

表格

  • 默认情况下,网页的布局是流布局(排队),不能够随意摆放位置,想要解决就得通过表格来解决。表格的作用就是用来布局的。

  • 与表相关的标记

标记符号 标记名称
<table>...</table> 表标记
<tr>...</tr> 行标记
<td>...</td> 单元格标记
<th>...</th> 列标记
  • 单元格中数据的对齐方式(td的属性)
    对齐分为水平对齐和垂直对齐:
    水平对齐是align=left/center/right
    垂直对齐是valign=top/middle/bottom
  • 单元间隔和单元填充
    单元格间距(cellspacing):单元格和单元格之间的距离,
    单元格填充(cellpadding):内容距离单元格的距离,
    默认情况下,单元格间距是2像素,单元格填充是1像素

  • 合并单元格
    合并单元格分为合并行和合并列,合并行就是把不同的行合并起来,合并列就是把不同的列合并起来。
    colspan:合并列
    rowspan:合并行

表单

  • 用途:用来收集用户提交的数据。
  • 表单域:表单的区域,用来控制表单提交时候的数据范围。
    <form></form>

表单元素

  • 文本框(单行文本)
<input type='text' name='username' size='20' maxlength='10'  />

size=20表示宽度是20个字符的宽度;
maxlength=10表示 最多输入10个字符。

  • 密码框
<input type='password' name='pwd' maxlength='6' />
  • 单选按钮
<input type='radio' name='sex' value='男' checked='checked'/>男
<input type='radio' name='sex' value='女' />女
  • 复选框(多选按钮)
<input type='checkbox' name='hobby' value='游泳' checked='checked'/>游泳
<input type='checkbox' name='hobby' value='爬山'/>爬山
<input type='checkbox' name='hobby' value='读书'/>读书

注意:
1.同一组的name要一致;
2.必须给无法输入的表单元素赋值;
3.默认选中:checked='checked'。

  • 下拉菜单
<select name=''>
     <option value='大学' selected='selected'>大学</option>
     <option value='研究生'>研究生</option>
     <option value='博士'>博士</option>
</select>
  • 下拉列表
<select name='' size='4' multiple='multiple'>
     <option value='财务部' >财务部</option>
     <option value='研发部'>研发部</option>
     <option value='技术部'>技术部</option>
     <option value='保安部' >保安部</option>
     <option value='后勤部'>后勤部</option>
     <option value='硬件组'>硬件组</option>
</select>

注意:
size='4'表示同时显示4个选项;
multiple='multiple'表示按住control可以多选。

  • 多行文本(文本域)
<textarea name='' cols='30' rows='5'></textarea>

cols表示容纳的列数,调节的是宽;
rows表示容纳的行数,调节的是高。

  • 提交按钮
    用来向服务器提交数据。
<input type='submit' name='submit'  value='提交' />
  • 重置按钮
    用来清空填写的数据,将表单恢复到初始值。
<input type='reset' name='button'  value='重置' />
  • 普通按钮
    提交按钮和重置按钮都是带有功能的按钮,在很多情况下,我们点击按钮的时候不是需要提交和重置,而是执行我们自己需要的功能,这时候就需要一个不带功能的按钮。
<input type='button' name='back'  value='返回' />

使用表单

表单中有2个属性

  • action='数据提交的位置'
    action=' '表示提交到本页面
  • method='get/post' 数据提交的方法
    get和post的区别:
  get post
外观上 在地址栏上看到'?' 地址栏上没有'?'
提交的数据量上 少量数据,一般低于2k 大量数据,PHP默认可以提交8M的数据,还可以更改
安全性上 不安全 安全
提交原理 提交的数据之间都是独立的 将所有的数据作为一个整体,一起提交
灵活性 很灵活,只要页面跳转就可以传递数据 不灵活,必须要有表单的参与

用的最多的就是get提交

框架

  • 框架属于将要被淘汰的标签
    为了实现在一个浏览器上看到多个页面,我们需要使用框架,w3c建议以后使用内嵌框架,主要应用在后台管理处。
  • 插入->HTML->框架->...
  • 框架集:<frameset>
  • 框架:<frame>
  • 如果有N个框架,则保存N+1个文件
  • 在保存框架的时候注意:
    光标放在哪个框架中,就保存哪个框架中的页面,这样保存麻烦,如果要保存所有的页面,文件->保存全部(先保存框架集,再保存框架)
  • 如何将已有的页面显示到框架中
    将光标定位到框架中,文件->在框架中打开
  • 框架中显示其他页面用src属性
  • 在指定框架中显示页面,语法:target='框架的名称'

内嵌框架

  • 语法:iframe

关于图片

  • 位图图像:由屏幕上的像素点来描述图像。放大失真,会出现马赛克模糊

  • 矢量图形:使用线和面描述图形,所以称为矢量,放大不失真

  • 分辨率:在单位长度上的像素数,通常以“像素/英寸”,网上一般72像素/英寸

  • 网站默认尺寸单位为像素

  • 常见的图像形式:
    1.JPG/JPEG
    2.Gif
    二者比较:
    (1)gif颜色数目少,最多256种;jpg颜色细腻丰富,支持颜色多达1600多万种,用于质量要求较高的图像,如人物照片,风景等
    (2)gif支持透明;jpg没有透明色
    (3)gif支持动画;jpg不支持
    3.png
    无损压缩,质量很好,体积小,fireworks默认格式,此格式越来越被广泛应用

  • 在项目中,一般用jpg和png格式的图片

  • 格式转换
    打开源图,文件->另存为->选格式->保存
    不可以直接改后缀名

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,042评论 0 1
  • HTML学习笔记(二) 使用列表 使用表格 使用表单 添加多媒体 <a name="1">使用列表</a> ...
    寒桥阅读 681评论 0 1
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,827评论 0 11
  • 本文为阅读《Head First HTML 与 CSS》的html部分的读书笔记,方便回顾书上的知识,另一篇为He...
    兼续阅读 3,274评论 0 23