web前端开发技术html
HTML
最常用的单个标记有
1.换行 < br/>
2.水平分隔线 < hr/>
3.链接标记 < link/>给标记设定属性值时用“”
如：< p align=“center”>注释信息
1.<!- -注释信息- ->
2.< comment>注释信息< /comment>web服务器主页一般命名为index.html或default.html
< body>
- body中
1.text：显示信息颜色
2.bgcolor：背景颜色
3.background：背景图片
4.alink link vlink
5.topmargin leftmargin 文档中上、左边距的大小
| 显示 | 代码 |
|---|---|
| 空格 |  ； |
| 大于号 | <； |
| 小于号 | >； |
| & | &； |
| 双引号 | "； |
| © | ©； |
| ® | ®； |
| 乘号 | ×； |
| 除号 | ÷； |
- 文本信息
1.标题字h1~h6
2.属性align=“left/center/right/justify”
3.文本修饰标记
| 标记 | 说明 |
|---|---|
| < b> < /b> | 粗体 |
| < i>< /i> | 斜体 |
| < strong>< /strong> | 着重文字与b效果相同 |
| < em> < /em> | 加重语气与i效果相同 |
| < u>< /u> | 下划线 |
| < samll ><> | 变小字号 |
| < big ><> | 变大字号 |
| < del ><> | 删除线 |
| < sup ><> | 上标（X^2） |
| < sub ><> | 下标(X1) |
4.字体font的标记
< font face=“黑体” size=“1” color="#000000">< /font>
5.段落标记
< p align=" ">< /p>
6.换行
< br>
7.水平分隔线
< hr width=“1px” size=“1” color="#000000" align=“center” >
8.拼音ruby和rt/rp
ruby：包围住要注音的文字
rt：标记注音
中 国
< ruby>
中 < rp>(< /rp>< rt>zhong< /rt>< rp>)< /rp>
国 < rp>(< /rp>< rt>guo< /rt>< rp>)< /rp>
< /ruby>
9.段落缩进blockquote
< blockquote>< /blockquote>
0缩进< p>
5缩进< blockquote>
10缩进< blockquote>< blockquote>< / >< / >
10.预格式化pre
预格式化浏览器会完整保留设计者在原文件中所定义的格式，包括空格、缩进等
- 列表
| 列表类型 | 标记符号 |
|---|---|
| 无序列表 | < ul><> |
| 有序列表 | < ol><> |
| 定义列表 | < dl> <> |
| 菜单列表 | < menul> <> |
| 目录列表 | < dir ><> |
1.无序列表ul
< ul type=" disc / circle / quare ">
< li type=“”>插入列表项< /li>（type默认与列表相同，也可另外定义不同的）
2.有序列表ol
< ol type=“1 / A / a / I / i ” start=“列表项的起始数字”>
< li type="" value="">插入列表项< /li>（type默认与列表相同，也可另外定义不同的 value 改变当前列表项的值）
3.定义列表dl
先dl 再dt 再dd
- 超链接
1.语法
< a href=“url” name="" title=“提示信息” target=“窗口名称”>超链接标题< /a>
href：链接指向的目标文件
name：规定锚的名字
title：指向链接的提示信息
target：指定打开的目标窗口
| target说明： | |
|---|---|
| _self | 当前框架打开链接 |
| _blank | 全新空白窗口打开 |
| _top | 在顶层框架中打开 |
| _parent | 在当前框架上一层打开 |
| framename | 在指定框架或浮动框架内打开 |
2.超链接路径
a.绝对路径：①从盘符开始定义 eg.E:\web\index.html ②从协议开始定义的url网址eg.http://www.edu.cn
b.相对路径：
| 相对位置 | 代码 | 输入方法 |
|---|---|---|
| 同一目录 | < a href=“tongzhi.html”>通知< /a> | 输入要链接的文档 |
| 链接上一级目录 | < a href="…/index.html">首页< /a> | 先输入“…/” |
| 连接下一级 | < a href=“ks/note.html” >考试通知< /a> | 先输入目录名，后加“/” |
c.根路径
3.超链接分类
a.内部链接：网站内的文件之间的链接
eg.< a href=“index.html”>…< /a>
b.外部链接：网站内的文件链接到站点内容外的文件
eg.< a href=“http:www.163.com/”>…< /a>
4.创建http文件下载超链接
网站经常提供软件、文件等资料的下载，文件类型为*.doc、.pdf、.exe、*.rar等
5.创建电子邮件超链接
< a href=“mailto:E-mail地址[？subject=邮件主题[&参数=参数值]]”>链接内容< /a>
邮件必须完整，eg. intel@qq.com.
参数有cc（抄送）、bcc（密送）、subject（主题）、body。
多个收件人用；隔开
多个参数用&连接
空格用%20代替
eg.< a href=“mailto:812@qq.com;458@qq.com?cc=722@qq.com&bcc=888@qq.com&subject=hello%20again&body=下周见”>发送邮箱< /a>
6.创建页面书签链接
书签是指到文章内部的链接，可以实现段落间的任意跳转。
实现这样的链接要先定义一个书签作为目标端点，再定义书签链接
定义书签：< a name=“书签名”>…< /a>
定义书签链接：
- < a href= “#书签名”>…< /a> < !–同一页面内–>
- < a href =“url#书签名”>…< /a> < !–不同页面间–>
7.浮动框架（也称内联框架）
< iframe 属性名称=“value” name=“iframename”>< /frame>
< a href=“target.html” target=“iframename”>链接标题< /a>
iframe属性
| 属性 | 说明 |
|---|---|
| src | 源文件 |
| name | 框架名称 |
| width | 设置浮动框架的窗口宽度 |
| height | …高度 |
| frameborder | 设置框架边框 |
| scrolling | 设置滚动条 |
| marginwidth | 设置框架左右边距 |
| marginheight | …上下边距 |
例子在书p68
- 图像
1.插入图像(单标记)
< img src=" " alt=“代替文本”>(单标记)
img有两个必选属性 src、alt
img属性
| 属性 | 值 | 说明 |
|---|---|---|
| src | url | 图像的URL |
| alt | text | 规定图像的代替文本 |
| name | text | 规定图像的名字 |
| height | px、% | 设置图像的高度 |
| width | px、% | …宽度 |
| align |
top/middle/bottom/ left/center/right (下有说明) |
规定如何根据周围的文本来排列图像，分水平和垂直两个方向 |
| border | px | 定义周围的边框 |
| hspace |
px （编写代码时不需要给属性值加单位px，否则不产生效果） |
定义图像左侧和右侧的空白 |
| vspace |
px （编写代码时不需要给属性值加单位px，否则不产生效果） |
定义图像顶部和底部的空白 |
| usemap | url | 将图像定于为客户器端图像的映射 |
图像对齐方式align属性说明
| 取值 | 说明 |
|---|---|
| top | 图像的顶端与当行文字的顶端对齐 ，文字行高相应扩大 |
| middle | 图像水平中线和当行文字的中线对齐 ，文字行高相应扩大 |
| bottom | 图像的底端和当行文字的底端对齐 ，文字行高相应扩大 |
| left | 图像左对齐，浮动游离于文字之外，文字环绕图像周围，文字行高没有变化 |
| center | 图像中线和当行的文字中线对齐，文字行高相应扩大 |
| right | 图像右对齐，浮动有利于文字之外，文字环绕图像周围，文字行高没有变化 |
设置图像热区p77
- 滚动文字
< marquee >滚动内容</>
| 属性 | 取值 | 说明 |
|---|---|---|
| width | 数字(单位为像素) | 滚动条背景面积的宽 |
| height | 数字(单位为像素) | 滚动条背景面积的高 |
| bgcolor | 颜色 | 设置文字背景颜色 |
| direction | up/down/left/right（向上，向下，向左（默认），向右） | 滚动方向 |
| behavior | scroll/slide/alternate(循环往复滚（默认），滚动一次就停止，来回交替滚) | 滚动方式 |
| hspace | 数字(单位为像素) | 滚动条左右两侧的空白 |
| vspace | 数字(单位为像素) | 滚动条上下两侧的空白 |
| scrollamount | 数字(单位为像素) | 滚动速度（滚动文字每次移动的长度） |
| scrolldelay | ms | 滚动延迟 |
| loop | 整数 |
滚动次数 （-1表示无限次 默认循环无数次） |
| onmouseover | this.stop() | 当光标移动到滚动的内容区时，暂停滚动 |
| onmouseOut | this.start() | 当光标移出滚动的内容区时，继续滚动 |
- 音频、视频及flash文件
可播放的文件类型有Midi、Mav、AIFF、SWF、AV、MOV、AVI等
< embed src=“url” width=“界面宽度” height=“界面高度” autostart=“true/false” loop=“true/false”>< /embed>
| 属性 | 说明 |
|---|---|
| autostart | 是否自动播放 |
| loof | 是否循环 |
- 表格标签
- 表单标签
web前端开发技术html相关推荐
- web前端开发技术要求会什么
对[web前端请添加链接描述](http://www.suzxms.com.cn/web/)多少有了解的人,都知道Web前端开发工程师是一项很特殊的工作,现今互联网时代,静态的网页制作已经无法满足企业 ...
- Web前端开发技术栈（前端干货）
Web前端开发技术栈 浏览器 Internet Explorer(需要了解,需不需要看公司业务需求) Chrome(建议学习使用) Firefox(建议学习使用) Safari(建议学习使用) Ope ...
- html表单实验结论,web前端开发技术实验报告-实验五
1.长 春 大 学 20 15 2016学年第 二 学期Web前端开发技术 课程实 验 报 告学 院: 计算机科学技术专 业: 软件工程 班 级: 软件14402 学 号: 姓 名: 王 悦 任课教师 ...
- 《Web前端开发技术》笔记
参考文献--<Web前端开发技术> by 储久良 目录 第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 ...
- Web 前端开发技术 ——html
Web 前端开发技术 -- html 文章目录 Web 前端开发技术 -- html 一.html 文件结构 二.文本 三.图片 四.音频和视频 五.超链接 六.表单 七.列表 八.表格 九.语义标签 ...
- Web 前端开发技术 —— JavaScript
Web 前端开发技术 -- JavaScript 总结 JavaScript 内容! 文章目录 Web 前端开发技术 -- JavaScript 一.js 的引用方式与执行顺序 1.引用方式 在标签中 ...
- web前端开发技术 ：旅游网页设计与实现——旅游风景区网站HTML+CSS
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制 ...
- web前端开发技术实验与实践（第三版）储久良编著 项目12 设计简易网站导航
web前端开发技术实验与实践(第三版)储久良编著 项目12 设计简易网站导航 实训三 项目12 设计简易网站导航 一.页面文字素材: 序号 网站名称 URL 1 百 度 http://www.ba ...
- 推荐几本最好的web前端开发技术图书
Web前端开发随着html5的日渐普及,而益发重要.构建一个高质量的站点,成为决胜之道上的重要一步.下面就推荐几本计算机图书第一网上书店china-pub上的几本畅销web前端开发技术图书. N0 ...
- web前端开发技术 web课程设计 网页规划与设计web期末作业设计网页
Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,网页设计作业,网页制作作业, 学生网页作业, 网页作业成品, 网页作业模板 HTML:结构 C ...
最新文章
- jQuery 1.9+ ajaxStart事件无效，无法被触发的原因。
- JavaScript事件详解-jQuery的事件实现（三）
- Oracle连接odbc数据源
- 按文件类型获取其图标
- oracle千万级分页优化,oracle千万级数据分页存储过程优化
- python控制excel宏复制,将列从一个excel复制到另一个excel并从python运行宏
- 方法引用_通过类名引用静态成员方法
- 编译原理----词法分析程序----python语言版
- 如何在Hyper-V上安装Centos7
- 不使用软盘加载驱动安装系统的方法－－使用nLite集成驱动
- 模拟电路实验 04 - | 恒流源式差动放大电路
- 10 种 Python 聚类算法完整操作示例（附代码说明）
- WEB——LNMP服务搭建
- 基于 Springboot 和 Mybatis 的后台管理系统 BootDo | 软件推介
- 每日一书丨数据治理的这些事儿，90%的人搞不清
- 电脑上怎么发出电子版准考证
- C语言中pthread或Windows API在多线程编程中的基本应用
- 启动Zookeeper报错:Error contacting service. It is probably not running.
- input 使用outline属性去掉淡蓝色边框不生效
- CSAW-2015-StringIPC解法一修改cred结构